Skip to content

Instantly share code, notes, and snippets.

@him229

him229/index.html

Created February 23, 2016 19:33
Show Gist options
  • Save him229/c332a0dce3ecaac85dd5 to your computer and use it in GitHub Desktop.
Save him229/c332a0dce3ecaac85dd5 to your computer and use it in GitHub Desktop.
Download ZIP
html and css
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Phresh</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap -->
<link href="{{ url_for('static', filename='css/bootstrap.css')}}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/bootstrap-responsive.css')}}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
<!--Font-->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="/favicon.ico">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- SCRIPT
============================================================-->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script>
</head>
<body>
<!--HEADER ROW-->
<div id="header-row" style="background-color: #3C74B9;color: #3C74B9;">
<div class="container text-center" style="background-color: #3C74B9;color: #3C74B9;">
<div class="row text-center" style="background-color: #3C74B9;color: #3C74B9;">
<!--LOGO-->
<div class="span12 text-center"><a class="brand" href="#"><img src="{{ url_for('static', filename='img/logo2.png')}}" height="250" width="250"/></a>
</div>
<!-- /LOGO -->
<!-- MAIN NAVIGATION -->
</div>
</div>
</div>
<!-- /HEADER ROW -->
<div class="container">
<!--Carousel
==================================================-->
<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<div class="active item">
<div class="container">
<div class="row">
<div class="span6">
<div class="carousel-caption text-center">
<h1 class="text-center"><b>Phresh</b></h1>
<h2 class = "text-center">“A carrot saved is a carrot earned.”<br>
– Bugs Bunny</h2>
<a class="btn btn-large btn-primary" href="https://github.com/him229/hackIllinois-fresheries">View on Github</a>
</div>
</div>
<div class="span6"> <img src="{{ url_for('static', filename='img/slide/slide1.jpg')}}"></div>
</div>
</div>
</div>
<!-- Feature
==============================================-->
<div class="row feature-box">
<div class="span12 cnt-title">
<h1>You'll be impressed by how much it can do. </h1>
<span>Eat healthy. Prevent food wastage. Save money. Track habits. Live happily.</span>
</div>
<div class="span4">
<img src="{{ url_for('static', filename='img/icon1.png')}}">
<h2>Just a Picture</h2>
<p>
Snap a picture of your receipt. We'll do the rest. We automatically add items from your receipt's picture to your dashboard. It's almost magic!
</p>
</div>
<div class="span4">
<img src="{{ url_for('static', filename='img/icon3.png')}}">
<h2>Tracks Everything</h2>
<p>
Everything in your fridge now viewable on your phone. Track freshness and expiry dates of all items. Your health is important!
</p>
</div>
<div class="span4">
<img src="{{ url_for('static', filename='img/icon2.png')}}">
<h2>And more...</h2>
<p>
Keep an eye out for your eating and shopping habits. Make informed decisions. Don't waste food. Love your environment. We believe in you!
</p>
</div>
</div>
<!-- /.Feature -->
<div class="hr-divider"></div>
<!-- row -->
<div class="container text-center">
<div class="span12 cnt-title">
<h1>Here's how it works!</h1>
</div>
<div class="row">
<div class="span4 text-center img-thumbnail"><a class="brand" href="#"><img src="{{ url_for('static', filename='img/IMG_2445.jpg')}}" height="350" width="350"/></a></div>
<div class="span4 text-center img-thumbnail"><a class="brand" href="#"><img src="{{ url_for('static', filename='img/IMG_2447.jpg')}}" height="350" width="350"/></a></div>
<div class="span4 text-center img-thumbnail"><a class="brand" href="#"><img src="{{ url_for('static', filename='img/IMG_2448.jpg')}}" height="350" width="350"/></a></div>
</div>
<div class="row top-buffer">
<div class="span6 text-center img-thumbnail"><a class="brand" href="#"><img src="{{ url_for('static', filename='img/IMG_2449.jpg')}}" height="350" width="350"/></a></div>
<div class="span6 text-center img-thumbnail"><a class="brand" href="#"><img src="{{ url_for('static', filename='img/IMG_2450.jpg')}}" height="350" width="350"/></a></div>
</div>
</div>
<!--Footer
==========================-->
<div class="footer top-buffer" style="background-color: #3c74b9;width: 100%;text-align:center;margin-bottom:0px;margin-left:0px;margin-right:0px;">
<div class="container" style = "width: 100%;padding-left:0px;padding-right:0px;">
<div class="row-fluid text-center" style = "width: 100%;padding-left:0px;padding-right:0px;">
<div class="span12 bottom-buffer"><h4 class="navbar-text" style="color:white;"><b>3rd Place @ HackIllinois 2016</b></h3>
<small class = "text-center bottom-buffer" style="color:white;">HackIllinois was amazing!</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
Trying this out
</div>
<!--/.Footer-->
</body>
</html>
Raw
style.css
/*
Global
============================= */
body{
font-family:'Source Sans Pro', sans-serif;
color:#666;
font-size:16px;
font-weight: 400;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
* {
text-shadow: 0 1px 1px rgba(255,255,255,.3);
}
p{line-height: 24px}
a{color:#0088cc;}
a:hover{text-decoration: none;}
h1,h2,h3,h4,h5,h6{ font-family:'Source Sans Pro', sans-serif}
h1{font-size:50px; font-weight: 200; color: #555; margin-bottom: 20px;}
h2{font-size: 30px; font-weight: 300; color:#444; margin: 30px 0}
h3{font-size: 20px; font-weight: 400; margin: 20px 0;}
h4{font-size:18px; font-weight: 400}
/*
HEADER ROW STYLE
===========================*/
#header-row{
background: #f5f5f5;
border-bottom:1px solid #eee;
padding: 15px 0;
}
#header-row .navbar{margin:10px 0 0 0;}
#header-row .navbar .navbar-inner{
border:none;
box-shadow: none;
margin: 0;
background: transparent;
}
#header-row .navbar .navbar-inner ul.nav > li > a{
box-shadow: none;
background: transparent;
color: #0088cc;
}
#header-row .navbar .navbar-inner ul.nav li.active a{
color: #333;
}
/*
Carousel
===========================*/
.top-buffer
{
margin-top:50px;
}
.bottom-buffer
{
margin-bottom:20px;
}
.carousel-control{
background: transparent;
width: 14px;
height: 14px;
font-size: 14px;
top:50%;
}
.carousel-control.right{right:-30px;}
.carousel-control.left{left:-30px;}
.carousel{
height: 500px;
background: url(../img/slide-bg.png) no-repeat bottom center;
}
.carousel img{
max-width: 100%;
}
.carousel-caption {
background-color: transparent;
position: relative;
max-width: 100%;
padding: 0 20px;
margin-top:20%;
}
.carousel-caption h1{
font-size: 50px;
text-transform: capitalize;
margin-bottom: 30px;
color:#555;
font-weight:200;
}
.carousel-caption .lead{
color: #888;
font-size: 18px;
line-height: 24px;
padding-bottom: 40px;
font-weight: 400
}
/* Divider
==================*/
.hr-divider{
background: url(../img/slide-bg.png) no-repeat bottom center;
width:1170px;
height: 100px;
margin-bottom: 50px;
display: block;
clear: both;}
/*Feature
==========================*/
.feature-box{
margin-top: 60px;
text-align: center;
}
.cnt-title { text-align: center; margin-bottom: 50px;}
.cnt-title span {
font-size: 24px;
font-weight: 200;
}
/* Review
==========================*/
.review{
margin: 80px 0;
}
/* Page Header
==========================*/
.page-header{
border-bottom: 1px solid #f5f5f5;
}
/*Media
========================*/
.media{
margin-bottom:50px;
}
/*MAP
========================*/
#map-canvas{
height: 400px;
border: 15px solid #fff;
box-shadow:0 0 0 1px #f5f5f5;
}
/*MAP
========================*/
.blog-post{
border-bottom: 2px solid #f5f5f5;
padding:0 0 50px;
margin-bottom: 40px;
}
.blog-post p{
margin: 20px 0;
}
.postmetadata{
margin-bottom: 20px;
padding: 5px 0;
}
.postmetadata ul{margin: 0; padding: 0}
.postmetadata ul li{
display: inline-block;
margin-right: 20px;
}
.postmetadata i{
margin: 4px 5px 0 0;
}
/*Sidebar
========================*/
.side-bar{margin-bottom: 30px;}
.side-bar ul{margin: 0; padding: 0}
.side-bar ul li{list-style: none;}
.side-bar h3{margin-bottom: 10px}
.recent-post strong {display: block; margin-bottom: 5px; color: #888 }
.recent-post li{margin-bottom: 15px}
/*Tags
========================*/
/*Footer
========================*/
footer{
border-top:1px solid #eee;
background: #f5f5f5;
padding: 30px 0;
color: #ccc;
margin-top:40px;
}
.bottom {
text-align:center;
background-color: black;
position: absolute;
width: 100%;
height: 50px;
left:0;
bottom:0;
z-index: 10;
}
/* Responsive View
=================================*/
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
}
/* Landscape phones and down */
@media (max-width: 480px) { ... }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment