Skip to content

Commit 3de0d4a

Browse files
MDJAminMDJAmin
committed
Clean codes 👾 Enjoy!!
1 parent 993c8eb commit 3de0d4a

File tree

2 files changed

+118
-105
lines changed

2 files changed

+118
-105
lines changed

‎css/style.css‎

Lines changed: 79 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,84 @@
1-
*{
2-
margin: 0;
3-
padding: 0;
4-
list-style: none;
5-
text-decoration: none;
6-
box-sizing: border-box;
7-
}
8-
body{
9-
min-height: 100vh;
10-
background: url('laptop.jpg');
11-
background-size: cover;
12-
background-repeat: no-repeat;
13-
background-position: center;
14-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15-
}
16-
nav{
17-
background-color: white;
18-
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
19-
}
20-
nav ul{
21-
width: 100%;
22-
list-style: none;
23-
display: flex;
24-
justify-content: flex-end;
25-
align-items: center;
26-
}
27-
nav li{
28-
height: 50px;
29-
}
30-
nav a{
31-
height: 100%;
32-
padding: 0 30px;
33-
text-decoration: none;
34-
display: flex;
35-
align-items: center;
36-
color: black;
37-
}
38-
nav a:hover{
39-
background-color: #f0f0f0;
40-
}
41-
nav li:first-child{
42-
margin-right: auto;
43-
}
44-
.sidebar{
45-
position: fixed;
46-
top: 0;
47-
right: 0;
48-
height: 100vh;
49-
width: 250px;
50-
background-color: rgba(255, 255, 255, 0.15);
51-
backdrop-filter: blur(12px);
52-
box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
53-
list-style: none;
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
list-style: none;
5+
text-decoration: none;
6+
box-sizing: border-box;
7+
}
8+
body {
9+
min-height: 100vh;
10+
background: url("laptop.jpg");
11+
background-size: cover;
12+
background-repeat: no-repeat;
13+
background-position: center;
14+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
15+
}
16+
nav {
17+
background-color: white;
18+
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
19+
}
20+
nav ul {
21+
width: 100%;
22+
list-style: none;
23+
display: flex;
24+
justify-content: flex-end;
25+
align-items: center;
26+
}
27+
nav li {
28+
height: 50px;
29+
}
30+
nav a {
31+
height: 100%;
32+
padding: 0 30px;
33+
text-decoration: none;
34+
display: flex;
35+
align-items: center;
36+
color: black;
37+
}
38+
39+
nav a:hover {
40+
background-color: #f0f0f0;
41+
}
42+
nav li:first-child {
43+
margin-right: auto;
44+
}
45+
.sidebar {
46+
position: fixed;
47+
top: 0;
48+
right: 0;
49+
height: 100vh;
50+
width: 250px;
51+
background-color: rgba(255, 255, 255, 0.15);
52+
backdrop-filter: blur(12px);
53+
box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
54+
list-style: none;
55+
display: none;
56+
flex-direction: column;
57+
align-items: flex-start;
58+
justify-content: flex-start;
59+
}
60+
.sidebar li {
61+
width: 100%;
62+
}
63+
.sidebar a {
64+
width: 100%;
65+
}
66+
.menu-button {
67+
display: none;
68+
}
69+
@media (max-width: 800px) {
70+
.hideOnMobile {
5471
display: none;
55-
flex-direction: column;
56-
align-items: flex-start;
57-
justify-content: flex-start;
5872
}
59-
.sidebar li{
60-
width: 100%;
73+
.menu-button {
74+
display: block;
6175
}
62-
.sidebar a{
76+
}
77+
@media (max-width: 400px) {
78+
.sidebar {
6379
width: 100%;
6480
}
65-
.menu-button{
66-
display: none;
67-
}
68-
@media(max-width: 800px){
69-
.hideOnMobile{
70-
display: none;
71-
}
72-
.menu-button{
73-
display: block;
74-
}
75-
}
76-
@media(max-width: 400px){
77-
.sidebar{
78-
width: 100%;
79-
}
80-
}
81-
.Hero-bg{
82-
width: 100%;
83-
}
81+
}
82+
.Hero-bg {
83+
width: 100%;
84+
}

‎index.html‎

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,48 @@
88
</head>
99
<body>
1010
<nav>
11-
<ul class="sidebar">
12-
<li><a href="#" onclick=hideSidebar()><img src="assets/close_FILL0_wght400_GRAD0_opsz48.svg" alt="Close-icon"></a></li>
13-
<li><a href="#">Blog</a></li>
14-
<li><a href="#">Products</a></li>
15-
<li><a href="#">About</a></li>
16-
<li><a href="#">Forum</a></li>
17-
<li><a href="#">Login</a></li>
18-
</ul>
19-
<ul>
20-
<li><a href="#">A~Shop</a></li>
21-
<li class="hideOnMobile"><a href="#">Blog</a></li>
22-
<li class="hideOnMobile"><a href="#">Products</a></li>
23-
<li class="hideOnMobile"><a href="#">About</a></li>
24-
<li class="hideOnMobile"><a href="#">Forum</a></li>
25-
<li class="hideOnMobile"><a href="#">Login</a></li>
26-
<li class="menu-button" onclick=showSidebar()><a href="#"><img src="assets/menu_FILL0_wght400_GRAD0_opsz48.svg" alt="Menu-icon"></a></li>
27-
</ul>
11+
<ul class="sidebar">
12+
<li>
13+
<a href="#" onclick="hideSidebar()"
14+
><img
15+
src="assets/close_FILL0_wght400_GRAD0_opsz48.svg"
16+
alt="Close-icon"
17+
/></a>
18+
</li>
19+
<li><a href="#">Blog</a></li>
20+
<li><a href="#">Products</a></li>
21+
<li><a href="#">About</a></li>
22+
<li><a href="#">Forum</a></li>
23+
<li><a href="#">Login</a></li>
24+
</ul>
25+
<ul>
26+
<li><a href="#">A~Shop</a></li>
27+
<li class="hideOnMobile"><a href="#">Blog</a></li>
28+
<li class="hideOnMobile"><a href="#">Products</a></li>
29+
<li class="hideOnMobile"><a href="#">About</a></li>
30+
<li class="hideOnMobile"><a href="#">Forum</a></li>
31+
<li class="hideOnMobile"><a href="#">Login</a></li>
32+
<li class="menu-button" onclick="showSidebar()">
33+
<a href="#"
34+
><img
35+
src="assets/menu_FILL0_wght400_GRAD0_opsz48.svg"
36+
alt="Menu-icon"
37+
/></a>
38+
</li>
39+
</ul>
2840
</nav>
2941
<main>
30-
<img class="Hero-bg" src="assets/laptop.jpg" alt="Hero-img">
42+
<img class="Hero-bg" src="assets/laptop.jpg" alt="Hero-img" />
3143
</main>
3244
<script>
33-
function showSidebar(){
34-
const sidebar = document.querySelector('.sidebar')
35-
sidebar.style.display = 'flex'
36-
}
37-
function hideSidebar(){
38-
const sidebar = document.querySelector('.sidebar')
39-
sidebar.style.display = 'none'
40-
}
45+
function showSidebar() {
46+
const sidebar = document.querySelector(".sidebar");
47+
sidebar.style.display = "flex";
48+
}
49+
function hideSidebar() {
50+
const sidebar = document.querySelector(".sidebar");
51+
sidebar.style.display = "none";
52+
}
4153
</script>
42-
</body>
54+
</body>
4355
</html>

0 commit comments

Comments
 (0)