Project 02(HTML & CSS)- Practice blog website ! 09-09-2021
HTML File
<!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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" />
<title>This is project 02</title>
</head>
<body>
<div class="wrapper">
<header>
<div class="logo_content_area">
<div class="logo">
<a href="#"><h2>MAMURJOR</h2></a>
</div>
<div class="address_area">
<p>Mirpur-10, Astha Vobon</p>
<a href="tel:01703355355">01703 355 355</a>
<a href="mailto:mamurjor@gmail.com">mamurjor@gmail.com</a>
</div>
</div>
<div class="manu_area">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTRACT</a></li>
<li><a href="#">BLOG</a></li>
</ul>
</div>
</header>
<!--HEADER end-->
<main>
<section id="hero_area">
<div class="hero_content">
<h2>Lorem, ipsum dolor.</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus
iusto minima asperiores, praesentium vel maiores consectetur
aliquam! Error ut sint ipsa harum natus?
</p>
<button>Explore!</button>
</div>
</section>
<!--Side bar-->
<section id="info_about">
<aside class="side_bar">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">More Info</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Revenue</a></li>
<li><a href="#">Search</a></li>
</ul>
</aside>
<div class="side_bar_content_right">
<div class="single_content borderLine">
<h2>Lorem, ipsum dolor.</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe
repellat recusandae quae voluptatem, quia ea error
exercitationem!
</p>
</div>
<div class="single_content borderLine">
<h2>Lorem, ipsum dolor.</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe
repellat recusandae quae voluptatem, quia ea error
exercitationem!
</p>
</div>
<div class="single_content">
<h2>Lorem, ipsum dolor.</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe
repellat recusandae quae voluptatem, quia ea error
exercitationem!
</p>
</div>
</div>
</section>
</main>
<!--MAIN Section end-->
<footer>
<div class="top_footer_widget">
<div class="widget_content">
<h2>Lorem.</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque
eius enim quaerat doloribus, autem ipsum.
</p>
</div>
<div class="widget_content">
<h2>Lorem.</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque
eius enim quaerat doloribus, autem ipsum.
</p>
</div>
<div class="widget_content">
<h2>Lorem.</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque
eius enim quaerat doloribus, autem ipsum.
</p>
</div>
</div>
<div class="copyright_area">
<p>MAMURJOR ©, All Right Reserved</p>
</div>
</footer>
</div>
</body>
</html>
CSS File
* {
margin: 0;
padding: 0;
}
/* wrapper class */
.wrapper {
background-color: #85dcbe;
width: 980px;
margin: 0 auto;
font-family: "Lato", sans-serif;
}
/* Logo area */
.logo_content_area {
overflow: hidden;
background: #fbf1e5;
}
.logo a h2 {
color: #292929;
text-decoration: none;
width: 155px;
float: left;
letter-spacing: 2.5px;
font-weight: normal;
margin: 36px 10px;
}
/* adress_bar */
.address_area {
background-color: #d4d4d4;
width: 300px;
float: right;
padding: 20px 15px;
text-align: center;
font-size: 17.5px;
}
.address_area a {
text-decoration: none;
display: block;
color: #000;
font-weight: 600;
}
/* Manu_area */
.manu_area ul {
background-color: #fff6ef;
list-style: none;
min-height: 40.2px;
}
.manu_area ul li {
display: inline;
border-right: 1.75px solid #9fd;
}
.manu_area ul li:last-child {
border: none;
}
.manu_area ul li a {
text-decoration: none;
color: #2d2d2d;
font-weight: 300;
padding: 10px 15px;
display: inline-block;
}
.manu_area ul li a:hover {
color: #c3897c;
border-bottom: 1px solid #c3897c;
}
/*hero area*/
#hero_area {
background: url(img/image_area.jpg);
height: 500px;
background-position: center;
background-size: cover;
padding: 5% 3%;
}
.hero_content {
background-color: rgba(141, 132, 148, 0.6);
width: 654px;
margin: 74.8px auto;
color: #282828;
text-align: center;
padding: 40px;
}
.hero_content h2 {
font-size: 55px;
line-height: 100px;
letter-spacing: 1px;
}
.hero_content p {
font-size: 19px;
line-height: 26px;
margin-bottom: 20px;
}
.hero_content button {
border: none;
padding: 10px 25px;
margin: 15px;
font-size: 18px;
color: #d22c2c;
cursor: pointer;
transition: ease all 0.5s;
}
.hero_content button:hover {
background-color: #9666ff;
color: #dadada;
}
/*==========
Sidebar
============*/
#info_about {
margin-top: 10px;
overflow: hidden;
}
.side_bar {
width: 230px;
background-color: #e6e6e6;
float: left;
}
.side_bar ul li {
list-style: none;
padding: 10px 15px;
text-align: center;
font-size: 18px;
line-height: 25px;
border-bottom: 1px solid #b3a7a7;
cursor: pointer;
}
.side_bar ul li:last-child {
border: none;
}
.side_bar ul li a {
color: #2d2d2d;
text-decoration: none;
}
/*==========
sidebar right content
===========*/
.side_bar_content_right {
width: 700px;
float: left;
margin: 0 25px;
}
.single_content h2 {
color: #392929;
font-size: 30px;
line-height: 55px;
text-transform: uppercase;
}
.single_content p {
color: #404040;
font-size: 17px;
line-height: 22px;
margin-bottom: 15px;
}
.borderLine {
border-bottom: 1px solid #fff;
}
/*=========
Footer Area
============*/
.top_footer_widget {
background-color: #525252;
color: #d4d4d4;
overflow: hidden;
}
.widget_content {
width: 30%;
float: left;
padding: 0 1.25%;
margin: 4% 4px;
}
.widget_content h2 {
position: relative;
line-height: 48px;
}
.widget_content h2::before {
position: absolute;
width: 50%;
content: "";
border-bottom: 6px solid #fff;
right: 112px;
bottom: 0;
margin-bottom: -2px;
}
.widget_content h2::after {
content: "";
border-bottom: 3px solid #fff;
left: 0;
bottom: 0;
position: absolute;
width: 25%;
}
.copyright_area {
background-color: #171717;
color: #f1f1f1;
text-align: center;
padding: 13px;
}
/* Medium devices (tablets, 768px and up) */
@media only screen and (max-width: 768px) {
.logo_content_area {
width: 768px;
}
.address_area {
padding: 22px 15px;
font-size: 15.5px;
box-sizing: border-box;
}
main {
width: 768px;
}
.hero_content {
width: 515px;
margin: 96.4px auto;
padding: 40px;
box-sizing: border-box;
}
.hero_content h2 {
font-size: 35px;
line-height: 90px;
}
.hero_content p {
font-size: 16px;
line-height: 22px;
margin-bottom: 10px;
}
.hero_content button {
padding: 8px 20px;
font-size: 13px;
}
/* sidebar */
.side_bar {
width: 160px;
}
.side_bar ul li {
font-size: 16px;
}
.side_bar_content_right {
width: 550px;
}
.single_content h2 {
font-size: 25px;
line-height: 45px;
}
.single_content p {
font-size: 14px;
line-height: 20px;
}
/* Footer */
.top_footer_widget {
width: 768px;
}
.widget_content {
width: 29%;
padding: 0 1%;
margin: 4% 7.68px;
}
.widget_content h2::before {
width: 29%;
border-bottom: 8px solid #fff;
}
.widget_content p {
font-size: 14px;
margin-top: 10px;
}
.copyright_area {
width: 768px;
}
.copyright_area p {
font-size: 15.5px;
}
}
Comments
Post a Comment