Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 48a8e02

Browse files
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[フレーム]
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 No1</p>
42+
</div>
43+
<div>
44+
<p>Skill No2</p>
45+
</div>
46+
<div>
47+
<p>Skill No3</p>
48+
</div>
49+
<div>
50+
<p>Skill No3</p>
51+
</div>
52+
<div>
53+
<p>Skill No4</p>
54+
</div>
55+
<div>
56+
<p>Skill No5</p>
57+
</div>
58+
<div>
59+
<p>Skill No6</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>
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /