Skip to content

Commit 48a8e02

Browse files
pablo-schpablo-sch
committed
Se crea una maquetación básica del footer, header y del formulario sin agregar estilos. Se incluye media query al header para dispositivos móviles. Se añade la página proyects.html[2
1 parent 1b1fa02 commit 48a8e02

34 files changed

+720
-4
lines changed

‎assets/links/Halo_Studios_Logo.png

26 KB
Loading

‎assets/links/Twitter_Logo.png

17 KB
Loading

‎assets/links/Xbox_Logo.png

19.8 KB
Loading

‎assets/links/Youtube_Logo.png

15.7 KB
Loading

‎example_Images/2_Esueleto.png renamed to ‎example_Images/2_Esqueleto.png

File renamed without changes.

‎index.html

Lines changed: 143 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,152 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Document</title>
7+
<title>Sierra-117</title>
8+
<link rel="stylesheet" href="./styles/normalize.css">
9+
<link rel="stylesheet" href="./styles/common.css">
10+
<link rel="stylesheet" href="./styles/header.css">
11+
<link rel="stylesheet" href="./styles/footer.css">
712
</head>
13+
814
<body>
9-
15+
<h1 class="sr-only">Halo</h1>
16+
<header class="header">
17+
<a href="index.html">
18+
<img src="./assets/app/Halo_Logo.png" alt="Logo">
19+
</a>
20+
21+
<input type="checkbox" id="menu-toggle" class="menu-toggle">
22+
<label for="menu-toggle" class="menu-btn">Menu</label>
23+
24+
<nav class="nav">
25+
<ul class="list">
26+
<li><a class="btn" href="./proyects.html">Proyectos</a></li>
27+
<li><a class="btn" href="#title">Skills</a></li>
28+
<li><a class="btn" href="#title">Contacto</a></li>
29+
</ul>
30+
</nav>
31+
</header>
32+
<section class="info">
33+
<h2>Sierra 117 (Master Chief)</h2>
34+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat, hic expedita impedit odio sed, animi natus
35+
numquam ratione aspernatur, eius eos ad ipsa delectus corporis tempore voluptatibus labore perferendis
36+
mollitia.</p>
37+
</section>
38+
<section class="banner">
39+
<h2>Mis Skills</h2>
40+
<div>
41+
<p>Skill Nº1</p>
42+
</div>
43+
<div>
44+
<p>Skill Nº2</p>
45+
</div>
46+
<div>
47+
<p>Skill Nº3</p>
48+
</div>
49+
<div>
50+
<p>Skill Nº3</p>
51+
</div>
52+
<div>
53+
<p>Skill Nº4</p>
54+
</div>
55+
<div>
56+
<p>Skill Nº5</p>
57+
</div>
58+
<div>
59+
<p>Skill Nº6</p>
60+
</div>
61+
62+
</section>
63+
64+
<form class="form" action="./register" method="post" novalidate>
65+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
66+
<div class="form-element">
67+
<label for="name">Nombre</label>
68+
<input required type="text" name="name" id="name" placeholder="Nombre">
69+
</div>
70+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
71+
<div class="form-element">
72+
<label for="second-name">Apellido</label>
73+
<input required type="text" name="second_name" id="second-name" placeholder="Apellido">
74+
</div>
75+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
76+
<div class="form-element">
77+
<label for="tel">Ingresa tu número telefónico</label>
78+
<input required type="tel" name="telephone" id="tel" autocomplete="off" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
79+
title="Expected format 123-123-1234" placeholder="123-456-7890" inputmode="tel">
80+
</div>
81+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
82+
<div class="form-element">
83+
<label for="mail">Ingresa tu correo electrónico</label>
84+
<input required type="email" name="email" id="mail" placeholder="your@email.com">
85+
</div>
86+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
87+
<fieldset>
88+
<legend>¿Cómo nos conociste?</legend>
89+
<div>
90+
<input required type="radio" name="source" id="un" value="universidad">
91+
<label for="un">Universidad</label>
92+
</div>
93+
<div>
94+
<input required type="radio" name="source" id="kc" value="kickoff">
95+
<label for="kc">KeepCoding kick-off</label>
96+
</div>
97+
<div>
98+
<input required type="radio" name="source" id="col" value="colegio">
99+
<label for="col">Colegio</label>
100+
</div>
101+
<div>
102+
<input required type="radio" name="source" id="gh" value="github">
103+
<label for="gh">GitHub</label>
104+
</div>
105+
</fieldset>
106+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
107+
<div class="form-element">
108+
<label for="bio">Más Información</label>
109+
<textarea required name="bio" id="bio" rows="6" placeholder="Máx. 100 caracteres"
110+
maxlength="100"></textarea>
111+
</div>
112+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
113+
<div class="">
114+
<input type="checkbox" name="newsletter_subscription" id="remember">
115+
<label for="remember">Quiero acceso a la newsletter</label>
116+
</div>
117+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
118+
<div>
119+
<button class="btn" type="submit">Enviar</button>
120+
<input class="btn secondary" type="reset" value="Reset">
121+
</div>
122+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
123+
</form>
124+
10125
</body>
126+
127+
<footer class="footer">
128+
<ul>
129+
<li>
130+
<a href="https://www.halostudios.com" target="_blank" rel="noopener noreferrer">
131+
<img src="./assets/links/Halo_Studios_Logo.png" alt="Halo Studios">
132+
</a>
133+
</li>
134+
<li>
135+
<a href="https://www.xbox.com" target="_blank" rel="noopener noreferrer">
136+
<img src="./assets/links/Xbox_Logo.png" alt="Halo on Xbox">
137+
</a>
138+
</li>
139+
<li>
140+
<a href="https://www.youtube.com/c/Halo" target="_blank" rel="noopener noreferrer">
141+
<img src="./assets/links/Youtube_Logo.png" alt="Halo on Youtube">
142+
</a>
143+
</li>
144+
<li>
145+
<a href="https://twitter.com/Halo" target="_blank" rel="noopener noreferrer">
146+
<img src="./assets/links/Twitter_Logo.png" alt="Halo on X">
147+
</a>
148+
</li>
149+
</ul>
150+
</footer>
151+
11152
</html>

‎proyects.html

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,65 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Document</title>
7+
<title>Sierra-117</title>
8+
<link rel="stylesheet" href="./styles/normalize.css">
9+
<link rel="stylesheet" href="./styles/common.css">
10+
<link rel="stylesheet" href="./styles/header.css">
11+
<link rel="stylesheet" href="./styles/footer.css">
712
</head>
13+
814
<body>
9-
15+
<h1 class="sr-only">Halo</h1>
16+
<header class="header">
17+
<a href="index.html">
18+
<img src="./assets/app/Halo_Logo.png" alt="Logo">
19+
</a>
20+
21+
<input type="checkbox" id="menu-toggle" class="menu-toggle">
22+
<label for="menu-toggle" class="menu-btn">Menu</label>
23+
24+
<nav class="nav">
25+
<ul class="list">
26+
<li><a class="btn" href="./proyects.html">Proyectos</a></li>
27+
<li><a class="btn" href="#title">Skills</a></li>
28+
<li><a class="btn" href="#title">Contacto</a></li>
29+
</ul>
30+
</nav>
31+
</header>
32+
<main>
33+
<iframe width="560" height="315" src="https://www.youtube.com/embed/t-T6lEYJHm8" title="Halo 3 Warthog Run"
34+
frameborder="0"
35+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
36+
allowfullscreen>
37+
</iframe>
38+
</main>
1039
</body>
40+
<footer class="footer">
41+
<ul>
42+
<li>
43+
<a href="https://www.halostudios.com" target="_blank" rel="noopener noreferrer">
44+
<img src="./assets/links/Halo_Studios_Logo.png" alt="Halo Studios">
45+
</a>
46+
</li>
47+
<li>
48+
<a href="https://www.xbox.com" target="_blank" rel="noopener noreferrer">
49+
<img src="./assets/links/Xbox_Logo.png" alt="Halo on Xbox">
50+
</a>
51+
</li>
52+
<li>
53+
<a href="https://www.youtube.com/c/Halo" target="_blank" rel="noopener noreferrer">
54+
<img src="./assets/links/Youtube_Logo.png" alt="Halo on Youtube">
55+
</a>
56+
</li>
57+
<li>
58+
<a href="https://twitter.com/Halo" target="_blank" rel="noopener noreferrer">
59+
<img src="./assets/links/Twitter_Logo.png" alt="Halo on X">
60+
</a>
61+
</li>
62+
</ul>
63+
</footer>
64+
1165
</html>

‎proyects/Portrait/Halo_2.png renamed to ‎proyects/portraits/Halo_2.png

File renamed without changes.

‎proyects/Portrait/Halo_2A.png renamed to ‎proyects/portraits/Halo_2A.png

File renamed without changes.

‎proyects/Portrait/Halo_3.png renamed to ‎proyects/portraits/Halo_3.png

File renamed without changes.

0 commit comments

Comments
 (0)