Skip to content

Instantly share code, notes, and snippets.

@RJNY

RJNY/index.html

Created January 23, 2018 06:06
Show Gist options
  • Save RJNY/08dd03d425e096b9f2a60a04ab7224f2 to your computer and use it in GitHub Desktop.
Save RJNY/08dd03d425e096b9f2a60a04ab7224f2 to your computer and use it in GitHub Desktop.
Download ZIP
Kevin M template
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Kevin Meldau</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body data-spy="scroll" data-target=".nav">
<body data-spy="scroll" data-target=".navbar">
<!--navbar starts here-->
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="portfolio-kevin-meldau navbar-brand">
<a href="#">Kevin Meldau - Portfolio</a>
</div> <!--end portfolio-kevin-meldau -->
</div> <!--end navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#carousel-example-generic">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> <!-- navbar-collapse collapse -->
</nav> <!-- end navbar-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
<li data-target="#carousel-example-generic" data-slide-to="7"></li>
<li data-target="#carousel-example-generic" data-slide-to="8"></li>
<li data-target="#carousel-example-generic" data-slide-to="9"></li>
<li data-target="#carousel-example-generic" data-slide-to="10"></li>
<li data-target="#carousel-example-generic" data-slide-to="11"></li>
<li data-target="#carousel-example-generic" data-slide-to="12"></li>
<li data-target="#carousel-example-generic" data-slide-to="13"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.placehold.it/2560x1440" alt="...">
<div class="carousel-caption">
<h3>We all love Neon!</h3>
</div>
</div>
<div class="item">
<img src="http://www.placehold.it/2560x1440" alt="...">
<div class="carousel-caption">
<h3>We all love Neon!</h3>
</div>
</div>
<div class="item">
<img src="http://www.placehold.it/2560x1440" alt="...">
<div class="carousel-caption">
<h3>We all love Neon!</h3>
</div>
</div>
<div class="item">
<img src="http://www.placehold.it/2560x1440" alt="...">
<div class="carousel-caption">
<h3>We all love Neon!</h3>
</div>
</div>
<div class="item">
<img src="http://www.placehold.it/2560x1440" alt="...">
<div class="carousel-caption">
<h3>We all love Neon!</h3>
</div>
</div>
<div class="item">
<img src="http://www.placehold.it/2560x1440" alt="...">
<div class="carousel-caption">
<h3>We all love Neon!</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container">
<div id="about">
<header class="site-title">
<h1><a href="index.html">Kevin Meldau</a></h1>
<h2>Learning Portfolio</h2>
</header>
<p class="center">The reason I want to learn web design is so I can manage my own companies site.<br />
I want to be able to understand HTML/CSS and make changes to our site without needing to email the web designer.</p>
<a href="index.html" target="_blank" class="cta">Hire me I'm still cheap</a>
<h2>Qualifications</h2>
<p>Enthusiastically synergize reliable manufactured products with interdependent e-business. Compellingly productivate sustainable niches before cooperative opportunities. Seamlessly coordinate long-term high-impact information via magnetic technology. Proactively customize functional scenarios through performance based systems. Professionally productize wireless strategic theme areas after bleeding-edge web services.</p>
<h2>Experience</h2>
<p>Enthusiastically synergize reliable manufactured products with interdependent e-business. Compellingly productivate sustainable niches before cooperative opportunities. Seamlessly coordinate long-term high-impact information via magnetic technology. </p>
<h2>Hobbies</h2>
<p><strong>Telling bad jokes.</strong></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies mauris nibh, ut sagittis est iaculis vel. Morbi ex purus, ornare vel bibendum non, ullamcorper a urna. Donec eleifend placerat consectetur. Vestibulum elementum velit sed velit facilisis dignissim. Nunc venenatis egestas augue quis efficitur. Praesent tempor tempus augue ac hendrerit. Curabitur tincidunt nibh neque, in sollicitudin lorem placerat quis. Donec ornare justo at ante lacinia, ut aliquet ex congue.
Fusce vestibulum, urna eu varius posuere, tortor tellus ullamcorper augue, ultricies auctor tellus erat ut tortor. Maecenas rhoncus mauris ac libero luctus pretium. Aliquam at sapien quis mauris ullamcorper consectetur eu sed felis. Maecenas a ligula laoreet, scelerisque ex ut, euismod dui. Cras ultrices eleifend purus, vitae efficitur enim pharetra at. Sed placerat mollis egestas. Duis ac tincidunt nibh. Fusce eu pharetra ipsum, non imperdiet arcu. Sed euismod mi lacus, at rutrum erat accumsan ut. Aenean lacinia metus sit amet aliquet vulputate. Nulla at lacus sed eros convallis varius ac sit amet dolor. Cras sodales risus et pharetra tempus.
</p>
</div>
<!-- Work page -->
<div id="work">
<header class="site-title">
</header>
<!-- Example row of columns -->
<div class="row">
<div class="col-xs-12 col-md-2"><img src="http://www.placehold.it/300x300" class="img-responsive" style="margin: 0 auto;"></div>
<div class="col-xs-12 col-md-10"><p><strong>Bacon ipsum dolor amet jerky beef ribs shank</strong> capicola venison swine. Doner bacon filet mignon rump, shankle biltong ball tip capicola turkey corned beef frankfurter pork loin beef.</p></div>
</div>
<hr>
<div class="row">
<div class="col-xs-12 col-md-2"><img src="http://www.placehold.it/300x300" class="img-responsive" style="margin: 0 auto;"></div>
<div class="col-xs-12 col-md-4"><p><strong>Bacon ipsum dolor amet jerky beef ribs shank</strong> capicola venison swine. Doner bacon filet mignon rump, shankle biltong ball tip capicola turkey corned beef frankfurter pork loin beef.</p></div>
<div class="col-xs-12 col-md-2"><img src="http://www.placehold.it/300x300" class="img-responsive" style="margin: 0 auto;"></div>
<div class="col-xs-12 col-md-4"><p><strong>Bacon ipsum dolor amet jerky beef ribs shank</strong> capicola venison swine. Doner bacon filet mignon rump, shankle biltong ball tip capicola turkey corned beef frankfurter pork loin beef.</p></div>
</div>
<!-- FAQ Page -->
<div id="faq">
<header class="site-title"></header>
<article class="main-content">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#missingcode" href="#collapseOne">
How do I get my website to show up on the 1st page of Google?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Search Engine Optimization, a/k/a SEO. Many web designers have a background in Graphic Design, not in Internet Marketing. With the New York Website Designer, you get the best of both worlds! Not only does Andrea have a degree in Fine Arts, she is also a Search Engine Optimization Expert. She can optimize your website to rank higher in search engine results, which means more website visitors for you! She was even able to bring one client’s website from 300,000 to 1,000,000 hits per month!
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#missingcode" href="#collapseTwo">
How fast can my website be "live" on the web?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
After the initial website design consultation, your website can be “live” in as little as 14 days.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#missingcode" href="#collapseThree">
Can I have access to update my own website?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Absolutely. Just make sure you tell me about your needs and I will build the web site on a platform that will allow you to quickly and easily update your site. Anytime. Anywhere.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#missingcode" href="#collapseFour">
What types of clients do you work with?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
My clients are unique and diversified. Clients include: celebrities, Wall Street executives, lawyers, bloggers, surfers, doctors, artists, photographers, non-profit organizations, therapists, holistic healers, cinematographers, real estate agents, jewelers, actors, musicians, and that’s just the tip of the iceberg! Creative designs = happy clients! See what past clients have to say about working with me. Satisfaction Guaranteed!
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#missingcode" href="#collapseFive">
Can you make website updates for me?
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
Of course! My extremely affordable website maintenance packages allow you to update your site quickly and easily. I offer two options: you can either pay on a monthly basis or pay on an “as needed” basis.
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<!-- Contact page -->
<div id="contact">
<div class="container">
<a href="http://www.kevinmeldau.com/my-resume/Resume_Kevin_Meldau.pdf"><h1 class="center"><span class="glyphicon glyphicon-paperclip"></span>Download my resume</h1></a>
<p class="center">Contact me, let's meet up for an espresso and chat about your creative challenges.</br><span class="glyphicon glyphicon-earphone"></span> 404.551.7766 <span>&#124;</span> <span class="glyphicon glyphicon-envelope"><a href="mailto:[email protected]?Subject=Hello%20again" target="_top"> [email protected]</a>
<h2>Some heading text</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies mauris nibh, ut sagittis est iaculis vel. Morbi ex purus, ornare vel bibendum non, ullamcorper a urna. Donec eleifend placerat consectetur. Vestibulum elementum velit sed velit facilisis dignissim. Nunc venenatis egestas augue quis efficitur. Praesent tempor tempus augue ac hendrerit. Curabitur tincidunt nibh neque, in sollicitudin lorem placerat quis. Donec ornare justo at ante lacinia, ut aliquet ex congue.
Fusce vestibulum, urna eu varius posuere, tortor tellus ullamcorper augue, ultricies auctor tellus erat ut tortor. Maecenas rhoncus mauris ac libero luctus pretium. Aliquam at sapien quis mauris ullamcorper consectetur eu sed felis. Maecenas a ligula laoreet, scelerisque ex ut, euismod dui. Cras ultrices eleifend purus, vitae efficitur enim pharetra at. Sed placerat mollis egestas. Duis ac tincidunt nibh. Fusce eu pharetra ipsum, non imperdiet arcu. Sed euismod mi lacus, at rutrum erat accumsan ut. Aenean lacinia metus sit amet aliquet vulputate. Nulla at lacus sed eros convallis varius ac sit amet dolor. Cras sodales risus et pharetra tempus.
</p>
</div>
</div>
<footer>
<a href="http://www.facebook.com/kevinmeldau" target="_blank"><img src="img/icon-facebook.png" alt="Facebook" /></a>
<a href="#" target="_blank"><img src="img/icon-google-plus.png" alt="Google Plus" /></a>
<a href="http://www.kevinmeldau.com" target="_blank">&copy; 201X - Design by <strong>Kevin Meldau</strong></a>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
<!-- =========== Java script =========== -->
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
if (href != undefined && href != '#') {
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
}
return false;
});
</script>
<!-- =========== End Java script =========== -->
</body>
</html>
Raw
styles.css
/* General Items */
body {
background:#ffffff;
background-color: #4CB28B;
background-image: linear-gradient(#4CB28B, #2C2E78);
position: relative;
}
.site-title {
text-align: center;
}
.site-title > a {
text-decoration: none;
}
.center{
text-align:center;
}
.floatleft{
float:left;
}
.floatright{
float:right;
}
body {
background-repeat: no-repeat;
background-size: cover;
}
/* End of General Items */
/* Nav */
.portfolio-kevin-meldau {
text-transform: uppercase;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
}
.portfolio-kevin-meldau a {
color: white;
text-decoration: none;
}
.navbar-right {
padding: 0 30px;
text-transform: uppercase;
letter-spacing: 1px;
}
.navbar-right a:hover {
color: black;
transition: color 500ms;
-webkit-transition: transition: color 500ms;
}
/* End of Nav */
/* CTA */
.main-content .cta {
color: white;
background-color: rgba(0, 0, 0, 0.4);
border: solid white 1px;
text-decoration: none;
display: block;
width: 250px;
margin: 30px auto 60px auto;
padding: 20px 30px;
text-align: center;
border-radius: 20px;
}
.main-content .cta:hover {
background-color: rgba(0, 0, 0, 0.6);
}
/* End of CTA */
/* Accordion */
.panel-default>.panel-heading {
background-color: rgba(0, 0, 0, 0.4);
}
.panel-body{
color: white;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
.panel-group .panel {
background-color: rgba(0, 0, 0, 0.4);
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
color: white;
}
.panel-title a {
text-decoration: none;
}
/* End of Accordion */
/* Carousel */
.carousel-caption {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
.carousel-indicators li {
display: inline-block;
width: 13px;
height: 13px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 10px;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
/* End of Carousel */
/* Footer */
footer {
overflow: auto;
padding: 30px 10px;
text-align: left;
}
footer a {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
text-decoration: none;
font-size: 14px;
color: white;
padding: 5px;
}
footer a:hover {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
text-decoration: none;
font-size: 14px;
color: #494949;
padding: 5px;
}
footer img {
float: right;
padding: 0px 10px 0 0;
}
/* End of footer */
/* Typography */
.container h1 {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 20px;
color: white;
font-style: normal;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.container h2 {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-weight: normal;
font-size: 17px;
color: white;
font-style: normal;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.site-title h1 a {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 30px;
color: white;
font-style: normal;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.center {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-weight: normal;
font-size: 16px;
color: white;
font-style: normal;
}
.main-content {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-weight: normal;
font-size: 16px;
color: white;
font-style: normal;
}
.main-content p {
text-align: left;
}
a {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-weight: normal;
font-size: 16px;
color: white;
font-style: normal;
}
p {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-weight: normal;
font-size: 16px;
color: white;
font-style: normal;
}
/* End of Typography */
/* Portfolio */
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
/* End of Portfolio */
.row {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 16px;
text-align: left;
}
@media (max-width: 768px) {
.container p {
text-align: center;
color: red;
}
}
@media (max-width: 768px) {
footer {
align-items: center;
display: inline-block;
}
}
#contact {
background-image: url("http://www.placehold.it/300x300");
/*Add a background image*/
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.*/
padding-top: 50px;
padding-bottom: 50px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment