Skip to content

Instantly share code, notes, and snippets.

@iamwinnie

iamwinnie/index.html

Created December 27, 2018 20:09
Show Gist options
  • Save iamwinnie/fa81c73ea5d6a7ad867ab62275d66526 to your computer and use it in GitHub Desktop.
Save iamwinnie/fa81c73ea5d6a7ad867ab62275d66526 to your computer and use it in GitHub Desktop.
Download ZIP
2.1 semantic HTML & footer
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Winnie</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation"><!--nav bar starts here-->
<a class="navbar-brand" href="#">Winnie</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="#">Home <span class="sr-only">(current)</span></a>
</li> <span>//</span>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li> <span>//</span>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li> <span>//</span>
<li class="nav-item">
<a class="nav-link" href="#contactpage">Contact</a>
</li>
</ul>
</div>
</nav><!--nav bar ends here-->
<!-- Main jumbotron for a primary marketing message or call to action
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Building digital products</h1>
<p class="lead">Home for your web development needs. Serving clients worldwide.</p>
<a href="about.html" target="_blank">ABOUT</a>
</div> <-close container div
</div> close jumbotron -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/unsplash.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>"The best way to predict the future..."</h5>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/foggy.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>"...is to create it."</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--About section-->
<div class="container content" id="about">
<div class="row">
<div class="col-12">
<div class="aboutheader">
<h1> ABOUT ME </h1>
</div>
</div>
<div class="col-12 col-md-6">
<div class="intro"><p>I am a New York-based web developer. When I am not coding, you can find me hiking, biking, or exploring the city.</p></div>
</div>
<div class="col-12 col-md-6">
<div class="skills">
<h3>My skills include:</h3>
<ul id="skill-list">
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</div>
</div>
</div>
<!--portfolio section-->
<div class="container content" id="portfolio">
<div class="row">
<div class="col-sm">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<a class="btn btn-primary" href="#" role="button">View details &raquo;</a>
</div><!-- /col -->
<div class="col-sm">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<a class="btn btn-primary" href="#" role="button">View details &raquo;</a>
</div><!-- /col -->
<div class="col-sm">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<a class="btn btn-primary" href="#" role="button">View details &raquo;</a>
</div><!-- /col -->
</div> <!--close row div -->
</div> <!-- close container row div-->
<div class="container content">
<div class="row" id="work">
<div class="col-12 col-md-4"><img src="img/aboutpic.jpg" class="img-fluid"></div>
<div class="col-12 col-md-4"><img src="img/aboutpic.jpg" class="img-fluid"></div>
<div class="col-12 col-md-4"><img src="img/aboutpic.jpg" class="img-fluid"></div>
</div>
<div class="row" id="work">
<div class="col-12 col-md-4"><img src="img/aboutpic.jpg" class="img-fluid"></div>
<div class="col-12 col-md-4"><img src="img/aboutpic.jpg" class="img-fluid"></div>
<div class="col-12 col-md-4"><img src="img/aboutpic.jpg" class="img-fluid"></div>
</div>
</div> <!--end of portfolio grid div-->
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pwrwf_8H25Y" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<!--contact page-->
<div class="content contact" id="contactpage">
<div class="contactheading">
<h1>Contact Info</h1>
</div>
<div class="info">
<p><i class="fas fa-envelope"></i> Email: [email protected]</p>
</div>
</div> <!--end of whole container-->
<!--footer-->
<footer>
<span class="twitter"><a href="https://twitter.com/inforthewinn?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @inforthewinn</a></span>
<span class="copyright">&copy; <strong>forthewin, inc 2018</strong></span>
</footer>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<!-- Bootstrap core JS -->
<!-- Can place script tags with JavaScript files here -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Raw
styles.css
* { box-sizing: border-box; }
body {
position: relative;
}
.jumbotron {
background-image: url("../img/jumboimage.jpg");
background-size: cover;
}
.container {
margin: 0 auto;
width: 100%;
}
.content {
padding: 8em 0em 4em 0em;
}
/*navigation styling*/
.navbar-brand {
font-family: 'Anton', impact;
font-size: 1em;
}
.navbar {
position: fixed;
width: 100% !important;
padding: 10px 20px;
top: 0;
left: 0;
background: #243b55;
background: linear-gradient(to right, #141e30, #243b55);
font-size: 2em;
z-index: 1;
}
ul>span {
color: #FFFFFF;
font-family: arial;
font-size: 1em;
padding: 10px 5px;
}
.navbar-dark .navbar-nav .nav-link {
color: #ADD8E6;
text-decoration: none;
font-family: 'Anton', impact;
transition: color 200ms;
-webkit-transition: color 200ms;
}
.navbar-dark .navbar-nav .nav-link:hover {
text-decoration: underline;
color: #D3D3D3;
}
/*about page styling*/
.aboutheader h1 {
text-align: center;
font-family: 'Anton', impact;
}
/*portfolio styling*/
iframe {
display: block;
margin: 0 auto;
}
/*contact page styling*/
#contactpage {
background-image: url("../img/roosevelt.jpg"); /*Add a background image*/
background-position: top;
padding-top: 50px 100px 100px 100px;
background-attachment: fixed; /*Give the background a fixed position does it not scroll when you scroll*/
background-size: cover; /*Have the background cover the entire div section*/
color: white; /*Change the color of the text on top so it is readable and adjust the padding as needed.*/
height: 500px;
margin: 4em 0em 0em 0em;
}
.contactheading>h1, .info>p {
margin: 0 auto;
width: 80%;
font-family: 'Anton', impact;
font-size: 3em;
}
/*footer styling*/
footer {
margin: 0 auto;
width: 100%;
background: #243b55;
background: linear-gradient(to right, #141e30, #243b55);
font-family: Helvetica, Verdana, sans-serif;
color: #ADD8E6;
padding: 15px 10px;
position: absolute;
display: block;
clear: both;
}
.twitter {
float: left;
}
.copyright {
float: right;
}
/*Typography*/
h1,
h2,
h3 {
font-family: Georgia, Helvetica, Verdana, sans-serif;
font-size: 3em;
}
li, p {
font-family: Helvetica, Verdana, sans-serif;
font-size: 1em;
font-weight: 100;
-webkit-margin-before: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment