A Pen by Charlotte Payne on CodePen.
Project to build a replica of the right hand website layout from here.
Next Steps:
| <div class="magazine"> | |
| <nav> | |
| <div class="name">Stuuuuuuuff</div> | |
| <div class="navigation--controls"> | |
| <a href="/home" class="navigation--link">Home</a> | |
| <a href="/team" class="navigation--link">Team</a> | |
| <a href="/About" class="navigation--link">About</a> | |
| </div> | |
| </nav> | |
| <header> | |
| <div class="header--info"> | |
| <h1 class="header--tagline">Cool stuff from all over the internet</h1> | |
| <p class="header--cta">Pages that you can scroll through. Lots of images and text. With links of course, so if you do reach the bottom of a thread, you can quickly find another to carry on your scrolling.</p> | |
| <div class="header--links"> | |
| <a href="/scroll" class="header--link">Scroll</a> | |
| <a href="/share" class="header--link">Share</a> | |
| </div> | |
| </div> | |
| <img class="header--image" src="https://www.tate.org.uk/art/images/work/T/T03/T03257_10.jpg" height="450" alt="Lobster Phone"> | |
| </header> | |
| <main> | |
| <article class="article--left"> | |
| <div class="article--info"> | |
| <h2 class="article--title">Head scratching type stuff</h2> | |
| <p class="article--summary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus, suscipit esse ad deserunt alias autem, sit enim maxime quam maiores modi, voluptates corrupti. Tenetur, modi omnis quibusdam iure cupiditate debitis?</p> | |
| <a href="/article1" class="article--link">Read More</a> | |
| </div> | |
| <img class="article--image" src="https://frieze.com/sites/default/files/editorial/mo-0158847d.jpg" height="450" width="50%" alt="Meret Oppenheim"> | |
| </article> | |
| <article class="article--right"> | |
| <img class="article--image" src="https://i2.wp.com/mossandfog.com/wp-content/uploads/2018/01/nancy-fouts-moss-and-fog-cover.jpg?fit=1200%2C693&ssl=1" height="450" width="50%" alt="Moss and Fog"> | |
| <div class="article--info"> | |
| <h2 class="article--title">Soul searching type stuff</h2> | |
| <p class="article--summary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus, suscipit esse ad deserunt alias autem, sit enim maxime quam maiores modi, voluptates corrupti. Tenetur, modi omnis quibusdam iure cupiditate debitis?</p> | |
| <a href="/article1" class="article--link">Read More</a> | |
| </div> | |
| </article> | |
| <article class="article--left"> | |
| <div class="article--info"> | |
| <h2 class="article--title">Life affirming type stuff</h2> | |
| <p class="article--summary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus, suscipit esse ad deserunt alias autem, sit enim maxime quam maiores modi, voluptates corrupti. Tenetur, modi omnis quibusdam iure cupiditate debitis?</p> | |
| <a href="/article1" class="article--link">Read More</a> | |
| </div> | |
| <img class="article--image" src="https://ds1.static.rtbf.be/article/image/1240x800/d/b/4/7240357ba5f7b7b66c5bc7090a5f9627-1450438211.jpg" height="450" width="50%" alt="Marcel Marien"> | |
| </article> | |
| </main> | |
| </div> |
| @import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap); | |
| body { | |
| display: grid; | |
| margin: 0; | |
| max-width: 100%; | |
| font-family: 'Noto Sans TC', sans-serif; | |
| } | |
| nav { | |
| display: flex; | |
| padding: 2rem 4rem; | |
| justify-content: space-between; | |
| font-size: 1.5rem; | |
| } | |
| .name { | |
| border-bottom: 2px solid currentColor; | |
| font-weight: bold; | |
| } | |
| .navigation--link { | |
| margin-left: 1rem; | |
| text-decoration: none; | |
| color: black; | |
| } | |
| .navigation--link:hover { | |
| border-bottom: 2px solid currentColor | |
| } | |
| header { | |
| background: whitesmoke; | |
| } | |
| header, | |
| article { | |
| display: flex; | |
| padding: 3rem 4rem; | |
| justify-content: space-between; | |
| } | |
| .header--info { | |
| display: flex; | |
| padding-right: 2rem; | |
| justify-content: center; | |
| flex-direction: column; | |
| } | |
| .header--tagline { | |
| margin: 0; | |
| font-size: 2.5rem; | |
| } | |
| .header--link, | |
| .article--link { | |
| display: inline-block; | |
| margin: 0.5rem 0; | |
| padding: 10px; | |
| width: 40%; | |
| text-align: center; | |
| border-radius: 10px; | |
| text-decoration: none; | |
| border: solid grey 1.5px; | |
| color: white; | |
| background: grey; | |
| } | |
| .header--link:hover, | |
| .article--link:hover { | |
| border: solid black 1.5px; | |
| color: black; | |
| background: none; | |
| } | |
| .header--link + .header--link { | |
| margin-left: 1rem; | |
| } | |
| .header--cta { | |
| margin: 2rem 0 1rem; | |
| max-width: 32rem; | |
| } | |
| article:hover .article--title { | |
| text-decoration: underline; | |
| } | |
| .article--info { | |
| display: flex; | |
| justify-content: center; | |
| flex-direction: column; | |
| } | |
| .article--title { | |
| margin: 0; | |
| font-size: 2.5rem; | |
| } | |
| .article--summary { | |
| margin: 2rem 0 1rem; | |
| max-width: 100% | |
| } | |
| .article--left .article--info { | |
| padding-right: 3rem; | |
| } | |
| .article--right .article--info { | |
| padding-left: 3rem; | |
| } | |
| .article--right { | |
| background: whitesmoke; | |
| } |