-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.html
101 lines (88 loc) · 4.14 KB
/
search.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
<!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>Blog</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/utils.css">
<link rel="stylesheet" href="css/search.css">
</head>
<body>
<header class="m-1">
<nav class="navigation max-width-1 margin-auto">
<div class="navLeft">Logo</div>
<div class="navCenter">
<ul class="nav-items">
<li class="nav-item"><a href="/blog-in-html-css/index.html">Home</a></li>
<li class="nav-item"><a href="/blog-in-html-css/blog-in-html-css/contact.html">Contact</a></li>
</ul>
</div>
<form action="/blog-in-html-css/search.html">
<div class="navRight">
<input type="search" name="query" class="form-input " placeholder="Search Hear">
<button class="btn btn-pink">Search </button>
</div>
</form>
</nav>
</header>
<main>
<h1 class="main-header m-1">Search Results For </h1>
<div class="yearBox">
<div>
<h4>Date</h4>
</div>
<div>
<label for="2020">2020</label>
<input type="radio" name="Year" id="2020">
</div>
<div>
<label for="2021">2021</label>
<input type="radio" name="Year" id="2021">
</div>
</div>
<div class="home-div-articles p-3">
<div class="home-articles ">
<div class="home-article center">
<a href="/blog-in-html-css/blogpost.html" class="text-center">
<img src="img/coffee.jpg " alt="">
<div class="home-article-bottom m-1">
<h3>Title</h3>
<p class="m-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam esse
repellendus nulla
eius placeat eos dicta, dolore corporis sed voluptatem consequuntur similique! Nulla,
incidunt! Amet perferendis consequatur maiores? Quia eum, tempore autem aliquam,
necessitatibus neque molestias repudiandae cumque rerum at nulla, molestiae praesentium.
Eius soluta itaque corrupti vitae optio expedita.</p>
<div class="article-info-div text-muted">
<span>Author |</span><span> Date | </span><span> 7 min read</span>
</div>
</div>
</a>
</div>
<div class="home-article center">
<a href="/blog-in-html-css/blogpost.html" class="text-center">
<img src="img/business.jpg " alt="">
<div class="home-article-bottom m-1">
<h3>Title</h3>
<p class="m-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam esse
repellendus nulla
eius placeat eos dicta, dolore corporis sed voluptatem consequuntur similique! Nulla,
incidunt! Amet perferendis consequatur maiores? Quia eum, tempore autem aliquam,
necessitatibus neque molestias repudiandae cumque rerum at nulla, molestiae praesentium.
Eius soluta itaque corrupti vitae optio expedita.</p>
<div class="article-info-div text-muted">
<span>Author |</span><span> Date | </span><span> 7 min read</span>
</div>
</div>
</a>
</div>
</div>
</div>
</main>
<footer class="center">
© Rajat Rawal
</footer>
</body>
</html>