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 07f5f63

Browse files
Se modifica y retoca los css dando un mejor acabado. Se anima las barras de progreso cada vez que se carga la página y se les añade un gradiente de color al momento de ejecutar la animación.
1 parent bbb74ad commit 07f5f63

File tree

9 files changed

+271
-98
lines changed

9 files changed

+271
-98
lines changed

‎assets/app/Halo_Logo.png‎

1.38 KB
Loading[フレーム]

‎index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ <h1 class="sr-only">Halo</h1>
2727

2828
<nav class="nav">
2929
<ul class="list">
30-
<li><a class="btn" href="./projects.html">Proyectos</a></li>
30+
<li><a class="btn" href="proyects.html">Proyectos</a></li>
3131
<li><a class="btn" href="#skills">Skills</a></li>
3232
<li><a class="btn" href="#contact">Contacto</a></li>
3333
</ul>
@@ -126,7 +126,7 @@ <h2>Mis Skills</h2>
126126
</div>
127127
</div>
128128
<!-- ------------------------------------------------------------------------------------------------------------------- -->
129-
<fieldset>
129+
<fieldsetclass="fieldset">
130130
<legend>¿Cómo nos conociste?</legend>
131131
<div>
132132
<input required type="radio" name="source" id="un" value="universidad">
@@ -146,13 +146,13 @@ <h2>Mis Skills</h2>
146146
</div>
147147
</fieldset>
148148
<!-- ------------------------------------------------------------------------------------------------------------------- -->
149-
<div class="form-element">
149+
<div class="form-element textarea">
150150
<label for="bio">Más Información</label>
151151
<textarea required name="bio" id="bio" rows="6" placeholder="Máx. 100 caracteres"
152152
maxlength="100"></textarea>
153153
</div>
154154
<!-- ------------------------------------------------------------------------------------------------------------------- -->
155-
<div class="">
155+
<div class="chbox">
156156
<input type="checkbox" name="newsletter_subscription" id="remember">
157157
<label for="remember">Quiero acceso a la newsletter</label>
158158
</div>

‎proyects.html‎

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,32 @@
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/banner.css">
13+
<link rel="stylesheet" href="./styles/progress_bar.css">
1114
<link rel="stylesheet" href="./styles/footer.css">
1215
</head>
1316

14-
<body>
17+
<bodyclass="main-bg" >
1518
<h1 class="sr-only">Halo</h1>
1619
<header class="header">
1720
<a href="index.html">
1821
<img src="./assets/app/Halo_Logo.png" alt="Logo">
1922
</a>
2023

21-
<input type="checkbox" id="menu-toggle" class="menu-toggle">
22-
<label for="menu-toggle" class="menu-btn">Menu</label>
24+
<div class="menu-container">
25+
<input type="checkbox" id="menu-toggle" class="menu-toggle">
26+
<label for="menu-toggle" class="menu-btn">Menú</label>
2327

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>
28+
<nav class="nav">
29+
<ul class="list">
30+
<li><a class="btn" href="./projects.html">Proyectos</a></li>
31+
<li><a class="btn" href="#skills">Skills</a></li>
32+
<li><a class="btn" href="#contact">Contacto</a></li>
33+
</ul>
34+
</nav>
35+
</div>
3136
</header>
3237
<main>
3338
<iframe width="560" height="315" src="https://www.youtube.com/embed/t-T6lEYJHm8" title="Halo 3 Warthog Run"
@@ -36,30 +41,32 @@ <h1 class="sr-only">Halo</h1>
3641
allowfullscreen>
3742
</iframe>
3843
</main>
44+
<footer class="footer">
45+
<ul>
46+
<li>
47+
<a href="https://www.halostudios.com" target="_blank" rel="noopener noreferrer">
48+
<img src="./assets/links/Halo_Studios_Logo.png" alt="Halo Studios">
49+
</a>
50+
</li>
51+
<li>
52+
<a href="https://www.xbox.com" target="_blank" rel="noopener noreferrer">
53+
<img src="./assets/links/Xbox_Logo.png" alt="Halo on Xbox">
54+
</a>
55+
</li>
56+
<li>
57+
<a href="https://www.youtube.com/c/Halo" target="_blank" rel="noopener noreferrer">
58+
<img src="./assets/links/Youtube_Logo.png" alt="Halo on Youtube">
59+
</a>
60+
</li>
61+
<li>
62+
<a href="https://twitter.com/Halo" target="_blank" rel="noopener noreferrer">
63+
<img src="./assets/links/Twitter_Logo.png" alt="Halo on X">
64+
</a>
65+
</li>
66+
</ul>
67+
<p>2025 John-117. All rights Reserved.</p>
68+
</footer>
3969
</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>
70+
6471

6572
</html>

‎styles/banner.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,13 @@
1919
border-radius: 10px;
2020
}
2121

22+
.btn {
23+
font-size: clamp(1rem, 2vw, 1.5rem); /* Ajusta entre 1rem y 1.5rem según el ancho de la pantalla */
24+
padding: 0.75rem 1.5rem; /* Espaciado para mejor accesibilidad */
25+
text-align: center;
26+
display: inline-block;
27+
}
28+
2229
.banner-text {
2330
position: absolute;
2431
top: 10px;
@@ -31,3 +38,10 @@
3138
padding: 8px 16px;
3239
border-radius: 5px;
3340
}
41+
42+
@media (max-width: 768px) {
43+
.btn {
44+
font-size: 1rem; /* Reduce el tamaño en móviles */
45+
padding: 0.5rem 1rem;
46+
}
47+
}

‎styles/common.css‎

Lines changed: 53 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
:root {
2-
--bg-color: #36363b;
3-
--bg-color-header: #092a00;
4-
--bg-color-info: #104900;
5-
--bg-color-banner: #155f00;
6-
--bg-color-form: #2cc900;
7-
--bg-color-footer: #32e900;
8-
--main-text-color: #FFF;
9-
/* --main-text-color: #FFF;
2+
--bg-color: #25252ce8;
3+
--bg-color-header: #080809;
4+
--bg-color-info: #104900;
5+
--bg-color-banner: #155f00;
6+
--bg-color-form: #2cc900;
7+
8+
--bg-color-footer: #121921;
9+
--bg-color-footer-2: #b9b9b9;
10+
11+
12+
--main-text-color: #FFF;
13+
--input-bg-color: #767676;
14+
--border-color: #ccc;
15+
--placeholder-color: #acacac;
16+
--focus-color: #007bff;
17+
/*
1018
--main-brand-color: #e50914;
1119
--main-brand-color-light: #e44c54;
12-
--border-color: #4b5563;
20+
1321
--input-bg-color: #333; */
14-
font-size: 16px;
22+
font-size: 16px;
1523
}
1624

1725
@font-face {
@@ -23,16 +31,32 @@
2331

2432
body {
2533
font-family: 'Handel';
34+
color: var(--main-text-color);
35+
}
36+
37+
.info,
38+
.form {
39+
margin-bottom: 2rem;
40+
/* Ajusta el valor según sea necesario */
41+
}
42+
43+
.banner {
44+
margin-bottom: 2rem !important;
45+
/* Forzamos el margen */
46+
display: block;
2647
}
2748

2849
main {
29-
width: 80%;
30-
max-width: 800px;
50+
width: 90%; /* Reduce el ancho en pantallas pequeñas */
51+
max-width: 80%; /* Mantiene un límite en pantallas grandes */
3152
margin: auto;
53+
padding: 2rem 4rem 0rem; /* Mantiene un buen espaciado en pantallas grandes */
54+
background-color: var(--bg-color);
3255
}
3356

3457

3558

59+
3660
a {
3761
text-decoration: none;
3862
}
@@ -41,7 +65,11 @@ a {
4165
box-sizing: border-box;
4266
}
4367

44-
h1,h2,h3,h4,p {
68+
h1,
69+
h2,
70+
h3,
71+
h4,
72+
p {
4573
margin-top: 0;
4674
}
4775

@@ -62,13 +90,17 @@ p {
6290
width: 1px;
6391
}
6492

65-
.main-bg {
66-
background-color: var(--bg-color);
67-
color: var(--main-text-color);
93+
.main-bg{
94+
background-image: url('/assets/app/Wallpaper_3.jpg'); /* Reemplaza con la URL o ruta de tu imagen */
95+
background-size: cover; /* La imagen cubre todo el fondo */
96+
background-position: center; /* Centrada */
97+
background-repeat: no-repeat; /* Evita que se repita */
98+
background-attachment: fixed; /* Mantiene el fondo fijo al hacer scroll */
6899
}
69100

70-
.main > * {
71-
margin-bottom: 2rem;
72-
}
73-
74-
101+
@media (max-width: 768px) {
102+
main {
103+
width: 100%; /* Usa todo el ancho disponible */
104+
padding: 2rem; /* Reduce el padding en pantallas pequeñas */
105+
}
106+
}

‎styles/components.css‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,31 @@
1-
.form-element {
1+
.form-element {
22
display: flex;
33
flex-direction: column;
4-
margin-bottom: 1rem;
54

65
label {
76
margin-bottom: 0.5rem;
7+
font-weight: bold;
88
}
99

10-
input,
11-
textarea,
12-
select {
13-
border: none;
10+
input, textarea, select {
11+
border: 1px solid var(--border-color);
1412
padding: 1rem;
1513
border-radius: 5px;
1614
background-color: var(--input-bg-color);
1715
color: var(--main-text-color);
16+
transition: border 0.3s ease, box-shadow 0.3s ease;
17+
width: 100%; /* Ajuste para que no se rompan en resoluciones bajas */
18+
max-width: 100%;
19+
}
20+
21+
input::placeholder, textarea::placeholder {
22+
color: var(--placeholder-color);
23+
}
24+
25+
input:focus, textarea:focus, select:focus {
26+
border-color: var(--focus-color);
27+
box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
28+
outline: none;
1829
}
1930

2031
&.row {
@@ -33,8 +44,15 @@
3344
gap: 1rem;
3445
}
3546

47+
.grid-2x2, fieldset, textarea, .chbox{
48+
margin-bottom: 2rem;
49+
}
50+
3651
@media (max-width: 768px) {
3752
.grid-2x2 {
3853
grid-template-columns: 1fr;
3954
}
40-
}
55+
.form-element {
56+
width: 100%; /* Asegurar que los elementos del formulario ocupen todo el ancho disponible */
57+
}
58+
}

‎styles/footer.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
.footer {
2-
background-color: var(--bg-color-footer);
3-
display: flex;
4-
flex-direction: column;
2+
background: rgb(0,0,0);
3+
background: linear-gradient(0deg, rgba(0,0,0,1) 70%, rgba(27,34,41,1) 92%, rgba(49,69,87,0.7539390756302521) 96%, rgba(49,69,87,0) 100%);
4+
5+
flex-direction: column;
56
justify-content: center;
67
align-items: center;
78
width: 100%;
@@ -13,7 +14,7 @@
1314
padding: 15px;
1415
margin: 1rem 3rem;
1516
padding: 1rem 3rem;
16-
background-color: rgba(255,255,255,0.1);
17+
background-color: var(--bg-color-footer-2);
1718
border-radius: 10px;
1819
display: flex;
1920
gap: 15px;
@@ -60,5 +61,4 @@
6061
.footer ul {
6162
margin: 1rem 1rem;
6263
}
63-
}
64-
64+
}

0 commit comments

Comments
(0)

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