Difference between revisions of "Team:East Chapel Hill/Team"
Camillelorie (Talk | contribs) (Replaced content with "{{East_Chapel_Hill}} <html> <div class="column two_thirds_size" > <h1>Team</h1> </html>") |
|||
| Line 1: | Line 1: | ||
{{East_Chapel_Hill}} | {{East_Chapel_Hill}} | ||
<html> | <html> | ||
| + | <head> | ||
| + | <style> | ||
| + | * { | ||
| + | box-sizing: border-box; | ||
| + | } | ||
| − | + | body { | |
| + | background-color: #f1f1f1; | ||
| + | padding: 20px; | ||
| + | font-family: Arial; | ||
| + | } | ||
| − | <h1> | + | /* Center website */ |
| + | .main { | ||
| + | max-width: 1000px; | ||
| + | margin: auto; | ||
| + | } | ||
| + | |||
| + | h1 { | ||
| + | font-size: 50px; | ||
| + | word-break: break-all; | ||
| + | } | ||
| + | |||
| + | .row { | ||
| + | margin: 8px -16px; | ||
| + | } | ||
| + | |||
| + | /* Add padding BETWEEN each column */ | ||
| + | .row, | ||
| + | .row > .column { | ||
| + | padding: 8px; | ||
| + | } | ||
| + | |||
| + | /* Create four equal columns that floats next to each other */ | ||
| + | .column { | ||
| + | float: left; | ||
| + | width: 25%; | ||
| + | } | ||
| + | |||
| + | /* Clear floats after rows */ | ||
| + | .row:after { | ||
| + | content: ""; | ||
| + | display: table; | ||
| + | clear: both; | ||
| + | } | ||
| + | |||
| + | /* Content */ | ||
| + | .content { | ||
| + | background-color: white; | ||
| + | padding: 10px; | ||
| + | } | ||
| + | |||
| + | /* Responsive layout - makes a two column-layout instead of four columns */ | ||
| + | @media screen and (max-width: 900px) { | ||
| + | .column { | ||
| + | width: 50%; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ | ||
| + | @media screen and (max-width: 600px) { | ||
| + | .column { | ||
| + | width: 100%; | ||
| + | } | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | |||
| + | <body> | ||
| + | |||
| + | <!-- MAIN (Center website) --> | ||
| + | <div class="main"> | ||
| + | |||
| + | <h1>MYLOGO.COM</h1> | ||
| + | <hr> | ||
| + | |||
| + | <h2>PORTFOLIO</h2> | ||
| + | <p>Resize the browser window to see the responsive effect.</p> | ||
| + | |||
| + | <!-- Portfolio Gallery Grid --> | ||
| + | <div class="row"> | ||
| + | <div class="column"> | ||
| + | <div class="content"> | ||
| + | <img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%"> | ||
| + | <h3>My Work</h3> | ||
| + | <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="column"> | ||
| + | <div class="content"> | ||
| + | <img src="/w3images/lights.jpg" alt="Lights" style="width:100%"> | ||
| + | <h3>My Work</h3> | ||
| + | <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="column"> | ||
| + | <div class="content"> | ||
| + | <img src="/w3images/nature.jpg" alt="Nature" style="width:100%"> | ||
| + | <h3>My Work</h3> | ||
| + | <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="column"> | ||
| + | <div class="content"> | ||
| + | <img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%"> | ||
| + | <h3>My Work</h3> | ||
| + | <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <!-- END GRID --> | ||
| + | </div> | ||
| + | |||
| + | <div class="content"> | ||
| + | <img src="/w3images/p3.jpg" alt="Bear" style="width:100%"> | ||
| + | <h3>Some Other Work</h3> | ||
| + | <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p> | ||
| + | <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p> | ||
| + | </div> | ||
| + | |||
| + | <!-- END MAIN --> | ||
| + | </div> | ||
| + | </body> | ||
</html> | </html> | ||
Revision as of 13:57, 26 June 2018
MYLOGO.COM
PORTFOLIO
Resize the browser window to see the responsive effect.
My Work
Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.
My Work
Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.
My Work
Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.
My Work
Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.
Some Other Work
Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.
Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.