Skip to content
This repository has been archived by the owner on Apr 21, 2022. It is now read-only.

Extended intex.html and styled with help of bootstrap-4 framework... #439

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Extended intex.html and styled with help of bootstrap-4 framework... #439

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 193 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,193 @@
---
layout: home
---
<!DOCTYPE html>
<html lang="en">
<head>

<title>Dynamic 1</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../bootstrap - 4/css/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">
</head>
<body>


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto pr-5 ">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log in</a>
</li>

</ul>

</div>
</nav>
<div id="demo" class="carousel slide" data-ride="carousel">

<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>

<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/amazing-animal-beautiful-beautifull (2).jpg" alt="" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="images/pexels-photo-230629.jpeg" alt="" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="images/pexels-photo-326055.jpeg" alt="" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<section class="my-5">
<div class="py-5">
<h3 class="text-center"> About Us</h3></div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-12">
<img src="images/pexels-photo-709552.jpeg" class="img-fluid aboutimg" alt="">
</div>
<div class="col-lg-6 col-md-6 col-12">
<h2 class="display-4">Welcome to Dynamic1</h2>
<p class="py-5"> weuovhbo aihgwai guhgoehrguhwpag ow hr wohegroheqfhvjbe iehwoa
2uy4ohfouyo3 ciru24hr34hfo2 r2uw oio2hw4h3ot 2jhowu4hohgou24t
u234hthuyt3qhhp2;qp4o3hrhp42'q;3h4oruw
</p>
<a href="about.php" class="btn btn-success px-4 btn1"> Know More</a>
</div>
</div>
</div>
</section>
<section my-5>
<div class="py-5">
<h3 class="text-center"> Our Services</h3></div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-12">
<div class="card">
<img class="card-img-top" src="images/pexels-photo-247478.jpeg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-12">
<div class="card">
<img class="card-img-top" src="images/pexels-photo-247478.jpeg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-12">
<div class="card">
<img class="card-img-top" src="images/pexels-photo-247478.jpeg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
</div>
</div>
</section>


<section my-5>
<div class="py-5">
<h3 class="text-center"> Gallary</h3></div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-12">
<img src="images/amazing-animal-beautiful-beautifull.jpg" class="img-fluid pb-4" alt="">
</div>
<div class="col-lg-4 col-md-4 col-12">
<img src="images/amazing-animal-beautiful-beautifull.jpg" class="img-fluid pb-4" alt="">
</div>
<div class="col-lg-4 col-md-4 col-12">
<img src="images/amazing-animal-beautiful-beautifull.jpg" class="img-fluid pb-4" alt="">
</div>
<div class="col-lg-4 col-md-4 col-12">
<img src="images/amazing-animal-beautiful-beautifull.jpg" class="img-fluid pb-4" alt="">
</div>
<div class="col-lg-4 col-md-4 col-12">
<img src="images/amazing-animal-beautiful-beautifull.jpg" class="img-fluid pb-4" alt="">
</div>
<div class="col-lg-4 col-md-4 col-12">
<img src="images/amazing-animal-beautiful-beautifull.jpg" class="img-fluid pb-4" alt="">
</div>
</div>
</div>
</section>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Yusei Magic', sans-serif;

}
.carousel-inner img {
width: 100%;
height: 80vh;
}
.aboutimg{
width: 100%;
height: 350px!important;
}
.btn1{
border: 2px solid purple;
padding: 10px;
}
</style>
<footer>
<p class="p-3 bg-dark text-white text-center" >coyright @ 2021</p>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>