Skip to content

Commit cfc83cb

Browse files
CodingBDXCodingBDX
authored
Add files via upload
1 parent 3c7b94b commit cfc83cb

File tree

3 files changed

+200
-0
lines changed

3 files changed

+200
-0
lines changed

‎rotation-navigator/index.html

+60
Original file line numberDiff line numberDiff line change
@@ -1 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
13

4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>rotation navigation</title>
9+
<link rel="stylesheet" href="style.css">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
11+
</head>
12+
13+
<body>
14+
<div class="container ">
15+
<div class="circle-container">
16+
<div class="circle">
17+
<button id="close">
18+
<i class="fas fa-window-close"></i>
19+
20+
</button>
21+
<button id="open">
22+
<i class="fas fa-bars"></i>
23+
24+
</button>
25+
</div>
26+
</div>
27+
<div class="content">
28+
<h1>puppy whooo</h1>
29+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatum, modi dolore optio eaque
30+
consequatur ea quos dolores laudantium, odit tempore libero, asperiores dignissimos ipsam deleniti
31+
incidunt
32+
repellat sit voluptas corporis. Est quidem, dicta nihil fugiat et blanditiis. Beatae sint perspiciatis
33+
voluptatum repellendus ea, asperiores assumenda hic eveniet sed alias omnis reiciendis dignissimos dolor
34+
magni repellat impedit facilis quam. Quia inventore dolorum ratione libero atque voluptates vero
35+
dolorem!
36+
Velit, necessitatibus voluptatibus maxime odit at placeat dolor illum illo eum enim. Neque culpa eaque
37+
quia,
38+
quae consequatur cumque deserunt corporis officiis voluptatibus obcaecati ipsam illum asperiores facilis
39+
molestias doloribus consequuntur distinctio!</p>
40+
<h3>my dog</h3>
41+
<img src="https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80"
42+
alt="" srcset="">
43+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit, alias! Nihil, laborum. Delectus maxime
44+
corporis doloremque labore, nisi ullam pariatur! Aspernatur iste reprehenderit est, tempora a
45+
distinctio,
46+
eos, quae accusamus nulla qui sunt iusto quia magni iure aliquam at voluptatibus?</p>
47+
</div>
48+
</div>
49+
<nav>
50+
<ul>
51+
<li><i class="fas fa-home"></i>home</li>
52+
<li><i class="fas fa-user-alt"></i>about</li>
53+
<li><i class="fas fa-envelope"></i>contact</li>
54+
55+
</ul>
56+
</nav>
57+
58+
<script src="script.js"></script>
59+
</body>
60+
61+
</html>

‎rotation-navigator/script.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
const container = document.querySelector('.container')
3+
const open = document.getElementById('open')
4+
const close = document.getElementById('close')
5+
6+
7+
8+
open.addEventListener('click', () => {
9+
container.classList.add('show-nav')
10+
11+
})
12+
13+
close.addEventListener('click', () => {
14+
container.classList.remove('show-nav')
15+
})

‎rotation-navigator/style.css

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

0 commit comments

Comments
 (0)