Skip to content

Commit d787714

Browse files
gilgerokgilgerok
committed
AdecuaciÃon sitio para trabajo con SASS
1 parent 8833b72 commit d787714

16 files changed

+655
-852
lines changed

‎assets/css/style.css‎

Lines changed: 141 additions & 285 deletions
Large diffs are not rendered by default.

‎assets/scss/_base.scss‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
html {
2+
font-size: 14px;
3+
}
4+
5+
body {
6+
font-family: $siteFont;
7+
font-weight: 400;
8+
color: $negro;
9+
}
10+
11+
p {
12+
font-size: 1rem;
13+
margin: 1rem 0px;
14+
}
15+
16+
a {
17+
text-decoration: none;
18+
color: $rosa;
19+
}
20+
21+
h1,
22+
h2,
23+
h3,
24+
h4,
25+
h5,
26+
h6 {
27+
font-family: $siteFont;
28+
max-width: 100vw;
29+
}
30+
31+
h1,
32+
h2,
33+
h3 {
34+
font-weight: 600;
35+
}
36+
37+
h1 {
38+
color: $azulOscuro;
39+
font-size: $h1;
40+
}
41+
42+
h2 {
43+
color: $azulVerdoso;
44+
font-size: $h2;
45+
}
46+
47+
h3 {
48+
font-size: $h3;
49+
color: $verdosoAzul;
50+
}
51+
52+
h4,
53+
h5,
54+
h6 {
55+
font-weight: 500;
56+
color: $negro;
57+
}
58+
59+
h4 {
60+
font-size: $h4;
61+
}
62+
63+
h5 {
64+
font-size: $h5;
65+
}
66+
67+
h6 {
68+
font-size: $h6;
69+
}
70+
71+
.destacado {
72+
font-family: $superFont;
73+
font-weight: 600;
74+
}
75+
76+
span.resaltar {
77+
color: $verde !important;
78+
display: block;
79+
}
80+
81+
span.destacar {
82+
color: $verdosoAzul !important;
83+
font-weight: bold;
84+
}
85+
86+
strong {
87+
font-weight: 500;
88+
color: $superNegro;
89+
}
90+
91+
section {
92+
margin: 1.75rem 0px;
93+
border-bottom: 1px solid $grisClaro;
94+
padding-bottom: 1.5rem;
95+
}
96+
97+
article {
98+
margin: 1.875rem 0px;
99+
}
100+
101+
.overlay {
102+
position: absolute;
103+
width: 100%;
104+
height: 100%;
105+
left: 0px;
106+
top: 0px;
107+
background-color: rgba($superNegro, .3);
108+
}
109+
110+
.zindex-5 {
111+
z-index: 500;
112+
}
113+
114+
.zindex-4 {
115+
z-index: 400;
116+
}
117+
118+
.zindex-3 {
119+
z-index: 300;
120+
}
121+
122+
.zindex-2 {
123+
z-index: 200;
124+
}
125+
126+
.zindex-1 {
127+
z-index: 100;
128+
}
129+
130+
.sticky-top {
131+
position: sticky;
132+
top: 0;
133+
}

‎assets/scss/_footer.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// FOOTER
2+
3+
.footer {
4+
background-color: $verde;
5+
color: $blanco;
6+
padding: 2rem;
7+
8+
.footer__widget {
9+
li {
10+
a {
11+
color: $blanco;
12+
font-weight: 600;
13+
}
14+
}
15+
.footer__widget__lista--redes {
16+
list-style: none;
17+
display: flex;
18+
justify-content: center;
19+
column-gap: .8rem;
20+
}
21+
.footer__widget__lista {
22+
list-style: none;
23+
text-align: center;
24+
padding: 0;
25+
}
26+
.footer__widget__img {
27+
align-self: center;
28+
img {
29+
width: 5rem;
30+
}
31+
}
32+
.footer__widget__titulo {
33+
color: $blanco;
34+
margin-bottom: 1rem;
35+
text-align: center;
36+
}
37+
}
38+
}
39+
40+
.copyright {
41+
padding: .20rem 0px;
42+
background-color: $azulOscuro;
43+
color: $blanco;
44+
text-align: center;
45+
p {
46+
font-size: .9rem;
47+
}
48+
}

