Based off my code..would anyone be able to translate this into a bootstrap templ
ID: 3586457 • Letter: B
Question
Based off my code..would anyone be able to translate this into a bootstrap template please? Thanks
<!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>
Virus-free. www.avast.com
Explanation / Answer
Add bootstrap tag in header file
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.
To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element
-------------------------------------------------------------------------------------------------------------------------------------------------
As i am unbale to paste the complete code here so plz reffer below link
https://drive.google.com/drive/folders/0B0OYG722iR76bW9DUDRUZ1ZmNWs?usp=sharing
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.