Bad Religion

코드보기

HTML

index.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>bad religion</title>
</head>
<body>
  <div class="grid">
    <!--------------------------------->
    <div class="header">
      <div id="coment">
        upcoming<br>
        all ages hardcore
      </div>
      <div id="place">
        at the eagles lodge<br>
        schenectady, new york
      </div>
      <div id="when">
        hope to see you there<br>
        wednesday, june 27 1990
      </div>
    </div>
    <!--------------------------------->
    <div class="redBox">
      <div class="boldText">
        bad
      </div>
    </div>
    <div class="redBox">
    </div>
    <div class="redBox">
      <div class="boldText">religion</div>
      <div class="whiteText">
        with<br>
        jawbreaker & glee club
      </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 {
  background-color:#DDE1D4;
  padding:15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  max-width: 650px;
  width: 100%;
  height: 100vh;
  margin:0 auto;
}

.grid {
  
  display: grid;
  gap: 15px;
  grid-template-columns: 150px 230px 220px;
  grid-template-rows: 100px 400px 400px;

}
.header{
  background-color: black;
  color: white;
  grid-column-start: 1;
  grid-column-end: 4;

  display: flex;
  align-items: flex-end;
  
}

#coment {
  margin: 15px;
  flex-basis: 155px;
}
#place {
  margin: 15px;
  flex-basis: 240px;
  
}
#when {
  margin: 15px;
  flex-basis: 235px;
  
}

.redBox {
  background-color: rgb(240, 66, 23);
  padding: 10px;

  display: flex;
  
  flex-wrap: wrap;
}

.redBox:nth-child(2) {
  grid-column-start: 1;
  grid-column-end: 3;
}

.redBox:nth-child(3) {
  grid-column-start: 3;
  grid-column-end: 4;
}

.redBox:nth-child(4) {
  grid-column-start: 1;
  grid-column-end: 4;
  align-content: flex-start;
}

.boldText {
  font-size: 11em;
  font-weight: bold;
  letter-spacing: -5px;
}

.boldText:nth-child(1) {
  align-self: flex-end;
}

.whiteText {
  color: #DDE1D4;
  font-size: 2em;
  margin: 10px 0 0 10px;
  line-height: 120%;
  font-weight: 500;
}

CSS