WEBSITE USING BOOTSTRAP
MAIN PAGE OF WEBSITE
<!doctype html>
<html lang="en" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.rtl.min.css"
integrity="sha384-nU14brUcp6StFntEOOEBvcJm4huWjB0OcIeQ3fltAfSmuZFrkAif0T+UtNGlKKQv" crossorigin="anonymous">
<title>Bootstrap project</title>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Debadatta Programming</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 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" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact.html">Contact Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Topics
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">BOOTSTRAP</a></li>
<li><a class="dropdown-item" href="#">More</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<div class="mx-2">
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#loginModal">Login</button>
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#signupModal">Sign Up</button>
</div>
</div>
</div>
</nav>
<!--login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Login To Our Website</h1>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div id="carouselExampleCaptions" class="carousel Slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<!--signup Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Creat New Account</h1>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputname1" class="form-label">Enter Your Name</label>
<input type="name" class="form-control" id="exampleInputEmail1" aria-describedby="nameHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Confirm Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="florian-olivo-4hbJ-eymZ1o-unsplash.jpg" class="d-block w-100" alt="..." height="400px">
<div class="carousel-caption d-none d-md-block">
<h2>Technology</h2>
<h4>New Technology And Trends</h4>
<button class="btn btn-success">Web Development</button>
<button class="btn btn-danger">Data Science</button>
<button class="btn btn-primary">Machine Learning</button>
</div>
</div>
<div class="carousel-item">
<img src="juanjo-jaramillo-mZnx9429i94-unsplash.jpg" class="d-block w-100" alt="..." height="400px">
<div class="carousel-caption d-none d-md-block">
<h2>Programming</h2>
<h4>Learn Programming</h4>
<button class="btn btn-success">C++</button>
<button class="btn btn-danger">Java</button>
<button class="btn btn-primary">Python</button>
</div>
</div>
<div class="carousel-item">
<img src="pankaj-patel-Fi-GJaLRGKc-unsplash.jpg" class="d-block w-100" alt="..." height="400px">
<div class="carousel-caption d-none d-md-block">
<h2>Computer</h2>
<h4>Computer Components</h4>
<button class="btn btn-success">Hardware</button>
<button class="btn btn-danger">Software</button>
<button class="btn btn-primary">Ip</button>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="container">
<div class="container my-4">
<div class="row mb-2">
<div class="col-md-6">
<div
class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">Java</strong>
<h3 class="mb-0">Java</h3>
<div class="mb-1 text-muted">Sep 19</div>
<p class="card-text mb-auto">Learn Java From Basics To Advance And Be A Java Developer.Grab Opportunity
</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<img class="bd-placeholder-img" width="200" height="250" src="Java.jpg" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div
class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Python</strong>
<h3 class="mb-0">Python</h3>
<div class="mb-1 text-muted">Aug 15</div>
<p class="mb-auto">Learn Python From Basics To Advance And Be A Python Developer,Grab Opportunity</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<img class="bd-placeholder-img" width="200" height="250" src="phython.jpeg">
</div>
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-md-6">
<div
class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-danger">C++</strong>
<h3 class="mb-0">C++</h3>
<div class="mb-1 text-muted">July 15</div>
<p class="card-text mb-auto">Learn C++ From Basics To Advance And Be A C++ Developer,Grab Opportunity</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<img class="bd-placeholder-img" width="200" height="250" src="c++.png" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div
class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-warning">PHP</strong>
<h3 class="mb-0"> PHP</h3>
<div class="mb-1 text-muted">June 25</div>
<p class="mb-auto">Learn PHP From Basics To Advance And Be A PHP Developer,Grab Opportunity</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<img class="bd-placeholder-img" width="200" height="250" src="php.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<p>© 2023-2023 Debadatta, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
<a href="about.html"></a>
<a href="contact.html"></a>
<link href="about.html">
<link href="contact.html">
</body>
</html>
WEBSITE LINK
https://debadattaparida007.github.io/DebadattaProgrammingBootstrap/
WEB CAPTURE
IT'S JUST LAYOUT OF A WEBSITE MADE BY ME WITH BOOTSTRAP WITHOUT ABOUT
AND CONTACT PAGE.
I WILL POST ANATHOR BLOG WITH THOSE TWO PAGES.
.png)
Comments
Post a Comment