Skip to content

Commit 52f7ab9

Browse files
solygambassolygambas
committed
add menu slider & modal
1 parent d7fcfa2 commit 52f7ab9

File tree

4 files changed

+361
-0
lines changed

4 files changed

+361
-0
lines changed

‎64-menu slider modal/index.html

+143
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
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>Menu Slider & Modal</title>
14+
</head>
15+
<body>
16+
<nav>
17+
<div class="logo">
18+
<img
19+
src="https://randomuser.me/api/portraits/women/74.jpg"
20+
alt="user"
21+
/>
22+
</div>
23+
<ul>
24+
<li><a href="#">Home</a></li>
25+
<li><a href="#">Portfolio</a></li>
26+
<li><a href="#">Blog</a></li>
27+
<li><a href="#">Contact Me</a></li>
28+
</ul>
29+
</nav>
30+
31+
<header>
32+
<button class="toggle" id="toggle">
33+
<i class="fa fa-bars fa-2x"></i>
34+
</button>
35+
<h1>My Landing Page</h1>
36+
<p>
37+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, placeat.
38+
</p>
39+
<button class="cta-btn" id="open">Sign Up</button>
40+
</header>
41+
42+
<div class="container">
43+
<img
44+
src="https://images.unsplash.com/photo-1593642634367-d91a135587b5?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
45+
/>
46+
<h2>What is this landing page about?</h2>
47+
<p>
48+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia iure
49+
accusamus ab consectetur eos provident ipsa est perferendis architecto.
50+
Provident, quaerat asperiores. Quo esse minus repellat sapiente, impedit
51+
obcaecati necessitatibus.
52+
</p>
53+
<p>
54+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente optio
55+
officia ipsa. Cum dignissimos possimus et non provident facilis saepe!
56+
</p>
57+
58+
<h2>Tell Me More</h2>
59+
60+
<p>
61+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque
62+
delectus explicabo qui reprehenderit? Aspernatur ad similique minima
63+
accusamus maiores accusantium libero autem iusto reiciendis ullam
64+
impedit esse quibusdam, deleniti laudantium rerum beatae, deserunt nemo
65+
neque, obcaecati exercitationem sit. Earum.
66+
</p>
67+
68+
<h2>Benefits</h2>
69+
<ul>
70+
<li>Lifetime Access</li>
71+
<li>30 Day Money Back</li>
72+
<li>Tailored Customer Support</li>
73+
</ul>
74+
75+
<p>
76+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse quam
77+
nostrum, fugiat, itaque natus officia laborum dolorum id accusantium
78+
culpa architecto tenetur fuga? Consequatur provident rerum eius ratione
79+
dolor officiis doloremque minima optio dignissimos doloribus odio
80+
debitis vero cumque itaque excepturi a neque, expedita nulla earum
81+
accusamus repellat adipisci veritatis quam. Ipsum fugiat iusto pariatur
82+
consectetur quas libero dolor dolores dolorem, nostrum ducimus
83+
doloremque placeat accusamus iste, culpa quaerat consequatur?
84+
</p>
85+
</div>
86+
87+
<!-- Modal -->
88+
<div class="modal-container" id="modal">
89+
<div class="modal">
90+
<button class="close-btn" id="close">
91+
<i class="fa fa-times"></i>
92+
</button>
93+
<div class="modal-header"><h3>Sign Up</h3></div>
94+
<div class="modal-content">
95+
<p>Register with us to get offers, support and more</p>
96+
<form class="modal-form">
97+
<div>
98+
<label for="name">Name</label>
99+
<input
100+
type="text"
101+
name="name"
102+
id="name"
103+
placeholder="Enter Name"
104+
class="form-input"
105+
/>
106+
</div>
107+
<div>
108+
<label for="email">Email</label>
109+
<input
110+
type="email"
111+
name="email"
112+
id="email"
113+
placeholder="Enter Email"
114+
class="form-input"
115+
/>
116+
</div>
117+
<div>
118+
<label for="password">Password</label>
119+
<input
120+
type="password"
121+
id="password"
122+
placeholder="Enter Password"
123+
class="form-input"
124+
/>
125+
</div>
126+
<div>
127+
<label for="password2">Confirm Password</label>
128+
<input
129+
type="password"
130+
id="password2"
131+
placeholder="Confirm Password"
132+
class="form-input"
133+
/>
134+
</div>
135+
<input type="submit" value="Submit" class="submit-btn" />
136+
</form>
137+
</div>
138+
</div>
139+
</div>
140+
141+
<script src="script.js"></script>
142+
</body>
143+
</html>

‎64-menu slider modal/script.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const toggle = document.getElementById("toggle");
2+
const open = document.getElementById("open");
3+
const close = document.getElementById("close");
4+
const modal = document.getElementById("modal");
5+
6+
// Menu Slider
7+
toggle.addEventListener("click", () =>
8+
document.body.classList.toggle("show-nav")
9+
);
10+
11+
// Modal
12+
open.addEventListener("click", () => modal.classList.add("show-modal"));
13+
close.addEventListener("click", () => modal.classList.remove("show-modal"));
14+
window.addEventListener("click", (e) =>
15+
e.target == modal ? modal.classList.remove("show-modal") : false
16+
);

‎64-menu slider modal/style.css

+201
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
2+
3+
:root {
4+
--modal-duration: 1s;
5+
--primary-color: #111112;
6+
--secondary-color: #518676;
7+
--border-color: rgba(200, 255, 200, 0.1);
8+
--clear-color: #ebebec;
9+
--shadow-color: rgba(0, 0, 0, 0.3);
10+
--overlay-color: rgba(0, 0, 0, 0.6);
11+
}
12+
13+
* {
14+
box-sizing: border-box;
15+
}
16+
17+
body {
18+
font-family: "Lato", sans-serif;
19+
margin: 0;
20+
transition: transform 0.3s ease;
21+
}
22+
23+
body.show-nav {
24+
transform: translateX(200px); /* nav width */
25+
}
26+
27+
nav {
28+
background-color: var(--primary-color);
29+
border-right: 2px solid var(--border-color);
30+
color: var(--clear-color);
31+
position: fixed;
32+
top: 0;
33+
left: 0;
34+
width: 200px;
35+
height: 100vh;
36+
z-index: 100;
37+
transform: translateX(-100%);
38+
}
39+
40+
nav .logo {
41+
padding: 30px 0;
42+
text-align: center;
43+
}
44+
45+
nav .logo img {
46+
height: 75px;
47+
width: 75px;
48+
border-radius: 50%;
49+
}
50+
51+
nav ul {
52+
padding: 0;
53+
list-style-type: none;
54+
margin: 0;
55+
}
56+
57+
nav ul li {
58+
border-bottom: 2px solid var(--border-color);
59+
padding: 20px;
60+
}
61+
62+
nav ul li:first-of-type {
63+
border-top: 2px solid var(--border-color);
64+
}
65+
66+
nav ul li a {
67+
color: var(--clear-color);
68+
text-decoration: none;
69+
}
70+
71+
nav ul li a:hover {
72+
text-decoration: underline;
73+
}
74+
75+
header {
76+
background-color: var(--primary-color);
77+
color: #fff;
78+
font-size: 130%;
79+
position: relative;
80+
padding: 40px 15px;
81+
text-align: center;
82+
}
83+
84+
header h1 {
85+
margin: 0;
86+
}
87+
88+
header p {
89+
margin: 30px 0;
90+
}
91+
92+
button,
93+
input[type="submit"] {
94+
background-color: var(--secondary-color);
95+
border: 0;
96+
border-radius: 5px;
97+
color: #fff;
98+
cursor: pointer;
99+
padding: 8px 12px;
100+
}
101+
102+
button:focus {
103+
outline: none;
104+
}
105+
106+
.toggle {
107+
background-color: var(--shadow-color);
108+
position: absolute;
109+
top: 20px;
110+
left: 20px;
111+
}
112+
113+
.cta-btn {
114+
padding: 12px 30px;
115+
font-size: 20px;
116+
}
117+
118+
.container {
119+
padding: 15px;
120+
margin: 0 auto;
121+
max-width: 100%;
122+
width: 800px;
123+
}
124+
125+
.container img {
126+
width: 100%;
127+
}
128+
129+
.modal-container {
130+
background-color: var(--overlay-color);
131+
position: fixed;
132+
top: 0;
133+
right: 0;
134+
bottom: 0;
135+
left: 0;
136+
display: none;
137+
}
138+
139+
.modal-container.show-modal {
140+
display: block;
141+
}
142+
143+
.modal {
144+
background-color: var(--clear-color);
145+
border-radius: 5px;
146+
box-shadow: 0 0 10px var(--shadow-color);
147+
position: absolute;
148+
overflow: hidden;
149+
top: 50%;
150+
left: 50%;
151+
transform: translate(-50%, -50%);
152+
max-width: 100%;
153+
width: 400px;
154+
animation-name: modalopen;
155+
animation-duration: var(--modal-duration);
156+
}
157+
158+
.modal-header {
159+
background: var(--primary-color);
160+
color: var(--clear-color);
161+
padding: 15px;
162+
}
163+
164+
.modal-header h3 {
165+
margin: 0;
166+
}
167+
168+
.modal-content {
169+
padding: 20px;
170+
}
171+
172+
.modal-form div {
173+
margin: 15px 0;
174+
}
175+
176+
.modal-form label {
177+
display: block;
178+
margin-bottom: 5px;
179+
}
180+
181+
.modal-form .form-input {
182+
padding: 8px;
183+
width: 100%;
184+
}
185+
186+
.close-btn {
187+
background: transparent;
188+
font-size: 25px;
189+
position: absolute;
190+
top: 0;
191+
right: 0;
192+
}
193+
194+
@keyframes modalopen {
195+
from {
196+
opacity: 0;
197+
}
198+
to {
199+
opacity: 1;
200+
}
201+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
| 61 | [Custom Video Player](https://github.com/solygambas/html-css-fifty-projects/tree/master/61-custom%20video%20player) | [Live Demo](https://codepen.io/solygambas/full/mdOQadY) |
7070
| 62 | [Exchange Rate Calculator](https://github.com/solygambas/html-css-fifty-projects/tree/master/62-exchange%20rate%20calculator) | [Live Demo](https://codepen.io/solygambas/full/abBPJBG) |
7171
| 63 | [DOM Array Methods](https://github.com/solygambas/html-css-fifty-projects/tree/master/63-DOM%20array%20methods) | [Live Demo](https://codepen.io/solygambas/full/NWbeXYR) |
72+
| 64 | [Menu Slider & Modal](https://github.com/solygambas/html-css-fifty-projects/tree/master/64-menu%20slider%20modal) | [Live Demo](https://codepen.io/solygambas/full/MWbLeKd) |
7273

7374
Mainly based on 2 courses by Brad Traversy (2020):
7475

0 commit comments

Comments
 (0)