Skip to content

Commit 7df654d

Browse files
CrisKroos25CrisKroos25
committed
feat: Adding the CSS
1 parent d844aa2 commit 7df654d

1 file changed

Lines changed: 184 additions & 70 deletions

File tree

‎src/style.css‎

Lines changed: 184 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,210 @@
1-
:root {
2-
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3-
line-height: 1.5;
4-
font-weight: 400;
1+
*{
2+
box-sizing: border-box;
3+
}
4+
5+
body{
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
background-color: #f2f4f7;
10+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
11+
height: 100vh;
12+
}
13+
14+
/* ========== NOMBRANDO ESPACIOS DE FORMULARIO, SLOGAN Y FOOTER CON GRID ==========*/
15+
16+
.contenedor{
17+
height: 100vh;
18+
display: grid;
19+
grid-template-columns: 1fr 1fr;
20+
grid-template-rows: 5fr 1fr;
21+
grid-template-areas:
22+
"slogan formulario"
23+
"footer footer";
24+
}
25+
26+
/* ========== REPARTIENDO ESPACIOS DE FORMULARIO, SLOGAN Y FOOTER CON GRID ==========*/
27+
28+
.slogan__contenedor{
29+
grid-area: slogan;
30+
display: flex;
31+
justify-content: end;
32+
align-items: center;
33+
}
34+
35+
.formulario__contenedor{
36+
grid-area: formulario;
37+
display: flex;
38+
flex-direction: column;
39+
justify-content: center;
40+
align-items: start;
41+
width: 415px;
42+
margin: 100px 0 0 80px;
43+
padding: 10px;
44+
gap: 30px;
45+
46+
}
47+
48+
.footer{
49+
grid-area: footer;
50+
}
51+
52+
/* ========== DANDOLE ESTILO AL FORMULARIO ==========*/
53+
54+
.formulario{
55+
display: flex;
56+
flex-direction: column;
57+
min-width: 100%;
58+
background-color: #fff;
59+
border-radius: 7px;
60+
box-shadow: 0px 0px 9px #0003;
61+
}
62+
63+
.formulario__grupo{
64+
text-align: center;
65+
}
66+
67+
.formulario__contenedor-campos{
68+
display: flex;
69+
flex-direction: column;
70+
margin: 0 15px;
71+
72+
}
73+
74+
.formulario__campo{
75+
margin: 13px 0 0 0;
76+
width: 100%;
77+
}
78+
79+
.formulario__input, .formulario__boton{
80+
width: 100%;
81+
padding: 17px;
82+
border-radius: 6px;
83+
border: none;
84+
border: 1px solid #ddd;
85+
}
86+
87+
.formulario__input:focus {
88+
border: none;
89+
box-shadow: 0 0 0 1px rgb(145, 145, 253); /* color cian al enfocar */
90+
outline: none; /* elimina contorno azul del navegador */
91+
}
92+
93+
.formulario__input::placeholder {
94+
font-size: 17px;
95+
color: #999;
96+
}
97+
98+
99+
.formulario__boton--azul{
100+
background-color: #0866ff;
101+
color: #fff;
102+
font-weight: 600;
103+
line-height: 15px;
104+
font-size: 1.2rem;
105+
}
106+
107+
.formulario__enlace{
108+
text-align: center;
109+
color: #0866ff;
110+
text-decoration: none;
111+
font-size: 0.9rem;
112+
}
5113

6-
color-scheme: light dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
114+
.formulario__campo--enlace-separacion{
115+
padding: 1px;
116+
}
9117

10-
font-synthesis: none;
11-
text-rendering: optimizeLegibility;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
118+
.contenedor__linea{
119+
margin: 25px 0;
14120
}
15121

16-
a {
17-
font-weight: 500;
18-
color: #646cff;
19-
text-decoration: inherit;
122+
.formulario__linea{
123+
width: 90%;
124+
opacity: 0.3;
20125
}
21-
a:hover {
22-
color: #535bf2;
126+
127+
.formulario__boton--verde{
128+
background-color: #42b72a;
129+
color: #fff;
130+
font-weight: 600;
131+
width: 50%;
132+
line-height: 15px;
133+
font-size: 1rem;
23134
}
24135

25-
body {
26-
margin: 0;
27-
display: flex;
28-
place-items: center;
29-
min-width: 320px;
30-
min-height: 100vh;
136+
.formulario__campo--boton--verde{
137+
margin: 0 0 25px 0;
31138
}
32139

33-
h1 {
34-
font-size: 3.2em;
35-
line-height: 1.1;
140+
.formulario__info-extra{
141+
width: 50%;
142+
font-size: 0.9rem;
143+
text-align: center;
144+
width: 100%;
36145
}
37146

38-
#app {
39-
max-width: 1280px;
40-
margin: 0 auto;
41-
padding: 2rem;
42-
text-align: center;
147+
/* ========== DANDOLE ESTILO AL SLOGAN ==========*/
148+
149+
.prueba1{
150+
max-height: min-content;
151+
max-width: 100%;
152+
display: flex;
153+
flex-direction: column;
154+
margin: 0 0 35px 0;
43155
}
44156

45-
.logo {
46-
height: 6em;
47-
padding: 1.5em;
48-
will-change: filter;
49-
transition: filter 300ms;
157+
.contenedor__logo, .slogan__contenedor-texto{
158+
max-width: 500px;
159+
margin: 0 0 0 40px;
50160
}
51-
.logo:hover {
52-
filter: drop-shadow(0 0 2em #646cffaa);
161+
162+
.slogan__logo{
163+
margin: 0 0 -10px -30px;
164+
max-width: 300px;
53165
}
54-
.logo.vanilla:hover {
55-
filter: drop-shadow(0 0 2em #f7df1eaa);
166+
167+
.slogan__texo{
168+
font-size: 27px;
169+
margin: 0;
56170
}
57171

58-
.card {
59-
padding: 2em;
172+
/* ========== DANDOLE ESTILO AL FOOTER ==========*/
173+
174+
.footer{
175+
background-color: #fff;
176+
display: flex;
177+
flex-direction: column;
178+
align-items: center;
60179
}
61180

62-
.read-the-docs {
63-
color: #888;
181+
.footer__contenedor-enlaces-idiomas{
182+
width: 65%;
183+
margin: 30px 0 0 0;
64184
}
65185

66-
button {
67-
border-radius: 8px;
68-
border: 1px solid transparent;
69-
padding: 0.6em 1.2em;
70-
font-size: 1em;
71-
font-weight: 500;
72-
font-family: inherit;
73-
background-color: #1a1a1a;
74-
cursor: pointer;
75-
transition: border-color 0.25s;
186+
.footer__contenedor-linea{
187+
width: 65%;
188+
opacity: 0.3;
76189
}
77-
button:hover {
78-
border-color: #646cff;
190+
191+
.footer__contenedor-enlaces-opciones{
192+
width: 65%;
79193
}
80-
button:focus,
81-
button:focus-visible {
82-
outline: 4px auto -webkit-focus-ring-color;
194+
195+
.enlace__footer, .idioma__enlace, .footer__contenedor-enlaces-opciones, .footer__derechos{
196+
margin: 0 5px 0 0;
197+
text-decoration: none;
198+
color: #777;
199+
font-family: sans-serif;
200+
font-weight: 100;
201+
font-size: 12px;
83202
}
84203

85-
@media (prefers-color-scheme: light) {
86-
:root {
87-
color: #213547;
88-
background-color: #ffffff;
89-
}
90-
a:hover {
91-
color: #747bff;
92-
}
93-
button {
94-
background-color: #f9f9f9;
95-
}
204+
.footer__derechos{
205+
margin: 20px 0;
206+
text-align: start;
207+
width: 65%;
96208
}
209+
210+

0 commit comments

Comments
 (0)