Skip to content

Instantly share code, notes, and snippets.

@jrichardsz

jrichardsz/index.html

Forked from nowucca/index.html
Created July 18, 2022 04:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jrichardsz/2f404b873e30385c8df298670444bce0 to your computer and use it in GitHub Desktop.
Save jrichardsz/2f404b873e30385c8df298670444bce0 to your computer and use it in GitHub Desktop.
Download ZIP
elementary material style
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" xmlns="http://www.w3.org/1999/html"
xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">Cool Chicks Cupcakes, LLC.</h1>
</header>
<header class="wrapper clearfix">
<div class="header-detail">
<img src="img/idea-final-color.jpg" width="140px">
</div>
<div class="header-detail">
<p>For Order Inquiries<br>
Email: <a href="mailto:info@coolchickscupcakes.com">info@coolchickscupcakes.com</a><br>
Call: <a href="tel:+14086596501">(408) 659-6501</a></p>
</div>
</header>
<header class="wrapper clearfix">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a style="background-color: #e4bbd3" href="/menu.html">Menu</a></li>
</ul>
</nav>
</header>
</div>
<div class="main-container">
<div class="main wrapper clearfix">
<article>
<header>
<p><a name="home"></a>Cool Chicks Cupcakes, LLC is a custom order cupcake company in Morgan Hill that creates memorable cupcakes for the special events in your life. Our cupcakes are handcrafted using only the finest and freshest ingredients and are delivered right to your door!</p>
<p>Whatever the occasion, indulge someone in a treat that is sure to make everything seem a little bit sweeter…even for just a moment. Yes, a great cupcake can do that!</p>
</header>
<section>
<h3>Ordering Inquiries</h3>
<div class="cupcake-comment clearfix">
<img src="img/cc_vanilla-coffee-craving.jpg"/>
<img src="img/cc-tower.jpg"/>
<img src="img/cc_oreo-cookie-blast.jpg"/>
</div>
<section>
<ul>
<li>We prefer to receive inquiries via <a href="tel:+14086596501">phone</a> or <a href="mailto:info@coolchickscupcakes.com">email</a> to ensure we meet all your cupcake catering needs.</li>
<li>We accept cash or checks.</li>
<li>We have a minimum order of 1 dozen and a 1 dozen minimum for each flavor ordered.</li>
<li>Our cupcakes are $33.00 dozen which breaks down to $2.75 each.</li>
<li>We deliver all over the Bay area. Please <a href="tel:+14086596501">contact us</a> for delivery rates.</li>
<li>Our cupcake towers make an impressive and colorful presentation for your event. We will provide the design, delivery, setup and pick up of your cupcake tower for a minimal fee. </li>
</ul>
</section>
<footer>
</footer>
</article>
<aside>
<h3>About Us</h3>
<p>Cool Chicks Cupcakes, LLC is the vision of two friends, Erin and Stacy, who met and became friends through their Moms&apos; Group. Their passion for baking delicious, reasonably priced cupcakes made from the finest ingredients led them to create a partnership, and Cool Chicks Cupcakes was born. Erin and Stacy take pride in each and every cupcake. Elevating classic flavors with the finest ingredients is their passion. </p>
</aside>
</div> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<h3>Contact Us!</h3>
<p>For Order Inquiries:
<ul><li>Email: <a href="mailto:info@coolchickscupcakes.com">info@coolchickscupcakes.com</a></li>
<li>Call: <a href="tel:+140865966501">(408) 659-6501</a></li></ul></p>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Raw
main.css
@import url('normalize.min.css');
/* ==========================================================================
HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
img {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ===== Initializr Styles ==================================================
Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
========================================================================== */
body {
font: 16px/26px Helvetica, Helvetica Neue, Arial;
}
.wrapper {
width: 90%;
margin: 0 5%;
}
/* ===================
ALL: Pink Theme
=================== */
.header-container {
border-bottom: 20px solid #e40050;
color: white;
}
.footer-container,
.main aside {
border-top: 20px solid #e40050;
}
.header-container,
.footer-container,
.main aside {
background: #f17bb7;
}
.title {
color: white;
}
/* ==============
MOBILE: Menu
============== */
nav ul {
margin: 0;
padding: 0;
}
nav a {
display: block;
margin-bottom: 10px;
padding: 15px 0;
text-align: center;
text-decoration: none;
font-weight: bold;
color: white;
background: #e40050;
}
nav a:hover,
nav a:visited {
color: white;
}
nav a:hover {
text-decoration: underline;
}
/* ==============
MOBILE: Main
============== */
.main {
padding: 30px 0;
}
.main article h1 {
font-size: 2em;
}
.main aside {
color: white;
padding: 0px 5% 10px;
}
.footer-container footer {
color: white;
padding: 20px 0;
}
/* ===============
ALL: IE Fixes
=============== */
.ie7 .title {
padding-top: 20px;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
.header-detail {
float:left;
padding-right: 20px;
}
nav {
padding-top: 0em;
}
.cupcake-comment img {
float:left;
width: 25%;
margin-right: 10px;
}
.menu-item h3 {
color: #f17bb7;
font-weight: bold;
}
.menu-item p {
margin-left: 10px;
}
.menu-item {
padding-left: 5px;
padding-right: 5px;
margin-bottom: 15px;
border-style: dashed;
border-color: #e4bbd3;
border-width: thin;
}
/* ==========================================================================
Media Queries
========================================================================== */
@media only screen and (min-width: 480px) {
/* ====================
INTERMEDIATE: Menu
==================== */
nav a {
float: left;
width: 27%;
margin: 0 1.7%;
padding: 25px 2%;
margin-bottom: 0;
}
nav li:first-child a {
margin-left: 0;
}
nav li:last-child a {
margin-right: 0;
}
.menu-item p {
margin-left: 20px;
}
/* ========================
INTERMEDIATE: IE Fixes
======================== */
nav ul li {
display: inline;
}
.oldie nav a {
margin: 0 0.7%;
}
}
@media only screen and (min-width: 768px) {
/* ====================
WIDE: CSS3 Effects
==================== */
.header-container,
.main aside {
-webkit-box-shadow: 0 5px 10px #aaa;
-moz-box-shadow: 0 5px 10px #aaa;
box-shadow: 0 5px 10px #aaa;
}
/* ============
WIDE: Menu
============ */
.title {
float: left;
}
nav {
float: right;
width: 38%;
}
.menu-item p {
margin-left: 30px;
}
/* ============
WIDE: Main
============ */
.main article {
float: left;
width: 57%;
}
.main aside {
float: right;
width: 28%;
}
}
@media only screen and (min-width: 1140px) {
/* ===============
Maximal Width
=============== */
.wrapper {
width: 1026px; /* 1140px - 10% for margins */
margin: 0 auto;
}
}
/* ==========================================================================
Helper classes
========================================================================== */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 100%;
}
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Print styles
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow:none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment