Foreword, Contributors

코드보기

HTML

index.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>(S)CSS Masterclass</title>
</head>
<body>
  <h1>Foreword, Contributors</h1>

  <div class="grid">
    <div class="item">Tools for Slowing Down
      <div class="small">Chole Geoghegan & Chloe Reith</div>
    </div>
    <div class="item"></div>
    <div class="item">The (Old) New Sprit of Curating and Myths of Nomadism
      <div class="small">Tim Gemtles</div>
    </div>
    <div class="item"></div>
    <div class="item">Pressing Singularities
      <div class="small">Tendai John Mutambu & Robyn Maree Pickens</div>
    </div>
    <div class="item">We're in This Together
      <div class="small">Vera Mey</div>
    </div>

    <div class="item">The Curatorial as a Liveable Subject Position: Hospitaly and Differential Consciousness
      <div class="small">Danny Butt</div>
    </div>
    <div class="item">Community, Community Art, Community Art in Howick
      <div class="small">Balamohan Shingade</div>
    </div>
    <div class="item"></div>
    <div class="item">Feeling Welcome?
      <div class="small">Lousia Afoa & loana Gordon-Smith</div>
    </div>
    <div class="item">
    </div>
    <div class="item">On Friendship
      <div class="small">Rebecca Boswell</div>
    </div>
  </div>
</body>
</html>

HTML

CSS(SASS)

style.css


@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 100%;
  height: 100vh;
  text-align: center;
  color: black;
  background-image: url('https://lh3.googleusercontent.com/proxy/JLlvaqSByrk5I5vxldcmsTUl9LqXzyY5QZGKN10ZBxrXCA3g6kWGOju23zMZxi_5jEDIHy0HNgiYyyJ2_LYFPPJ6zMiz_ApCfvwfSl8a1OPj2p6oKUlavi7fQL0bdyjf1gS95lXLDCe6rtC-_ZvSF1I3NOe52_V4EPYRkHuNvohZ61lsRIHlYWz2VPC1XJI');
}

h1 {
  background-color: white;

  display: flex;
  place-content: center center;
  align-items: center;

  font-size: 4em;
  padding: 15px;
}

.grid {
  display: grid;
  

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  
  grid-template-rows: repeat(2, 40vh);
  grid-auto-rows: 40vh;
  
  font-size: 1.2em; 
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  padding: 25px;
  background-size: cover;
  
}

.small {
  font-size: 0.5em;
}

.item:nth-child(1) {
  background-color: #bfbda8;
}

.item:nth-child(2) {
  background-image: url('http://www.ayearofconsciouspractice.com/texts/yelena-popova/1-cosima-von-bonin.jpg');
  background-position: center center;
}

.item:nth-child(3) {
  background-color: #fd4813;
}

.item:nth-child(4) {
  background-image: url('http://www.ayearofconsciouspractice.com/content/1-texts/5-test-image/1-fields.jpg');
  background-position: center center;
}

.item:nth-child(5) {
  background-color: #847f96;
}

.item:nth-child(6) {
  background-color: #d0ff71;
}

.item:nth-child(7) {
  background-color: #993432;
}

.item:nth-child(8) {
  background-color: #3aabfb;
}

.item:nth-child(9) {
  background-image: url('http://www.ayearofconsciouspractice.com/content/1-texts/10-image-balamohan/balamohan-single-image.jpg');
  background-position: center center;
}

.item:nth-child(10) {
  background-color: #41907a;
}

.item:nth-child(11) {
  background-image: url('http://www.ayearofconsciouspractice.com/content/1-texts/12-fields/1.starlings-by-oronbb.jpg');
  background-position: center center;
}

.item:nth-child(12) {
  background-color: #dfc0e0;
}

CSS