Skip to content

Commit 9558137

Browse files
committed
bugs fixed
1 parent a196830 commit 9558137

File tree

5 files changed

+108
-47
lines changed

5 files changed

+108
-47
lines changed

css/gradients.css

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
display: flex;
1111
flex-direction: column;
1212
justify-content: center;
13-
height: 500px;
14-
width: 500px;
15-
position: relative;
13+
height: 38vw;
14+
width: 38vw;
15+
position: absolute;
1616
right: 0;
1717
}
1818

@@ -25,10 +25,10 @@
2525
.yellow {
2626
background-color: var(--yellow);
2727
position: absolute;
28-
top: 200px;
29-
left: 100px;
30-
height: 200px;
31-
width: 200px;
28+
top: 14vw;
29+
left: 3vw;
30+
height: 15vw;
31+
width: 14vw;
3232

3333
animation: yellow 8s infinite ease;
3434
}
@@ -37,41 +37,41 @@
3737
background-color: var(--green);
3838
position: absolute;
3939
top: 80px;
40-
right: -20px;
41-
height: 200px;
42-
width: 250px;
40+
right: -1px;
41+
height: 14vw;
42+
width: 15vw;
4343

4444
animation: green 8s infinite ease;
4545
}
4646

4747
.blue {
4848
background-color: var(--blue);
49-
position: absolute;
49+
position: relative;
5050
right: 0;
5151
top: 300px;
52-
height: 250px;
53-
width: 200px;
52+
height: 16vw;
53+
width: 14vw;
5454

5555
animation: blue 8s infinite linear;
5656
}
5757

5858
@keyframes yellow {
59-
0% {top: 200px; left: 100px; transform: scale(1);}
60-
30% {top: 300px; left: 150px; transform: scale(1.2);}
61-
60% {top: 100px; left: 200px; transform: scale(1.3);}
62-
100% {top: 200px; left: 100px; transform: scale(1);}
59+
0% {top: 14vw; left: 5vw; transform: scale(1);}
60+
30% {top: 22vw; left: 9vw; transform: scale(1.2);}
61+
60% {top: 6vw; left: 13vw; transform: scale(1.3);}
62+
100% {top: 14vw; left: 5vw; transform: scale(1);}
6363
}
6464

6565
@keyframes green {
66-
0% {top: 80px; right: -20px; transform: scale(1.2);}
67-
30% {top: 300px; right: -20px;transform: scale(1);}
68-
60% {top: 200px; right: 100px;transform: scale(1);}
69-
100% {top: 80px; right: -20px; transform: scale(1.2);}
66+
0% {top: 3vw; right: -1vw; transform: scale(1.2);}
67+
30% {top: 22vw; right: -1vw;transform: scale(1);}
68+
60% {top: 14vw; right: 6vw;transform: scale(1);}
69+
100% {top: 80px; right: -1vw; transform: scale(1.2);}
7070
}
7171

7272
@keyframes blue {
73-
0% {top: 250px; right: 0px; transform: scale(1);}
74-
30% {top: 150px; right: 150px;transform: scale(1.4);}
75-
60% {top: 250px; right: 100px;transform: scale(1);}
76-
100% {top: 250px; right: 0px; transform: scale(1);}
73+
0% {top: 18vw; right: 0vw; transform: scale(1);}
74+
30% {top: 10vw; right: 10vw;transform: scale(1.4);}
75+
60% {top: 18vw; right: 6vw;transform: scale(1);}
76+
100% {top: 18vw; right: 0vw; transform: scale(1);}
7777
}

css/style.css

Lines changed: 52 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,17 @@
2424

2525
/* Nav */
2626

