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 b686a0c

Browse files
Se avanza en la sección Info en el archivo index.html agregando los correspondientes archivos .css
1 parent 48a8e02 commit b686a0c

File tree

7 files changed

+223
-135
lines changed

7 files changed

+223
-135
lines changed

‎example.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<body>
2+
<main>
3+
<section class="info">
4+
5+
</section>
6+
<section class="banner">
7+
8+
</section>
9+
<form class="form">
10+
11+
</form>
12+
</main>
13+
</body>

‎index.html‎

Lines changed: 107 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@
77
<title>Sierra-117</title>
88
<link rel="stylesheet" href="./styles/normalize.css">
99
<link rel="stylesheet" href="./styles/common.css">
10+
<link rel="stylesheet" href="./styles/components.css">
1011
<link rel="stylesheet" href="./styles/header.css">
12+
<link rel="stylesheet" href="./styles/progress_bar.css">
1113
<link rel="stylesheet" href="./styles/footer.css">
1214
</head>
1315

14-
<body>
16+
<bodyclass="main-bg">
1517
<h1 class="sr-only">Halo</h1>
1618
<header class="header">
1719
<a href="index.html">
@@ -29,98 +31,117 @@ <h1 class="sr-only">Halo</h1>
2931
</ul>
3032
</nav>
3133
</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>
34+
<main>
35+
<section class="info">
36+
<h2>Sierra 117 (Master Chief)</h2>
37+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat, hic expedita impedit odio sed, animi
38+
natus
39+
numquam ratione aspernatur, eius eos ad ipsa delectus corporis tempore voluptatibus labore perferendis
40+
mollitia.</p>
41+
</section>
42+
<section class="banner">
43+
<h2>Mis Skills</h2>
44+
<div class="container">
45+
<div>
46+
<p>Skill No1</p>
47+
<div class="progress-container">
48+
<div class="progress-bar" style="width: 10%;">10%</div>
49+
</div>
50+
</div>
51+
<div>
52+
<p>Skill No2</p>
53+
<div class="progress-container">
54+
<div class="progress-bar" style="width: 25%;">25%</div>
55+
</div>
56+
</div>
57+
<div>
58+
<p>Skill No3</p>
59+
<div class="progress-container">
60+
<div class="progress-bar" style="width: 40%;">40%</div>
61+
</div>
62+
</div>
63+
<div>
64+
<p>Skill No4</p>
65+
<div class="progress-container">
66+
<div class="progress-bar" style="width: 55%;">55%</div>
67+
</div>
68+
</div>
69+
<div>
70+
<p>Skill No5</p>
71+
<div class="progress-container">
72+
<div class="progress-bar" style="width: 70%;">70%</div>
73+
</div>
74+
</div>
75+
<div>
76+
<p>Skill No6</p>
77+
<div class="progress-container">
78+
<div class="progress-bar" style="width: 85%;">85%</div>
79+
</div>
80+
</div>
81+
</div>
82+
</section>
6383

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>
84+
<form class="form" action="./register" method="post" novalidate>
85+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
8986
<div>
90-
<input required type="radio" name="source" id="un" value="universidad">
91-
<label for="un">Universidad</label>
87+
<div class="form-element">
88+
<label for="name">Nombre</label>
89+
<input required type="text" name="name" id="name" placeholder="Nombre">
90+
</div>
91+
<div class="form-element">
92+
<label for="second-name">Apellido</label>
93+
<input required type="text" name="second_name" id="second-name" placeholder="Apellido">
94+
</div>
95+
<div class="form-element">
96+
<label for="tel">Ingresa tu número telefónico</label>
97+
<input required type="tel" name="telephone" id="tel" autocomplete="off"
98+
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="Expected format 123-123-1234"
99+
placeholder="123-456-7890" inputmode="tel">
100+
</div>
101+
<div class="form-element">
102+
<label for="mail">Ingresa tu correo electrónico</label>
103+
<input required type="email" name="email" id="mail" placeholder="your@email.com">
104+
</div>
92105
</div>
93-
<div>
94-
<input required type="radio" name="source" id="kc" value="kickoff">
95-
<label for="kc">KeepCoding kick-off</label>
106+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
107+
<fieldset>
108+
<legend>¿Cómo nos conociste?</legend>
109+
<div>
110+
<input required type="radio" name="source" id="un" value="universidad">
111+
<label for="un">Universidad</label>
112+
</div>
113+
<div>
114+
<input required type="radio" name="source" id="kc" value="kickoff">
115+
<label for="kc">KeepCoding kick-off</label>
116+
</div>
117+
<div>
118+
<input required type="radio" name="source" id="col" value="colegio">
119+
<label for="col">Colegio</label>
120+
</div>
121+
<div>
122+
<input required type="radio" name="source" id="gh" value="github">
123+
<label for="gh">GitHub</label>
124+
</div>
125+
</fieldset>
126+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
127+
<div class="form-element">
128+
<label for="bio">Más Información</label>
129+
<textarea required name="bio" id="bio" rows="6" placeholder="Máx. 100 caracteres"
130+
maxlength="100"></textarea>
96131
</div>
97-
<div>
98-
<input required type="radio" name="source" id="col" value="colegio">
99-
<label for="col">Colegio</label>
132+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
133+
<div class="">
134+
<input type="checkbox" name="newsletter_subscription" id="remember">
135+
<label for="remember">Quiero acceso a la newsletter</label>
100136
</div>
137+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
101138
<div>
102-
<inputrequiredtype="radio" name="source" id="gh" value="github">
103-
<labelfor="gh">GitHub</label>
139+
<buttonclass="btn" type="submit">Enviar</button>
140+
<inputclass="btn secondary" type="reset" value="Reset">
104141
</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>
142+
<!-- ------------------------------------------------------------------------------------------------------------------- -->
143+
</form>
144+
</main>
124145

125146
</body>
126147

‎styles/common.css‎

Lines changed: 48 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,54 @@
11
:root {
2-
3-
/* --bg-color: #000;
2+
--bg-color: #36363b;
3+
--bg-color-info: #104900;
4+
--bg-color-banner: #155f00;
5+
--bg-color-form: #2cc900;
46
--main-text-color: #FFF;
7+
/* --main-text-color: #FFF;
58
--main-brand-color: #e50914;
69
--main-brand-color-light: #e44c54;
710
--border-color: #4b5563;
8-
--input-bg-color: #333;
11+
--input-bg-color: #333; */
912
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-
13+
font-family: "Roboto", Arial, Helvetica, sans-serif;
14+
}
15+
16+
main {
17+
padding: 0 10vw;
18+
}
19+
20+
a {
21+
text-decoration: none;
22+
}
23+
24+
* {
25+
box-sizing: border-box;
26+
}
27+
28+
h1,h2,h3,h4,p {
29+
margin-top: 0;
30+
}
31+
32+
p {
33+
margin: 0;
34+
margin-bottom: 1rem;
35+
}
36+
37+
/*-------------------------------------------------------------------------------------*/
38+
39+
.sr-only:not(:focus):not(:active) {
40+
clip: rect(0 0 0 0);
41+
clip-path: inset(50%);
42+
height: 1px;
43+
overflow: hidden;
44+
position: absolute;
45+
white-space: nowrap;
46+
width: 1px;
47+
}
48+
49+
.main-bg {
50+
background-color: var(--bg-color);
51+
color: var(--main-text-color);
52+
}
53+
54+

‎styles/components.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.form-element {
2+
display: flex;
3+
flex-direction: column;
4+
margin-bottom: 1rem;
5+
label {
6+
margin-bottom: 0.5rem;
7+
}
8+
input, textarea, select {
9+
border: none;
10+
padding: 1rem;
11+
border-radius: 5px;
12+
background-color: var(--input-bg-color);
13+
color: var(--main-text-color);
14+
}
15+
&.row {
16+
flex-direction: row;
17+
gap: 10px;
18+
label {
19+
margin: 0;
20+
}
21+
}
22+
}

‎styles/footer.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88
}
99

1010
.footer a {
11-
display: flex; /* Make each anchor a flex container */
12-
justify-content: center; /* Horizontally center the image inside the anchor */
11+
display: flex;
12+
justify-content: center;
1313
}
1414

1515
.footer img {
16-
height: 40px; /* Adjust image size */
17-
max-width: 100%; /* Ensures logos don't exceed container size */
16+
height: 40px;
17+
max-width: 100%;
1818
}
1919

2020
.footer ul {

0 commit comments

Comments
(0)

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