*Need the HTML codes that correspond to the below instructions. Thank you! inclu
ID: 3738790 • Letter: #
Question
*Need the HTML codes that correspond to the below instructions. Thank you!
include header/footer/wrapper/main/sidebar (should have at least 2 columns (main and sidebar)
the wrapper should be centered on the screen, and all of your content should remain inside the wrapper.
The banner should include a minimum of an image and site title
additional info as needed
determine if you want a horizontal or vertical nav bar
if you opt for a vertical nav bar- allow content to wrap next to it.
include additional formatting to make the page interesting and look nice
include at least one image in the main section
introductory text explaining what the site is about
page title, and nav bar with links (will just be text at this point) to all proposed pages
(other pages don't need to exist yet but the words on the nav bar should be added). The words can become links later.
remember there is a 7 page minimum so there should be at least 7 bits of text which can become links later
at least 2 levels of subheadings (can add more as needed)
a footer with your name and date and copyright symbol
background color and/or image as appropriate for different parts of the page (subtle)
borders should be subtle and not detract from page content
Explanation / Answer
--------------------------------------------------- Main Index Page HTML Code -----------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|Cookie|Pacifico|Quicksand" rel="stylesheet">
<link rel="stylesheet" href="css/footer-distributed-with-address-and-phones.css">
<link rel="stylesheet" href="css/bootstrap-social.css">
<link rel="stylesheet" type="text/css" href="css/myStyle.css">
<link rel="stylesheet" href="css/aos.css" />
</head>
<body>
<nav class="navbar navbar-inverse" data-aos="fade-down"
data-aos-easing="linear">
<div class="container-fluid" id="home">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/thegenuinegourav.png" alt="thegenuinegourav Logo" class="img-responsive img-circle"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="skills.html">Skills</a></li>
<li><a href="songs.html">Songs</a></li>
<li><a href="http://gourav-recipe-rails.herokuapp.com/chefs/4">Recipes</a></li>
<li><a href="https://drive.google.com/uc?export=download&id=1D0zce74ajIQZ6tNNaueldk2vhzUU25uv">Resume</a></li>
<li><a href="#Contact">Connect</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-sm-3">
<a href="https://www.zomato.com/ganaxhe">
<div class="row well" data-aos="zoom-in-right" data-aos-duration="1500" data-aos-once="true">
<div>
<img src="images/food.jpg" alt="Food Logo" class="img-responsive img-rounded">
<h2 class="headings">Foodie</h2>
</div>
<hr>
<p>Until I discovered cooking, I was never really interested in anything.</p>
</div>
</a>
<a href="http://www.smule.com/GouravSuri">
<div class="row well" data-aos="zoom-in-right" data-aos-duration="1500" data-aos-once="true">
<div>
<img src="images/singer.jpg" alt="Mic Logo" class="img-responsive img-rounded">
<h2 class="headings">Singer</h2>
</div>
<hr>
<p>I never intended to set out and be a singer-songwriter. I just sort of became one because I put out my own record.</p>
</div>
</a>
</div>
<div class="col-sm-6 well" data-aos="zoom-in" data-aos-duration="1500" data-aos-once="true">
<img src="images/gourav2.jpg" alt="Gourav Suri Image" class="img-responsive img-rounded">
</div>
<div class="col-sm-3">
<a href="https://www.youtube.com/channel/UCs8380tHxevj72ffRhbGoUw">
<div class="row well" data-aos="zoom-in-left" data-aos-duration="1500" data-aos-once="true">
<div>
<img src="images/youtube.png" alt="Youtube Logo" class="img-responsive img-rounded">
<h2 class="headings">Youtuber</h2>
</div>
<hr>
<p>Education is the most powerful weapon which you can use to change the world.</p>
</div>
</a>
<a href="projects.html">
<div class="row well" data-aos="zoom-in-left" data-aos-duration="1500" data-aos-once="true">
<div>
<img src="images/developer.png" alt="Developer Logo" class="img-responsive img-rounded">
<h2 class="headings">Developer</h2>
</div>
<hr>
<p>If debugging is the process of removing software bugs, then programming must be the process of putting them in.</p>
</div>
</a>
</div>
</div>
</div>
</div>
<hr>
<br>
<footer class="footer-distributed">
<div class="footer-left" id="Contact">
<img src="images/thegenuinegourav.png" alt="thegenuinegourav Logo" class="img-responsive img-circle">
<p class="footer-links">
<a href="index.html">Home</a>
·
<a href="about.html">About</a>
·
<a href="projects.html">Projects</a>
·
<a href="skills.html">Skills</a>
·
<a href="songs.html">Songs</a>
·
<a href="http://gourav-recipe-rails.herokuapp.com/chefs/4">Recipes</a>
</p>
<p class="footer-company-name">Made with <span class="glyphicon glyphicon-heart"></span> by thegenuinegourav © 2016</p>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>Lets connect</span>
We are all so much together, but we are all dying of loneliness.
</p>
<div class="footer-icons">
<a href="https://github.com/thegenuinegourav" class="btn btn-social-icon btn-twitter"><span class="fa fa-github"></span></a>
<a href="https://in.linkedin.com/in/gourav96suri" class="btn btn-social-icon btn-twitter"><span class="fa fa-linkedin"></span></a>
<a href="https://www.youtube.com/channel/UCs8380tHxevj72ffRhbGoUw" class="btn btn-social-icon btn-twitter"><span class="fa fa-youtube"></span></a>
<a href="https://play.google.com/store/apps/developer?id=thegenuinegourav" class="btn btn-social-icon btn-twitter"><img src="images/googleplay.png"></a>
<a href="https://bitbucket.org/thegenuinegourav/" class="btn btn-social-icon btn-twitter"><span class="fa fa-bitbucket"></span></a>
<a href="https://www.facebook.com/thegenuinegourav" class="btn btn-social-icon btn-twitter"><span class="fa fa-facebook"></span></a>
<a href="https://plus.google.com/u/0/103399660936653195849" class="btn btn-social-icon btn-twitter"><span class="fa fa-google"></span></a>
<a href="https://www.instagram.com/thegenuinegourav/" class="btn btn-social-icon btn-twitter"><span class="fa fa-instagram"></span></a>
<a href="https://twitter.com/gourav96suri" class="btn btn-social-icon btn-twitter"><span class="fa fa-twitter"></span></a>
<a href="https://www.zomato.com/ganaxhe" class="btn btn-social-icon btn-twitter"><img src="images/zomato.png"></span></a>
</div>
</div>
</footer>
<script src="js/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
--------------------------------------------------- Main Index Page HTML Code -----------------------------------------------------------------
--------------------------------------------------- CSS Code --------------------------------------------------------------------------------------
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 55px 50px;
margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 40%;
}
/* The company logo */
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}
.footer-distributed h3 span{
color: #5383d3;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #5383d3;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 20%;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
/* If you don't want the footer to be responsive, remove these media queries */
@media (max-width: 880px) {
.footer-distributed{
font: bold 14px sans-serif;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
}
--------------------------------------------------- CSS Code --------------------------------------------------------------------------------------
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.