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 f7b40a5

Browse files
Se mejora el CSS, obteniendo una respuesta más dinámica a los cambios de tamaño de la pantalla.
Se organiza los ficheros CSS.
1 parent 5059721 commit f7b40a5

File tree

9 files changed

+149
-179
lines changed

9 files changed

+149
-179
lines changed

‎index.html‎

Lines changed: 49 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,26 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Sierra-117</title>
8-
9-
<link rel="icon" type="image/png" href="assets/app/">
8+
9+
<link rel="icon" type="image/png" href="assets/app/icon.png">
1010

1111
<link rel="stylesheet" href="./styles/normalize.css">
1212
<link rel="stylesheet" href="./styles/common.css">
13-
<link rel="stylesheet" href="./styles/components.css">
1413
<link rel="stylesheet" href="./styles/header.css">
15-
<link rel="stylesheet" href="./styles/banner.css">
16-
<link rel="stylesheet" href="./styles/progress_bar.css">
1714
<link rel="stylesheet" href="./styles/footer.css">
15+
16+
<link rel="stylesheet" href="./styles/components/components.css">
17+
<link rel="stylesheet" href="./styles/components/banner.css">
18+
<link rel="stylesheet" href="./styles/components/progress_bar.css">
1819
</head>
1920

20-
<body class="main-bg">
21+
<body class="main-bg">
2122
<h1 class="sr-only">Halo</h1>
2223
<header class="header">
2324
<a href="index.html">
2425
<img class="logo" src="./assets/app/Logo_Mobile.png" alt="Logo">
25-
<!-- <div ></div>
26-
--> </a>
26+
<!--<div class="logo"></div>-->
27+
</a>
2728

2829
<div class="menu-container">
2930
<input type="checkbox" id="menu-toggle" class="menu-toggle">
@@ -45,57 +46,57 @@ <h1 class="sr-only">Halo</h1>
4546
<h2>Sierra 117 (Master Chief)</h2>
4647
<p>
4748
Soy Master Chief, un soldado mejorado cibernéticamente conocido como Spartan.
48-
Mi misión es proteger a la humanidad a toda costa, enfrentando amenazas como los Covenant y los Flood.
49-
Siempre estoy preparado para la batalla, y no importa lo difícil que sea, mi objetivo es asegurar la victoria.
49+
Mi misión es proteger a la humanidad a toda costa, enfrentando amenazas como los Covenant y los
50+
Flood.
51+
Siempre estoy preparado para la batalla, y no importa lo difícil que sea, mi objetivo es asegurar la
52+
victoria.
5053
No me importa la gloria, solo cumplir con mi deber.
5154
</p>
5255
</div>
56+
</section>
5357

54-
<div>
58+
<section class="progresses-bars">
59+
<h2>Mis Skills</h2>
60+
<div class="progresses-bars-container">
5561
<div>
56-
<h2>Mis Skills</h2>
57-
</div>
58-
<div class="container">
59-
<div>
60-
<p>Super Fuerza</p>
61-
<div class="progress-container">
62-
<div class="progress-bar" style="width: 10%;">10%</div>
63-
</div>
62+
<span>Super Fuerza</span>
63+
<div class="progress-container">
64+
<div class="progress-bar" style="width: 10%;">10%</div>
6465
</div>
65-
<div>
66-
<p>Tácticas Avanzadas</p>
67-
<divclass="progress-container">
68-
<div class="progress-bar" style="width: 25%;">25%</div>
69-
</div>
66+
</div>
67+
<div>
68+
<span>Tácticas Avanzadas</span>
69+
<div class="progress-container">
70+
<divclass="progress-bar" style="width: 25%;">25%</div>
7071
</div>
71-
<div>
72-
<p>Resistencia Mejorada</p>
73-
<divclass="progress-container">
74-
<div class="progress-bar" style="width: 40%;">40%</div>
75-
</div>
72+
</div>
73+
<div>
74+
<span>Resistencia Mejorada</span>
75+
<div class="progress-container">
76+
<divclass="progress-bar" style="width: 40%;">40%</div>
7677
</div>
77-
<div>
78-
<p>Sigilo</p>
79-
<divclass="progress-container">
80-
<div class="progress-bar" style="width: 55%;">55%</div>
81-
</div>
78+
</div>
79+
<div>
80+
<span>Sigilo</span>
81+
<div class="progress-container">
82+
<divclass="progress-bar" style="width: 55%;">55%</div>
8283
</div>
83-
<div>
84-
<p>Manejo de Tecnología Avanzada</p>
85-
<divclass="progress-container">
86-
<div class="progress-bar" style="width: 70%;">70%</div>
87-
</div>
84+
</div>
85+
<div>
86+
<span>Manejo de Tecnología Avanzada</span>
87+
<div class="progress-container">
88+
<divclass="progress-bar" style="width: 70%;">70%</div>
8889
</div>
89-
<div>
90-
<p>Habilidad en Combate con Armas</p>
91-
<divclass="progress-container">
92-
<div class="progress-bar" style="width: 85%;">85%</div>
93-
</div>
90+
</div>
91+
<div>
92+
<span>Habilidad en Combate con Armas</span>
93+
<div class="progress-container">
94+
<divclass="progress-bar" style="width: 85%;">85%</div>
9495
</div>
9596
</div>
9697
</div>
97-
9898
</section>
99+
99100
<!-- ********************************************************************************************************************************* -->
100101
<section class="banner">
101102
<div class="banner-container">
@@ -130,7 +131,8 @@ <h2>Mis Skills</h2>
130131
</div>
131132
<div class="form-element">
132133
<label for="usergithub">GitHub Username</label>
133-
<input required type="text" name="usergithub" id="usergithub" autocomplete="off" pattern="^@[^\s]+" placeholder="@ususarioGitHub">
134+
<input required type="text" name="usergithub" id="usergithub" autocomplete="off"
135+
pattern="^@[^\s]+" placeholder="@ususarioGitHub">
134136
</div>
135137
</div>
136138
<!-- ------------------------------------------------------------------------------------------------------------------- -->
@@ -202,4 +204,5 @@ <h2>Mis Skills</h2>
202204
</footer>
203205

204206
</body>
207+
205208
</html>

‎proyects.html‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,40 @@
1010

1111
<link rel="stylesheet" href="./styles/normalize.css">
1212
<link rel="stylesheet" href="./styles/common.css">
13-
<link rel="stylesheet" href="./styles/components.css">
1413
<link rel="stylesheet" href="./styles/header.css">
15-
<link rel="stylesheet" href="./styles/proyects.css">
16-
1714
<link rel="stylesheet" href="./styles/footer.css">
15+
16+
<link rel="stylesheet" href="./styles/components/components.css">
17+
<link rel="stylesheet" href="./styles/components/proyects.css">
18+
1819
</head>
1920

2021
<body class="main-bg">
2122
<h1 class="sr-only">Halo</h1>
2223
<header class="header">
2324
<a href="index.html">
24-
<img class="logo"src="./assets/app/Halo_Logo.png" alt="Logo">
25-
<!-- <div ></div>
26-
--> </a>
25+
<img class="logo"src="./assets/app/Logo_Mobile.png" alt="Logo">
26+
<!--<div class="logo"></div>-->
27+
</a>
2728

2829
<div class="menu-container">
2930
<input type="checkbox" id="menu-toggle" class="menu-toggle">
3031
<label for="menu-toggle" class="menu-btn">Menú</label>
32+
33+
<nav class="nav">
34+
<ul class="list">
35+
<li><a class="btn-header" href="proyects.html">Proyectos</a></li>
36+
<li><a class="btn-header" href="#skills">Skills</a></li>
37+
<li><a class="btn-header" href="#contact">Contacto</a></li>
38+
</ul>
39+
</nav>
3140
</div>
3241
</header>
33-
<main>
42+
<main>
3443
<section class="assets">
3544
<video src="./assets/app/Greetings.mp4" alt="Desactivar Mute" autoplay muted controls></video>
3645
</section>
37-
46+
3847
<section class="">
3948
<h2>Mis Proyectos</h2>
4049
<ul class="list-proyects">
@@ -119,7 +128,7 @@ <h2>Mis Proyectos</h2>
119128
</ul>
120129
</section>
121130

122-
<!-- <section class="assets">
131+
<!-- <section class="assets">
123132
<iframe src="https://www.youtube.com/embed/t-T6lEYJHm8" title="Halo 3 Warthog Run" frameborder="0"
124133
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
125134
allowfullscreen>

‎styles/common.css‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,12 @@
2424
--primary-color: #3498db;
2525
--primary-color-hover: #2980b9;
2626

27-
font-size: 16px;
28-
}
27+
--footer-text: #ccc;
28+
29+
font-size: clamp(2px, 5vw, 16px);
30+
/*clamp(min, ideal, max)*/
31+
32+
}
2933

3034
/*-------------------------------------------------------------------------------------*/
3135

@@ -41,22 +45,23 @@
4145
body {
4246
font-family: 'Handel';
4347
color: var(--main-text-color);
48+
4449
}
4550

4651
main {
47-
width: 100%;
48-
max-width: 1000px;
4952
margin: auto;
5053
padding: 1.5rem 2rem 1.5rem;
51-
min-height: 100vh;
52-
background-color: var(--bg-color);
5354

54-
font-size: 1rem;
55-
5655
display: flex;
5756
flex-direction: column;
5857
align-items: center;
59-
gap: 0.9rem;
58+
gap: 2rem;
59+
60+
width: 100%;
61+
max-width: 1000px;
62+
min-height: 100vh;
63+
64+
background-color: var(--bg-color);
6065
}
6166

