Skip to content

Instantly share code, notes, and snippets.

@iamwinnie

iamwinnie/index.html

Created January 15, 2017 01:28
Show Gist options
  • Save iamwinnie/a7d328bc195c6e2682d28c0573b04c0b to your computer and use it in GitHub Desktop.
Save iamwinnie/a7d328bc195c6e2682d28c0573b04c0b to your computer and use it in GitHub Desktop.
Download ZIP
form
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>Greetings!</title>
<p></p>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="css/styles.css">
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<!--navbar starts-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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="projectName navbar-brand">
<a href="#">The Winn</a></div> <!--end projectName -->
</div> <!--end of navbar-header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="#ABOUT">About</a></li>
<li><a href="#FAQ">FAQ</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</div>
</div> <!--end container-->
<!--navbar ends-->
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<!--<div class="jumbotron">
<div class="container">
<h1>Winnie Cai</h1>
<p><strong>web development solution</strong></p>
<a href="www.google.com">Discover</a>
<a href="about.html">About Me</a>
<br>
<a href="contact.html">Contact Me</a>
</div> --><!-- /container -->
<!--</div> --><!-- /jumbotron -->
<div class="container-fluid anchor">
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/portfolioheroimage.jpg" alt="...">
<div class="carousel-caption">
<h3>To be announced.</h3>
<p>filler</p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage2.jpg" alt="...">
<div class="carousel-caption">
<h3>To be announced.</h3>
<p>I need to think about it.</p>
</div>
</div>
<div class="item 3">
<img src="img/portfolioheroimage3.jpg" alt="...">
<div class="carousel-caption">
<h3>TO BE ANNOUNCED.</h3>
<p>I need to think about it.</p>
</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>
<div class="container anchor">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4 col-xs-12">
<h2>Portfolio Concept</h2>
<p>For the portfolio site, I would like to include an About Me section, where I introduce myself, and it would include my background information. I can include the projects I will do at CareerFoundry since those projects would be my first projects in web development. There should be a Contact page as well. The site should be easy to navigate with nice typography. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4 col-xs-12">
<h2>Project Goals</h2>
<p>I can commit 25 hours a week, and I hope to learn enough to apply for jobs in the fall.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4 col-xs-12">
<h2>Course Goals</h2>
<p>My goal is to get hired as an entry level developer, and maybe do some freelance work on the side as well.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
</div><!-- /row -->
<div class="container anchor">
<div class="row" id="work">
<div class="col-md-3 col-xs-6">
<img src="img/latte.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/latte.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/latte.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/latte.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/latte.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/latte.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/latte.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/latte.jpg" class="img-responsive">
</div>
</div>
</div>
</div> <!-- /container end of index -->
<!-- start of about page -->
<div class="container anchor" id="ABOUT">
<div class="abouthead">
<h1>About Me</h1>
</div>
<div class="container-fluid">
<div class="row" id="aboutrow">
<div class="col-lg-3 col-md-4 col-sm-6" col-xs-12>
<img src="img/latte.jpg" class="img-responsive">
</div>
<div class="col-lg-3 col-md-4 col-sm-6" col-xs-12>
<h2>Introduction</h2>
<p>This website is a preview of the skills I'm learning</p>
</div>
<div class="col-lg-3 col-md-4 col-sm-6" col-xs-12>
<h3>My Skills</h3>
<ul class="skilllist">
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</div>
</div>
</div>
<!--end of skills-->
<div class="main-text">
<h3>My Story</h3>
<p>Fixie leggings retro, fashion axe heirloom gastropub thundercats knausgaard deep v chia. XOXO bespoke four dollar toast truffaut, seitan chicharrones humblebrag DIY schlitz polaroid. Photo booth church-key distillery, cold-pressed DIY kombucha authentic truffaut vegan.</p>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/3iblE32i5yg"></iframe>
</div>
</div>
<!--end entire /about page -->
<!-- FAQ page -->
<div class="container anchor" id="FAQ">
<div class="faq">
<h1>Frequently Asked Questions</h1>
</div>
<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="#accordion" href="#collapseOne">
<span class="glyphicon glyphicon-plus"></span>Who are your clients?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
My clients include small business owners, nonprofit organizations, and local musicians
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<span class="glyphicon glyphicon-plus"></span>What is your average project turnaround?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
The average project turnaround time would be 5 days. The turnaround time can be shorter or longer depending on the project.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<span class="glyphicon glyphicon-plus"></span>What is the best way to contact you?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Email, phone call, text message.
</div>
</div>
</div>
</div>
</div>
<!--end of FAQ page -->
<!-- CONTACT PAGE -->
<div class="container-fluid anchor" id="contact">
<div class="row">
<div class="col-lg-4 col-md-4">
<div class="heading">
<h1>Contact Info</h1>
</div>
<div class="info">
<h2>Would love to hear from you!</h2>
<p><span class="glyphicon glyphicon-pencil"></span>Email: [email protected]</p>
<h2><span class="glyphicon glyphicon-globe"></span>Visit me:</h2>
<p>955 Park Avenue
<br>New York, NY 10028</p>
<h2>Let's connect:</h2>
<p><span class="glyphicon glyphicon-link"></span><a href="www.instagram.com/forthewinn"> Instagram</a></p>
<p><a href="https://twitter.com/winnieontwit" class="twitter-follow-button" data-show-count="false" data-size="medium">Follow @winnieontwit</a></p>
<p><div class="fb-like" data-href="https://www.facebook.com/winnie.cai.7" data-width="2px" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div></p>
</div>
</div>
<div class="col-lg-8 col-md-8">
<form id="formcontact">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" minlength=2 maxlength=20 placeholder="Enter your name" class="form-control">
</div>
<div class="form-group">
<label for="emaill">Email Address*</label>
<input type="email" name="email" required="required" id="emaill" placeholder="Enter your email" class="form-control" minlength=5>
</div>
<div class="form-group">
<label for="message-box">Message*</label>
<textarea required="required" placeholder="Enter your message here..." id="message-box" class="form-control" class="message-box" style="resize:none" cols="40" rows="5"></textarea>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
<!--end of contact page -->
<footer>
&copy; Winnie C. 2016
</footer>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment