Html css web

bySiddikur Rahman Rayhan (Tamim ) •
0

  

<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Day 26 Bootstrap 5.2 </title>

<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" class="css">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

<!-- custom css -->
<link rel="stylesheet" href="style.css" class="css">

<style>
html{
scroll-behavior: smooth ;
}
.header{

background: #40739e;

}

.header img{

width:auto;
height: 53px;

}

.header ul {
    margin: 0;
  
}

.header ul li {
margin-left: -4px;
    display: inline-block;
    list-style: none;  
   
}

.header ul li a{
display: block;
color: white;
padding: 0 30px;
font-size: 20px;
line-height: 58px;
text-decoration: none;
border-right: 1px solid #fff;

}

.header ul li a:hover{
background: #487eb0;
text-decoration: underline;
color: #000;

}

/** banner **/

.banner{

background: url(https://i.ibb.co/XDYQ3RM/pexels-cottonbro-3944387.jpg) no-repeat center center;
padding:  200px 0;
background-size: cover;
background-attachment: fixed;

}

.banner-content h1 {
    background: rgba(89, 100, 126, 0.8);
    color: #fff;
    width: 500px;
    margin: auto;
    border-radius: 5px;
}

.banner-content h2 {

    background: rgba(107, 117, 142, 0.8);
    color: #fff;
    width: 400px;
    margin: auto;
    border-radius: 5px;
}

/** about us **/

.about-us{

background: #F0F0F0;
padding-top: 40px;
}

.about-us h3 {

padding:0px;

}

.about-us p {

padding: 18px 262px;

}

/** service section **/

.service {

padding: 70px;

}

.service-item {

padding: 20px 0;
border: 1px solid #40739E;

}

.service-item span {
background-color: #40739E;
padding: 22px 0px;
border-radius: 24px 0;
}

.service-item span i {
padding: 26px;
color: #fff;
font-size: 33px;
}

/** team **/

.meet-expert {
font-size: 33px;
color: #1FACC1;
font-family: tahoma;
}

.fa-solid.fa-quote-left {
padding: 0 27px;
font-size: 36px;
color: #1FACC1;
}

.fa-solid.fa-quote-right {
padding: 0 27px;
font-size: 36px;
color: #1FACC1;
}

.our-team img{

height: 150px;
border-radius: 75px;

}

.our-team .pic {
border: 1px solid #16A1AF;
margin: 10px;
text-align: center;
color: #16A1AF;
font-size: 20px;
}
.our-team{
background-color: rgba(252, 251, 251, 0.8);

}
.our-team h5{
color:#16A1AF;
}

/** Blog **/

.blog {
    padding: 50px;
}

.blog img{

float: left;
width: 160px;
height: auto;
margin-right: 15px;

}

/** notice **/

.notice h2 {
    font-size: 30px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 0px 30px;
    color: #16A1AF;
}

.notice ul {
list-style: none;

}

.notice ul li {
    border: 1px solid #e6e6e9;
    background: #fafafa;
    padding: 10px;
    font-size: 18px;
    margin-bottom: 10px;
    border-radius: 5px;
}

/* contact */
.contact{
background:#EFEFEF;
}

div#contact {
    padding: 40px;
}

/* footer */

.footer{
background: #40739E;
}

.footer-left{

}
.footer-left p {
    color: #fff;
    margin-top: 19px;
}

.footer-right ul{

}

.footer-right ul li {

list-style: none;
display: inline;

}

.footer-right ul li a {
    color: #fff;
    padding: 0 12px;
    font-size: 26px;
    float: right;
}

</style>
</head>
<body>

<div class="header" id="home">
<div class="container">
<div class="row">
<div class="col-md-5">

<img src="https://i.ibb.co/1LhX9Qk/1to1.png" alt="logo">

</div>
<div class="col-md-7">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#blog">Blog</a></li>
</ul>
</div>
</div>
</div>
</div>

<div class="banner">

<div class="container text-center">
<div class="row">
<div class="col-md-12">
<div class="banner-content">

<h1> Welcome To My Website </h1>
<br>
<h2> Welcome To My World </h2>
</div>

</div>
</div>
</div>

</div>
<div class="about-us" id="about">
<div class="container text-center">
<div class="row">
<h3> About Us </h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Deserunt quo ratione saepe officiis vitae accusantium aliquam sequi aliquid nobis porro assumenda voluptates iste dolores labore, adipisci dolorum iusto praesentium. Aliquam?</p>
</div>
</div>

</div>
<div class="service">
<div class="container text-center">
<div class="row">
<div class="col-md-4">
<div class="service-item">
<span><i class="fa-regular fa-lightbulb"></i></span>
<h3> 3D Animation </h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit, adipisci?</p>
</div>
</div>
<div class="col-md-4">
<div class="service-item">
<span><i class="fa-regular fa-lightbulb"></i></span>
<h3> 3D Animation </h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit, adipisci?</p>
</div>
</div>
<div class="col-md-4">
<div class="service-item">
<span><i class="fa-regular fa-lightbulb"></i></span>
<h3> 3D Animation </h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit, adipisci?</p>
</div>
</div>
</div>
</div>
</div>

<div class="meet-expert">
<div class="container text-center">
<div class="row">
<div class="col-md-12">

<p><i class="fa-solid fa-quote-left"></i>Meet the Experts Behind The Fastest Growing Skills in Business<i class="fa-solid fa-quote-right"></i></p>

</div>
</div>
</div>

</div>

<div class="our-team" id="team">
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="pic">
<img src="https://cdn3d.iconscout.com/3d/premium/thumb/casual-man-pointing-at-the-gift-he-brought-with-his-left-hand-to-give-to-his-girlfriend-on-valentines-day-4839517-4039185.png" alt="photo">
<span> <i class="fa-brands fa-facebook"></i> </span>
<span> <i class="fa-brands fa-twitter"></i> </span>
<span> <i class="fa-brands fa-linkedin"></i> </span>
</div>
</div>
<div class="col-md-4">
<h4>John Doe</h4>
<h5>Web Designer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptates nam nulla magni, reprehenderit nobis. Ut atque provident labore ullam. Provident molestiae dolores facilis ab aut, ut modi, magnam quod!</p>
</div>


<div class="col-md-2">
<div class="pic">
<img src="https://cdn3d.iconscout.com/3d/premium/thumb/casual-man-pointing-at-the-gift-he-brought-with-his-left-hand-to-give-to-his-girlfriend-on-valentines-day-4839517-4039185.png" alt="photo">
<span> <i class="fa-brands fa-facebook"></i> </span>
<span> <i class="fa-brands fa-twitter"></i> </span>
<span> <i class="fa-brands fa-linkedin"></i> </span>
</div>
</div>
<div class="col-md-4">
<h4>John Doe</h4>
<h5>Graphic Designer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptates nam nulla magni, reprehenderit nobis. Ut atque provident labore ullam. Provident molestiae dolores facilis ab aut, ut modi, magnam quod!</p>
</div>
</div>

</div>

</div>

<div class="our-team">
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="pic">
<img src="https://cdn3d.iconscout.com/3d/premium/thumb/casual-man-pointing-at-the-gift-he-brought-with-his-left-hand-to-give-to-his-girlfriend-on-valentines-day-4839517-4039185.png" alt="photo">
<span> <i class="fa-brands fa-facebook"></i> </span>
<span> <i class="fa-brands fa-twitter"></i> </span>
<span> <i class="fa-brands fa-linkedin"></i> </span>
</div>
</div>
<div class="col-md-4">
<h4>John Doe</h4>
<h5>Full Stack Web Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptates nam nulla magni, reprehenderit nobis. Ut atque provident labore ullam. Provident molestiae dolores facilis ab aut, ut modi, magnam quod!</p>
</div>


<div class="col-md-2">
<div class="pic">
<img src="https://cdn3d.iconscout.com/3d/premium/thumb/casual-man-pointing-at-the-gift-he-brought-with-his-left-hand-to-give-to-his-girlfriend-on-valentines-day-4839517-4039185.png" alt="photo">
<span> <i class="fa-brands fa-facebook"></i> </span>
<span> <i class="fa-brands fa-twitter"></i> </span>
<span> <i class="fa-brands fa-linkedin"></i> </span>
</div>
</div>
<div class="col-md-4">
<h4>John Doe</h4>
<h5>PHP Developer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptates nam nulla magni, reprehenderit nobis. Ut atque provident labore ullam. Provident molestiae dolores facilis ab aut, ut modi, magnam quod!</p>
</div>
</div>

</div>

</div>

<div class="blog" id="blog">
<div class="container">
<div class="row">

<div class="col-md-8">
<img src="https://media.istockphoto.com/photos/professional-web-design-and-website-development-service-picture-id1150242042?k=20&m=1150242042&s=612x612&w=0&h=MQWKxDGFLn7Klrxf5tfsZlao_TEwD6fzaogsh8kra8s=" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus suscipit recusandae iure ullam consequuntur quidem quibusdam sed quos aut voluptatum perferendis iusto repellendus, voluptate reiciendis, sunt vero numquam soluta aliquid beatae dicta ab distinctio atque? Dolorem, voluptate sapiente beatae itaque quo alias ea aliquam, delectus cum facilis autem a deleniti, provident quod molestias voluptas molestiae, consequatur accusantium et fuga. Harum ducimus inventore ab unde porro, nemo accusamus necessitatibus tempore rerum aliquam molestias voluptate modi at! Accusantium, neque quae nulla suscipit, earum voluptatum dicta soluta facere! Saepe est quis, consequuntur eum culpa et dolorem nihil  </p>

<div class="blog-item">

<img src="https://media.istockphoto.com/photos/professional-web-design-and-website-development-service-picture-id1150242042?k=20&m=1150242042&s=612x612&w=0&h=MQWKxDGFLn7Klrxf5tfsZlao_TEwD6fzaogsh8kra8s=" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus suscipit recusandae iure ullam consequuntur quidem quibusdam sed quos aut voluptatum perferendis iusto repellendus, voluptate reiciendis, sunt vero numquam soluta aliquid beatae dicta ab distinctio atque? Dolorem, voluptate sapiente beatae itaque quo alias ea aliquam, delectus cum facilis autem a deleniti, provident quod molestias voluptas molestiae, consequatur accusantium et fuga. Harum ducimus inventore ab unde porro, nemo accusamus necessitatibus tempore rerum aliquam molestias voluptate modi at! Accusantium, neque quae nulla suscipit, earum voluptatum dicta soluta facere! Saepe est quis, consequuntur eum culpa et dolorem nihil  </p>
</div>
</div>

<div class="col-md-4">
<div class="notice">
<h2>Notice........</h2>
<ul>
<li>Lorem ipsum dolor sit, amet.</li>
<li>Lorem ipsum dolor sit, amet.</li>
<li>Lorem ipsum dolor sit, amet.</li>
<li>Lorem ipsum dolor sit, amet.</li>
<li>Lorem ipsum dolor sit, amet.</li>
<li>Lorem ipsum dolor sit, amet.</li>
<li>Lorem ipsum dolor sit, amet.</li>
</ul>
</div>
</div>
</div>
</div>
</div>

</div>
<div class="contact pb-5" id="contact">
<div class="container">
<div class="row">

<div class="col-md-6">

<div class="google-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d467450.5476853096!2d90.30585785986713!3d23.748898350659836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755ca24bc895b49%3A0x9810d2158dc3a536!2z4Kao4Ka-4Kaw4Ka-4Kav4Ka84Kaj4KaX4Kae4KeN4KacIOCmnOCnh-CmsuCmvg!5e0!3m2!1sbn!2sbd!4v1663558895279!5m2!1sbn!2sbd" width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<div class="col-md-6">

<div class="contact-form">
<form action="#">

<input type="text" class="form-control mb-3" placeholder="Name">
<input type="email" class="form-control mb-3" placeholder="Email">
<input type="text" class="form-control mb-3" placeholder="Subject">
<textarea name="" id="" cols="30" class="form-control mb-3" rows="7"></textarea>
<input type="submit" value="Click to send" class="btn btn-primary">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="footer-left">

<p>&copy; All right reserved by filekb.com </p>

</div>

</div>
<div class="col-md-6">

<div class="footer-right">

<ul>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>

</div>
</div>
</div>
</div>
</body>
</html>






Siddikur Rahman Rayhan (Tamim )

Siddikur Rahman Rayhan from Bangladesh is a versatile individual with a keen interest in technology, cricket, politics, and Islamic studies. With a strong academic background and proficiency in multiple languages, he excels in blogging, YouTube, web development, Graphix Design and content creation. Skilled in video editing, meme generation, and photography, Rayhan is dedicated to personal and professional growth, seeking connections with like-minded individuals to support his endeavors.

إرسال تعليق (0)
أحدث أقدم