248 lines
11 KiB
HTML
248 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Laura Bootstrap Theme</title>
|
|
<meta name="description" content="Free Bootstrap Theme by BootstrapMade.com">
|
|
<meta name="keywords" content="free website templates, free bootstrap themes, free template, free bootstrap, free website template">
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fira+Sans|Roboto:300,400|Questrial|Satisfy">
|
|
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
|
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
|
|
<link rel="stylesheet" type="text/css" href="css/animate.css">
|
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
|
|
|
<!-- =======================================================
|
|
Theme Name: Laura
|
|
Theme URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
|
|
Author: BootstrapMade.com
|
|
Author URL: https://bootstrapmade.com
|
|
======================================================= -->
|
|
</head>
|
|
|
|
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60" onload="myFunction()">
|
|
<div class="header">
|
|
<div class="bg-color">
|
|
<header id="main-header">
|
|
<nav class="navbar navbar-default navbar-fixed-top">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#lauraMenu">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Laura</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="lauraMenu">
|
|
<ul class="nav navbar-nav navbar-right navbar-border">
|
|
<li class="active"><a href="#main-header">Home</a></li>
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#portfolio">Portfolio</a></li>
|
|
<li><a href="#testimonial">Testimonial</a></li>
|
|
<li><a href="#contact">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<div class="wrapper">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 wow fadeIn delay-05s">
|
|
<div class="banner-text">
|
|
<h2>Hi, I am <span>Laura</span> Thomson,</h2>
|
|
<p>A Creative Photographer <br>& Designer</p>
|
|
</div>
|
|
<div class="overlay-detail text-center">
|
|
<a href="#about"><i class="fa fa-angle-down"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section id="about" class="section-padding wow fadeIn delay-05s">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6 text-right">
|
|
<h2 class="title-text">
|
|
Meet<br><span class="deco">Laura</span> Thomson
|
|
</h2>
|
|
</div>
|
|
<div class="col-md-6 text-left">
|
|
<div class="about-text">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
<p> </p>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p> </p>
|
|
<ul class="abt-list">
|
|
<li>- Excepteur sint occaecat cupidatat non proident.</li>
|
|
<li>- Duis aute irure dolor in reprehenderit.</li>
|
|
<li>- Ask the experts.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="portfolio" class="section-padding wow fadeInUp delay-05s">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h2 class="title text-center">Let's <span class="deco">See</span> My Work</h2>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div id="myGrid" class="grid-padding">
|
|
<div class="col-md-4 col-sm-4 padding-right-zero">
|
|
<img src="img/portfolio01.jpg" class="img-responsive">
|
|
<img src="img/port01.jpg" class="img-responsive">
|
|
<img src="img/port02.jpg" class="img-responsive">
|
|
<img src="img/portfolio01.jpg" class="img-responsive">
|
|
</div>
|
|
<div class="col-md-4 col-sm-4 padding-right-zero">
|
|
<img src="img/portfolio02.jpg" class="img-responsive">
|
|
<img src="img/port01.jpg" class="img-responsive">
|
|
<img src="img/port02.jpg" class="img-responsive">
|
|
<img src="img/portfolio01.jpg" class="img-responsive">
|
|
<img src="img/port03.jpg" class="img-responsive">
|
|
</div>
|
|
<div class="col-md-4 col-sm-4 padding-right-zero">
|
|
<img src="img/port01.jpg" class="img-responsive">
|
|
<img src="img/portfolio01.jpg" class="img-responsive">
|
|
<img src="img/portfolio02.jpg" class="img-responsive">
|
|
<img src="img/port03.jpg" class="img-responsive">
|
|
<img src="img/portfolio02.jpg" class="img-responsive">
|
|
<img src="img/port02.jpg" class="img-responsive">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="testimonial" class="section-padding wow fadeInUp">
|
|
<div class="container">
|
|
<div class="row">
|
|
<h2 class="title text-center">See What Our <span class="deco">Client</span> Are Saying ?</h2>
|
|
<div class="test-sec">
|
|
<div class="col-sm-4">
|
|
<blockquote>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diamsed commodo nibh ante facilisis bibendum dolor feugiat at. </p>
|
|
</blockquote>
|
|
<div class="carousel-info">
|
|
<div class="pull-left"> <span class="testimonials-name">John Doe</span> <span class="testimonials-post">CEO, Company Inc.</span> </div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<blockquote>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diamsed commodo nibh ante facilisis bibendum dolor feugiat at. </p>
|
|
</blockquote>
|
|
<div class="carousel-info">
|
|
<div class="pull-left"> <span class="testimonials-name">John Doe</span> <span class="testimonials-post">CEO, Company Inc.</span> </div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<blockquote>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diamsed commodo nibh ante facilisis bibendum dolor feugiat at. </p>
|
|
</blockquote>
|
|
<div class="carousel-info">
|
|
<div class="pull-left"> <span class="testimonials-name">John Doe</span> <span class="testimonials-post">CEO, Company Inc.</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="contact" class="section-padding wow fadeIn delay-05s">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="contact-sec text-center">
|
|
<h2>Want To <span class="deco">Hire</span> Me?</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-8 col-md-push-2">
|
|
<div id="sendmessage">Your message has been sent. Thank you!</div>
|
|
<div id="errormessage"></div>
|
|
<form action="" method="post" role="form" class="contactForm">
|
|
<div class="form-group">
|
|
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
|
|
<div class="validation"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
|
|
<div class="validation"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
|
|
<div class="validation"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
|
|
<div class="validation"></div>
|
|
</div>
|
|
|
|
<div class="text-center"><button type="submit" class="btn btn-primary btn-lg">Send Message</button></div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer class="footer-2 text-center-xs bg--white">
|
|
<div class="container">
|
|
<!--end row-->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="footer">
|
|
© Copyright Laura Theme. All Rights Reserved
|
|
<div class="credits">
|
|
<!--
|
|
All the links in the footer should remain intact.
|
|
You can delete the links only if you purchased the pro version.
|
|
Licensing information: https://bootstrapmade.com/license/
|
|
Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/buy/?theme=Laura
|
|
-->
|
|
Designed by <a href="https://bootstrapmade.com/">BootstrapMade.com</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 text-right">
|
|
<ul class="social-list">
|
|
<li>
|
|
<a href="#"><i class="fa fa-twitter"></i></a>
|
|
</li>
|
|
<li>
|
|
<a href="#"><i class="fa fa-dribbble"></i></a>
|
|
</li>
|
|
<li>
|
|
<a href="#"><i class="fa fa-vimeo"></i></a>
|
|
</li>
|
|
<li>
|
|
<a href="#"><i class="fa fa-instagram"></i></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
<!--end row-->
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/jquery.min.js"></script>
|
|
<script src="js/jquery.easing.min.js"></script>
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script src="js/jquery.bxslider.min.js"></script>
|
|
<script src="js/wow.js"></script>
|
|
<script src="js/custom.js"></script>
|
|
<script src="contactform/contactform.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|