mytriangle

by aaronk85

HTML

<div id="nav-wrap">
    <div id="logo-wrap">
        <div class="triangle">
            <div class="circle">
                <div class="dot"></div>
            </div>
        </div>
    </div>
    <h1>Hello World!</h1>
    <div id="nav"><span style="float:left;margin:0 5px 0 0;">&#9776;</span><a href="#">Menu</a></div>
</div>
<div id="page-wrap">
    <div id="content">
        <h2>Hello World!</h2>
        <h3>Hello World!</h3>
        <p>Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. </p>    
    </div>
</div>

CSS

#nav-wrap {
    float:left;
    display:inline;
    width: 100%;
    height: 55px;
    padding: 5px 0;
    
background: #39c10f; /* Old browsers */
background: -moz-linear-gradient(top,  #39c10f 0%, #299a0b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#39c10f), color-stop(100%,#299a0b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #39c10f 0%,#299a0b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #39c10f 0%,#299a0b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #39c10f 0%,#299a0b 100%); /* IE10+ */
background: linear-gradient(to bottom,  #39c10f 0%,#299a0b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39c10f', endColorstr='#299a0b',GradientType=0 ); /* IE6-9 */

}

#logo-wrap {
  background: none repeat scroll 0 0 #FFFFFF;
  border-radius: 5px 5px 5px 5px;
  display: inline;
  float: left;
  height: 45px;
  margin: 0 0 0 5px;
  padding: 5px;
  width: 45px;
}

.triangle {
  border-bottom: 20px solid transparent;
  border-left: 45px solid #299A0B;
  border-radius: 5px 5px 5px 5px;
  border-top: 26px solid transparent;
  float: left;
  height: 0;
  margin: 0 5px 0 0;
  width: 0;
}

.circle {
  background: none repeat scroll 0 0 #FFFFFF;
  border-radius: 20px 20px 20px 20px;
  display: inline;
  float: left;
  height: 17px;
  margin: -10px 0 0 -38px;
  position: absolute;
  width: 17px;
}

.dot {
    background: none repeat scroll 0 0 red;
    border-radius: 7px 7px 7px 7px;
    display: inline;
    float: left;
    height: 7px;
    margin: 5px;
    width: 8px;
}

body {
font-family: 'Archivo Narrow', sans-serif;
    font-weight: 400;
    font-size: 15px;
/*background: #D2F7D4;*/
    background: #E5FFE8;

}

h1 {
  color: #FFFFFF;
  float: left;
  font-size: 45px;
  font-weight: 700;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 728px;
}

h2 {
    font-weight: 700;
    font-size:30px;
    padding: 10px 20px 0;...

JavaScript

WebFontConfig = {
    google: { families: [ 'Archivo+Narrow:400,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();