Skip to content

Commit dc9f6db

Browse files
tajulafreentajulafreen
authored
Merge pull request #3 from tajulafreen/rotating-navigation
50 Projects : Rotating navigation
2 parents 5c3247a + 9f4574a commit dc9f6db

File tree

6 files changed

+193
-13
lines changed

6 files changed

+193
-13
lines changed

‎.stylelintrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@
1717
"csstree/validator": true
1818
},
1919
"ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
20-
}
20+
}

‎RotatingNavigation/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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+
<title>Rotating Navigation</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
9+
</head>
10+
<body>
11+
<div class="container ">
12+
<div class="circle-container">
13+
<div class="circle">
14+
<button id="close" type="button">
15+
<i class="fa fa-times"></i>
16+
</button>
17+
<button id="open" type="button">
18+
<i class="fa fa-bars"></i>
19+
</button>
20+
21+
</div>
22+
</div>
23+
<div class="content">
24+
<h1 class="heading">Amazing Article</h1>
25+
<small>Florin Pop</small>
26+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint consectetur omnis eum mollitia ipsam suscipit quas numquam quis quae laboriosam? Adipisci porro est ut odio minima, veritatis, reprehenderit facilis laboriosam temporibus provident unde. Deserunt accusantium quod nobis obcaecati consequuntur error, ut libero saepe, aspernatur, quia delectus fugiat sint possimus doloremque minima ab. Perferendis soluta voluptate accusantium corrupti nihil? Odit blanditiis laboriosam error sequi vitae expedita, saepe, hic fugit doloremque nihil quibusdam? Eius aspernatur ex, voluptatem soluta cupiditate, architecto dolore iusto exercitationem a sit ea illo alias, dicta ut! Minima, molestias ipsum quas eos blanditiis alias temporibus assumenda minus autem sit.</p>
27+
<h3>My Cat</h3>
28+
<img src="https://s.w-x.co/util/image/w/in-cat_blinking.gif.gif?crop=16:9&width=980&format=pjpg&auto=webp&quality=60" alt="mycat" >
29+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic sed velit, commodi molestiae excepturi ab maiores ex fuga incidunt impedit, laudantium rem doloremque, suscipit esse vel ullam. Omnis, rem deleniti. Repellendus quos repellat maiores perferendis, laudantium dolorem culpa ipsam voluptatem sit labore quis quasi illum velit nihil deserunt in accusantium praesentium sunt nobis dolore neque rem modi! Veritatis, quo quas facere tenetur laboriosam explicabo, corrupti ad, similique quaerat amet impedit repellendus. Voluptate eius omnis quibusdam.</p>
30+
31+
</div>
32+
</div>
33+
<nav>
34+
<ul>
35+
<li><i class="fa fa-home"> Home</i></li>
36+
<li><i class="fa fa-user"> About</i></li>
37+
<li><i class="fa fa-envelope"> Contact</i></li>
38+
</ul>
39+
</nav>
40+
<script src="script.js"></script>
41+
</body>
42+
</html>

‎RotatingNavigation/script.js‎

Lines changed: 6 additions & 0 deletions
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'));

‎RotatingNavigation/style.css‎

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

‎package-lock.json‎

Lines changed: 11 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "50-projects-hcj",
2+
"name": "50projects-html-css-javascript",
33
"version": "1.0.0",
44
"description": "",
55
"main": "index.js",

0 commit comments

Comments
 (0)