ওয়েবসাইট ডিজাইন নং ১

এইচটিএমএল কোড

<!DOCTYPE HTML>
<html lang="en-US">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Tutorial | ITBari.com</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="../css/stack-learner.css" />
</head>

<nav id="navig" class="navbar navbar-expand-lg bg-success text-light sticky-top">
		<div class="container-fluid">
			<a target="_blank" href="https://www.facebook.com/rashedulislam2004/"><img src="../image/stack.gif"
					class="headerimg" alt=""> </a>
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
				data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
				aria-label="Toggle navigation">
				<span style="background-color:white" class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav me-auto mb-2 mb-lg-0 ">
					<li class="nav-item">
						<a class="nav-link active " style="color:white" aria-current="page" href="#">Home</a>
					</li>
					<li class="nav-item">
						<a href="#" style="color:white" class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item dropdown">
						<a style="color:white" class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
							role="button" data-bs-toggle="dropdown" aria-expanded="false">
							Dropdown
						</a>
						<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
							<li><a class="dropdown-item" href="#">Action</a></li>
							<li><a class="dropdown-item" href="#">Another action</a></li>
							<li>
								<hr class="dropdown-divider">
							</li>
							<li><a class="dropdown-item" href="#service">Something else here</a></li>
						</ul>
					</li>
					<li class="nav-item">
						<a style="color:white" class="nav-link " href="#" tabindex="-1" aria-disabled="true">top
							news</a>
					</li>
				</ul>
				<form class="d-flex">
					<input class="form-control me-2" type="search" placeholder="Search your course" aria-label="Search">
					<button class="btn btn-outline-warning" type="submit">Search</button>
				</form>
			</div>
		</div>
	</nav>
	<div class="clearfix" style="padding:77px;">
		<img src="../svg/Online_learning.svg" class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
		<p class="text-secondary">We don't sell courses, We sell guidance</p>
		<h2 class="" id="human">Human to Human Resource</h2>
		<p>
			We provide a lot of free content throughout our whole ecosystem. But in this platform, we are listing tons
			of great
			lessons that can help you grow 5x faster with our guidance. You can learn specific technology with our
			world-class byte
			size courses which are called Chunk.
		</p>
		<button class="btn btn-outline-danger button">check our course</button><br />
		<div class="clearfix"></div>
		<div class="clearfix"></div> <br><br>
		<div style="margin-top: 150px;">
			<p align="center">Learn From Every Aspects</p>
			<h2 align="center" id="bottom">Explore <a class="a-team">Our</a> Services
			</h2>
		</div>
		<div class="row">
			<div class="col-sm-6">
				<div class="card">
					<div class="card-body">
						<img class="img-fluid img_per_dill" src="../image/888.png" alt="">
					</div>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="card">
					<div class="card-body">
						<img class="img-fluid img_per_dill" src="../image/888.png" alt="">
					</div>
				</div>
			</div>
		</div>

<div class="row" style="margin-top: 34px;">
			<div class="col-sm-6">
				<div class="card">
					<div class="card-body">
						<img class="img-fluid img_per_dill" src="../image/888.png" alt="">
					</div>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="card">
					<div class="card-body">
						<img class="img-fluid img_per_dill" src="../image/888.png" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="clearfix"></div><br />
	<p align="center">Customer Satisfaction First Service</p>
	<h2 align="center" id="service">About Our Service</h2>
	<div class="container" id="serviceimg">
		<div class="row">
			<div class="col order-last">
				<img class="rounded mx-auto d-block image-rotate" src="../image/ribbon.png" alt="">
				<h3 align="center">Latest Technology</h3>
				<p align="center">We always keep our eyes on the latest and trending technologies to make you up to date
					with the world. With us, you will
					never miss the trends.</p>
			</div>
			<div class="col">
				<img class="rounded mx-auto d-block image-rotate" src="../image/book1.png" alt="">
				<h3 align="center">Byte Size Chunks</h3>
				<p align="center"> We design our courses as you can learn a very specific topic in detail, including
					theory,
					implementation, projects, and
					best practices.</p>
			</div>
			<div class="col order-first">
				<img class="rounded mx-auto d-block image-rotate" src="../image/translate.png" alt="">
				<h3 align="center">Course Language</h3>
				<p align="center">We provide all the courses and its materials in our beloved Bangla. Each lecture,
					article, and
					practices all are written in Bangla.</p>
			</div>

</div>
		<div class="container" id="top">
			<div class="row">
				<div class="col order-last">
					<img class="rounded mx-auto d-block image-rotate" src="../image/ribbon.png" alt="">
					<h3 align="center">Latest Technology</h3>
					<p align="center">We always keep our eyes on the latest and trending technologies to make you up to
						date
						with the world. With us, you will
						never miss the trends.</p>
				</div>
				<div class="col">
					<img class="rounded mx-auto d-block image-rotate" src="../image/book1.png" alt="">
					<h3 align="center">Byte Size Chunks</h3>
					<p align="center"> We design our courses as you can learn a very specific topic in detail, including
						theory,
						implementation, projects, and
						best practices.</p>
				</div>
				<div class="col order-first">
					<img class="rounded mx-auto d-block image-rotate" src="../image/translate.png" alt="">
					<h3 align="center">Course Language</h3>
					<p align="center">We provide all the courses and its materials in our beloved Bangla. Each lecture,
						article, and
						practices all are written in Bangla.</p>
				</div>

</div>
			<div class="container" id="top">
				<div class="row">
					<div class="col order-last">
						<img class="rounded mx-auto d-block image-rotate" src="../image/ribbon.png" alt="">
						<h3 align="center">Latest Technology</h3>
						<p align="center">We always keep our eyes on the latest and trending technologies to make you up
							to date
							with the world. With us, you will
							never miss the trends.</p>
					</div>
					<div class="col">
						<img class="rounded mx-auto d-block image-rotate" src="../image/book1.png" alt="">
						<h3 align="center">Byte Size Chunks</h3>
						<p align="center"> We design our courses as you can learn a very specific topic in detail,
							including
							theory,
							implementation, projects, and
							best practices.</p>
					</div>
					<div class="col order-first">
						<img class="rounded mx-auto d-block image-rotate" src="../image/translate.png" alt="">
						<h3 align="center">Course Language</h3>
						<p align="center">We provide all the courses and its materials in our beloved Bangla. Each
							lecture,
							article, and
							practices all are written in Bangla.</p>
					</div>

</div>
			</div>
			<div id="freecourse">
				<pre align="center" id="predesign">Feel Free to Explore Our Free and Premium Courses</pre>
				<h2 align="center">Our Popular Chunks</h2>
				<div id="top" class="container">
					<div class="row">
						<div class="col order-last">
							<img class="img-fluid" src="../image/java.png" alt="">
							<div id="insidecourse">
								<h4>SL3 Fundamental Course</h4>
								<p>৳ 15000</p>
							</div>

</div>
						<div class="col">
							<img class="img-fluid" src="../image/python.png" alt="">
							<div id="insidecourse">
								<h4>SL3 Fundamental Course - Python</h4>
								<p>৳ 15000</p>
							</div>
						</div>
						<div class="col order-first rash">
							<img class="img-fluid" src="../image/program.png" alt="">
							<div id="insidecourse">
								<h4>SL3 Fundamental Course - C Programming</h4>
								<p>৳ 15000</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="d-grid gap-2 col-6 mx-auto">
				<button id="top" class="btn btn-outline-success buttonott" type="button">view more courses</button>
			</div>
			<div class="clearfix"></div>

</div>
		<div id="top">
			<p align="center">Human to Human Resource</p>
			<h2 align="center">Motive Behind Stack School
			</h2>
		</div>
		<div class="card-group" id="top">
			<div class="card opacity-look">
				<img style=" height:372px;" src="../image/rashedul (3).jpg" class="card-img-top" alt="...">
				<div class="card-body">
					<p class="card-text">“I dream one day we (Bangladeshi) will have a giant tech company that will be
						recognized by each person in the universe.
						To make this dream came true we need truly skilled people. We need to learn, promote, and
						implement modern technologies.
						We need people who can risk their lives for our country. This is just a dream but this dream is
						the only source of our
						motivation.”</p><br>

<p class="card-text"><small class="text-muted">Founder & CEO
						</small></p>
					<h5 style="margin-top:-14px;">HM Nayem
					</h5>
				</div>
			</div>
			<div class="card opacity-look" style="border-left:1px solid #ddd">
				<img style=" height:372px;" src="../image/rashedul (2).jpg" class="card-img-top" alt="...">
				<div class="card-body">
					<p class="card-text">“As our country is still struggling to hold her ground in the software
						industry. Stack learner will develop software
						shoulders and Bangladesh will satisfy its needs. Today they count our population, One day they
						will count our human
						capital. I am following my heart and it will surely take us to the pinnacle of success.”
					</p>
					<p class="card-text"><small class="text-muted">Co-Founder & COO
						</small></p>
					<h5 style="margin-top:-14px;">Shegufa Taranjum
					</h5>
				</div>
			</div>
			<div class="card opacity-look" style="border-left:1px solid #ddd">
				<img style=" height:372px;" src="../image/rashedul (1).jpg" class="card-img-top" alt="...">
				<div class="card-body">
					<p class="card-text">“Everyone has a dream to do something, I also had. But while starting my
						journey, I face the lack of enough resource to
						learn technologies in Bangla. That lacking encouraged me to search for the proper solution.
						Everyone says, you need
						money to do something big, but the truth is - there are many ways your compassion, mentality,
						intelligence and most
						importantly your knowledge will influence how much money you will earn. The best way to
						contribute to your country is to
						contribute yourself.”</p>
					</p>
					<p class="card-text"><small class="text-muted">Co-Founder & CFO
						</small></p>
					<h5 style="margin-top:-14px;">Shayaike Salvy
					</h5>
				</div>
			</div>
		</div>

<img class="ttt" align="center" src="../svg/chatting.svg" alt="" style="width:200px;" id="top" id="bottom">
		<style>
			.ttt:hover {
				opacity: 0.1;
				animation: all 1s ease;
			}
		</style>

<footer class="pt-4 my-md-5 pt-md-5 border-top">
			<div class="row">
				<div class="col-12 col-md">
					<img class="mb-2 img-fluid" src="../image/stack.gif" alt="" style="width:200px;">
					<small class="d-block mb-3 text-muted">© 2017-“2021. Designed By <a target="_blank"
							href="https://www.facebook.com/rashedulislam2004/">Rashedul
							islam</a></small>
				</div>
				<div class="col-6 col-md">
					<h5>Features</h5>
					<ul class="list-unstyled text-small">
						<li><a class="link-secondary" href="#">Cool stuff</a></li>
						<li><a class="link-secondary" href="#">Random feature</a></li>
						<li><a class="link-secondary" href="#">Team feature</a></li>
						<li><a class="link-secondary" href="#">Stuff for developers</a></li>
						<li><a class="link-secondary" href="#">Another one</a></li>
						<li><a class="link-secondary" href="#">Last time</a></li>
					</ul>
				</div>
				<div class="col-6 col-md">
					<h5>Resources</h5>
					<ul class="list-unstyled text-small">
						<li><a class="link-secondary" href="#">Resource</a></li>
						<li><a class="link-secondary" href="#">Resource name</a></li>
						<li><a class="link-secondary" href="#">Another resource</a></li>
						<li><a class="link-secondary" href="#">Final resource</a></li>
					</ul>
				</div>
				<div class="col-6 col-md">
					<h5>About</h5>
					<ul class="list-unstyled text-small">
						<li><a class="link-secondary" href="#">Team</a></li>
						<li><a class="link-secondary" href="#">Locations</a></li>
						<li><a class="link-secondary" href="#">Privacy</a></li>
						<li><a class="link-secondary" href="#">Terms</a></li>
					</ul>
				</div>
			</div>
		</footer>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umdJ:\html/popper.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
			crossorigin="anonymous"></script>

</body>

</html>

সিএসএস কোড

@import url('https://fonts.googleapis.com/css2?family=Rajdhani&display=swap');
#human{
   border-left: 5px solid #417505;
   margin-top:20px;
   margin-bottom:50px;
   padding:18px;
}
.rashedul{
    padding:200px;
}
 p{
 font-family: 'Rajdhani', sans-serif;
 font-size: 20px;;
}
.button{
    margin-top:50px;
    padding:10px 50px;
    border:5px solid #ff5757;

}
.mainwrap{
    margin:0 auto;
}
.course{
    float:left;
}

.headerimg{
    width:150px;
}
#support{
    width:100%;height:400px;background-color:red;
}
#freecourse img{
    width:350px;
}
.rash{
    width:100px;
}
#footer{
    width:100%;
}
#service{
    margin-bottom:60px;
}
#predesign{
    margin-top:90px;
}
#top{
    margin-top:90px;
}
.pricing-header {
  max-width: 700px;
}
#about_section {
    height: 750px;
    margin-right: 20px;
    box-shadow: -8px 10px 30px -23px;
}
.buttonott:hover{
    background-image: url(../image/google.png);
    background-repeat: no-repeat;
    background-size: 35px;
    background-position:130px 0px;
    animation:all 1s ease;
}
.img_per_dill{
    padding: 23px;
}
/* img:hover{
    transform:rotate(10deg);
    transform:alternate;
} */
#bottom{
    margin-bottom:50px;
}
.a-team{
    border-bottom: 4px solid #417505;
}
p{
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
}

.col-8{
    border:2px solid red;
}
.col-4{
    border:2px solid red;
}
.card{
    margin-right:20px;
}
.opacity-look:hover{
    opacity:0.5;
}
.image-rotate:hover{
   transform: rotate(180deg);
}