Skip to content

Instantly share code, notes, and snippets.

@filmaj

filmaj/index.html

Forked from tmclean85/index.html
Created April 14, 2017 21:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save filmaj/0a35a4366816a7797ab92296e85d0c70 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save filmaj/0a35a4366816a7797ab92296e85d0c70 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @tmclean85 tmclean85 created this gist Apr 14, 2017.
    227 changes: 227 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,227 @@
    /* 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;
    }

    68 changes: 68 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    <!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>