Skip to content

Commit 3d18464

Browse files
KevinJGVKevinJGV
committed
✅ Avance hasta inicio de resposive
1 parent cc331af commit 3d18464

File tree

2 files changed

+228
-29
lines changed

2 files changed

+228
-29
lines changed

‎CICLO 2/Parte-1/CSS/PROYECTO/contact.css

Lines changed: 205 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,210 @@
1+
h1 {
2+
font-family: poppins;
3+
font-size: 4rem;
4+
font-weight: 501;
5+
}
16

2-
@media (min-width:319px) and (max-width:719px) {
7+
h2 {
8+
font-family: poppins;
9+
font-size: 2.47rem;
10+
font-weight: 501;
11+
}
12+
13+
p {
14+
font-family: sans-serif;
15+
font-size: 1.52rem;
16+
font-weight: normal;
17+
}
18+
19+
.seccion {
20+
margin-top: 150px;
21+
}
22+
23+
.p1 {
24+
margin-bottom: 100px;
25+
}
26+
27+
.tiers {
28+
padding: 5%;
29+
background: #17171771;
30+
border: #4F4F4F solid 0.5px;
31+
border-radius: 10px;
32+
margin-top: 60px;
33+
backdrop-filter: blur(0.5rem);
34+
box-shadow: 0 0 120px -68px;
35+
}
36+
37+
.tiers h2 {
38+
margin-top: -5px;
39+
display: inline;
40+
line-height: 1.2;
41+
}
42+
43+
.tiers span {
44+
font-family: poppins;
45+
font-size: 1.8rem;
46+
margin-inline: 30px;
47+
background: #171717;
48+
border-radius: 10px;
49+
border: #4F4F4F solid 0.5px;
50+
padding: 1%;
51+
}
52+
53+
.tiers p {
54+
color: #858585;
55+
}
56+
57+
button {
58+
background: #D9D9D9;
59+
color: #171717;
60+
padding: 10px 40px;
61+
font-size: 1.8rem;
62+
font-family: poppins;
63+
font-weight: 501;
64+
border-radius: 10px;
65+
border: red solid;
66+
margin-top: 20px;
67+
}
68+
69+
button:active{
70+
outline: red solid 0.2rem;
71+
background: #b0b0b0;
72+
transform: scale(0.9);
73+
}
74+
75+
.altseccion {
76+
display: flex;
77+
flex-flow: column wrap;
78+
}
79+
80+
.altseccion h1 {
81+
text-align: center;
82+
}
83+
84+
.altseccion p {
85+
padding-inline: 11%;
86+
}
87+
.altseccion a {
88+
text-align: center;
89+
font-size: clamp(3rem, 1.0774rem + 3.7936vw, 6rem);
90+
font-family: poppins;
91+
font-weight: 501;
92+
text-decoration: none;
93+
margin-block: 4%;
94+
}
95+
96+
.altseccion a:hover {
97+
text-decoration: underline;
98+
}
99+
100+
.formBox {
101+
position: relative;
102+
}
103+
104+
form {
105+
display: flex;
106+
flex-flow: wrap;
107+
justify-content: center;
108+
align-content: center;
109+
gap: 5px;
110+
}
111+
112+
.inputBox {
113+
position: relative;
114+
;
115+
flex-grow: 1;
116+
padding: 50px 100px 0 100px;
117+
}
118+
119+
input {
120+
width: 100%;
121+
font-size: 1rem;
122+
font-family: poppins;
123+
color: #fff;
124+
margin-bottom: 30px;
125+
border: none;
126+
border-bottom: 1px solid #fff;
127+
outline: none;
128+
background: transparent;
129+
}
130+
131+
input::selection {
132+
background: rgba(133, 133, 133, 0.776);
133+
}
134+
135+
input::-moz-selection {
136+
background: rgba(133, 133, 133, 0.776);
137+
}
138+
139+
input::-webkit-selection {
140+
background: rgba(133, 133, 133, 0.776);
141+
}
142+
143+
label {
144+
position: absolute;
145+
top: 35px;
146+
padding: 10px 0;
147+
font-size: 16px;
148+
color: #858585;
149+
pointer-events: none;
150+
transition: .5s;
151+
}
3152

153+
input:focus~label,
154+
input:not(:placeholder-shown)~label {
155+
top: 10px;
156+
color: #fff;
157+
font-size: 12px;
4158
}
5159

6-
@media (min-width:719px) and (max-width:1000px) {
160+
textarea {
161+
font-family: poppins;
162+
width: 100%;
163+
background: #17171771;
164+
border-bottom: #4F4F4F solid 0.5px;
165+
border-radius: 5px;
166+
backdrop-filter: blur(0.5rem);
167+
168+
}
169+
170+
textarea::selection {
171+
background: rgba(133, 133, 133, 0.776);
172+
}
173+
174+
textarea:focus {
175+
outline: rgba(255, 0, 0, 0.55) solid;
176+
border: transparent solid;
177+
}
178+
179+
textarea::-moz-selection {
180+
background: rgba(133, 133, 133, 0.776);
181+
}
182+
183+
textarea::-webkit-selection {
184+
background: rgba(133, 133, 133, 0.776);
185+
}
186+
187+
strong {
188+
color: #858585;
189+
}
190+
191+
192+
@media (min-width:319px) and (max-width:719px) {
193+
.altseccion h1 {
194+
text-align: left;
195+
}
196+
197+
.altseccion p {
198+
padding-inline: 0;
199+
}
200+
201+
h1 {
202+
font-size: clamp(2rem, 1.0774rem + 3.7936vw, 4rem);
203+
}
204+
205+
h2 {
206+
font-size: clamp(1rem, 1.0774rem + 3.7936vw, 2.47rem);
207+
}
208+
}
7209

8-
}
210+
@media (min-width:719px) and (max-width:1000px) {}

‎CICLO 2/Parte-1/HTML/PROYECTO/contact.html

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,15 @@ <h2 class="dots">.:</h2>
5757
</div>
5858
<div class="containermainlayer">
5959
<div class="mainlayer">
60-
<div class="seccion1">
60+
<div class="seccion">
6161
<h1>Consultoria profesional</h1>
6262
<br>
63-
<p>Las empresas me contratan para ayudarles a crear soluciones digitales innovadoras y personalizadas,
63+
<p class="p1">Las empresas me contratan para ayudarles a crear soluciones digitales innovadoras y
64+
personalizadas,
6465
utilizando las mejores prácticas de desarrollo de software y diseño. Les ofrezco asesoramiento sobre
6566
cómo elegir y combinar las herramientas adecuadas para sus proyectos, desde la programación hasta el
6667
diseño sin código.</p>
67-
<div class="mentoria">
68+
<div class="tiers">
6869
<h2>Mentoría para Desarrolladores y Diseñadores</h2>
6970
<span>$99/30min</span>
7071
<p>En esta sesión de mentoría de 30 minutos, podrás consultarme cualquier duda o problema que tengas
@@ -73,7 +74,7 @@ <h2>Mentoría para Desarrolladores y Diseñadores</h2>
7374
</p>
7475
<a href="https://calendly.com/kgdevschedule/30min"><button>Agendar mentoria</button></a>
7576
</div>
76-
<div class="consulta">
77+
<div class="tiers">
7778
<h2>Consultoría para Empresas</h2>
7879
<span>$299/hora</span>
7980
<p>Hablemos sobre cómo puedo ayudarte a transformar tu idea en un producto digital funcional y
@@ -86,40 +87,36 @@ <h2>Consultoría para Empresas</h2>
8687
sesión</button></a>
8788
</div>
8889
</div>
89-
<div class="seccion2">
90+
<div class="seccion altseccion">
9091
<h1>Dame tu contacto</h1>
9192
<br>
9293
<p>Tambien soy amigable con consultas menos especificas, preguntas generales, sugerencias o propuestas
9394
de
9495
negocios.</p>
95-
<div class="form">
96-
<fieldset>
97-
<legend>Nombre</legend>
98-
<br>
99-
<input type="text" name="nombre" id="nombre" maxlength="25" minlength="1"
100-
placeholder="Tu Nombre">
101-
</fieldset>
102-
<fieldset>
103-
<legend>E-mail</legend>
104-
<br>
105-
<input type="email" name="email" id="email" required>
106-
</fieldset>
107-
<fieldset>
108-
<legend>Descripción</legend>
109-
<br>
110-
<input type="text" name="descripcion" id="descripcion" maxlength="500" minlength="1"
111-
placeholder="Haz tú consulta">
112-
</fieldset>
113-
<br>
96+
<div class="formBox">
97+
<form action="">
98+
<div class="inputBox">
99+
<input type="text" name="nombre" id="nombre" maxlength="25" minlength="1" required="" placeholder=" ">
100+
<label for="nombre">Nombre</label>
101+
</div>
102+
<div class="inputBox">
103+
<input type="email" name="email" id="email" required="" placeholder=" ">
104+
<label for="email">E-mail</label>
105+
</div>
106+
<div class="inputBox">
107+
<textarea name="descripcion" id="descripcion" maxlength="500" minlength="1" placeholder="Tú mensaje aquí" cols="10" rows="5"></textarea>
108+
</div>
109+
</form>
110+
<br><br>
114111
<button type="submit">Enviar</button>
115112
</div>
116113
</div>
117-
<div class="seccion3">
114+
<div class="seccion altseccion">
118115
<h1>... O enviame un e-mail</h1>
119116
<br>
120117
<p>Puede tardar un poco en que recibas mi respuesta, pero seguro que mas de una semana no vas a tener
121118
que
122-
esperar <span>(si no es spam, claro)</span>.</p>
119+
esperar<br><strong>(si no es spam, claro)</strong>.</p>
123120
<br>
124121
<a
125122
href="mailto:noseasapo@sapo.com?subject=¡Hola%20Kevin!%20Estoy%20interesad@%20en%20comunicarme%20contigo.">noseasapo@sapo.com</a>

0 commit comments

Comments
 (0)