<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap 5 generator example page</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet"
href=" https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css ">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<!-- Plugins -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark border border-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src=" https://dummyimage.com/100x30/007bff/efefef" alt="UI Kit"
style="width: 100px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav ms-auto me-sm-2 mt-2 mt-lg-0">
<li class="nav-item active me-3">
<a class="nav-link" href="#">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item me-3">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item me-3">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item me-3">
<a class="nav-link" href="#">Our Work</a>
</li>
<li class="nav-item me-3">
<a class="nav-link" href="#">Contacts</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<img class="rounded-circle u-box-shadow-sm me-2" width="25"
height="25" src=" https://dummyimage.com/100/007bff/efefef"
alt="Htmlstream"> John Doe <i class="fa fa-angle-down "></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Account Settings</a>
<a class="dropdown-item" href="#">Newsletter</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Sign Out</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<section class="pt-5 pb-5 mt-0 align-items-center d-flex bg-dark"
style="min-height: 25vh; background-size: cover; background-image: url("https://images.unsplash.com/photo-1477346611705-65d1883cee1e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1920&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=c0d43804e2c7c93143fe8ff65398c8e9");">
<div class="container ">
<div
class="row justify-content-start align-items-center d-flex text-md-left text-center h-100">
<div class="col-12 col-md-8 h-50 ">
<h1 class=" text-light mb-2 mt-5"><strong>Content Center - Cover
Title Goes Here</strong> </h1>
<p class="lead text-light mb-5">Cover Header 20% height - content
left</p>
</div>
</div>
</div>
</section>
<section class="pt-5 pb-5 bg-light">
<div class="container">
<div class="row mb-md-4">
<div class="col-12 col-lg-8 text-center text-lg-start">
<h3 class="text-primary small">Lorem ipsum</h3>
<h2 class=" ">Lorem ipsum dolor magna</h2>
<p class="lead">
Lorem ipsum massa in auctor molestie, magna lorem semper mauris, a
venenatis turpis purus vel metus.
</p>
</div>
</div>
<div class="row d-flex mb-5">
<div class="col-10 mx-auto col-md-4">
<div class="my-3 card card-body shadow p-4 ">
<div
class="row align-items-center d-flex text-md-center text-lg-start">
<div class="col-12 col-sm-3 col-md-3 text-center px-0">
<div class="icon-wrap text-primary my-3">
<i
class="icon p-4 border-primary bg-light text-primary md-font-size rounded-circle fa fa-tint fa-lg"></i>
</div>
</div>
<div class="col-12 col-md-9 mt-3 mt-lg-0">
<h4 class="">
Lorem ipsum dolor
</h4>
<p class=" mb-0">
Praesent mollis, massa in auctor molestie
</p>
</div>
</div>
</div>
</div>
<div class="col-10 mx-auto col-md-4">
<div class="my-3 card card-body shadow p-4">
<div class="row align-items-center text-md-center text-lg-start">
<div class="col-12 col-sm-3 col-md-3 text-center px-0">
<div class="icon-wrap text-primary my-3">
<i
class="icon p-4 border-primary bg-light text-primary md-font-size rounded-circle fa fa-lock fa-lg"></i>
</div>
</div>
<div class="col-12 col-md-9 mt-3 mt-lg-0">
<h4 class="">
Etiam sed iaculis
</h4>
<p class=" mb-0">
Praesent mollis, massa in auctor molestie
</p>
</div>
</div>
</div>
</div>
<div class="col-10 mx-auto col-md-4">
<div class="my-3 card card-body shadow p-4">
<div class="row align-items-center text-md-center text-lg-start">
<div class="col-12 col-sm-3 col-md-3 text-center px-0">
<div class="icon-wrap text-primary my-3">
<i
class="icon p-4 border-primary bg-light text-primary md-font-size rounded-circle fa fa-mobile fa-lg"></i>
</div>
</div>
<div class="col-12 col-md-9 mt-3 mt-lg-0">
<h4 class="">
Auctor molestie
</h4>
<p class=" sm-font-size text-dark-gray mb-0">
Praesent mollis, massa in auctor molestie
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row pt-3 align-items-center justify-content-center">
<div class="col text-center">
<a href="#"
class="btn btn-primary btn-rounded shadow py-3 px-5">Lorem
Ipsum</a>
</div>
</div>
</div>
</section>
<section class="mb-0 mt-0">
<div class="footer text-light">
<div class=" bg-dark pt-5 pb-5">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">
<a href="#">
<svg class="d-block mb-4" width="36" height="36"
viewBox="0 0 612 612" xmlns="http://www.w3.org/2000/svg"
focusable="false">
<title>Bootstrap</title>
<path fill="currentColor"
d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z">
</path>
<path fill="currentColor"
d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z">
</path>
</svg>
</a>
<address class="color-light-20">
1600 Amphitheatre Parkway
<br> Mountain View, CA 94043
</address>
<ul class="list-unstyled list-light">
<li>
<a href="#">Disclaimer</a>
</li>
</ul>
</div>
<div class="col-xs-6 col-sm-3">
<h4 class="my-2">Product</h4>
<ul class="list-unstyled list-light">
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Customers</a>
</li>
<li>
<a href="#">Store</a>
</li>
</ul>
</div>
<br style="clear:both" class="hidden-sm-up">
<div class="col-xs-6 col-sm-3">
<h4 class="my-2">Company</h4>
<ul class="list-unstyled list-light">
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Careers</a>
</li>
<li>
<a href="#">Press</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<div class="col-xs-6 col-sm-3">
<h4 class="my-2">Connect</h4>
<ul class="list-unstyled list-light">
<li>
<a href="#">Support</a>
</li>
<li>
<a href="#">Social</a>
</li>
<li>
<a href="#">Community</a>
</li>
</ul>
<p class="color-light mt-2">Stay up-to-date!</p>
<form>
<div class="form-group">
<div class="input-group mb-3">
<input type="text" class="form-control form-control-sm"
placeholder="Email" aria-label="Email"
aria-describedby="basic-addon2">
<button class="btn btn-primary btn-sm"
type="button">Ok</button>
</div>
</div>
</form>
</div>
</div>
<hr>
<div class="row f-flex justify-content-between" style="">
<div
class="col-md-8 text-xs-center text-left text-secondary my-1">
<p class="mt-2 text-light"> © Copyright 2021 • All Rights
Reserved |
<a class=" " href="#">Disclaimer</a> |
<a class=" " href="#">Contact</a>
</p>
</div>
<div
class="col-md-4 text-xs-center text-lg-right text-secondary my-1">
<div class="btn-container mt-1 text-md-end text-sm-center">
<div class="mb-1 mr-3 align-self-right pt-0 d-inline-block">
<a href="#" role="button"
class="text-light p-2 m-2 btn btn-round btn-rised btn-icon btn-primary">
<i class="fab fa-twitter fa-lg color-light"
aria-hidden="true"></i>
</a>
<a href="#" role="button"
class="text-light p-2 m-2 btn btn-round btn-rised btn-icon btn-primary">
<i class="fab fa-facebook fa-lg" aria-hidden="true"></i>
</a>
<a href="#" role="button"
class="text-light p-2 m-2 btn btn-round btn-rised btn-icon btn-primary">
<i class="fab fa-linkedin fa-lg" aria-hidden="true"></i>
</a>
<a href="#" role="button"
class="text-light p-2 m-2 btn btn-rised btn-round btn-icon btn-primary">
<i class="fab fa-google-plus fa-lg"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-popRpmFF9JQgExhfw5tZT4I9/CI5e2QcuUZPOVXb1m7qUmeR2b50u+YFEYe1wgzy"
crossorigin="anonymous"></script>
</body>
</html>
Comments