Skip to content

Instantly share code, notes, and snippets.

@HuangStanley050

HuangStanley050/index.html

Created January 6, 2018 10:44
Show Gist options
  • Save HuangStanley050/6e478f16361d687697cb81727dd8cae0 to your computer and use it in GitHub Desktop.
Save HuangStanley050/6e478f16361d687697cb81727dd8cae0 to your computer and use it in GitHub Desktop.
Download ZIP
JumpStart
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title Goes Here</title>
<link href="./resources/something.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a style="color:#399bd1" href="#">Explore</a></li>
<li><a href="#">Start a Project</a></li>
<li><a href="#">About Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">
<img src="http://drive.google.com/uc?export=view&id=1pmZ82UFmc-8fgAHO60ubzWMSjY8d0kbt">
</a></li>
</u>
</div>
</nav>
<div class="jumbotron jumbotron_bike">
<div class="jumbo_header">
Get Going
</div>
<p>
Jumpstart your startup with some crowdsourced seed money, or support one of our 300,000,000+ creators and get rewards.
</p>
<button type="button" class="btn btn-info btn-lg">Jump In</button>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 project">
<h2>Feature Projects</h2>
<div class="house">
</div>
</div>
<div class="col-sm-3 col-xs-6">
<h2>Defrost: A Documentary</h2>
<span>by Leo De Firenze</span>
<p>
DeFrost is a documentary about growing up in a little red house in a cold, harsh valley. This is a story about my mother's childhood. This film attempts to capture vignettes of her upbringing — her family, friends, pets, and eventual depature from a
freezing valley in Northern Italy through beautiful cinematography and narration.
</p>
</div>
<div class="col-sm-3 col-xs-6">
<h2 style="color:#399bd1">Product Categories</h2>
<ul>
<li>Art</li>
<li>Books</li>
<li>Crystals</li>
<li>Design</li>
<li>Doodles</li>
<li>Deedlybobs</li>
<li>Farming</li>
<li>Gadgets</li>
<li>Hoverboards</li>
<li>Jams, Jellies, Etc.</li>
<li>Magazines</li>
<li>Plants</li>
<li>Snakes & Snake Equipment</li>
<li>Tables</li>
<li>Ventriliquist Figures</li>
<li>Yoyos</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<h2>Projects</h2>
<div class="row">
<div class="col-sm-4">
<div class="frame">
<img class="img-responsive" src="http://drive.google.com/uc?export=view&id=1RCnJRj1JebpGAMKswl0XWsLKIYw6ffeU">
</div>
<h4>The Right Tights</h4>
<span>by Riley Mae</span>
<br></br>
<p>These tights are 50 denier, beautifully constructed, hand-dyed, and guaranteed to last (no more ladders!). Made with high quality, completely toxic-free materials. Custom colors available to all backers.</p>
</div>
<div class="col-sm-4">
<div class="frame">
<img class="img-responsive" src="http://drive.google.com/uc?export=view&id=1675Q0W8FMAzaHBCbNNevSmo63jcWEAXH">
</div>
<h4>Peppermint Smart Home</h4>
<span>by Brian McDonald</span>
<br></br>
<p>Instantly upgrade your home with technology that keeps your family and home safe. We've made Peppermint easy to use. Just talk to your phone and Peppermint will help you every step of the way.</p>
</div>
<div class="col-sm-4">
<div class="frame">
<img class="img-responsive" src="http://drive.google.com/uc?export=view&id=1D0MtaE8mODayzZhCnKPdWrrwXAE2rRlb">
</div>
<h4>American StreetLife</h4>
<span>by Patrick Wallace</span>
<br></br>
<p>'ve been traveling around the United States for the past two years. I've slept on hundreds of couches, more than a few benches, and captured my experiences in this 120 page photo album.</p>
</div>
</div>
</div>
<div class="container-fluid footer">
<h1>Having trouble thinking of an idea?</h1>
<h3>Inventors’ block strikes at the worst times. But that’s all changed with Jumpstart’s Good Idea Generator Lite (GIGLi).</h3>
<button type="button" class="btn btn-info ">Learn More</button>
</div>
</body>
</html>
Raw
script.js
$( document ).ready(function() {
});
//image from google drive
/*featured project*/
//http://drive.google.com/uc?export=view&id=13lG9uS0N72ZCGP223av3QGl1jMAChR22
/*jumbotron beer*/
//http://drive.google.com/uc?export=view&id=1BJP4I5iT747PuKG0ROS84DSk7JfGL1cG
/*jumbotron bike*/
//http://drive.google.com/uc?export=view&id=1A8XRXMRLUrUkX7Vko8rTmBDBCBgQYiji
/*jumbotron duffel*/
//http://drive.google.com/uc?export=view&id=1gwcNReAd6xtqrqye57SmoLLIHCWYEqm7
/*jumbotron flower*/
//http://drive.google.com/uc?export=view&id=1bLOCzqHvkREtNfclcIiuUjBuEUirF-h-
/*logo*/
//http://drive.google.com/uc?export=view&id=1pmZ82UFmc-8fgAHO60ubzWMSjY8d0kbt
/*project 1*/
//http://drive.google.com/uc?export=view&id=1RCnJRj1JebpGAMKswl0XWsLKIYw6ffeU
/*project 2*/
//http://drive.google.com/uc?export=view&id=1675Q0W8FMAzaHBCbNNevSmo63jcWEAXH
/*project 3*/
//http://drive.google.com/uc?export=view&id=1D0MtaE8mODayzZhCnKPdWrrwXAE2rRlb
/*favicon*/
//http://drive.google.com/uc?export=view&id=18ZL_VCdXTdrk0YU1iP67cIXeI822An6F
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.scss
//@import url("https://fonts.googleapis.com/css?family=Open+Sans");
html {
font-size: 14px;
//font-family: "Open Sans";
}
.navbar.navbar-default {
margin-bottom: 0;
}
.nav.navbar-nav {
font-family: "Open Sans";
font-size: 1.1rem;
font-weight: bold;
}
.jumbotron.jumbotron_bike {
margin-top: 0px;
margin-bottom: 0px;
// background-image: url("http://drive.google.com/uc?export=view&id=1A8XRXMRLUrUkX7Vko8rTmBDBCBgQYiji");
height: 400px;
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.jumbo_header {
width: 51.3rem;
font-family: "Monoton";
margin: auto;
font-size: 7.1rem;
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
1px 1px 0 #000;
}
p {
width: 80%;
font-family: "Open Sans";
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
1px 1px 0 #000;
}
button {
font-family: "Open Sans";
}
}
.col-sm-6.project {
//background-color: red;
//border: black solid 2px;
//height: 500px;
overflow: hidden;
}
.col-sm-6.project h2 {
color: #399bd1;
font-weight: bold;
font-family: "Open Sans";
font-size: 1.7rem;
}
.col-sm-6.project .house {
background: url("http://drive.google.com/uc?export=view&id=13lG9uS0N72ZCGP223av3QGl1jMAChR22");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 300px;
//position: relative;
transition: all 1s;
}
.col-sm-6.project .house:hover{
background-size: 140% 140%;
}
.col-sm-3 {
//background-color: orange;
//height: 500px;
// border: black solid 2px;
}
.col-sm-3 h2 {
font-size: 1.3rem;
font-weight: bold;
font-family: "Open Sans";
margin-top: 55px;
}
.col-sm-3 span,
p {
font-family: "Open Sans";
}
ul {
padding: 0;
margin: 0;
text-align: left;
list-style-type: none;
line-height: 1.4;
font-family: "Open Sans";
}
h2 {
font-family: "Open Sans";
font-size: 1.7rem;
font-weight: bold;
color: #399bd1;
//margin-left: 10px;
}
h4{
font-family: "Open Sans";
font-weight: bold;
}
.col-sm-4 .frame {
overflow: hidden;
width: 300px;
height: 170px;
}
.col-sm-4 img{
transition: all 1s;
width: 300px;
max-width: 100%;
}
.col-sm-4 .frame:hover img{
//height: 400px;
//background-color: pink;
//border: black solid 3px;
transform: scale(1.3);
}
.container-fluid.footer {
width: 100%;
height: 300px;
background-color: #f3f3f3;
display: flex;
flex-direction: column;
justify-content: flex-start;
//align-content: center;
h1{
margin:auto;
}
h3{
width: 80%;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
button{
width: 20%;
margin: auto;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment