AmoEba -index.html
*********************video file******************************
https://drive.google.com/file/d/1ycnN48gmkrhQi3i3MeW3mzeuAC-5p6DF/view?usp=sharing
*****************************************************
<!DOCTYPE html>
<html>
<head>
<title>amoeba</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="#" style="color: white">Amoeba</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">
<li class="nav-item active">
<a class="nav-link" href="#" style="color: white">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div class="container text-center">
<i class="fa fa-flask" aria-hidden="true"></i>
<div class="welcome">Welcome to Amoeba </div>
<p class="par">
Lorem ipsum dolor sit amet, natum bonorum expetendis usu ut. Eum impetus offendit disputationi <br>eu, at vim aliquip lucilius praesent. Alia laudem antiopam te ius, sed ad munere integre, <br>ubique facete sapientem nam ut.</p>
</section>
<section id="about">
<div class="container">
<div class="row ">
<div class="col-md-4 text-center"><i class="fa fa-code" aria-hidden="true"></i><h1>
Valid HTML5</h1><P>Lorem ipsum dolor sit amet, mutat graeco volumus ad eam, singulis patrioque comprehensam nam no. Mei cu dicat voluptaria volumus.</P></div>
<div class="col-md-4 text-center "><i class="fa fa-code" aria-hidden="true"></i><h1>
Valid HTML5</h1><P>Lorem ipsum dolor sit amet, mutat graeco volumus ad eam, singulis patrioque comprehensam nam no. Mei cu dicat voluptaria volumus.</P></div>
<div class="col-md-4 text-center"><i class="fa fa-code" aria-hidden="true"></i><h1>
Valid HTML5</h1><P>Lorem ipsum dolor sit amet, mutat graeco volumus ad eam, singulis patrioque comprehensam nam no. Mei cu dicat voluptaria volumus.</P></div>
</div>
</div>
<section id="banner">
<div class="container text-center">
<p>Nunc velit risus, dapibus non interdum quis, suscipit nec dolor. Vivamus tempor tempus mauris vitae fermentum. In vitae nulla lacus. Sed sagittis tortor vel arcu sollicitudin nec tincidunt metus suscipit.Nunc velit risus, dapibus non interdum.</p>
<h4>— MIKE DOE <a href="">www.siteurl.com</a> </h4>
</div>
</section>
<section id="developers">
<div class="container text-center">
<h1>OUR TEAM</h1>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet consectetur, adipisci velit,<br> sed quia non numquam.</p>
<div class="row">
<div class="col-md-3"><img src="https://demo.themezy.com/system/resources/demo_themes/000/000/176//img/team/member1.jpg" class="rounded-circle"><h4>Jason Doe</h4><p>User experiences</p></div>
<div class="col-md-3"><img src="https://demo.themezy.com/system/resources/demo_themes/000/000/176//img/team/member2.jpg" class="rounded-circle"><h4>Timothy Clark</h4><p>Web developer</p></div>
<div class="col-md-3"><img src="https://demo.themezy.com/system/resources/demo_themes/000/000/176//img/team/member3.jpg" class="rounded-circle"><h4>Vicky Tan</h4><p>Web designer</p></div>
<div class="col-md-3"><img src="https://demo.themezy.com/system/resources/demo_themes/000/000/176//img/team/member4.jpg" class="rounded-circle"><h4>Kevin Peterson</h4><p>UI designer</p></div>
</div>
</div>
</section>
<section id="picture">
<div class="container text-center">
<h1>Indoctum accusamus comprehensam</h1>
<p>Bootstraptaste</p>
</div>
</section>
</section>
<section id="portfolio">
<div class="jumbotron text-center" style="margin-bottom:0; background-color: #FBFCFF;">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>portfolio</h1>
<div align="center">
<button class="btn btn-primary active filter-button" data-filter="todo">Todo</button>
<button class="btn btn-primary filter-button" data-filter="retratos">Retratos</button>
<button class="btn btn-primary filter-button" data-filter="paisajes">Paisajes</button>
<button class="btn btn-primary filter-button" data-filter="disenos">Diseños</button>
<div class="row">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6 thumb filter retratos">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
data-image="https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg"
alt="Retratos">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb filter retratos">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
data-image="https://images.pexels.com/photos/34629/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
data-target="#image-gallery">
<img class="img-thumbnail"
src="https://images.pexels.com/photos/34629/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="Retratos">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb filter retratos">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
data-image="https://images.pexels.com/photos/698885/pexels-photo-698885.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
data-target="#image-gallery">
<img class="img-thumbnail"
src="https://images.pexels.com/photos/698885/pexels-photo-698885.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="Retratos">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb filter paisajes">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
data-image="https://images.pexels.com/photos/1563286/pexels-photo-1563286.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
data-target="#image-gallery">
<img class="img-thumbnail"
src="https://images.pexels.com/photos/1563286/pexels-photo-1563286.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="Paisaje">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb filter disenos">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
data-image="https://images.pexels.com/photos/1832064/pexels-photo-1832064.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
data-target="#image-gallery">
<img class="img-thumbnail"
src="https://images.pexels.com/photos/1832064/pexels-photo-1832064.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="Paisaje">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb filter disenos">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
data-image="https://images.pexels.com/photos/909620/pexels-photo-909620.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
data-target="#image-gallery">
<img class="img-thumbnail"
src="https://images.pexels.com/photos/909620/pexels-photo-909620.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="Paisaje">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb filter disenos">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
data-image="https://images.pexels.com/photos/940880/pexels-photo-940880.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
data-target="#image-gallery">
<img class="img-thumbnail"
src="https://images.pexels.com/photos/940880/pexels-photo-940880.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="Paisaje">
</a>
</div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="image-gallery-title"></h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<img id="image-gallery-image" class="img-responsive col-md-12" src="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary float-left" id="show-previous-image"><i class="fa fa-arrow-left"></i>
</button>
<button type="button" id="show-next-image" class="btn btn-secondary float-right"><i class="fa fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="bottom">
<div class="container text-center">
<h1>Indoctum accusamus comprehensam</h1>>
<p>Bootstraptaste</p>
</div>
</section >
<section id="form">
<div class="container">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">your name</label>
<input type="text" class="form-control" id="name" placeholder="your name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 ">
<label for="inputEmail4">your email</label>
<input type="email" class="form-control" id="email" placeholder="rajivdahal2@gmail.com">
</div>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">message</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">send message</button>
</form>
</div>
</section>
<section id="oops">
<div class="container text-center">
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
<h3>oops! Something went wrong.</h3>
<p>This page didn't load Google Maps correctly. See the JavaScript console for technical details.</p>
</div>
</section>
<section id="footer">
<div class="container text-center">
<div class="dotbox">
<span class="dot"><a href=""><i class="fa fa-wifi " aria-hidden="true"></i></a></span>
<span class="dot"><a href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a></span>
<span class="dot"><a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</span>
<span class="dot"><a href=""><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></span>
<p>Copyright © 2014 Amoeba - by <a href=""> Bootstraptaste</a></p>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/p.js"></script>
<script type="text/javascript">
$(window).scroll(function(){
if($(this).scrollTop()>50)
{
$(".navbar").addClass("red")
}
else
{
$(".navbar").removeClass("red")
}
})
</script>
</body>
</html>
Comments
Post a Comment