‎assets/scss/_generalesSitio.scss‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// IMPORTS
2+
3+
@import "navbar";
4+
@import "header";
5+
@import "footer";
6+
7+
// PÁGINAS
8+
9+
.section__titulo {
10+
margin: 1rem 0 1rem .5rem;
11+
}
12+
13+
14+
.section__servicios {
15+
h3 {
16+
margin: .9rem 0;
17+
}
18+
}
19+
20+
.boton {
21+
display: inline-block;
22+
width: fit-content;
23+
padding: .8rem 1rem;
24+
border-radius: 4px;
25+
border: 1px $rosa solid;
26+
font-weight: 600;
27+
text-transform: uppercase;
28+
font-size: .9rem;
29+
text-align: center;
30+
31+
&:hover {
32+
color: $blanco;
33+
background-color: $rosa;
34+
border-color: $blanco;
35+
}
36+
}
37+
38+
.imgTrabajos {
39+
&:hover {
40+
transform: rotate(3deg) scale(.98);
41+
}
42+
}
43+
44+
// Call to action
45+
.callToAction {
46+
padding: 3rem 0;
47+
background-color: $rosa;
48+
text-align: center;
49+
margin-bottom: 1rem;
50+
.callToAction__contacto__titulo {
51+
color: $blanco;
52+
}
53+
.callToAction__contacto__mensaje {
54+
color: $grisClaro;
55+
}
56+
.callToAction__contacto__boton {
57+
color: $rosa;
58+
background-color: $blanco;
59+
border-color: $blanco;
60+
&:hover {
61+
color: #e25d8e;
62+
background-color: $grisClaro;
63+
}
64+
}
65+
}

‎assets/scss/_header.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.header, .header--home {
2+
* {
3+
color: $blanco;
4+
}
5+
}
6+
7+
.header {
8+
padding: 4rem 0;
9+
background-color: $azulOscuro;
10+
text-align: left;
11+
.header__animacion {
12+
z-index: 2;
13+
width: 40rem;
14+
animation-name: titulo;
15+
animation-duration: 1.5s;
16+
animation-delay: 0.5s;
17+
animation-iteration-count: 1;
18+
.header__titulo {
19+
h1 {
20+
color: $blanco;
21+
margin: 1.7rem;
22+
}
23+
}
24+
}
25+
.header__descripcion {
26+
color: $grisClaro;
27+
}
28+
}
29+
30+
.header--home {
31+
position: relative;
32+
height: calc(100vh - 5rem);
33+
background-image: url(../images/presentacion.jpg);
34+
background-size: cover;
35+
background-position: center;
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
}

‎assets/scss/_keyframesAnimaciones.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/* ANIMACIONES KEYFRAMES */
2+
3+
@keyframes titulo {
4+
0% {
5+
opacity: 0;
6+
width: 35rem;
7+
}
8+
9+
50% {
10+
opacity: .5;
11+
width: 42rem;
12+
}
13+
14+
75% {
15+
opacity: .75;
16+
width: 38rem;
17+
}
18+
19+
100% {
20+
opacity: 1;
21+
width: 40rem;
22+
}
23+
}

‎assets/scss/_navbar.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.navbarAstor {
2+
background-color: $azulOscuro;
3+
height: 5rem;
4+
.navbar__logo {
5+
img {
6+
height: 2rem;
7+
}
8+
}
9+
}
10+
11+
// .navbar__menu {
12+
// height: 100%;
13+
// ul {
14+
// list-style: none;
15+
// height: 100%;
16+
// display: flex;
17+
// justify-content: stretch;
18+
// a {
19+
// display: flex;
20+
// font-weight: 600;
21+
// border-bottom: 2px $azulOscuro solid;
22+
// align-items: center;
23+
// justify-content: center;
24+
// padding: 0 1.5rem;
25+
// &:hover {
26+
// border-bottom: 2px $blanco solid;
27+
// color: #e25d8e;
28+
// transform: scale(1.1);
29+
// }
30+
// }
31+
// }
32+
// }

0 commit comments

Comments
 (0)