코딩/HTML\CSS\JS

[CSS] MDN 과제: 이쁜 레터 모양 종이 만들기 (Assessment wanted for Creating fancy letterheaded paper)

낫띵온미 2023. 2. 3. 18:40 
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fancy letterheaded paper</title>
    <link href="assessment.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <article>
      <h1>Awesome<br>Company</h1>
      <address>
        <p>The Awesome Company</p>
        <p>102-112 Frail Bend Bridge<br>
        The Dwindlings<br>
        Little Hornet<br>
        HX3 9ZQ<br>
        UK</p>
      </address>
    </article>
  </body>
</html>
* {
    box-sizing: border-box;
  }
  
  html {
    font-family: sans-serif;
  }
  
  body {
    margin: 0;
    background: #ccc;
  }
  
  article {
    width: 210mm;
    height: 297mm;
    margin: 20px auto;
    position: relative;
  }
  
  address {
    position: absolute;
    bottom: 8mm;
    right: 20mm;
  }
  
  h1 {
    position: absolute;
    top: 12mm;
    left: 20mm;
    width: 128px;
    height: 128px;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    padding: 44px 0;
    color: white;
    text-shadow: 1px 1px 1px black;
  }
  
  /* Your CSS below here */

article {
    background: url("top-image.png") no-repeat top;
    background: linear-gradient(rgba(0,0,0,0.2) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(0,0,0,0.2) 100%),
    url("top-image.png") no-repeat top,
    url("bottom-image.png") no-repeat bottom;
    border-top: 1mm solid red;
    border-bottom: 1mm solid red;
}

h1{
    background-image: url("logo.png");
    border-radius: 20mm;
    box-shadow: 1mm 1mm 1mm black;
    filter: drop-shadow(1mm, 1mm, 1mm, black);
}