Skip to content

Commit 2ab528b

Browse files
alirezatayebinejadalirezatayebinejad
committed
header section completed
1 parent 5451a0c commit 2ab528b

2 files changed

Lines changed: 121 additions & 49 deletions

File tree

‎index.html‎

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,49 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Ecommerce website</title>
8-
<link rel="stylesheet" href="style.css">
9-
</head>
10-
<body>
11-
8+
<link rel="stylesheet" href="style.css" />
9+
<script
10+
src="https://kit.fontawesome.com/0e53af926d.js"
11+
crossorigin="anonymous"
12+
></script>
13+
</head>
14+
<body>
1215
<!--header section-->
1316

1417
<header>
15-
18+
<div id="header">
19+
<div class="header-logo">
20+
<a href="indext.html"><img src="images/logo.png" alt="" /></a>
21+
</div>
22+
<div class="header-list">
23+
<nav class="header-list-nav">
24+
<ul>
25+
<li><a class="active" href="index.html">Home</a></li>
26+
<li><a href="shop.html">Shop</a></li>
27+
<li><a href="blog.html">Blog</a></li>
28+
<li><a href="about.html">About</a></li>
29+
<li><a href="contact.html">Contact</a></li>
30+
</ul>
31+
</nav>
32+
<div class="header-list-icon">
33+
<a href=""><i class="fa fa-bag-shopping"></i></a>
34+
</div>
35+
</div>
36+
</div>
1637
</header>
1738

1839
<!--main section-->
1940

20-
<main>
21-
22-
</main>
41+
<main></main>
2342

2443
<!--footer section-->
2544

26-
<footer>
27-
28-
</footer>
29-
30-
31-
45+
<footer></footer>
3246

3347
<script src="script.js"></script>
34-
</body>
35-
</html>
48+
</body>
49+
</html>

‎style.css‎

Lines changed: 87 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,100 @@
22

33
/* global styles */
44

5-
*{
6-
margin: 0;
7-
padding: 0;
8-
box-sizing: border-box;
9-
font-family: 'League Spartan', sans-serif;
5+
* {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
font-family: "League Spartan", sans-serif;
1010
}
1111

12-
h1{
13-
font-size:50px;
14-
line-height: 64px;
15-
color:#222;
12+
h1 {
13+
font-size: 50px;
14+
line-height: 64px;
15+
color: #222;
1616
}
17-
h2{
18-
font-size:46px;
19-
line-height: 54px;
20-
color:#222;
17+
h2 {
18+
font-size: 46px;
19+
line-height: 54px;
20+
color: #222;
2121
}
22-
h4{
23-
font-size:20px;
24-
color:#222;
22+
h4 {
23+
font-size: 20px;
24+
color: #222;
2525
}
26-
h6{
27-
font-weight: 700;
28-
font-size: 12px;
26+
h6 {
27+
font-weight: 700;
28+
font-size: 12px;
2929
}
30-
p{
31-
font-size: 16px;
32-
color: #465b52;
33-
margin:15px 0 20px 0;
30+
p {
31+
font-size: 16px;
32+
color: #465b52;
33+
margin: 15px 0 20px 0;
3434
}
35-
.section-p1{
36-
padding: 40px 0;
35+
.section-p1 {
36+
padding: 40px 0;
3737
}
38-
.section-m1{
39-
margin: 40px 0;
38+
.section-m1 {
39+
margin: 40px 0;
4040
}
41-
body{
42-
width: 100%;
41+
body {
42+
width: 100%;
43+
}
44+
45+
/* header styles */
46+
47+
#header {
48+
display: flex;
49+
align-items: center;
50+
justify-content: space-between;
51+
background-color: #e3e6f3;
52+
padding: 20px 80px;
53+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
54+
}
55+
56+
.header-list {
57+
display: flex;
58+
align-items: center;
59+
justify-content: center;
60+
}
61+
.header-list-nav ul {
62+
display: flex;
63+
}
64+
.header-list-nav ul li {
65+
list-style-type: none;
66+
padding: 0 20px;
67+
position: relative;
68+
69+
}
70+
.header-list-nav ul a {
71+
text-decoration: none;
72+
font-size: 16px;
73+
font-weight: 600;
74+
color: #1a1a1a;
75+
transition: 0.3s ease;
76+
}
77+
.header-list-nav ul a:hover,
78+
.header-list-nav ul a.active {
79+
color: #088178;
80+
content: "";
81+
82+
}
83+
.header-list-icon a {
84+
color: #1a1a1a;
85+
padding-left: 20px;
86+
transition: 0.3s ease;
87+
}
88+
.header-list-icon a:hover,
89+
.header-list-nav ul a.active {
90+
color: #088178;
91+
}
92+
.header-list-nav ul li a:hover::after,
93+
.header-list-nav ul li a.active::after{
94+
content: "";
95+
width: 30%;
96+
height: 2px;
97+
background:#088178;
98+
position: absolute;
99+
bottom: -4px;
100+
left: 20px;
43101
}

0 commit comments

Comments
 (0)