Hello I need help with this project I am doing. I need to be done in a form of b
ID: 3585865 • Letter: H
Question
Hello I need help with this project I am doing. I need to be done in a form of bootstrap. There is a template that I like called gaia which is this https://drive.google.com/open?id=0B5WZcoRs_7oockFuUTFlMm4zMUU . I was wondering if from my code that I post would you guys be able to transfer my stuff over to that? Also I need to expand upon my 3 user stories. I will post my testimonies and then you guys can maybe help me on expanding it please (that is for part 1) I will post first my user story testimonies, my code and then the images of what is required in the project.
Testimony # 1
As a person that has always had weight issues I never thought I would stick to this but I did. The people at Your Former Self have helped me stay on the track thanks to their well designed app to help me count my calories, also to set my appointments with them.
Testimony #2
I now have more energy, less pain and feel great about myself. Girls from my old school actually are hitting on me now wow. You guys are great! .
Testimony #3
I used to have knee problems from all my weight and could barely stand for a few minutes at a time. Thanks to Your Former Self all of this is now in the past. I have come to the point where I want to inspire other people .
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Your Former Self</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body background= "images/blue.jpg">
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo"></a>
<ul class="right hide-on-med-and-down">
</ul>
<ul id="nav-mobile" class="side-nav">
<li><a href="#">Nothing To See Here</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
<div id="index-banner" class="parallax-container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h1 class="header center -text text-lighten-2">Your Former Self</h1>
<div class="row center">
<h3 class="header black-text col s12 light">A new outlook on life</h3>
</div>
<div class="row center">
</div>
<br><br>
</div>
</div>
<div class="parallax"><img src="images/happy1.jpg" alt="Unsplashed background img 1"></div>
</div>
<h1>BMI Calculator</h1>
<iframe src="https://bmicalculatorusa.com/widgets/widget.php?t=550x480" width="550" height="480" frameborder="0"></iframe><p>
<div class="container">
<div class="section">
<h1>Appointments</h1>
<iframe id='cv_if4' src="http://cdn.instantcal.com/cvir.html?id=cv_nav1&theme=XYE&ntype=cv_datepicker" allowTransparency='true' scrolling='no' frameborder=0 height=200 width=200></iframe>
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
<h5 class="center">Testimony # 1</h5>
<p class="light">As a person that has always had weight issues I never thought I would stick to this but I did. The people at Your Former Self have helped me stay on the track thanks to their well designed app to help me count my calories, also to set my appointments with them. .</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">group</i></h2>
<h5 class="center">Testimony #2 </h5>
<p class="light">I now have more energy, less pain and feel great about myself. Girls from my old school actually are hitting on me now wow. You guys are great! .</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">settings</i></h2>
<h5 class="center">Testimony #3 </h5>
<p class="light">I used to have knee problems from all my weight and could barely stand for a few minutes at a time. Thanks to Your Former Self all of this is now in the past. I have come to the point where I want to inspire other people .</p>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern approach to fitness</h5>
</div>
</div>
</div>
<div class="parallax"><img src="images/happy2.jpg" alt="Unsplashed background img 2"></div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="col s12 center">
<h3><i class="mdi-content-send brown-text"></i></h3>
<h4>Contact Us</h4>
<p class="left-align light">Feel free to message us if you have any questions about our program, scheduling or anything else. </p>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header black-text col s12 light">Giggity</h5>
</div>
</div>
</div>
<div class="parallax"><img src="images/happy3.jpg" alt="Unsplashed background img 3"></div>
</div>
<footer class="page-footer teal">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We strive to bring out the best in you and the ones around you. Our highly trained fitness professionals will go the extra long yard when compared to other fitness outfits. They measure your fat content, stress level, pressure points, and also your trigger points (such as what food triggers them to binge etc). We stand behind our patented way of testing and have seen nothing but success. So come on down and be our next success story!.</p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Copyright Your Former Self 2017 </a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>
Explanation / Answer
The code is available at https://drive.google.com/open?id=0B5yw1UHppRneUFM5V0dKcktGcms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Your Former Self</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<link href="assets/css/gaia.css" rel="stylesheet"/>
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Cambo|Poppins:400,600" rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/fonts/pe-icon-7-stroke.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-transparent navbar-fixed-top" color-on-scroll="200">
<!-- if you want to keep the navbar hidden you can add this class to the navbar "navbar-burger"-->
<div class="container">
<div class="navbar-header">
<button id="menu-toggle" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar bar1"></span>
<span class="icon-bar bar2"></span>
<span class="icon-bar bar3"></span>
</button>
<a href="http://www.creative-tim.com" class="navbar-brand">
Your Former Self
</a>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<div class="section section-header">
<div class="parallax filter filter-color-red">
<div class="image"
>
</div>
<div class="container">
<div class="content">
<div class="title-area">
<h1 class="title-modern">Your Former Self</h1>
<h3>A new outlook on life</h2>
<div class="separator line-separator"></div>
</div>
</div>
</div>
</div>
</div>
<div class="section section-our-clients-freebie">
<div class="container">
<div class="title-area">
<h2>Testimonials</h2>
<div class="separator separator-danger"></div>
</div>
<ul class="nav nav-text" role="tablist">
<li class="active">
<a href="#testimonial1" role="tab" data-toggle="tab">
<div class="image-clients">
<img alt="..." class="img-circle" src="assets/img/faces/face_5.jpg"/>
</div>
</a>
</li>
<li>
<a href="#testimonial2" role="tab" data-toggle="tab">
<div class="image-clients">
<img alt="..." class="img-circle" src="assets/img/faces/face_6.jpg"/>
</div>
</a>
</li>
<li>
<a href="#testimonial3" role="tab" data-toggle="tab">
<div class="image-clients">
<img alt="..." class="img-circle" src="assets/img/faces/face_2.jpg"/>
</div>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="testimonial1">
<p class="description">
As a person that has always had weight issues I never thought I would stick to this but I did. The people at Your Former Self have helped me stay on the track thanks to their well designed app to help me count my calories, also to set my appointments with them. .
</p>
</div>
<div class="tab-pane" id="testimonial2">
<p class="description">
I now have more energy, less pain and feel great about myself. Girls from my old school actually are hitting on me now wow. You guys are great!
</p>
</div>
<div class="tab-pane" id="testimonial3">
<p class="description">
I used to have knee problems from all my weight and could barely stand for a few minutes at a time. Thanks to Your Former Self all of this is now in the past. I have come to the point where I want to inspire other people
</p>
</div>
</div>
</div>
</div>
<div class="section section-our-clients-freebie">
<div class="container">
<div class="title-area">
<h2>BMI Calculator</h2>
<div class="separator separator-danger"></div>
</div>
<div class="text-center">
<iframe src="https://bmicalculatorusa.com/widgets/widget.php?t=550x480" width="550" height="480" frameborder="0"></iframe>
</div>
</div>
</div>
<div class="section section-our-clients-freebie">
<div class="container">
<div class="title-area">
<h2>Appointments</h2>
<div class="separator separator-danger"></div>
</div>
<div class="text-center">
<iframe id='cv_if4' src="http://cdn.instantcal.com/cvir.html?id=cv_nav1&theme=XYE&ntype=cv_datepicker" allowTransparency='true' scrolling='no' frameborder=0 height=200 width=200></iframe>
</div>
</div>
</div>
<div class="section section-our-clients-freebie">
<div class="container">
<div class="title-area">
<h2>A modern approach to fitness</h2>
<div class="separator separator-danger"></div>
</div>
</div>
</div>
<div class="section section-small section-get-started">
<div class="parallax filter">
<div class="image"
>
</div>
<div class="container">
<div class="title-area">
<h2 class="text-white">Contact Us</h2>
<div class="separator line-separator"></div>
<p class="description">Feel free to message us if you have any questions about our program, scheduling or anything else. </p>
</div>
<div class="button-get-started">
<a href="#gaia" class="btn btn-danger btn-fill btn-lg">Contact Us</a>
</div>
</div>
</div>
</div>
<div class="section section-our-clients-freebie">
<div class="container">
<div class="title-area">
<h2>Giggity</h2>
<div class="separator separator-danger"></div>
</div>
</div>
</div>
<footer class="footer footer-big footer-color-black" data-color="black">
<div class="container">
<div class="row">
<div class="col-md-10">
<div class="info">
<h5 class="title">Company Bio</h5>
<p>
We strive to bring out the best in you and the ones around you. Our highly trained fitness professionals will go the extra long yard when compared to other fitness outfits. They measure your fat content, stress level, pressure points, and also your trigger points (such as what food triggers them to binge etc). We stand behind our patented way of testing and have seen nothing but success. So come on down and be our next success story!.
</p>
</div>
</div>
<div class="col-md-2">
<div class="info">
<h5 class="title">Follow us on</h5>
<nav>
<ul>
<li>
<a href="#" class="btn btn-social btn-facebook btn-simple">
<i class="fa fa-facebook-square"></i> Facebook
</a>
</li>
<li>
<a href="#" class="btn btn-social btn-dribbble btn-simple">
<i class="fa fa-dribbble"></i> Dribbble
</a>
</li>
<li>
<a href="#" class="btn btn-social btn-twitter btn-simple">
<i class="fa fa-twitter"></i> Twitter
</a>
</li>
<li>
<a href="#" class="btn btn-social btn-reddit btn-simple">
<i class="fa fa-google-plus-square"></i> Google+
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<hr>
<div class="copyright">
© <script> document.write(new Date().getFullYear()) </script> Copyright Your Former Self
</div>
</div>
</footer>
</body>
<!-- core js files -->
<script src="assets/js/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.js" type="text/javascript"></script>
<!-- js library for devices recognition -->
<script type="text/javascript" src="assets/js/modernizr.js"></script>
<!-- script for google maps -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<!-- file where we handle all the script from the Gaia - Bootstrap Template -->
<script type="text/javascript" src="assets/js/gaia.js"></script>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.