-
Notifications
You must be signed in to change notification settings - Fork 0
/
practice.html
107 lines (105 loc) · 3.67 KB
/
practice.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation with search bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
*{
margin: 0;padding: 0;
font-family: poppins;
}
.topnav{
background-color: #333;
overflow: hidden;
position: fixed;
width: 100%;
}
.topnav a{
text-decoration: none;
color: white;
padding: 12px;
font-size: 17px;
text-align: center;
display: block;
float: left;
}
.topnav a:hover{
background-color: #ddd;
color: black;
}
.topnav a.active{
background-color: #40afad;
color: black;
}
.topnav input[type=text]{
padding: 6px;
font-size: 17px;
border: none;
outline: none;
margin: 6px 6px;
}
.topnav .srchContainer{
float: right;
}
.topnav .srchContainer button{
float: right;
padding: 8px;
margin: 5px 5px 0px 0px;
font-size: 15px;
width: 40px;
border: none;
transition: 0.2s;
}
.srchContainer button:hover{
background-color: crimson;
color: white;
cursor: pointer;
}
.content{
padding: 5rem;
}
.content h1{
font-size: 3rem;
text-align: center;
border-bottom: 1px solid #ddd;
}
.content p{
font-size: 17px;
text-align: center;
margin-top: 10px;
}
#home,#contact,#about{
height: 60vh;
}
</style>
</head>
<body>
<div class="topnav">
<a href="#home" class="active"><i class="fa fa-home"></i> Home</a>
<a href="#about"><i class="fa fa-book"></i> About</a>
<a href="#contact"><i class="fa fa-envelope"></i> Contact</a>
<a href="#login"><i class="fa fa-user"></i> Profile</a>
<div class="srchContainer">
<input type="text" placeholder="Search..">
<button type="submit" class="srchBtn"><i class="fa fa-search"></i></button>
</div>
</div>
<div class="content">
<div id="home">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, cumque dolore ex necessitatibus delectus sapiente quaerat quasi eveniet ullam possimus nulla sed rerum! Quam exercitationem magni earum quidem. Quia ipsa vel saepe! Quasi, voluptatibus?</p>
</div>
<div id="about">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, cumque dolore ex necessitatibus delectus sapiente quaerat quasi eveniet ullam possimus nulla sed rerum! Quam exercitationem magni earum quidem. Quia ipsa vel saepe! Quasi, voluptatibus?</p>
</div>
<div id="contact">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, cumque dolore ex necessitatibus delectus sapiente quaerat quasi eveniet ullam possimus nulla sed rerum! Quam exercitationem magni earum quidem. Quia ipsa vel saepe! Quasi, voluptatibus?</p>
</div>
</div>
</body>
</html>