Skip to content

Commit ebadcfe

Browse files
solygambassolygambas
committed
add rotating navigation
1 parent d12c142 commit ebadcfe

File tree

3 files changed

+210
-0
lines changed

3 files changed

+210
-0
lines changed

‎03-rotating navigation/index.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Rotating Navigation</title>
14+
</head>
15+
<body>
16+
<div class="container">
17+
<div class="circle-container">
18+
<div class="circle">
19+
<button id="close">
20+
<i class="fas fa-times"></i>
21+
</button>
22+
<button id="open">
23+
<i class="fas fa-bars"></i>
24+
</button>
25+
</div>
26+
</div>
27+
<div class="content">
28+
<h1>Amazing Article</h1>
29+
<small>John Doe</small>
30+
<p>
31+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
32+
repellendus nostrum harum, quis cupiditate molestiae, voluptates quam
33+
beatae odit autem incidunt voluptatibus? Provident, suscipit. Iusto
34+
facere dolorum quis asperiores illo earum vel sit modi dicta nulla?
35+
Est, odio quibusdam quidem earum magni et placeat voluptate officia
36+
non inventore eaque optio dolores accusantium similique repudiandae
37+
alias temporibus quae sequi quam quia sapiente! Dignissimos esse
38+
possimus numquam laborum nemo minus, sequi doloribus porro quia,
39+
fugiat aperiam optio dolores? Nemo quia adipisci reiciendis provident?
40+
Architecto molestias qui a ut placeat, dolorum similique fuga facilis
41+
modi suscipit perferendis blanditiis temporibus iusto repudiandae
42+
ipsam officiis.
43+
</p>
44+
<h2>My Subtitle</h2>
45+
<img
46+
src="https://images.unsplash.com/photo-1610308354580-0108c064a578?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80"
47+
/>
48+
<p>
49+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti
50+
excepturi est odio, veniam earum pariatur unde culpa, libero deserunt
51+
iure eligendi dolorem aperiam enim deleniti quibusdam omnis
52+
repudiandae dolor distinctio numquam dicta magni? Harum hic dolorem
53+
veniam, dolore minima earum blanditiis rerum similique illum quibusdam
54+
culpa soluta ullam nesciunt repudiandae dolor! Exercitationem
55+
repellendus, nostrum illo commodi est dignissimos veniam numquam,
56+
consectetur fugiat doloremque soluta odio enim iusto repudiandae
57+
tenetur aliquid voluptatem. Deserunt nam praesentium atque.
58+
</p>
59+
</div>
60+
</div>
61+
<nav>
62+
<ul>
63+
<li><i class="fas fa-home"></i> Home</li>
64+
<li><i class="fas fa-user-alt"></i> About</li>
65+
<li><i class="fas fa-envelope"></i> Contact</li>
66+
</ul>
67+
</nav>
68+
<script src="script.js"></script>
69+
</body>
70+
</html>

‎03-rotating navigation/script.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const open = document.getElementById("open");
2+
const close = document.getElementById("close");
3+
const container = document.querySelector(".container");
4+
5+
open.addEventListener("click", () => container.classList.add("show-nav"));
6+
close.addEventListener("click", () => container.classList.remove("show-nav"));

‎03-rotating navigation/style.css

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Lato", sans-serif;
9+
background-color: #333;
10+
color: #222;
11+
overflow-x: hidden;
12+
margin: 0;
13+
}
14+
15+
.container {
16+
background-color: #fafafa;
17+
transform-origin: top left;
18+
transition: transform 0.5s linear;
19+
width: 100vw;
20+
min-height: 100vh;
21+
padding: 50px;
22+
}
23+
24+
.container.show-nav {
25+
transform: rotate(-20deg);
26+
}
27+
28+
.circle-container {
29+
position: fixed;
30+
top: -100px;
31+
left: -100px;
32+
}
33+
34+
.circle {
35+
background-color: #ff7979;
36+
height: 200px;
37+
width: 200px;
38+
border-radius: 50%;
39+
position: relative;
40+
transition: transform 0.5s linear;
41+
}
42+
43+
.circle button {
44+
cursor: pointer;
45+
position: absolute;
46+
top: 50%;
47+
left: 50%;
48+
height: 100px;
49+
background: transparent;
50+
border: 0;
51+
font-size: 26px;
52+
color: #fff;
53+
}
54+
55+
.circle button:focus {
56+
outline: none;
57+
}
58+
59+
.circle button#open {
60+
left: 60%;
61+
}
62+
63+
.circle button#close {
64+
top: 60%;
65+
transform: rotate(90deg);
66+
transform-origin: top left;
67+
}
68+
69+
.container.show-nav + nav li {
70+
transform: translateX(0);
71+
transition-delay: 0.3s;
72+
}
73+
74+
.container.show-nav .circle {
75+
transform: rotate(-70deg);
76+
}
77+
78+
nav {
79+
position: fixed;
80+
bottom: 40px;
81+
left: 0;
82+
z-index: 100;
83+
}
84+
85+
nav ul {
86+
list-style-type: none;
87+
padding-left: 30px;
88+
}
89+
90+
nav ul li {
91+
text-transform: uppercase;
92+
color: #fff;
93+
margin: 40px 0;
94+
transform: translateX(-100%);
95+
transition: transform 0.4s ease-in;
96+
}
97+
98+
nav ul li i {
99+
font-size: 20px;
100+
margin-right: 10px;
101+
}
102+
103+
nav ul li + li {
104+
margin-left: 15px;
105+
transform: translateX(-150%);
106+
}
107+
108+
nav ul li + li + li {
109+
margin-left: 30px;
110+
transform: translateX(-200%);
111+
}
112+
113+
.content {
114+
max-width: 1000px;
115+
margin: 50px auto;
116+
}
117+
118+
.content h1 {
119+
margin: 0;
120+
}
121+
122+
.content small {
123+
color: #555;
124+
font-style: italic;
125+
}
126+
127+
.content p {
128+
color: #333;
129+
line-height: 1.5;
130+
}
131+
132+
.content img {
133+
max-width: 100%;
134+
}

0 commit comments

Comments
 (0)