How to design Responsive home page with image slider using bootstrap, html ,CSS with full background image
Planics developer is always try to gives you Best design for Website. Here you
can get Free Html template or design.
We try to Provide best designing with
Accurate and simple code.
How to Design Responsive Home page?
Here we design for car decor website
home page templet if you want to use then you can download or copy below code
and attach with your website.
Free Responsive Homepage for car website or car décor ?
CarDecore.html
<!doctype html>
<html lang="en">
<head>
<!-- Required
meta tags -->
<meta
charset="utf-8">
<meta
name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!--
Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link
rel="stylesheet" href="style.css">
<title>welcome on car decor</title>
</head>
<body>
<nav
class="navbar navbar-expand-lg navbar-dark fixed-top">
<div
class="container">
<a
class="navbar-brand" href="#">CAR DECOR</a>
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span
class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse" id="navbarNav">
<ul
class="navbar-nav ml-auto">
<li
class="nav-item active">
<a
class="nav-link" href="#">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a
class="nav-link" href="#">about</a>
</li>
<li
class="nav-item">
<a
class="nav-link" href="#">Contact</a>
</li>
<li
class="nav-item">
<a
class="nav-link" href="#">more</a>
</li>
<li
class="nav-item">
<button type="button" class="btn btn-dark
nav-link">Login</button>
</li>
</ul>
</div>
</div>
</nav>
<div
id="carouselExampleIndicators" class="carousel slide"
data-ride="carousel">
<ol
class="carousel-indicators">
<li
data-target="#carouselExampleIndicators"
data-slide-to="0" class="active"></li>
<li
data-target="#carouselExampleIndicators"
data-slide-to="1"></li>
<li
data-target="#carouselExampleIndicators"
data-slide-to="2"></li>
</ol>
<div
class="carousel-inner">
<div
class="carousel-item active">
<img
src="images/carss1.jpg" class="d-block w-100"
alt="...">
<div
class="carousel-caption d-none d-md-block">
<h1>First car</h1>
<p>Nulla vitae elit libero, a pharetra augue mollis
interdum.</p>
</div>
</div>
<div
class="carousel-item">
<img
src="images/carss2.jpg" class="d-block w-100"
alt="...">
<div
class="carousel-caption d-none d-md-block">
<h1>second car</h1>
<p>Nulla vitae elit libero, a pharetra augue mollis
interdum.</p>
</div>
</div>
<div
class="carousel-item">
<img
src="images/carss3.jpg" class="d-block w-100"
alt="...">
<div
class="carousel-caption d-none d-md-block">
<h1>Third car</h1>
<p>Nulla vitae elit libero, a
pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleIndicators" role="button"
data-slide="prev">
<span
class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span
class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleIndicators" role="button"
data-slide="next">
<span
class="carousel-control-next-icon" aria-hidden="true"></span>
<span
class="sr-only">Next</span>
</a>
</div>
<!-- Optional
JavaScript -->
<!-- jQuery
first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
|
How to Design attractive card designusing only html and css ?
style.css
.carousel-item
{
height: 100vh;
width: 100%;
background:no-repeat center center scroll;
}
img
{
height: 100vh;
width: 100%;
}
|
How to set background video in html homepage or navigation bar?
0 coment�rios: