Skip to content

Commit efcb318

Browse files
igbarasigbaras
committed
added design and buttons
1 parent f79c132 commit efcb318

File tree

3 files changed

+139
-12
lines changed

3 files changed

+139
-12
lines changed

‎bg1.jpg

85.9 KB
Loading

‎index.html

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,37 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Surpath Community</title>
5-
</head>
6-
</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+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<script src="https://kit.fontawesome.com/64d58efce2.js"crossorigin="anonymous"></script>
8+
<link rel="stylesheet" href="style.css">
9+
<title>Document</title>
10+
</head>
711
<body>
12+
<header>
13+
<div class="container">
14+
<div class="logo-container">
15+
<div class="logo">Sur<span>path</span></div>
16+
</div>
17+
<div class="nav-btn">
18+
<div class="nav-links">
19+
20+
</div>
21+
<div class="log-signs">
22+
<a href="#" class="btn transparent">Login</a>
23+
<a href="#" class="btn solid">Sign Up</a>
24+
</div>
25+
</div>
826

9-
<!--Hello, you can start contributing in this project now-->
10-
11-
<h1> HELLO WORLD! </h1>
12-
13-
14-
15-
<!--End-->
27+
</div>
28+
29+
</header>
30+
<main>
31+
<section>
1632

33+
<div class="overlay"></div>
34+
</section>
35+
</main>
1736
</body>
1837
</html>

‎style.css

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
2+
*{
3+
4+
padding:0;
5+
margin:0;
6+
box-sizing: border-box;
7+
}
8+
body{
9+
10+
font-family: 'Poppins', sans-serif;
11+
overflow: hidden;
12+
}
13+
14+
ul{
15+
list-style: none;
16+
}
17+
18+
a{
19+
text-decoration: none;
20+
}
21+
22+
header{
23+
position: sticky;
24+
top: 0px;
25+
background-color:#25253f ;
26+
width: 100%;
27+
z-index: 1000;
28+
29+
}
30+
31+
section{
32+
position: relative;
33+
height: calc(100vh - 3rem);
34+
width: 100%;
35+
background: url('bg1.jpg') no-repeat top center / cover;
36+
overflow: hidden;
37+
}
38+
.overlay{
39+
position:absolute;
40+
width: 100%;
41+
height: 100%;
42+
top: 0;
43+
left: 0;
44+
background-color: rgb(56, 165, 238, 0,5);
45+
}
46+
.container{
47+
max-width: 65rem;
48+
padding: 0 2rem;
49+
50+
height: 3rem;
51+
margin:0 auto;
52+
display: flex;
53+
54+
55+
}
56+
.logo-container{
57+
flex: 1;
58+
display: flex;
59+
align-items: center;
60+
61+
}
62+
.nav-btn{
63+
flex: 3;
64+
display:flex;
65+
66+
}
67+
.nav-links{
68+
flex: 2;
69+
70+
71+
}
72+
.log-signs{
73+
align-items: center;
74+
justify-content: center;
75+
display: flex;
76+
flex: 1;
77+
78+
}
79+
.logo{
80+
color: #fff;
81+
font-size: 1.1rem;
82+
font-weight: 600;
83+
letter-spacing: 2px;
84+
text-transform: uppercase;
85+
line-height: 3rem;
86+
}
87+
.logo span{
88+
font-weight: 300;
89+
}
90+
.btn{
91+
display: inline-block;
92+
padding: .5rem 1.3rem;
93+
font-size: .8rem;
94+
border: 2px solid #fff;
95+
border-radius: 2rem;
96+
line-height: 1;
97+
margin: 0.2rem;
98+
transition: .3s;
99+
text-transform: uppercase;
100+
}
101+
.btn.solid, .btn.transparent:hover{
102+
background-color: #fff;
103+
color:#7E7E9F ;
104+
}
105+
.btn.transparent, .btn.solid:hover{
106+
background-color: transparent;
107+
color: #7E7E9F;
108+
}

0 commit comments

Comments
 (0)