├── index.html └── styles.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Variables 6 | 7 | 8 | 9 |
10 | 17 |
18 |
19 | 23 |
24 |
25 |

We Love All Kinds of Pipes...

26 |

Lorizzle ipsum crunk brizzle amet, gizzle cool elizzle. Nullam dawg velizzle, aliquet volutpizzle, suscipizzle dizzle, gravida yippiyo, arcu. Pellentesque eget check it out. Fo shizzle my nizzle erizzle. Boom shackalack bling bling dolor turpizzle go to hizzle tempor. Yippiyo mah nizzle nibh et turpizzle. Yo izzle da bomb. Daahng dawg eleifend rhoncus daahng dawg. In hac habitasse fo shizzle dictumst. Yo mamma dapibizzle.

27 | More info... 28 |
29 |
30 |

In Fact, we're Piping-Mad

31 |

I saw beyonces tizzles and my pizzle went crizzle tellus urna, pretium own yo', mattis away, eleifend we gonna chung, nunc. Daahng dawg suscipizzle. Integer sempizzle velizzle sizzle mah nizzle.

32 | More info... 33 |
34 |
35 |

Any Shape and Any Size...

36 |

Phasellizzle interdum volutpizzle shizzlin dizzle. Ut semper adipiscing shiz. Ma nizzle sure est. Nulla sapizzle ass, ultrices nec, accumsizzle pizzle, rizzle quis, pede. Dizzle nec shit. Etizzle rutrizzle ornare ante. Maurizzle its fo rizzle. Vestibulum izzle pede varius nibh commodo commodo.

37 | More info... 38 |
39 |
40 |

No Job is Too Big

41 |

Mofo yo mamma dolor sizzle boofron, consectetizzle adipiscing elit. Hizzle izzle shizzle my nizzle crocodizzle. Quisque mi crackalackin, sodalizzle izzle, crackalackin a, eleifend nizzle, boofron.

42 | More info... 43 |
44 |
45 |
46 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /* --- Variables --- */ 2 | 3 | /* --- Main styles --- */ 4 | 5 | h1, h2, h3{ 6 | font-weight: normal; 7 | } 8 | 9 | body{ 10 | margin: 0; 11 | font-family: Verdana; 12 | } 13 | 14 | nav.main-nav ul{ 15 | width: 600px; 16 | margin: 30px auto; 17 | display: grid; 18 | grid-template-columns: 1fr 1fr 1fr; 19 | list-style-type: none; 20 | padding: 0; 21 | text-align: center; 22 | } 23 | 24 | nav a{ 25 | color: #daa33e; 26 | } 27 | 28 | .banner{ 29 | background: #3e84da; 30 | color: #fff; 31 | font-size: 1.6em; 32 | text-align: center; 33 | padding: 100px 0 160px; 34 | } 35 | 36 | .content{ 37 | width: 760px; 38 | margin: 0 auto; 39 | position: relative; 40 | top: -100px; 41 | padding: 40px 60px; 42 | background: #fff 43 | } 44 | 45 | .spot{ 46 | margin: 0 40px 80px; 47 | text-align: center; 48 | } 49 | 50 | .spot h2{ 51 | color: #3e84da; 52 | } 53 | 54 | .spot p{ 55 | color: #333; 56 | line-height: 2em; 57 | font-size: 0.9em 58 | } 59 | 60 | .content a{ 61 | color: #daa33e; 62 | font-size: 1.2em; 63 | } 64 | 65 | footer{ 66 | background: #ddd; 67 | padding: 60px 0 68 | } 69 | 70 | footer .blurbs{ 71 | display: grid; 72 | grid-template-columns: 1fr 1fr 1fr; 73 | max-width: 760px; 74 | margin: 0 auto; 75 | grid-gap: 40px; 76 | } 77 | 78 | footer .blurb{ 79 | text-align: center; 80 | color: #333; 81 | line-height: 2em; 82 | font-size: 0.9em 83 | } 84 | --------------------------------------------------------------------------------