Skip to content

Commit

Permalink
Single page done
Browse files Browse the repository at this point in the history
  • Loading branch information
@zaman20
zaman20 committed Sep 24, 2023
1 parent aacbd23 commit bd0965c
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 0 deletions.
2 changes: 2 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,9 @@ <h3 class="title">Read More</h3>
<img src="img/auto-2179220.webp" alt="">
</div>
<div class="box-content">
<a href="">
<h2>Having car insurance is a necessity in many states and can be a …</h2>
</a>
<p>Having car insurance is a necessity in many states and can be a …</p>
<p><b>Daily Years- </b>30 June 2023</p>
</div>
Expand Down
139 changes: 139 additions & 0 deletions single.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog website</title>
<!-- font icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- main -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<div class="container-fluid header-bg gx-0">
<div class="row">
<div class="col-lg-12">
<div class="header-area">
<div class="header-content">
<div class="header-logo">
<img src="img/Health_and_Fitness__2_-removebg-preview.png" alt="logo img">
</div>
<div class="header-menu">
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blogs</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Terms & Conditions</a></li>
</ul>
</nav>
</div>
<div class="header-search">
<i class="fa-solid fa-magnifying-glass search-icon"></i>
<i class="fa-solid fa-xmark close-icon"></i>
</div>
</div>
</div>
<div class="search-box">
<form action="" class="search-content">
<input type="text" class="search-text" placeholder="Search Here">
<input type="submit" value="Search" class="search-btn">
</form>
</div>
</div>
</div>

</div>
</section>

<section id="main-content">
<div class="main-website">
<div class="container">
<!-- list post area -->
<div class="row my-5">
<div class="col-lg-8 post-box">
<h3 class="title">What to Do If You Can’t Afford Car Insurance</h3>
<p class="post-meta"><i class="fa-solid fa-user"></i> by- <b>Daily years</b>- 30 June 2023</p>
<div class="post-image">
<img src="img/auto-2179220.webp" alt="">
</div>
<p class="post-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur nulla vero impedit magni doloremque esse sunt porro labore cum sed modi omnis dolorum dignissimos totam repudiandae voluptatum ex deserunt alias adipisci natus, aut at delectus! Impedit assumenda dolores cupiditate debitis, nobis vel quidem dolorem. Ipsum nostrum quas consectetur debitis ex amet rerum aperiam natus placeat recusandae sapiente voluptatibus error reiciendis cupiditate, beatae eveniet repellendus totam et! Ea, eveniet quo ullam dolorum similique quasi molestias quidem suscipit et quos aspernatur odit. Magni reprehenderit suscipit sunt temporibus vitae delectus in fugiat neque! Nemo architecto eius vitae quibusdam sapiente blanditiis. Enim at illum unde quos tempora quaerat fugit maiores ea vero, dolor nostrum blanditiis culpa error doloremque perspiciatis nisi nobis recusandae sint neque rem voluptates. Veritatis ea eum est adipisci, iure similique corrupti saepe. Natus, sint quos. Reiciendis ex tempora, aliquid doloremque labore corporis dignissimos asperiores voluptatum ratione sed harum qui magnam modi eos, expedita voluptatibus deserunt? Neque excepturi explicabo pariatur vero quos eius ab. Quaerat vero sed illum! Rerum similique reprehenderit consequuntur numquam dolor? Laudantium nisi enim temporibus amet provident praesentium esse ducimus, perferendis natus repellendus eaque magnam sit mollitia ullam, omnis voluptas totam, perspiciatis velit possimus cumque voluptatem iusto labore? Nostrum optio pariatur accusamus minima similique, nihil, delectus saepe natus ipsa quis, ad beatae ut inventore incidunt ullam repudiandae quod? Dicta velit, reprehenderit aliquam at, aliquid dolores, optio eveniet eos expedita neque reiciendis sapiente quia nisi quibusdam rerum sint eum nam laudantium veniam qui nemo alias. Ullam ratione dolor, magnam error quis nostrum molestiae odit tempore adipisci! Sapiente, hic distinctio, aperiam perspiciatis aliquam aut magni quas eveniet asperiores voluptatibus consequatur doloremque repudiandae cupiditate ullam, vitae impedit saepe laboriosam maiores ipsa! Natus et accusantium harum deserunt voluptatibus ipsum, cupiditate distinctio. Assumenda distinctio quis aliquid, optio quas cum aliquam ab a pariatur voluptate.</p>

<div class="share-box">
<ul>
<li><a href="https://www.facebook.com/share.php?u="><i class="fa-brands fa-square-facebook"></i>Facebook</a></li>
<li><a href="https://www.twitter.com/intent/tweet?url="><i class="fa-brands fa-x-twitter"></i>Twitter</a></li>
<li><a href="https://www.api.whatsapp.com/send?text= title | link"><i class="fa-brands fa-square-whatsapp"></i>whats App</a></li>
<li><a href="mailto:?subject=title&body=link"><i class="fa-solid fa-envelope"></i>Email</a></li>
</ul>
</div>
</div>
<div class="col-lg-3">
<div class="sidebar">
<div class="sidebar-box">
<h3>About Me</h3>
</div>
<div class="sidebar-box">
<h3>Featured Post</h3>
</div>
<div class="sidebar-box">
<h3>Search this blog</h3>
</div>

<div class="sidebar-box">
<h3>Archived</h3>
</div>
</div>
</div>
</div>

</div>
</div>
</section>

<!-- footer -->
<section id="footer-section">
<div class="main-website">
<div class="container">
<div class="row">
<div class="col-lg-12 footer-content">
<div class="footer-logo">
<img src="img/Health_and_Fitness__2_-removebg-preview.png" alt="">
</div>
<div class="footer-text px-3">
<h2>About Us</h2>
<p>Enjoy our blogs</p>
</div>
<div class="footer-menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-9">
<div class="copyright">
<p>&copy;copyright 2023 | All Rights Reserved</p>
</div>
</div>
<div class="col-lg-3">
<div class="dev-text">
<p>Developed By-<a href="">ZA SOFT</a></p>
</div>
</div>
</div>
</div>
</div>
</section>


<script src="js/jquery-3.6.4.min.js"></script>
<script src="js/myscript.js"></script>
</body>
</html>
41 changes: 41 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@
body h1,h2,h3,h4,h5,h6,a, p{
font-family: 'Montserrat', sans-serif;
}
body a{
text-decoration: none;
color: #333;
}
img{
width: 100%;
}
.header-bg{
width: 100%;
background: linear-gradient(90deg,red,blue,orange,green);
Expand Down Expand Up @@ -138,6 +145,7 @@ body h1,h2,h3,h4,h5,h6,a, p{
line-height: 19px;
margin-top: 15px;
font-weight: 700;
transition: 0.3s;
}
.box-content p{
font-size: 16px;
Expand Down Expand Up @@ -262,4 +270,37 @@ input.search-btn {
background: #2cb2f7;
color: white;
border-radius: 5px;
}
.box-content h2:hover, .entry-box h2:hover{
color: rgb(19, 132, 252);
}
p.post-meta {
font-size: 14px;
color: #a59a9a;
}
.post-image {
width: 50%;
margin: 0 auto;
margin-bottom: 25px;
margin-top: 30px;
}
.post-text {
color: gray;
font-size: 15px;
line-height: 25px;
}
.share-box{
margin-top: 45px;
}
.share-box ul li{
display: inline-block;
padding: 5px 10px;
background-color: rgb(33, 173, 254);
}
.share-box ul li a{
color: #fff;
font-size: 16px;
}
.share-box ul li a i{
margin-right: 10px;
}

0 comments on commit bd0965c

Please sign in to comment.