project: CSS Flag

vancouver·2023년 4월 18일
Combiningfont familyposition
0

CSS 이해하기

목록 보기
11/23

html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>CSS Flag Project</title>
  <style>
    /* Write your CSS Code here */
    /* Red rect */
    .flag{
      background-color:#ce1126;
      width: 900px;
      height: 600px;
    }

    
   .flag > div {
      background-color:#002868;
      height: 300px;
      width: 900px;
      position:absolute;
      top:150px;
      
    }

  .flag > div > div {
    background-color: white;
      position: absolute;

      height: 200px;
      width: 200px;
      border-radius: 50%;
      top: 50px;
      left: 350px;
  }

  p{
    font-family: 'Source Sans Pro', sans-serif;
    color : white;
    font-size: 5rem;
    text-align: center;
    margin: 0;
    padding: 0;
  }

  .flag > div > div > p {
    color : black;

  }
    
  </style>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
</head>
  
<!-- 
  IMPORTANT! Do not change any HTML
Don't add any classes/ids/elements 
Use what you know about combining selectors 
and CSS specificity instead.
Hint 1: The flag is 900px by 600px and the circle is 200px by 200px.
Hint 2: You can use CSS inspection to get the colors from
https://appbrewery.github.io/flag-of-laos/
-->

<body>
  <div class="flag">
    <p>The Flag</p>
    <div>
      <div>
        <p>of Laos</p>
      </div>
    </div>
  </div>
</body>

</html>

Result

profile
vancouver
이전 포스트

CSS positioning

다음 포스트

CSS Display

0개의 댓글