-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (132 loc) · 9.29 KB
/
index.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!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, shrink-to-fit=no">
<title>Dream Blog's</title>
<link rel="icon" href="img/icon.png">
<!-- Bootstram css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<!-- Customize css -->
<link rel="stylesheet" href="style.css">
<!-- Font's -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
<!-- Icon's -->
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<header class="text-center border-bottom py-3">
<a class="navbar-brand text-dark" href="index.html">Dream Blog's</a>
</header>
<div class="nav-scroller">
<div class="nav justify-content-between">
<a class="p-4 text-muted" href="$">Technology</a>
<a class="p-4 text-muted" href="$">Art</a>
<a class="p-4 text-muted" href="$">Music</a>
<a class="p-4 text-muted" href="$">Book's</a>
<a class="p-4 text-muted" href="$">Photography</a>
<a class="p-4 text-muted" href="$">Business</a>
<a class="p-4 text-muted" href="$">Design</a>
<a class="p-4 text-muted" href="$">Travel</a>
</div>
</div>
<div class="jumbotron" style="background-image: url(img/cover.jpg); background-size: cover;">
<div class="col-md-6">
<h1 class="display-4 font-italic text-light">My Feature Post</h1>
<p class=" text-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quasi culpa temporibus, minus labore perspiciatis possimus omnis numquam minima nemo nihil eveniet odio fugit porro!</p>
<p><a class="text-light" href="#">Continue Reading...</a></p>
</div>
</div>
<div class="row mb-4">
<div class="col-md-6">
<div class="p-4 border rounded mb-4">
<p class="text-right text-primary text-uppercase">Photography</p>
<h3>Another Post</h3>
<p>18 May 2022</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, esse illum rem qui suscipit sed sequi praesentium!</p>
<p><a href="#">Continue Reading...</a></p>
</div>
</div>
<div class="col-md-6">
<div class="p-4 border rounded mb-4">
<p class="text-right text-success text-uppercase">Art</p>
<h3>Another Post</h3>
<p>18 May 2022</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, esse illum rem qui suscipit sed sequi praesentium!</p>
<p><a href="#">Continue Reading...</a></p>
</div>
</div>
</div>
</div>
<main class="container">
<div class="row">
<div class="col-md-8">
<h2 class="border-bottom pb-4">My Archive's</h2>
<div class="blog-post">
<h3 class="blog-post-title">Hello Blog!</h3>
<p class="text-success text-uppercase">Art <br> Date-18 May 2022</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt eaque expedita qui sequi odio illo esse dignissimos repudiandae quia aliquam. Fuga reprehenderit et sequi corrupti harum tempora, porro doloremque laborum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint a dicta quis explicabo numquam tempora nesciunt dignissimos non veniam. Incidunt deleniti rem saepe at ratione quibusdam delectus amet sed quasi.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, dolores inventore! Voluptate, quia distinctio maiores omnis suscipit perspiciatis ullam odio ratione, exercitationem laudantium quisquam cupiditate, illum esse porro labore sapiente.</p>
</div>
<div class="blog-post">
<h3 class="blog-post-title">Anather Blog!</h3>
<p class="text-success text-uppercase">Art <br> Date-18 May 2022</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt eaque expedita qui sequi odio illo esse dignissimos repudiandae quia aliquam. Fuga reprehenderit et sequi corrupti harum tempora, porro doloremque laborum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint a dicta quis explicabo numquam tempora nesciunt dignissimos non veniam. Incidunt deleniti rem saepe at ratione quibusdam delectus amet sed quasi.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, dolores inventore! Voluptate, quia distinctio maiores omnis suscipit perspiciatis ullam odio ratione, exercitationem laudantium quisquam cupiditate, illum esse porro labore sapiente.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt fugiat ipsum dolores ab deleniti est repellendus, obcaecati architecto commodi veritatis dignissimos nam dolorum non placeat inventore aperiam, sunt tempora minus! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod ullam nam non incidunt quos accusantium, consequuntur dolore vel autem saepe nesciunt voluptatibus corporis repellat impedit ratione necessitatibus debitis distinctio in.</p>
</div>
<div class="blog-post">
<h3 class="blog-post-title">Music Blog!</h3>
<p class="text-success text-uppercase">Art <br> Date-18 May 2022</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt eaque expedita qui sequi odio illo esse dignissimos repudiandae quia aliquam. Fuga reprehenderit et sequi corrupti harum tempora, porro doloremque laborum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint a dicta quis explicabo numquam tempora nesciunt dignissimos non veniam. Incidunt deleniti rem saepe at ratione quibusdam delectus amet sed quasi.</p>
</div>
<div class="blog-post">
<h3 class="blog-post-title">Summer Blog!</h3>
<p class="text-success text-uppercase">Art <br> Date-18 May 2022</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt eaque expedita qui sequi odio illo esse dignissimos repudiandae quia aliquam. Fuga reprehenderit et sequi corrupti harum tempora, porro doloremque laborum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint a dicta quis explicabo numquam tempora nesciunt dignissimos non veniam. Incidunt deleniti rem saepe at ratione quibusdam delectus amet sed quasi.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, dolores inventore! Voluptate, quia distinctio maiores omnis suscipit perspiciatis ullam odio ratione, exercitationem laudantium quisquam cupiditate, illum esse porro labore sapiente.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quas voluptas in placeat molestiae ex, nesciunt dicta quos nihil dolorum praesentium expedita culpa modi! Qui, doloremque rerum? Ipsa, non? Libero!</p>
</div>
</div>
<aside class="col-md-4">
<div>
<h4>Monthly Archive's list</h4>
<p><a href="#">Janyary 2022</a></p>
<p><a href="#">February 2022</a></p>
<p><a href="#">March 2022</a></p>
<p><a href="#">April 2022</a></p>
<p><a href="#">May 2022</a></p>
</div>
<img class="img-fluid py-3" src="img/profile.jpg" alt="">
<div class="bg-dark">
<h4 class="text-light p-3">About Lorem</h4>
<p class="text-light p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque eveniet magni repudiandae iste a dicta itaque distinctio deserunt sapiente illum eligendi unde voluptatum, vero perferendis repellat quas veniam ullam deleniti.</p>
</div>
<div class="bg-dark pb-2 text-center">
<h4 class="text-light p-3">Find me</h4>
<p><a class="text-light p-3" href="#">Facebook</a></p>
<p><a class="text-light p-3" href="#">Instagram</a></p>
<p><a class="text-light p-3" href="#">Whatsapp</a></p>
<p><a class="text-light p-3" href="#">LinkedIn</a></p>
<p><a class="text-light p-3" href="#">GitHub</a></p>
</div>
<h4 class="text-center m-4">Thank You</h4>
<p class="text-center">For Visiting My Blog Site.</p>
<p class="text-center"><a href="index.html">Back to Top</a></p>
</aside>
</div>
</main>
<footer class="text-center p-4 bg-dark text-light">
<div class="container pt-4 mb-4">
<p> All Right's Resarved By <b>Coredotcom2022.</b> <br> This Blog is solely written and maintained by Coredotcom2022. </p>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
</body>
</html>