6267
.main-bg{
@@ -82,7 +87,8 @@ h1, h2, h3, h4, p {
8287

8388
p {
8489
margin: 0;
85-
margin-bottom: 0.5rem;
90+
text-align: justify;
91+
8692
}
8793

8894
/*-------------------------------------------------------------------------------------*/
@@ -91,8 +97,7 @@ p {
9197
display: flex;
9298
flex-direction: column;
9399

94-
margin-bottom: 2rem;
95-
gap: 1rem
100+
gap: 2rem
96101
}
97102

98103
.form-container {
@@ -128,14 +133,6 @@ p {
128133
padding: 2rem 4rem 2rem;
129134
width: 90%;
130135
}
131-
p {
132-
margin: 0;
133-
margin-bottom: 1rem;
134-
}
135-
h1, h2, h3, h4, p {
136-
margin-top: 0;
137-
margin-bottom: 1rem;
138-
}
139136
.main-bg {
140137
background-image: url('/assets/app/Wallpaper_2_(1024x576).jpg');
141138
}

‎styles/banner.css‎ renamed to ‎styles/components/banner.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22
display: flex;
33
justify-content: center;
44
align-items: center;
5+
56
overflow: hidden;
67
}
78

89
.banner-container {
910
position: relative;
10-
width: 100%;
1111
display: flex;
12+
width: 100%;
1213
justify-content: center;
1314
}
1415

‎styles/components.css‎ renamed to ‎styles/components/components.css‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
/*-------------------------------------------------------------------------------------*/
22

33
.btn {
4-
54
padding: 1rem;
65

7-
font-size: 1.4rem;
6+
font-size: 1rem;
87
font-weight: bold;
98

109
border-radius: 0.5rem;
@@ -40,7 +39,8 @@
4039
.form-element {
4140
display: flex;
4241
flex-direction: column;
43-
font-size: 0.9rem;
42+
43+
font-size: 0.7rem;
4444

4545
label {
4646
margin-bottom: 0.5rem;
@@ -88,7 +88,7 @@
8888
.grid-2x2 {
8989
display: grid;
9090
grid-template-columns: repeat(2, 1fr);
91-
gap: 2rem;
91+
gap: 1.5rem;
9292
}
9393

9494
.grid-2x2,
@@ -104,10 +104,4 @@ textarea,
104104
.grid-2x2 {
105105
grid-template-columns: 1fr;
106106
}
107-
108-
.form-element {
109-
width: 100%;
110-
font-size: 1.4rem;
111-
padding: 1rem;
112-
}
113107
}

‎styles/progress_bar.css‎ renamed to ‎styles/components/progress_bar.css‎

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
.container {
2-
display: grid;
3-
grid-template-columns: repeat(2, 1fr);
4-
grid-template-rows: repeat(3, auto);
5-
gap: 1rem;
1+
.progresses-bars {
2+
display: block;
63
width: 100%;
74
}
85

6+
.progresses-bars-container{
7+
display: grid;
8+
gap:1rem;
9+
}
10+
911
.progress-container {
1012
width: 100%;
1113
background-color: #e0e0e0;
@@ -40,12 +42,12 @@
4042
animation-delay: var(--delay);
4143
}
4244

43-
.container div:nth-child(1) .progress-bar { --progress-width: 10%; --hue: 120;}
44-
.container div:nth-child(2) .progress-bar { --progress-width: 25%; --hue: 100;}
45-
.container div:nth-child(3) .progress-bar { --progress-width: 40%; --hue: 80;}
46-
.container div:nth-child(4) .progress-bar { --progress-width: 55%; --hue: 60;}
47-
.container div:nth-child(5) .progress-bar { --progress-width: 70%; --hue: 40;}
48-
.container div:nth-child(6) .progress-bar { --progress-width: 85%; --hue: 20;}
45+
.progresses-bars div:nth-child(1) .progress-bar { --progress-width: 10%; --hue: 120;}
46+
.progresses-bars div:nth-child(2) .progress-bar { --progress-width: 25%; --hue: 100;}
47+
.progresses-bars div:nth-child(3) .progress-bar { --progress-width: 40%; --hue: 80;}
48+
.progresses-bars div:nth-child(4) .progress-bar { --progress-width: 55%; --hue: 60;}
49+
.progresses-bars div:nth-child(5) .progress-bar { --progress-width: 70%; --hue: 40;}
50+
.progresses-bars div:nth-child(6) .progress-bar { --progress-width: 85%; --hue: 20;}
4951

5052
/*-------------------------------------------------------------------------------------*/
5153

@@ -77,14 +79,3 @@
7779
opacity: 1;
7880
}
7981
}
80-
81-
/*-------------------------------------------------------------------------------------*/
82-
83-
@media (min-width: 480px) {
84-
.container {
85-
grid-template-columns: 1fr;
86-
grid-template-rows: auto;
87-
88-
gap: 1.7rem;
89-
}
90-
}

0 commit comments

Comments
(0)

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