How to make website
How to make website
---------------------------
অবশ্যই Css ফাইলের ভিতর bootstrap.min.css রাখতে হবে
অবশ্যই Js ফাইলের ভিতর bootstrap.min.js রাখতে হবে
HTML CODE :-
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Tania web</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div class="main-area">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="header">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="menu">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="sidebar">
</div>
</div>
<div class="col-md-8">
<div class="main-content">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="footer">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
CSS CODE :-
.{
margin:0;
padding:0;
}
.main-area{
width:100%;
min-height:1000px;
background-color:#E9E9E9;
margin:0 auto;
}
.header{
width:100%;
background-color:#00ffff;
height:200px;
}
.menu{
width:100%;
background-color:pink;
height:50px;
}
.sidebar{
width:100%;
background-color:red;
min-height:800px;
}
.main-content{
width:100%;
background-color:green;
min-height:800px;
}
.footer{
width:100%;
background-color:#00ffff;
height:50px;
}
PART - 2
------------
HTML CODE :-
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Tania Masum web</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div class="main">
<div class="header-area">
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="header-main">
<h1>Tania <a href="https://masumbillah6778bd.blogspot.com/"><span>Sultana</span></a></h1>
<p>Masum Billah 6778</p>
</div>
<div class="menu">
<ul>
<li><a href="#" id="active">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="photo.html">Photo</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="others.html">Others</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-area">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="slider">
<img src="images/iss.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="sidebar">
<div class="widget">
<img src="images/886.jpg"/>
<br></br>
<h3>Masum</h3>
<h4>The birth of the website</h4>
<h5>July 12th 2021</h5>
<p>fjdsf jfhfkfjf sdffdbbj djasbhasm dasvdgfas dnkasvd gfs dasdb</p>
<a href="#">Read more</a>
</div>
<div class="widget">
<h3>Tania</h3>
<div class="widget">
<a href="#">Link 1</a>
</div>
<div class="widget">
<a href="#">Link 2</a>
</div>
<div class="widget">
<a href="#">Link 3</a>
</div>
</div>
<div class="widget">
<h3>Search</h3>
<!--<input type="search" value="Enter Keywords"/>-->
<input type="search" value="Enter Keywords"/>
<input type="button" value="GO">
</div>
<div class="widget">
<h3>Upload</h3>
<input type="file">
<input type="button" value="Upload">
</div>
</div>
</div>
<div class="col-md-8">
<div class="content">
<div class="widget">
<div class="widget">
<h1 class="animate__animated animate__bounce">Home</h1>
</div>
<h2>Masum</h2>
<img src="images/tania.jpg"/>
<p>Like a thesis statement, a topic sentence has a specific main point. Whereas the thesis is the main point of the essay, the topic sentence is the main point of the paragraph. Like the thesis statement, a topic sentence has a specific main point. Whereas the thesis is the main point of the essay, the topic sentence is the</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-area">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-main">
<div class="fotter-menu">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="photo.html">Photo</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="others.html">Others</a></li>
</ul>
</div>
<p>Copyright © simple style blue trees । HTML5 । CSS । JS disign from <a href="https://masumbillah6778bd.blogspot.com">Here.</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
CSS CODE :-
*{
margin:0;
padding:0;
font-family:berkshireswash regular;
}
@font-face{
src:url('fonts/Love Letters.ttf');
font-family:Love Letters;
}
@font-face{
src:url('fonts/berkshireswash regular.ttf');
font-family:berkshireswash regular;
}
.main{
width:100%;
min-height:1000px;
background-color:#E9E9E9;
}
.header-area{
width:100%;
height:200px;
background-color:#00ffff;
}
.header-main{
width:100%;
height:150px;
background-color:#808000;
padding:25px 15px;
}
.header-main h1{
font-family:Love Letters;
color:#000000;
}
.header-main h1 a{
font-family:Love Letters;
color:#ff0000;
}
.header-main h1 a:hover{
text-decoration:none;
}
.header-main h1 a span:hover{
text-decoration:none;
color:#00ff00;
}
.header-main p{
color:#ffff00;
}
.menu{
width:100%;
height:50px;
background-color:pink;
border-top:2px solid #0000ff;
border-bottom:2px solid #0000ff;
text-align:right;
}
.menu ul li{
/*list-style:none;
float:left;*/
display:inline-block;
line-height:48px;
}
.menu ul li a{
text-decoration:none;
background-color:red;
padding:5px 10px;
color:#fff;
margin:0px 5px;
}
.menu ul li a:hover{
color:#000;
}
#active{
background-color:#008000;
}
#active:hover{
color:#fff;
}
.slider img{
width:100%;
border:15px solid #0000ff;
margin:20px 0px;
}
.widget{
padding:15px 10px 20px 10px;
border:2px solid #00f;
border-radius:15px;
margin-bottom:10px;
}
.widget img{
width:100%;
height:none;
margin-bottom:-5px;
}
.content h2{
padding:10px 0px;
color:green;
}
.widget h3{
font-weight:normal;
padding-bottom:5px;
color:#ff0000;
}
.widget h4{
font-weight:normal;
padding-bottom:3px;
color:#0000FF;
}
.widget h5{
font-weight:normal;
padding-bottom:3px;
color:#FF00FF;
}
.widget p{
padding:5px 0px;
color:#800080;
}
.widget a{
padding:5px 0px;
color:#f00;
display:block;
}
.content h1{
padding:10px 0px;
color:red;
}
.content h2{
padding:10px 0px;
color:red;
}
.content img{
width:100%;
height:none;
}
.content p{
padding:10px 0px;
}
.content ul{
box-sizing:border-box;
margin-left:20px;
}
.footer-area{
width:100%;
height:100px;
background-color:#00ffff;
display:block;
overflow:hidden;
}
.footer-main{
width:100%;
height:100px;
background-color:#808000;
text-align:center;
}
.fotter-main p{
color:#000;
margin:20px 0px;
display:block;
text-align:center;
}
.fotter-menu ul li{
display:inline-block;
padding:10px 0px;
}
.fotter-menu ul li a{
display:block;
color:#000;
text-decoration:none;
border-left: 1px solid #000;
padding:0px 10px;
}
#current{
border:none;
}
No comments