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.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

‎proyects/Wallpaper/Halo_2.jpg renamed to ‎proyects/wallpapers/Halo_2.jpg

File renamed without changes.

‎proyects/Wallpaper/Halo_2A.jpg renamed to ‎proyects/wallpapers/Halo_2A.jpg

File renamed without changes.

‎proyects/Wallpaper/Halo_3.jpg renamed to ‎proyects/wallpapers/Halo_3.jpg

File renamed without changes.

‎proyects/Wallpaper/Halo_4.jpg renamed to ‎proyects/wallpapers/Halo_4.jpg

File renamed without changes.

‎proyects/Wallpaper/Halo_CE.jpg renamed to ‎proyects/wallpapers/Halo_CE.jpg

File renamed without changes.

‎proyects/Wallpaper/Halo_CEA.jpg renamed to ‎proyects/wallpapers/Halo_CEA.jpg

File renamed without changes.

‎proyects/Wallpaper/Halo_ODST.jpg renamed to ‎proyects/wallpapers/Halo_ODST.jpg

File renamed without changes.

‎proyects/Wallpaper/Halo_Reach.jpg renamed to ‎proyects/wallpapers/Halo_Reach.jpg

File renamed without changes.

‎proyects/Wallpaper/Halo_SpartanAssault.jpg renamed to ‎proyects/wallpapers/Halo_SpartanAssault.jpg

File renamed without changes.

‎proyects/Wallpaper/Halo_Wars.jpg renamed to ‎proyects/wallpapers/Halo_Wars.jpg

File renamed without changes.

‎proyects/Wallpaper/Halo_Wars2.jpg renamed to ‎proyects/wallpapers/Halo_Wars2.jpg

File renamed without changes.

‎proyects/Wallpaper/Halo_infinite.jpg renamed to ‎proyects/wallpapers/Halo_infinite.jpg

File renamed without changes.

‎styles/common.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
:root {
2+
3+
/* --bg-color: #000;
4+
--main-text-color: #FFF;
5+
--main-brand-color: #e50914;
6+
--main-brand-color-light: #e44c54;
7+
--border-color: #4b5563;
8+
--input-bg-color: #333;
9+
font-size: 16px;
10+
font-family: "Roboto", Arial, Helvetica, sans-serif; */
11+
}
12+
13+
.sr-only:not(:focus):not(:active) {
14+
clip: rect(0 0 0 0);
15+
clip-path: inset(50%);
16+
height: 1px;
17+
overflow: hidden;
18+
position: absolute;
19+
white-space: nowrap;
20+
width: 1px;
21+
}
22+
23+
a {
24+
text-decoration: none;
25+
}
26+
27+
.main-bg {
28+
29+
}
30+
31+
* {
32+
box-sizing: border-box;
33+
}
34+
35+
h1, h2, h3, h4, p {
36+
margin-top: 0;
37+
}
38+
39+
p {
40+
margin: 0;
41+
margin-bottom: 1rem;
42+
}
43+

‎styles/footer.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.footer {
2+
display: flex; /* Use flexbox for the footer */
3+
justify-content: center; /* Horizontally center the items */
4+
align-items: center; /* Vertically center the items */
5+
gap: 20px; /* Optional: Adds space between the images */
6+
padding: 10px; /* Optional: Adds padding around the footer */
7+
background: rgb(44, 187, 44);
8+
}
9+
10+
.footer a {
11+
display: flex; /* Make each anchor a flex container */
12+
justify-content: center; /* Horizontally center the image inside the anchor */
13+
}
14+
15+
.footer img {
16+
height: 40px; /* Adjust image size */
17+
max-width: 100%; /* Ensures logos don't exceed container size */
18+
}
19+
20+
.footer ul {
21+
list-style: none;
22+
padding: 0;
23+
margin: 0;
24+
display: flex;
25+
}
26+
27+
.footer a {
28+
text-decoration: none;
29+
}
30+
31+
.footer ul {
32+
display: flex;
33+
gap: 20px;
34+
align-items: center;
35+
}
36+
37+
@media (max-width: 600px) {
38+
.footer ul {
39+
flex-wrap: wrap;
40+
justify-content: center;
41+
}
42+
}

0 commit comments

Comments
 (0)