/An-Anonymous-Pen.markdown

## An-Anonymous-Pen.markdown

      
    Raw
  

              An-Anonymous-Pen.markdown
            
          
    An Anonymous Pen

A Pen by Secret Sam on CodePen.
License.

  
## index.html

<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>

Smells like Bakin Cupcake Company
</title>

<link rel="stylesheet" href="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\css\style" type="text/css" media="screen">
</head>

	<body>
	<div class="container clearfix">
	<div class="grid_4">

	<img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\logo.gif" alt="LOGO">

	</div>


    <div class="grid_8 omega">
	<ul>

	<li><a href="#">About</a></li>
	<li><a href"#">Cupcakes &amp; Prices</a></li>
	<li><a href"#">Locations</a></li>
	<li class= "last"><a href"#"> Contact Us </a></li>

	</ul>
	</div>

<div id="intro" class="grid_9">
<h1> Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts. </h1>
<p><a href="#" class="btn"> Browse our Cupcakes</a></p>

</div>
<div class="grid_3">
<img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\you-bake-me-blush.gif" alt="You Bake Me Blush">
</div>

<div id="featured-cupcake" class="grid_7">

<h2> Cupcake of the Week </h2>
<p>This week’s featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. It’s strange combo of flavors will kick your taste buds into fiesta mode!</p>

<img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\featured-cupcake.jpg" alt="Featured cupcake">

</div>

<div id="new-cupcakes" class="grid_5 omega">

<h2> Fresh out of the oven </h2>

<p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeño So Spicy</a>.</p>

	<img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\new-cupcake-bacon.jpg" alt="Bacon Cupcake for the Jews">
	<img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\new-cupcake-jalapeno.jpg" alt="Jalapeno Cupcake for the hott">
	</div>

	<h2> Inside the Kitchen </h2>
	<p> Smells Like Bakin’ started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>

	<p><a href="#" class="btn-small">Read More</a></p>

	<h2>Get Baking With Us</h2>
	<div id="contact">
	<p> Call Us <span>+447792442209 </span><br>
	Email us: <a href="#">furquan@bake.com</a></p>
	</div>

<p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>
<a href="https://www.facebook.com/SmellsLikeBakin"><img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\facebook.gif" alt="Facebook"></a>
<a href="https://www.twitter.com/SmellsLikeBakin"><img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\twitter.gif" alt="Twitter"></a>

<div id="Copyright">
<p> &copy; 2014 Smells like Bakin </p>

</div>


</div>
</body>
</html>

## style.css
body {
	font-family: 'Nunito', sans-serif;
	color: #faf3bc;
	background: #420600 url('img/bg-texture.jpg') repeat;
}

a {
	color: #4fb69f;
	text-decoration: none;
}

h1 {
	font-size: 1.750em;
	font-weight: 100;
	letter-spacing: -1.5px;
}

h2 {
	font-weight: 100;
	font-size: 1.500em;
	color: #b4c34f;
}

h3 {
	font-weight: 100;
	font-size: 1.125em;
	color: #ed6c85;
}

.btn {
	padding: 15px 30px;
	margin: 40px 0;
	color: #faf3bc;
	background: #4fb69f url('img/texture.png') no-repeat right top;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	text-transform: uppercase;
}

btn:hover {
	background-color: #4cc4a7;
}


.btn-small {
	padding: 10px 25px;
	margin: 50px 0;
	color: #faf3bc;
	font-size: .75em;
	background: #b22316 url('texture.png') no-repeat right bottom;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	text-transform: uppercase;
}

.btn-small:hover {

	background-color: #c62718;
}

.submit-btn {
	padding: 10px 25px;
	margin: 20px 0 50px 0;
	color: #faf3bc;
	font-family: 'Nunito', sans-serif;
	border: 0;
	font-weight: 100;
	font-size: .75em;
	background: #b22316 url('texture.png') no-repeat right top;;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	text-transform: uppercase;
}

ul.nav {
	margin: 0 auto;
	padding: 120px 0 0 0;
	list-style: none;
	float: right;
}

ul.nav li {
	float: left;
	margin-right: 40px;
}

ul.nav li.last {
	margin: 0;
	padding: 10px 25px;
	color: #faf3bc;
	font-family: 'Nunito', sans-serif;
	border: 0;
	font-weight: 100;
	font-size: .75em;
	background: #b22316 url('texture.png') no-repeat right top;;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	text-transform: uppercase;
}

ul.nav li.last:hover {
		background-color: #c62718;
}

ul.nav li a {
	color: #faf3bc;
	display: block;
	text-decoration: none;
}

#intro {
	margin: 50px 0 75px 0;
}

#new-cupcakes img {
	border: 8px solid #faf3bc;
	margin: 0 0 20px 0;
}

#popular-cupcakes img {
	border: 8px solid #faf3bc;
}

#featured-cupcake img {
	border: 8px solid #faf3bc;
}

#contact span{
	color: #b22316;
	font-weight: 600;
}

#copyright {
	border-top: 8px solid #2a0400;
	padding: 10px 0;
	margin: 15px 0;
	text-align: center;
}

	<html>

	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<title>

	Smells like Bakin Cupcake Company
	</title>

	<link rel="stylesheet" href="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\css\style" type="text/css" media="screen">
	</head>

	<body>
	<div class="container clearfix">
	<div class="grid_4">

	<img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\logo.gif" alt="LOGO">

	</div>


	<div class="grid_8 omega">
	<ul>

	<li><a href="#">About</a></li>
	<li><a href"#">Cupcakes & Prices</a></li>
	<li><a href"#">Locations</a></li>
	<li class= "last"><a href"#"> Contact Us </a></li>

	</ul>
	</div>

	<div id="intro" class="grid_9">
	<h1> Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts. </h1>
	<p><a href="#" class="btn"> Browse our Cupcakes</a></p>

	</div>
	<div class="grid_3">
	<img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\you-bake-me-blush.gif" alt="You Bake Me Blush">
	</div>

	<div id="featured-cupcake" class="grid_7">

	<h2> Cupcake of the Week </h2>
	<p>This week’s featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. It’s strange combo of flavors will kick your taste buds into fiesta mode!</p>

	<img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\featured-cupcake.jpg" alt="Featured cupcake">

	</div>

	<div id="new-cupcakes" class="grid_5 omega">

	<h2> Fresh out of the oven </h2>

	<p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeño So Spicy</a>.</p>

	<img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\new-cupcake-bacon.jpg" alt="Bacon Cupcake for the Jews">
	<img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\new-cupcake-jalapeno.jpg" alt="Jalapeno Cupcake for the hott">
	</div>

	<h2> Inside the Kitchen </h2>
	<p> Smells Like Bakin’ started out in the garage of the husband wife duo Allison & Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>

	<p><a href="#" class="btn-small">Read More</a></p>

	<h2>Get Baking With Us</h2>
	<div id="contact">
	<p> Call Us <span>+447792442209 </span><br>
	Email us: <a href="#">furquan@bake.com</a></p>
	</div>

	<p>We announce all of our new flavors first through Facebook & Twitter, and even take requests!</p>
	<a href="https://www.facebook.com/SmellsLikeBakin"><img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\facebook.gif" alt="Facebook"></a>
	<a href="https://www.twitter.com/SmellsLikeBakin"><img src="C:\Users\Furquan Ahmad\Documents\Treehouse\Smells like Bakin\img\twitter.gif" alt="Twitter"></a>

	<div id="Copyright">
	<p> © 2014 Smells like Bakin </p>

	</div>







	</div>
	</body>
	</html>
	body {
	font-family: 'Nunito', sans-serif;
	color: #faf3bc;
	background: #420600 url('img/bg-texture.jpg') repeat;
	}

	a {
	color: #4fb69f;
	text-decoration: none;
	}

	h1 {
	font-size: 1.750em;
	font-weight: 100;
	letter-spacing: -1.5px;
	}

	h2 {
	font-weight: 100;
	font-size: 1.500em;
	color: #b4c34f;
	}

	h3 {
	font-weight: 100;
	font-size: 1.125em;
	color: #ed6c85;
	}

	.btn {
	padding: 15px 30px;
	margin: 40px 0;
	color: #faf3bc;
	background: #4fb69f url('img/texture.png') no-repeat right top;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	text-transform: uppercase;
	}

	btn:hover {
	background-color: #4cc4a7;
	}


	.btn-small {
	padding: 10px 25px;
	margin: 50px 0;
	color: #faf3bc;
	font-size: .75em;
	background: #b22316 url('texture.png') no-repeat right bottom;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	text-transform: uppercase;
	}

	.btn-small:hover {

	background-color: #c62718;
	}

	.submit-btn {
	padding: 10px 25px;
	margin: 20px 0 50px 0;
	color: #faf3bc;
	font-family: 'Nunito', sans-serif;
	border: 0;
	font-weight: 100;
	font-size: .75em;
	background: #b22316 url('texture.png') no-repeat right top;;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	text-transform: uppercase;
	}

	ul.nav {
	margin: 0 auto;
	padding: 120px 0 0 0;
	list-style: none;
	float: right;
	}

	ul.nav li {
	float: left;
	margin-right: 40px;
	}

	ul.nav li.last {
	margin: 0;
	padding: 10px 25px;
	color: #faf3bc;
	font-family: 'Nunito', sans-serif;
	border: 0;
	font-weight: 100;
	font-size: .75em;
	background: #b22316 url('texture.png') no-repeat right top;;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	text-transform: uppercase;
	}

	ul.nav li.last:hover {
	background-color: #c62718;
	}

	ul.nav li a {
	color: #faf3bc;
	display: block;
	text-decoration: none;
	}

	#intro {
	margin: 50px 0 75px 0;
	}

	#new-cupcakes img {
	border: 8px solid #faf3bc;
	margin: 0 0 20px 0;
	}

	#popular-cupcakes img {
	border: 8px solid #faf3bc;
	}

	#featured-cupcake img {
	border: 8px solid #faf3bc;
	}

	#contact span{
	color: #b22316;
	font-weight: 600;
	}

	#copyright {
	border-top: 8px solid #2a0400;
	padding: 10px 0;
	margin: 15px 0;
	text-align: center;
	}