Generic Website Layout 1

generic-website-layout-1.markdown

Generic Website Layout 1

A Pen by Charlotte Payne on CodePen.

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

Overall aim is to build up CSS knowledge and clear understanding of best practises.

License.

index.html

<div class="landing-page">
  <div class="app">
    <header class="app__header">
      <h1 class="company__name">Untitled</h1>
      <p class="company__tagline">The best stuff you can find on the internet</p>
      <p class="company__description">Find super great material things and you'll feel smug as a bug in a rug</p>
       <div class="company__links">
      <span class="company__links">
        <a href="/shop" class="cta"><span class="cta__text">SHOP</span></a>
        <a href="/artists" class="cta"><span class="cta__text">ARTISTS</span></a>
      </span>
    </div>
    </header>
    <main>
      <div class="products">
        <section class="product">
          <div class="product__image-container">
            <img class="product__image" src="https://www.tate.org.uk/art/images/work/T/T06/T06859_10.jpg" alt="Bridget Riley Nataraja 1993">
          </div>
          <p class="product__name">Nataraja</p>
          <p class="product__description">In the 1980s, following a visit to Egypt, Bridget Riley's work changed significantly. Adopting what she called an 'Egyptian Palette', her work attained a new chromatic intensity. In order to focus on issues of colour, she greatly simplified the formal organisation of her paintings. Between 1980 and 1985 she reduced her compositions to severe arrangements of vertical stripes.</p>
        </section>
        <section class="product">
          <div class="product__image-container">
            <img class="product__image" src="https://www.tate.org.uk/art/images/work/T/T00/T00616_10.jpg" alt="Bridget Riley Fall 1963">
          </div>
          <p class="product__name">Fall</p>
          <p class="product__description">I try to organise a field of visual energy which accumulates until it reaches maximum tension, Riley said of this work. From 1961 to 1964 she worked with the contrast of black and white, occasionally introducing tonal scales of grey. In Fall, a single perpendicular curve is repeated to create a field of varying optical frequencies.</p>
        </section>
         <section class="product">
          <div class="product__image-container">
            <img class="product__image" src="https://www.tate.org.uk/art/images/work/T/T04/T04132_10.jpg" alt="Bridget Riley Hesitate 1964">
           </div>
          <p class="product__name">Hesitate</p>
          <p class="product__description">Hesitate is a painting on a rectangular board the features even rows of circular and elliptical shapes. The top row is composed of circles, giving way to subsequent rows of increasingly flat ovals, before expanding back into rows of circles in the lower half of the painting. The slimmest ovals, situated a third of the way down the work, form a compressed band three rows deep.</p>
        </section>
      </div>
      <div class="products">
        <section class="product">
          <div class="product__image-container">
            <img class="product__image" src="https://www.tate.org.uk/sites/default/files/styles/width-600/public/ismini_paper_weaving.jpg" alt="Gerhard Richter Strip 2011">
          </div>
          <p class="product__name">Strip</p>
          <p class="product__description">Strip (921-6) is a digital print by the artist Gerhard Richter. This large work is composed of thin horizontal strips in many different colours, although the dominant tone is murky-brown. Richter began his series of Strip Paintings in 2010, although despite their name they have no actual paint on their surface. The digital prints are laminated onto aluminium behind a thin layer of Perspex.</p>
        </section>
        <section class="product">
          <div class="product__image-container">
            <img class="product__image" src="https://www.tate.org.uk/art/images/work/T/T05/T05207_10.jpg" alt="Gerhard Richter St John 1988">
          </div>
          <p class="product__name">St John</p>
          <p class="product__description">St John belongs to a series called the ‘London Paintings’, each named after one of the chapels of Westminster Abbey. The titles are not meant to be descriptive, but refer merely to associations connected with the artist’s visits to London. Since 1980 Richter has made his abstract paintings by manipulating spatulas of different lengths, loaded with paint, across areas of the canvas.</p>
        </section>
         <section class="product">
          <div class="product__image-container">
            <img class="product__image" src="https://www.tate.org.uk/art/images/work/P/P13/P13005_10.jpg" alt="Josef Albers Circle 1933">
           </div>
          <p class="product__name">Circle</p>
          <p class="product__description">Hesitate is a painting on a rectangular board the features even rows of circular and elliptical shapes. The top row is composed of circles, giving way to subsequent rows of increasingly flat ovals, before expanding back into rows of circles in the lower half of the painting. The slimmest ovals, situated a third of the way down the work, form a compressed band three rows deep.</p>
        </section>
      </div>
    </main>
  </div>
</div>

style.scss

@import url(https://fonts.googleapis.com/css?family=Halant|Noto+Sans+TC&display=swap);

body {
  background: #f2f2f2;
}

.landing-page {
  display: grid;
  place-content: center;
  margin-top: -1rem;
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 0.05rem;
}

.app {
  width: 100vw;
}

.app__header {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  background: lightgrey;
}

.company__name {
  margin: 4rem auto 1rem auto;
  padding: 1rem;
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}

.company__tagline {
  font-size: 1.8rem;
  margin: 0.5rem auto;
}

.company__description {
  max-width: 450px;
  margin: auto;
  font-size: 1.4rem;
  color: #595959;
}

.company__links {
  display: flex;
  margin: 2rem auto;
  padding: 0.5rem;
}

.cta {
  padding: 10px;
  text-decoration: none;
  color: white;
  background: grey;
  width: 15rem;
  display: inline-block;
  text-align: center;
  border-radius: 10px;
  
  &:hover {
    background: black;
  }
}

.cta + .cta {
  margin-left: 1rem;
}

.products {
  display: flex;
  justify-content: space-between;
  width: 768px;
  margin: 5rem auto;
}

.product__image-container {
  width: 160px;
  height: 160px;
  margin: auto;
  object-fit: cover;
  position: relative;
  overflow: hidden;
  border-radius: 50%
}

.product__image {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

.product__name {
  font-size: 1.5rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}

.product__description {
  max-width: 220px;
  font-family: 'Halant', serif;
  line-height: 1.2rem;
  text-align: center;
  color: #595959;
}