আসসালামু আলাইকুম।
লিংক:
https://drive.google.com/file/d/1jdUgokQVYp0noxxztv25P9U4cG48QWdj/view?usp=sharing
<!DOCTYPE html>
<html>
<head>
<title>Web Demo</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<!– Header –>
<header>
<!– Header Top –>
<div class=”header-top”>
<div class=”container”>
<div class=”row”>
<div class=”column-30″>
<div class=”logo”>
<a href=”#”> <img src=”img/demo-logo_180x40.png” alt=”demoweb” class=”responsive-image”> </a>
</div>
</div>
<div class=”column-70″>
<a href=”#”> <img src=”img/728×90.png” alt=”ads” class=”responsive-image”> </a>
</div>
</div>
</div>
</div>
<!– Nevigation –>
<nav>
<div class=”container”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact</a></li>
<li><a href=”#”>Privacy Policy</a></li>
<li><a href=”#”>Disclaimer</a></li>
</ul>
</div>
</nav>
<!– Breaking News –>
<div class=”breaking-news”>
<div class=”container”>
<div class=”row”>
<div class=”column-20″>
<div class=”update-left”>UPDATES</div>
</div>
<div class=”column-80″>
<div class=”update-right”>
<marquee>Recent post will show here.</marquee>
</div>
</div>
</div>
</div>
</div>
</header>
<!– Content –>
<div class=”content ptb-25″>
<!– Headlines –>
<div class=”container”>
<div class=”row”>
<div class=”column-60″>
<div class=”main-headline” style=”background-image: url(‘img/widow-flower-5181497_1280.jpg’)”>
<div class=”headline”>One of The Beautiful Flower In The World</div>
</div>
</div>
<div class=”column-40″>
<div class=”side-headline”>
<!–SIDE NEWS 1 –>
<div class=”side-news”>
<div class=”row”>
<div class=”column-40″>
<div class=”side-news-image” style=”background-image: url(‘img/widow-flower-5181497_1280.jpg’)”></div>
</div>
<div class=”column-60″>
<div class=”side-news-data”>
<h2>Secret Techniques To Improve Sun</h2>
<p>Sitting in the sun, away from everyone who had done him harm in the past.</p>
</div>
</div>
</div>
</div>
<!–SIDE NEWS 2 –>
<div class=”side-news”>
<div class=”row”>
<div class=”column-40″>
<div class=”side-news-image” style=”background-image: url(‘img/dawn-2264494_1280.jpg’)”></div>
</div>
<div class=”column-60″>
<div class=”side-news-data”>
<h2>Secret Techniques To Improve Sun</h2>
<p>Sitting in the sun, away from everyone who had done him harm in the past.</p>
</div>
</div>
</div>
</div>
<!–SIDE NEWS 3 –>
<div class=”side-news”>
<div class=”row”>
<div class=”column-40″>
<div class=”side-news-image” style=”background-image: url(‘img/sunflowers-3640935_640.jpg’)”></div>
</div>
<div class=”column-60″>
<div class=”side-news-data”>
<h2>Secret Techniques To Improve Sun</h2>
<p>Sitting in the sun, away from everyone who had done him harm in the past.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=”container ptb-25″>
<div class=”row”>
<div class=”column-70″>
<!– Trending News –>
<div class=”sec-title”>Trending News</div>
<div class=”row”>
<!– 1 –>
<div class=”column-33″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/widow-flower-5181497_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 1</a></h2>
<ul class=”category”>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
</ul>
<p>Her eyebrows were a shade darker than her hair. They were thick and almost horizontal, emphasizing the depth of her eyes. She was rather handsome than beautiful.</p>
<a href=”#” class=”read-more”> Read More →</a>
</div>
</div>
<!– 1 –>
<!– 2 –>
<div class=”column-33″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/sunflowers-3640935_640.jpg);”></div>
<h2><a href=”#”>This Is Heading 2</a></h2>
<ul class=”category”>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
</ul>
<p>Her eyebrows were a shade darker than her hair. They were thick and almost horizontal, emphasizing the depth of her eyes. She was rather handsome than beautiful.</p>
<a href=”#” class=”read-more”> Read More →</a>
</div>
</div>
<!– 2 –>
<!– 3 –>
<div class=”column-33″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/dawn-2264494_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 3</a></h2>
<ul class=”category”>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
</ul>
<p>Her eyebrows were a shade darker than her hair. They were thick and almost horizontal, emphasizing the depth of her eyes. She was rather handsome than beautiful.</p>
<a href=”#” class=”read-more”> Read More →</a>
</div>
</div>
<!– 3 –>
<!– 4 –>
<div class=”column-33″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/widow-flower-5181497_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 4</a></h2>
<ul class=”category”>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
</ul>
<p>Her eyebrows were a shade darker than her hair. They were thick and almost horizontal, emphasizing the depth of her eyes. She was rather handsome than beautiful.</p>
<a href=”#” class=”read-more”> Read More →</a>
</div>
</div>
<!– 4 –>
<!– 5 –>
<div class=”column-33″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/dawn-2264494_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 5</a></h2>
<ul class=”category”>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
</ul>
<p>Her eyebrows were a shade darker than her hair. They were thick and almost horizontal, emphasizing the depth of her eyes. She was rather handsome than beautiful.</p>
<a href=”#” class=”read-more”> Read More →</a>
</div>
</div>
<!– 5 –>
<!– 6 –>
<div class=”column-33″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/sunflowers-3640935_640.jpg);”></div>
<h2><a href=”#”>This Is Heading 6</a></h2>
<ul class=”category”>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
</ul>
<p>Her eyebrows were a shade darker than her hair. They were thick and almost horizontal, emphasizing the depth of her eyes. She was rather handsome than beautiful.</p>
<a href=”#” class=”read-more”> Read More →</a>
</div>
</div>
<!– 6 –>
</div>
</div>
<div class=”column-30″>
<!– Sidebar –>
<div class=”sidebar”>
<div class=”sidebar-widget”>
<div class=”sec-title”>Category</div>
<ul>
<li><a href=”#”>SideBar – 2</a></li>
<li><a href=”#”>SideBar – 3</a></li>
<li><a href=”#”>SideBar – 4</a></li>
<li><a href=”#”>SideBar – 5</a></li>
</ul>
</div>
<div class=”sidebar-widget”>
<div class=”sec-title”>Recent News</div>
<ul>
<li><a href=”#”>National Recent News In DemoWeb Website In 2020</a></li>
<li><a href=”#”>International Recent News In DemoWeb Website In 2020</a></li>
<li><a href=”#”>Global News In DemoWeb Website In 2020</a></li>
<li><a href=”#”>Recent Sports News In DemoWeb Website In 2020</a></li>
<li><a href=”#”>Recent Entertainment News In DemoWeb Website In 2020</a></li>
</ul>
</div>
<div class=”sidebar-widget”>
<a href=”#”><img src=”img/medrect.png” alt=”advertisement” class=”responsive-image”></a>
</div>
</div>
</div>
</div>
</div>
<!– Section 1 –>
<div class=”news-section”>
<div class=”container”>
<div class=”sec-title”>National News</div>
<div class=”row”>
<div class=”column-20″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/dawn-2264494_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 1</a></h2>
</div>
</div>
<div class=”column-20″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/dawn-2264494_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 2</a></h2>
</div>
</div>
<div class=”column-20″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/dawn-2264494_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 3</a></h2>
</div>
</div>
<div class=”column-20″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/dawn-2264494_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 4</a></h2>
</div>
</div>
<div class=”column-20″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/dawn-2264494_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 5</a></h2>
</div>
</div>
</div>
</div>
</div>
<!– Section 2 –>
<div class=”news-section”>
<div class=”container”>
<div class=”sec-title”>International News</div>
<div class=”row”>
<div class=”column-20″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/widow-flower-5181497_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 1</a></h2>
</div>
</div>
<div class=”column-20″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/widow-flower-5181497_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 2</a></h2>
</div>
</div>
<div class=”column-20″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/widow-flower-5181497_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 3</a></h2>
</div>
</div>
<div class=”column-20″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/widow-flower-5181497_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 4</a></h2>
</div>
</div>
<div class=”column-20″>
<div class=”news”>
<div class=”news-image” style=”background-image: url(img/widow-flower-5181497_1280.jpg);”></div>
<h2><a href=”#”>This Is Heading 5</a></h2>
</div>
</div>
</div>
</div>
</div>
</div>
<!– Footer –>
<footer>
<div class=”container ptb-25″>
<div class=”row”>
<div class=”column-30″>
<!– Logo & Social –>
<div class=”footer-logo”>
<img src=”img/demo-logo_180x40.png” alt=”logo” class=”responsive-image”>
</div>
<ul class=”footer-social”>
<li><a href=”#”><img src=”img/facebook-icon-preview-200×200.png”></a></li>
<li><a href=”#”><img src=”img/Twitter_Sq-512.webp”></a></li>
<li><a href=”#”><img src=”img/87390.png”></a></li>
</ul>
<address>
Sirajgong, Rajshahi, Bangladesh
</address>
</div>
<div class=”column-20″>
<!– Category –>
<div class=”sec-title”>Category</div>
<ul class=”footer-cat”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contract Us</a></li>
<li><a href=”#”>Privacy Policy</a></li>
<li><a href=”#”>Disclaimer</a></li>
</ul>
</div>
<div class=”column-20″>
<div class=”sec-title”>Recent News</div>
<ul class=”footer-cat”>
<li><a href=”#”>National Recent News In DemoWeb Website In 2020</a></li>
<li><a href=”#”>International Recent News In DemoWeb Website In 2020</a></li>
<li><a href=”#”>Global News In DemoWeb Website In 2020</a></li>
<li><a href=”#”>Recent Sports News In DemoWeb Website In 2020</a></li>
<li><a href=”#”>Recent Entertainment News In DemoWeb Website In 2020</a></li>
</ul>
</div>
<div class=”column-30″>
<div class=”sec-title”>Gallery</div>
<ul class=”footer-gallery”>
<li class=”column-33″> <img src=”img/sunflowers-3640935_640.jpg”></li>
<li class=”column-33″> <img src=”img/sunflowers-3640935_640.jpg”></li>
<li class=”column-33″> <img src=”img/sunflowers-3640935_640.jpg”></li>
<li class=”column-33″> <img src=”img/sunflowers-3640935_640.jpg”></li>
<li class=”column-33″> <img src=”img/sunflowers-3640935_640.jpg”></li>
<li class=”column-33″> <img src=”img/sunflowers-3640935_640.jpg”></li>
</ul>
</div>
</div>
</div>
<div class=”footer-bottom”>
<a href=”#”>DemoWeb</a> News Portal Website © 2020
</div>
</footer>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: #3498db;
text-decoration: none;
}
.responsive-image {
height: auto;
max-width: 100%;
}
.sec-title{
padding: 10px 10px 10px 25px;
font-weight: bold;
color: #000;
text-shadow: 0px 0px 4px gray;
background-color: #f1f1f1;
border-left: 5px solid #3498db;
font-size: 24px;
margin-bottom: 15px;
}
.container {
max-width: 1170px;
padding: 0px 10px;
margin: 0 auto;
}
.ptb-25{
padding-top: 25px;
padding-bottom: 25px;
}
.row {
clear: both;
overflow: hidden;
}
.column-10,
.column-20,
.column-30,
.column-33,
.column-40,
.column-50,
.column-60,
.column-70,
.column-80,
.column-90,
.column-100 {
float: left;
min-height: 1px;
padding: 0px 10px;
}
.column-10 {
width: 10%;
}
.column-20 {
width: 20%;
}
.column-30 {
width: 30%;
}
.column-33{
width: 33.33%;
}
.column-40 {
width: 40%;
}
.column-50 {
width: 50%;
}
.column-60 {
width: 60%;
}
.column-70 {
width: 70%;
}
.column-80 {
width: 80%;
}
.column-90 {
width: 90%;
.column-100 {
width: 100%;
}
.header-top {
padding: 15px 0px;
}
.header-top .logo{
padding: 26px 0px;
}
nav{
overflow: hidden;
background-color: #333;
}
nav ul li{
list-style: none;
float: left;
}
nav ul li a{
color: #fff;
display: block;
padding: 12px 40px;
}
nav ul li a:hover {
background-color: #000;
}
.breaking-news{
padding: 5px;
background-color: #3498db;
color:white;
font-family: Arial;
font-weight: bold;
font-size: 12px;
}
.breaking-news .update-left{
padding: 5px 0px;
text-align: center;
background-color: #000;
text-transform: uppercase;
letter-spacing: 1px;
}
.breaking-news .update-right{
padding: 5px;
}
.news .news-image,
.main-headline,
.side-news-image{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.main-headline{
height: 330px;
}
.side-news-image{
height: 100px;
}
.main-headline{
position: relative;
}
.main-headline .headline{
position: absolute;
bottom: 20px;
left: 0;
height: auto;
width: 100%;
background-color: rgba(0,0,0,.9);
padding: 10px 10px 10px 20px;
font-family: “Arial”;
text-transform: capitalize;
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
}
.side-news:nth-child(2) {
margin-top: 15px;
margin-bottom: 15px;
}
.side-news-data{
font-family: “Arial”;
}
.side-news-data h2{
font-size: 20px;
}
.side-news-data p{
font-size: 13px;
color: gray;
margin-top: 2.5px;
}
.news{
margin-bottom: 20px;
}
.news .news-image{
height: 200px;
}
.news h2 {
margin: 10px 0px;
}
.news ul{
margin-bottom: 5px;
}
.news ul.category li{
list-style: none;
display: inline-block;
background-color: #000;
color: white;
font-size: 10px;
padding: 5px;
}
.news p{
font-size: 13px;
color: gray;
}
.news .read-more{
display: block;
padding: 7.5px 0px;
color: white;
text-align: center;
background-color: black;
}
.news .read-more:hover{
background-color: gray;
}
/* Sidebar */
.sidebar-widget{
margin-bottom: 25px;
}
.sidebar-widget ul{
margin-left: 30px;
}
.sidebar-widget ul li{
list-style: square;
padding-bottom: 10px;
}
footer{
background-color: #333;
color: #fff;
}
.footer-logo{
margin-bottom: 15px;
}
.footer-social{
margin-bottom: 10px;
}
.footer-social li{
list-style: none;
display: inline-block;
}
.footer-social li img {
height: 30px;
width: 30px;
background-color: #fff;
padding: 5px;
}
footer .sec-title{
padding: 5px 5px 5px 15px;
}
.footer-cat{
margin-left: 20px;
}
.footer-cat li{
list-style: square;
padding-bottom: 10px;
}
.footer-gallery li{
list-style: none;
}
.footer-gallery li img{
height: 70px;
max-width: 100%;
margin-bottom: 10px;
}
.footer-bottom{
padding: 30px 0px;
text-align: center;
background-color: #222;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
.column-33{
width: 50%;
}
.side-news-data p{
display: none;
}
.news-section .news-image{
height: 100px;
}
}
@media screen and (min-width: 0px) and (max-width: 480px) {
.column-10,
.column-20,
.column-30,
.column-33,
.column-40,
.column-50,
.column-60,
.column-70,
.column-80,
.column-90,
.column-100 {
float: none;
width: 100%;
}
.side-headline{
margin: 15px 0px;
}
.side-news-image{
height: 150px;
}
footer address {
margin-bottom: 15px;
}
.footer-gallery li img{
height: auto;
}
}
11 thoughts on "Html Css দিয়ে অসাধারণ রেসপন্সসিভ ওয়েবসাইট তৈরি করুন ||"