27-
nav {
27+
.nav {
2828
display: flex;
29-
padding: 2% 6%;
29+
padding: 3% 6%;
3030
justify-content: space-between;
3131
align-items: center;
32+
background-color: rgba(255, 255, 255, 0.9);
33+
/* Stick to top */
34+
position: fixed;
35+
top: 0;
36+
width: 100%;
37+
z-index: 100;
3238
}
3339

3440
.nav-links {
@@ -39,7 +45,7 @@ nav {
3945

4046
.nav-links li {
4147
display: inline-block;
42-
padding: 8px 12px;
48+
padding-left: 12px;
4349
}
4450

4551
.nav-links a {
@@ -59,10 +65,49 @@ nav {
5965
background-color: var(--fontColor1);
6066
}
6167

62-
.form-button:hover {
68+
.button:hover {
6369
background-color: #767676;
6470
}
6571

72+
/* Normal Screen */
73+
.icon-class {
74+
display: none;
75+
}
76+
77+
/* Small Screen */
78+
79+
@media screen and (max-width: 650px) {
80+
81+
.nav-links {
82+
display: flex;
83+
flex-direction: column;
84+
position: absolute;
85+
top: 100%;
86+
right: -100%;
87+
width: 100%;
88+
height: 100vh;
89+
background-color: rgba(255, 255, 255, 0.9);
90+
transition: 0.3s;
91+
padding: 5% 2%;
92+
}
93+
94+
.nav-links li {
95+
margin-bottom: 5%;
96+
}
97+
98+
.nav-links li a {
99+
font-size: 25px;
100+
}
101+
102+
.open {
103+
right: 0%;
104+
}
105+
106+
.icon-class {
107+
display: flex;
108+
}
109+
}
110+
66111
/* Header body */
67112

68113
.header-body {
@@ -127,10 +172,9 @@ nav {
127172
}
128173

129174
/* Footer */
130-
.footer * {
131-
}
175+
132176
.footer {
133-
display: flex;
177+
display: flex;
134178
flex-direction: row;
135179
justify-content: space-around;
136180
flex-wrap: wrap;
@@ -139,7 +183,7 @@ nav {
139183
width: 100%;
140184
column-gap: 10px;
141185
background-color: var(--color1);
142-
186+
143187

144188
}
145189
.footer-socials {

index.html

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,38 +5,45 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<link rel="stylesheet" href="./css/style.css" class="res">
77
<link rel="stylesheet" href="./css/gradients.css" class="res">
8+
<script src="https://kit.fontawesome.com/094d8d7db9.js" crossorigin="anonymous"></script>
89
<!-- Poppins Font -->
910
<link rel="preconnect" href="https://fonts.googleapis.com">
1011
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1112
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
1213
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
13-
1414
<title>ORC</title>
1515
</head>
1616
<body>
17+
18+
<div class="nav" id="nav">
19+
<a class = "logo" href="index.html">ORC</a> <!-- Aquí va el logo -->
20+
<ul class="nav-links">
21+
<li><a href="#" class="nav-button">Equipo</a></li>
22+
<li><a href="retos.html" class="nav-button">Retos</a></li>
23+
<li><a href="#" class="nav-button">Calendario</a></li>
24+
<li><a href="https://docs.google.com/forms/d/1-GG4jfs8V_4SNcSYxb2LY-yjqomBWsSHNVS87-mgDyQ/edit" target="_blank" class="form-button">Apúntate</a></li>
25+
</ul>
26+
<label for="check" class="icon-class">
27+
<i class="fas fa-bars" id="btn"></i>
28+
<!-- <i class="fas fa-times" id="cancel"></i> -->
29+
</label>
30+
</div>
31+
1732
<section class="header">
18-
<nav>
19-
<a href="index.html">ORC</a> <!-- Aquí va el logo -->
20-
<ul class="nav-links">
21-
<li><a href="#" class="nav-button">Equipo</a></li>
22-
<li><a href="retos.html" class="nav-button">Retos</a></li>
23-
<li><a href="#" class="nav-button">Calendario</a></li>
24-
<li><a href="https://docs.google.com/forms/d/1-GG4jfs8V_4SNcSYxb2LY-yjqomBWsSHNVS87-mgDyQ/edit" target="_blank" class="form-button">Apúntate</a></li>
25-
</ul>
26-
</nav>
2733
<div class="header-body">
2834
<div class="titles">
29-
<h1>Olympic Robot <br> Champion</h1>
35+
<h1>Olympic Robotic <br> Challenge</h1>
3036
<p>Bienvenidos a una nueva edición del ORC, una colaboración de Makers y ACM.</p>
3137
<!-- <a href=""#>Apúntate</a> -->
3238
</div>
33-
<div class="blob-cont">
39+
<!-- <div class="blob-cont">
3440
<div class="yellow blob"></div>
3541
<div class="blue blob"></div>
3642
<div class="green blob"></div>
37-
</div>
43+
</div> -->
3844
</div>
3945
</section>
46+
4047
<section class="second-section">
4148
<h3 class="second-section-pregunta">
4249
¿Qué es Makers UPV?
@@ -61,12 +68,14 @@ <h3 class="second-section-pregunta">¿Qué es ACM-Makers ORC?</h3>
6168

6269
</p>
6370

71+
72+
6473
</section>
6574
<section class="third-section">
6675

6776
</section>
6877
<section class="footer">
69-
<div class="footer-socials">
78+
<div class="footer-socials">
7079
<p class="titles footer-title">Información</p>
7180
<ul>
7281
<li><a href="#">Equipos</a></li>
@@ -108,5 +117,7 @@ <h3 class="second-section-pregunta">¿Qué es ACM-Makers ORC?</h3>
108117
<div class="logos ">
109118
</div>
110119
</section>
120+
121+
<script src="./js/index.js"></script>
111122
</body>
112123
</html>

js/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
let popup = document.querySelector(".nav-links");
2+
let open = document.getElementById("btn");
3+
4+
open.onclick = () => {
5+
popup.classList.toggle('open');
6+
}

js/src.js

Whitespace-only changes.

0 commit comments

Comments
 (0)