Skip to content

challenge front #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

challenge front #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7fd5da2
iniciamos el challenge
raytho Aug 14, 2020
1fde4d2
Diseño preliminar funcionando
raytho Aug 15, 2020
07804ab
Detalles de boton
raytho Aug 15, 2020
166c0fa
primer dibujo y juego funcionando
raytho Aug 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
266 changes: 266 additions & 0 deletions css/characters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,266 @@
/*Dibujo de personaje*/
/*Rostro*/
.face {
position: absolute;
right: auto;
left: 27%;
background-color: #f3bf99;
height: 110px;
width: 85px;
border-radius: 40%;
z-index: 3;
}
.nose {
position: absolute;
right: auto;
margin-top: 2.5%;
left: 28.9%;
background-color: #ba1e31;
height: 30px;
width: 15px;
border-radius: 40%;
z-index: 3;
}
.beard {
position: absolute;
right: auto;
margin-top: 4%;
left: 27.5%;
background-color: #e9583f;
height: 100px;
width: 50px;
border-radius: 38%;
z-index: 3;
}
.mouth {
position: absolute;
right: auto;
margin-top: 5.5%;
left: 28%;
background-color: #f3bf99;
height: 30px;
width: 30px;
border-radius: 50%;
z-index: 3;
}
.smile {
position: absolute;
right: auto;
margin-top: 6%;
left: 29%;
height: 4px;
width: 15px;
border-bottom: 5px solid black;
transform: rotate(-45deg);
z-index: 3;
}
.eyes-content {
display: flex;
left: 27%;
position: absolute;
width: 50px;
justify-content: space-between;
height: 20px;
margin-top: 33px;
margin-left: 4px;
}
.eyebow {
right: auto;
left: 5px;
background-color: #e9583f;
height: 10px;
width: 20px;
border-radius: 40%;
z-index: 3;
}
.eyes {
margin-top: 5px;
margin-left: -32px;
background-color: black;
height: 10px;
width: 10px;
border-radius: 50%;
z-index: 3;
}
.hair {
background: radial-gradient(
90px 90px at 50% 16%,
#e9583f 50%,
transparent 50%
);
width: 15%;
height: 40%;
left: 25%;
position: absolute;
z-index: 2;
}
.circles {
background: radial-gradient(30px 30px at 40% 5%, #e9583f 50%, transparent 50%),
radial-gradient(30px 30px at 40% 13%, #e9583f 50%, transparent 50%),
radial-gradient(30px 30px at 40% 21%, #e9583f 50%, transparent 50%),
radial-gradient(30px 30px at 40% 29%, #e9583f 50%, transparent 50%),
radial-gradient(30px 30px at 40% 35%, #e9583f 50%, transparent 50%),
radial-gradient(25px 12px at 40% 41%, black 50%, transparent 50%);
background-repeat: no-repeat;
width: 200px;
height: 45%;
margin-top: 0%;
left: 27%;
position: absolute;
z-index: 3;
}
.circles2 {
background: radial-gradient(30px 30px at 40% 5%, #e62e3f 50%, transparent 50%),
radial-gradient(30px 30px at 40% 13%, #e62e3f 50%, transparent 50%),
radial-gradient(30px 30px at 40% 21%, #e62e3f 50%, transparent 50%),
radial-gradient(30px 30px at 40% 29%, #e62e3f 50%, transparent 50%),
radial-gradient(30px 30px at 40% 35%, #e62e3f 50%, transparent 50%),
radial-gradient(25px 12px at 40% 41%, #e62e3f 50%, transparent 50%);
background-repeat: no-repeat;
width: 200px;
height: 45%;
margin-top: 0.5%;
left: 21%;
position: absolute;
z-index: 2;
}
.hair5 {
background-color: #e9583f;
position: absolute;
right: auto;
margin-top: 10.5%;
left: 32.3%;
z-index: 1;
height: 35px;
width: 25px;
border-radius: 30%;
}
/*Cuerpo*/
.body-character {
position: absolute;
right: auto;
margin-top: 2%;
left: 29%;
background-color: #038691;
height: 150px;
width: 125px;
border-radius: 40%;
z-index: 1;
}

.arm {
position: absolute;
right: auto;
margin-top: 2%;
left: 36%;
background-color: #f3bf99;
height: 150px;
width: 70px;
border-radius: 25px;
z-index: 2;
}
.arm-right {
margin-top: 10%;
margin-left: 15%;
z-index: 0;
}
.arm2 {
position: absolute;
right: auto;
background-color: #e9917d;
margin-left: 3.5%;
height: 70px;
width: 50px;
border-radius: 25px;
}

.arm3 {
position: absolute;
right: auto;
margin-top: 4%;
background-color: #e9917d;
height: 70px;
width: 90px;
border-radius: 25px;
}
.leg {
position: absolute;
right: auto;
margin-top: 9.5%;
left: 34%;
background-color: #038691;
height: 50px;
width: 25px;
border-radius: 40%;
z-index: 0;
}

.leg2 {
position: absolute;
right: auto;
margin-top: 9.5%;
left: 30%;
background-color: #038691;
height: 50px;
width: 25px;
border-radius: 40%;
z-index: 0;
}

.sword {
position: absolute;
right: auto;
margin-top: -1%;
left: 35%;
background-color: #011c28;
height: 30px;
width: 50px;
border-radius: 0px;
z-index: 1;
}

.sword1 {
position: absolute;
right: auto;
margin-top: -1.8%;
left: 35%;
background-color: #a6d1e5;
height: 20px;
width: 40px;
border-radius: 0px;
z-index: 0;
}

.sword2 {
position: absolute;
right: auto;
margin-top: -2.5%;
left: 34.4%;
background-color: #31586b;
height: 10px;
width: 60px;
border-radius: 10px;
z-index: 0;
}
.sword3 {
position: absolute;
right: auto;
margin-top: -3.5%;
left: 36%;
background-color: #011c28;
height: 14px;
width: 15px;
border-radius: 0px;
z-index: 1;
}
.sword4 {
position: absolute;
right: auto;
margin-top: -4.8%;
left: 35.7%;
background-color: #31586b;
height: 20px;
width: 20px;
border-radius: 10px;
z-index: 1;
}
Loading