Html Css দিয়ে অসাধারণ রেসপন্সসিভ ওয়েবসাইট তৈরি করুন ||

আশা করছি আল্লাহ তায়ালার অশেষ রহমতে আপনারা সবাই ভালো আছেন। আমাকেও আল্লাহ ভালো রেখেছে, আলহামদুলিল্লাহ।

আজকে আমি দিয়ে অসাধারন রেসপন্সিভ ওয়েবসাইট বানানোর সোর্স কোড আপনাদের কাছে শেয়ার করবো। আপনার যদি বিন্দু মাত্র নিয়ে ধারনা থাকে তাহলে খুব সহজেই আপনি আমার এআ কোডটি ইপ্লিমেন্ট করতে পারবেন।

ওয়েবসাইট দেখতে কেমন হবে তার ডেমো:

আপনি চাইলে সোর্স কোড ডাউনলোড করে নিতে পারেন ওপরের লিংক থেকে অথবা নিচের দেয়া লিংক থেকে। এতে সোর্স কোডগুলো বসানোর পরে ইমেজ হারিয়ে যাওয়ার সম্ভাবনা থাকবে না।

 

লিংক:

https://drive.google.com/file/d/1jdUgokQVYp0noxxztv25P9U4cG48QWdj/view?usp=sharing

HTML:

<!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 &rarr;</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 &rarr;</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 &rarr;</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 &rarr;</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 &rarr;</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 &rarr;</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>

SideBar – 1
SideBar – 2
SideBar – 3
SideBar – 4
SideBar – 5

<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 &copy; 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;
}

}

সম্পূর্ণ পোস্টটি পড়ার জন্য আপনাকে অসংখ্য ধন্যবাদ।

Leave a Reply