Skip to content

Commit 73f7a61

Browse files
Jefrey13Jefrey13
committed
Designing the general heading section
1 parent a6fe3d3 commit 73f7a61

File tree

5 files changed

+145
-0
lines changed

5 files changed

+145
-0
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎css/style.css

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Lobster&family=Roboto:wght@300;400&display=swap');
3+
4+
:root{
5+
--green:#009368;
6+
--white:#fff;
7+
--dark:#37363A;
8+
--gray:#666569;
9+
--gray-2:#eee;
10+
}
11+
*{
12+
font-family: 'Dancing Script', cursive;
13+
/*font-family: 'Anton', sans-serif;
14+
font-family: 'Lobster', sans-serif;*/
15+
margin: 0; padding: 0;
16+
box-sizing: border-box;
17+
text-transform: capitalize;
18+
outline: none; border: 0;
19+
text-decoration: none;
20+
transition: all .2s linear;
21+
}
22+
html{
23+
font-size: 62.5%;
24+
overflow-x: hidden;
25+
scroll-padding-top: 6rem;
26+
scroll-behavior: smooth;
27+
}
28+
*::selection{
29+
background-color: var(--dark);
30+
color: var(--white);
31+
}
32+
.btn{
33+
display: inline-block;
34+
margin-top: 1rem;
35+
background-color: var(--dark);
36+
color: var(--white);
37+
padding: .8rem 3rem;
38+
border: .2rem solid var(--dark);
39+
font-size: 1.7rem;
40+
border-radius: .5rem;
41+
cursor: pointer;
42+
}
43+
.btn:hover{
44+
background-color: var(--gray-2);
45+
color: var(--dark);
46+
}
47+
.home-header{
48+
position: fixed;
49+
top: 0; left: 0; right: 0;
50+
background-color: var(--white);
51+
z-index: 100;
52+
display: flex;
53+
align-items: center;
54+
justify-content: space-between;
55+
padding: 1.5rem 9%;
56+
border-bottom: .1rem solid rgba(0,0,0,.3);
57+
}
58+
.home-header .logo{
59+
font-family: 'Lobster', sans-serif;
60+
font-size: 2rem;
61+
font-weight: bold;
62+
color: var(--dark);
63+
text-transform: uppercase;
64+
}
65+
.home-header .logo i{
66+
color: var(--green);
67+
font-size: 3rem;
68+
margin-right: .3rem;
69+
}
70+
.home-header .navbar a{
71+
font-family: 'Roboto', sans-serif;
72+
color: var(--dark);
73+
font-size: 1.7rem;
74+
margin: 0 .8rem;
75+
font-weight: 400;
76+
}
77+
.home-header .navbar a.active,
78+
.home-header .navbar a:hover{
79+
background-color: var(--green);
80+
border-radius: .5rem;
81+
color: var(--white);
82+
font-size: 1.7rem;
83+
padding: .7rem 1.5rem;
84+
}
85+
.home-header .icons{
86+
display: flex;
87+
}
88+
.home-header .icons i,
89+
.home-header .icons div{
90+
cursor: pointer;
91+
margin-right: .7rem;
92+
height: 4.5rem; width: 4.5rem;
93+
line-height: 4.5rem;
94+
text-align: center;
95+
font-size: 1.7rem;
96+
color: var(--dark);
97+
border-radius: 50%;
98+
background-color: var(--gray-2);
99+
}
100+
.home-header .icons i:hover{
101+
color: var(--white);
102+
background-color: var(--green);
103+
transform: rotate(360deg);
104+
}
105+
.icons .photo-frame img{
106+
width: 100%;
107+
height: 100%;
108+
border-radius: 50%;
109+
}

‎image/photo.png

2.27 MB
Loading

‎index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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>Dress To Kill</title>
7+
<link rel="stylesheet" href="./css/style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
9+
</head>
10+
<body>
11+
<!--Header section START-->
12+
<header class="home-header">
13+
<a href="#" class="logo"><i class="fa-solid fa-vest"></i>dress to kill</a>
14+
15+
<nav class="navbar">
16+
<a href="#male" class="active">male</a>
17+
<a href="#femail">femail</a>
18+
<a href="#kinds">kinds</a>
19+
<a href="#new in">new in</a>
20+
<a href="#category">category</a>
21+
</nav>
22+
23+
<div class="icons">
24+
<i class="fas fa-search"></i>
25+
<i class="fas fa-bag-shopping"></i>
26+
<div class="photo-frame"><a href="#"><img src="./image/photo.png" alt="photo"></a></div>
27+
</div>
28+
</header>
29+
<!--Header section START-->
30+
31+
<script src="./script/script.js"></script>
32+
</body>
33+
</html>

‎script/script.js

Whitespace-only changes.

0 commit comments

Comments
 (0)