-
-
Save filmaj/0a35a4366816a7797ab92296e85d0c70 to your computer and use it in GitHub Desktop.
Aloha homepage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* http://meyerweb.com/eric/tools/css/reset/ | |
v2.0 | 20110126 | |
License: none (public domain) | |
*/ | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section { | |
display: block; | |
} | |
body { | |
line-height: 1; | |
} | |
ol, ul { | |
list-style: none; | |
} | |
blockquote, q { | |
quotes: none; | |
} | |
blockquote:before, blockquote:after, | |
q:before, q:after { | |
content: ''; | |
content: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
html { | |
max-width: 1240px; | |
} | |
@font-face { | |
font-family: 'playfair_displayitalic'; | |
src: url('fonts/playfairdisplay-italic-webfont.eot'); | |
src: url('fonts/playfairdisplay-italic-webfont.woff2') format('woff2'), | |
url('fonts/playfairdisplay-italic-webfont.woff') format('woff'), | |
url('fonts/playfairdisplay-italic-webfont.svg#playfair_displayitalic') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'playfair_displaybold'; | |
src: url('fonts/playfairdisplay-bold-webfont.woff2') format('woff2'), | |
url('fonts/playfairdisplay-bold-webfont.woff') format('woff'), | |
url('fonts/playfairdisplay-bold-webfont.ttf') format('truetype'), | |
url('fonts/playfairdisplay-bold-webfont.svg#playfair_displaybold') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'ralewaymedium'; | |
src: url('fonts/raleway-medium-webfont.woff2') format('woff2'), | |
url('fonts/raleway-medium-webfont.woff') format('woff'), | |
url('fonts/raleway-medium-webfont.ttf') format('truetype'), | |
url('fonts/raleway-medium-webfont.svg#ralewaymedium') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'ralewaylight'; | |
src: url('fonts/raleway-light-webfont.woff2') format('woff2'), | |
url('fonts/raleway-light-webfont.woff') format('woff'), | |
url('fonts/raleway-light-webfont.ttf') format('truetype'), | |
url('fonts/raleway-light-webfont.svg#ralewaylight') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
#aloha-logo { | |
position: absolute; | |
top: 18px; | |
left: -40px; | |
margin-left: 0px; | |
} | |
.header-list { | |
list-style-type: none; | |
text-transform: uppercase; | |
text-align: center; | |
display: inline-block; | |
width: 100%; | |
min-height: 50px; | |
padding-top: 45px; | |
padding-bottom: 0px; | |
} | |
ul li { | |
font-family: 'ralewaymedium'; | |
color: red; | |
margin: 15px; | |
list-style-type: none; | |
text-transform: uppercase; | |
text-align: center; | |
display: inline; | |
min-height: 75px; | |
} | |
#cart-icon { | |
position: absolute; | |
width: 55px; | |
height: 55px; | |
display: inline-block; | |
left: 1150px; | |
top: 23px; | |
} | |
#hero-banner:after { | |
background: linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); | |
} | |
#hero-banner { | |
color: white; | |
background: url("images/banner-girl.png"), url("images/flower-bkgd.jpg"); | |
background-repeat: no-repeat, repeat-x; | |
background-size: contain; | |
background-position: 550px 90px, center; | |
display: inline-block; | |
position: relative; | |
text-align: center; | |
height: 475px; | |
width: 100%; | |
} | |
#hero-banner h4 { | |
text-align: center; | |
} | |
#styles-banner { | |
text-align: center; | |
min-height: 250px; | |
padding-top: 100px; | |
margin: 0, 0; | |
} | |
.headerbold { | |
font-family: 'playfair_displaybold'; | |
font-weight: bold; | |
} | |
h3 { | |
font-family: 'playfair_displayitalic'; | |
font-size: 40px; | |
text-align: center; | |
font-weight: 100; | |
} | |
.nav-menu-top { | |
height: 150px; | |
width: 100%; | |
text-align: center; | |
margin: 20px; | |
display: inline-block; | |
position: relative; | |
} | |
#mens { | |
background-image: url("images/mens-category.jpg"); | |
} | |
#trends { | |
background-image: url("images/trends-category.jpg"); | |
} | |
#glasses { | |
background-image: url("images/glasses-category.jpg"); | |
} | |
.nav-menu-bottom { | |
height: 150px; | |
width: 100%; | |
text-align: center; | |
margin: 20px; | |
display: inline-block; | |
position: relative; | |
} | |
#sale { | |
background-image: url("images/sale-category.jpg"); | |
} | |
#bags { | |
background-image: url("images/bags-category.jpg"); | |
} | |
#women { | |
background-image: url("images/womens-category.jpg"); | |
} | |
.favourite-items-list { | |
display: inline; | |
text-align: center; | |
} | |
p { | |
text-align: center; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<link href="style1.css" rel="stylesheet" type="text/css"> | |
<link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet"> | |
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet"> | |
<title> Aloha Homepage</title> | |
</head> | |
<body> | |
<div class="header-list"> | |
<img id="aloha-logo" src="images/aloha-logo.svg" width="300" height="60"> | |
<ul> | |
<li>About</li> | |
<li>Shop</li> | |
<li>Featured</li> | |
<li>Updates</li> | |
</ul> | |
<img id="cart-icon" src="images/cart-icon.svg"> | |
</div> | |
<div id="hero-banner"> | |
<h4 class="headerbold">New Collection</h4> | |
<h1>Spring/Summer 2016</h1> | |
</div> | |
<div id="styles-banner"> | |
<h3><i>Hand-Crafted</i><b class="headerbold"> Styles</b></h3> | |
<br><br> | |
<p>Aloha Apparel Co. sells only the finest ready-to-travel clothing. Browse our current selection of products | |
or sign-up for updates below.</p> | |
</div> | |
<div class="nav-menu-top"> | |
<ul> | |
<li id="mens">Men's</li> | |
<li id="trends">Trends</li> | |
<li id="glasses">Glasses</li> | |
</ul> | |
</div> | |
<div class="nav-menu-bottom"> | |
<ul> | |
<li id="sale">Sale</li> | |
<li id="bags">Bags</li> | |
<li id="women">Women's</li> | |
</ul> | |
</div> | |
<h3>Most-Loved <b class="headerbold">Products</b></h3> | |
<div class="favourite-items-list"> | |
<ul> | |
<li>dresses</li> | |
<li>bags</li> | |
<li>denim</li> | |
<li>dresses</li> | |
</ul> | |
</div> | |
<h3>Sign-up for <b class="headerbold">Updates</b></h3> | |
<p>Stay updated on our latest product releases, be first to find out about upcoming sales, and get free style tips | |
from our blog. Unsubscribe at any time.</p> | |
<footer> | |
<p id="info">© 2016 Aloha Apparel Co.<br>Powered by HTML and CSS<br><br>604-604-6040. <a href="https://www.google.ca" target="_blank">info@alohaapparel.com</a></p> | |
<ul> | |
<li>facebook</li> | |
<li>twitter</li> | |
<li>instagram</li> | |
<li>pinterest</li> | |
<li>google+</li> | |
</ul> | |
</footer> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment