Skip to content

Instantly share code, notes, and snippets.

@ernst77

ernst77/index.html

Created February 16, 2016 02:11
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 ernst77/b9202f2b5290941f2ed3 to your computer and use it in GitHub Desktop.
Save ernst77/b9202f2b5290941f2ed3 to your computer and use it in GitHub Desktop.
Download ZIP
Introduction to Web Authoring / FMA 2015 Birkbeck
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<title> Ernie's Coffee </title>
<meta charset="UTF-8">
</head>
<body>
<div id="wholepage">
<nav id="threelinks"><!-- small three links -->
<ul>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Conctact us</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
</ul>
</nav>
<header id="tophead">
<h3>Ernie's Coffee</h3> <!-- text in header image -->
</header>
<nav id="mainnav">
<ul>
<li><a class="page">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="jobs.html">Jobs</a></li>
</ul>
</nav>
<section id="webcont">
<div>
<h1>The world's best coffees!</h1>
<!-- Welcome message, little description about page,business -->
<img src="cup.png" alt="CoffeCup"><!-- Image to make main page more colourful and fun -->
<p>Our coffee is made from best Costa Rica beans. Freshly blended every time you order coffee at our coffee shop.
</p>
<p>
We measure everything to make sure every single coffee shot quality is at the very best. Our coffee will give you fully satisfaction or we give you your money back no questions.
</p>
<h2>Little bit about us...</h2>
<p>As everyday we see coffee shops almost on every corner our aim is not the money but customers satisfaction. Our prices are low and we take our time to make the best coffee we can.
Also we serve drinks in glass or porcelain cups which give coffee the best taste. Big range of syrups, coffee beans, milk and our brewing style will give best experience you will ever had.
In addition to that our staff is very warm and welcome you can always chat with them and have a great conversation.</p>
<p>
It's not Starbucks, we are here for you!
</p>
</div>
</section>
</div>
<footer>
<div id="footerbit"><!-- footer with most used asked/used links and copyright tag -->
COPYRIGHT&COPY; 2015
<div id="shareimg">
<a href="#"><img src="facebook.png" alt="facebook"></a>
<a href="#"><img src="twitter.png" alt="twitter"></a>
<a href="#"><img src="pinterest.png" alt="pinterest"></a>
<a href="#"><img src="tumblr.png" alt="tumblr"></a>
</div>
</div>
</footer>
</body>
</html>
Raw
jobs.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<title> Ernie's Coffee </title>
<meta charset="UTF-8">
</head>
<body>
<div id="wholepage">
<nav id="threelinks"><!-- small three links -->
<ul>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Conctact us</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
</ul>
</nav>
<header id="tophead">
<h3>Ernie's Coffee</h3><!-- text in header image -->
</header>
<nav id="mainnav"><!-- big navigation -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a class="page">Jobs</a></li>
</ul>
</nav>
<section id="webcont"><!-- description what we hiring and what are we looking for -->
<h1> Looking for a job?</h1>
<div>
<img src="hiring.png" alt="WeAreHiring"><!-- Image for giving a feeling like it's real board -->
<p> Coffee shop business is one of the most popular small businesses which is growing every year and increasing their popularity. We are here to provide people amazing coffee and smile. If you believe you are the perfect match for us don't hesitate and apply.
</p>
<p>
We are looking for experienced baristas who are have confident coffee making skills. Pay starts from 10£ p/h.
</p>
<p>
We are also hiring inexperienced people who will eventually will be trained as baristas and master art of coffee making with our best baristas.
</p>
<p>Contact us on <a href="mailto:erniecoffe@gmail.com">e-mail</a> by sending your CV.
</div>
</section>
</div>
<footer>
<div id="footerbit">
COPYRIGHT&COPY; 2015<!-- footer with most used asked/used links and copyright tag -->
<div id="shareimg">
<a href="#"><img src="facebook.png" alt="facebook"></a>
<a href="#"><img src="twitter.png" alt="twitter"></a>
<a href="#"><img src="pinterest.png" alt="pinterest"></a>
<a href="#"><img src="tumblr.png" alt="tumblr"></a>
</div>
</div>
</footer>
</body>
</html>
Raw
products.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<title> Ernie's Coffee </title>
<meta charset="UTF-8">
</head>
<body>
<div id="wholepage">
<nav id="threelinks"><!-- small three links -->
<ul>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Conctact us</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
</ul>
</nav>
<header id="tophead">
<h3>Ernie's Coffee</h3><!-- text in header image -->
</header>
<nav id="mainnav"><!-- big navigation -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a class="page" href="products.html">Products</a></li>
<li><a href="jobs.html">Jobs</a></li>
</ul>
</nav>
<div id="insidecolumn">
<nav id="prodnav"><!-- little navigation -->
<ul>
<li class="current3"><a href="products.html">Coffees</a></li>
<li><a href="#">Beans</a></li>
<li><a href="#">Cups</a></li>
</ul>
</nav>
<nav id="crumbs"><!-- breadcrumbs -->
<ul>
<li><a href="index.html">home</a><li>
<li>></li>
<li><a href="products.html">products</a></li>
<li>></li>
<li><a href="products.html">coffees</a></li>
</ul>
</nav>
<section id="insideprod">
<h1>Coffees</h1><!-- coffees and their description -->
<h2>Latte</h2>
<img src="lat.png" alt="LatteCup">
<p>Latte coffee. Made with one of your selected milks (semi-skimmed, whole or skimmed). Steamed to perfect temperature with micro foam for beautiful latte art.
</p>
<h2>Cappuccino</h2>
<img src="cap.png" alt="CappuccinoCup">
<p>
Our cappuccino will be foamy as you wish. 1/3 foam, 1/3 milk, 1/3 coffee - perfection as it best. We will put chocolate sprinkles or cinnamon on top if desired.
</p>
<h2>Caffè mocha</h2>
<img src="moc.png" alt="MochaCup">
<p>
A caffè mocha, also called mocaccino. Coffee and chocolate togther. We will make the one you desire flat or foamy all depends on you.
</p>
</section>
</div>
</div>
<footer>
<div id="footerbit"><!-- footer with most used asked/used links and copyright tag -->
COPYRIGHT&COPY; 2015
<div id="shareimg">
<a href="#"><img src="facebook.png" alt="facebook"></a>
<a href="#"><img src="twitter.png" alt="twitter"></a>
<a href="#"><img src="pinterest.png" alt="pinterest"></a>
<a href="#"><img src="tumblr.png" alt="tumblr"></a>
</div>
</div>
</footer>
</body>
</html>
Raw
sitemap.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<title> Ernie's Coffee </title>
<meta charset="UTF-8">
</head>
<body>
<div id="wholepage">
<nav id="threelinks"><!-- small three links -->
<ul>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Conctact us</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
</ul>
</nav>
<header id="tophead">
<h3>Ernie's Coffee</h3><!-- text in header image -->
</header>
<nav id="mainnav"><!-- big navigation -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="jobs.html">Jobs</a></li>
</ul>
</nav>
<section id="webcont">
<h1> Site Map</h1><!-- site map list -->
<div id="sitemap">
<ul class="sitem">
<li><a href="index.html">Home</a></li><!-- main list (father list) -->
<li><a href="products.html">Products</a>
<ul>
<li><a class="a" href="products.html">Coffee</a></li><!-- smaller list (child list) -->
<li><a href="#">Beans</a></li>
<li><a href="#">Cups</a></li>
</ul>
</li>
<li><a href="jobs.html">Jobs</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="sitemap.html">Sitemap</a></li> <!-- -->
</ul>
</div>
</section>
</div>
<footer>
<div id="footerbit">
COPYRIGHT&COPY; 2015<!-- footer with most used asked/used links and copyright tag -->
<div id="shareimg">
<a href="#"><img src="facebook.png" alt="facebook"></a>
<a href="#"><img src="twitter.png" alt="twitter"></a>
<a href="#"><img src="pinterest.png" alt="pinterest"></a>
<a href="#"><img src="tumblr.png" alt="tumblr"></a>
</div>
</div>
</footer>
</body>
</html>
Raw
styles.css
/* background */
html{
background-color:#0C0A0C;
background-image: url(back.jpg),url(back1.jpg);
background-size:100% 100%;
}
/* body text */
body{
color:#f6f3f4;
font-family:sans-serif;
text-shadow: 1px 1px 1px #000;
}
/* header */
#tophead h3{
font-size: 2.25em;
text-shadow: 1px 1px 1px #000;
font-family:Tahoma, Geneva, sans-serif;
color:#FFF;
text-align: right;
background-image: url(header.png);
background-repeat: no-repeat;
padding: 137px;
}
/*page size */
#wholepage{
min-height: 100%;
width: 960px;
margin: 0 auto;
position:relative;
}
/* important links*/
#threelinks {
text-align: right;
}
#threelinks ul li{
display: inline;
border: solid;
border-color: #000;
border-width: 0px 1px 0px 0px;
list-style:none;
margin: 0px;
text-align: center;
}
#threelinks a{
color: #f6f3f4;
text-decoration:none;
padding-right: 10px;
padding-left: 10px;
}
#threelinks a:hover{
color: #f3c73f;
}
/* Main links*/
#mainnav
{
text-align: center;
}
#mainnav ul{
list-style:none;
margin:0px;
}
#mainnav li{
padding-top:20px;
padding-bottom:20px;
background: #0a0003;
display:inline;
}
#mainnav li a:hover {
font-family:Verdana;
color: #f6f3f4;
background: #8b070e;
padding: 20px 100px 20px 100px;
}
#mainnav li a{
font-family:Verdana;
text-decoration: none;
color: #E0D3CA;
padding: 20px 100px 20px 100px;
}
a.page{
color: #f6f3f4 !important;
background:#8b070e;
}
/* text inside */
h1{
font-size: 2.25em;
text-align:left;}
h2{
font-size: 1.25em;
text-align:left;}
#footerbit{
width: 960px;
margin: 0 auto;
text-align: center;
margin-top: 80px;
padding: 2.0em 0;
background: #0a0003;
bottom: 1em;
clear:both;
}
/* products navigation */
#prodnav{
width: 20%;
float: left;
}
#prodnav ul{
list-style:none;
padding:10px 10px 10px 10px ;
}
#prodnav ul li{
padding-top:10px;
padding-bottom:10px;
background-color:#0a0003;
list-style:none;
}
#prodnav ul li a{
padding-left:10px;
font-family:Verdana;
text-shadow: 1px 1px 1px #000;
color:#f6f3f4;
text-decoration:none;}
#prodnav ul li:hover{
background:#f3c73f;
}
#prodnav ul li a:hover{
font-family:Verdana;
text-shadow: 1px 1px 1px #000;
color:#f6f3f4;
text-decoration:none;}
#prodnav ul li.current3{
background-color:#f3c73f;
}
/* BreadCrumbs*/
#crumbs {
width: 80%;
float: right;
}
#crumbs ul{
padding-left:10px;
padding-top:10px;
}
#crumbs ul li{
list-style:none;
display:inline;
}
#crumbs ul li a{
color:#f3c73f;
text-decoration:none;
}
#crumbs ul li a:hover{
color:#fff;
text-decoration:none;
}
/*products inside page */
#insideprod {
width: 80%;
float: right;
}
#insideprod img{
float: left;
padding-right: 10px;
padding-bottom: 5px;
}
#insideprod p{
padding-bottom: 50px;
}
/* text inside page (paragraphs and so on...)*/
#webcont {
text-align:left; }
#webcont a{
text-decoration:none;
color: #f3c73f;}
#webcont img{
display: block;
margin-left: auto;
margin-right: auto;
}
/* site map list */
ul.sitem li{
list-style:none;}
ul.sitem li a{
font-weight:bold;
}
ul.sitem li a:hover{
font-weight:bold;
color:#FFF !important;
}
ul.sitem li ul li a{
font-size: 0.90em;
font-weight:initial;}
ul.sitem li ul li a:hover{
color:#FFF !important;
font-size: 0.90em;
font-weight:initial;}
Raw
yjstyle.css
/* Common page regions */
#wrapper{
width: 960px;
margin: 0 auto;
border:1px solid #000000;
}
#pageheader{
border-bottom:1px solid #000000;
}
#pagefooter{
clear: both;
border-top:1px solid #000000;
}
/* Primary navigation bar */
#primarynav {
border-bottom:1px solid #000000;
}
#primarynav ul {
margin: 0;
padding: 0;
overflow:hidden;
}
#primarynav ul li {
float: left;
border-right: 1px solid #000000;
display: block;
}
#primarynav ul li a{
display: block;
padding: 0.2em 2em;
}
/* Secondary navigation bar */
#secondarynavcol ul {
margin: 2em 0.25em 0 0.25em;
padding:0;
border-top: 1px solid #000000;
}
#secondarynavcol ul li{
list-style-type: none;
border-bottom: 1px solid #000000;
}
#secondarynavcol ul li a{
display: block;
padding: 0.25em;
}
/* Common links */
#commonlinks {
text-align: left;
}
#commonlinks a{
color: #000000;
text-decoration: none;
}
#commonlinks ul{
margin: 0;
}
#commonlinks li{
display:inline;
margin-right: 0.25em;
list-style: none;
}
/* Two column page regions */
#columncontainer{
overflow: hidden;
background: #ffffff url(images/leftcol.gif) repeat-y;
width: 100%;
}
#contenttwocolpage {
width: 80%;
float: right;
}
#secondarynavcol{
width: 20%;
float: left;
}
a.currentpage {
color: #000000;
text-decoration: none;
background-color: #D8D8D8;
}
#breadcrumbs ul{
margin: 0;
padding: 0;
overflow:hidden;
padding-left:0.5em
}
#breadcrumbs ul li{
list-style-type:none;
float: left;
padding-left:0.25em
;
}
#breadcrumbs a{
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment