Generic Website Layout 2

generic-website-layout-2.markdown

Generic Website Layout 2

A Pen by Charlotte Payne on CodePen.

Project to build a replica of the right hand website layout from here.

Next Steps:

1. Images being 50% of width is not ideal. Would be better to have proper images in multiple sizes for different break points
2. No breakpoints enabled and layout is not adequately responsive currently.

License.

index.html

<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>

style.css

@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;
}