Project: Web design Agency

vancouver·2023년 4월 19일
0

CSS 이해하기

목록 보기
15/23

html

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Agency</title>
  
  <link rel="stylesheet" href="./style.css">
  <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=Poppins:wght@400;700&display=swap" rel="stylesheet">
  </head>
<body>
  <div class="main">
    <img class="logo" src="./assets/images/logo.png" alt="logo">
    <h1>We are a <span a class="creative">Creative</span> <br/> Design Agency</h1>
    <div class="left card"><img class="tile-image" src="./assets/images/beautiful.jpg" alt="hand and flower in water">
      <h2 class="card-title">Beauty</h2>
      <p class="card-text">We strive to create the most beautiful websites for all your needs. Working closely with you
        to
        design and
        develop an amazing website for your business.</p>
    </div>

    <div class="right card"><img class="tile-image" src="./assets/images/construction.jpg" alt="metal structure">
      <h2 class="card-title">Construction</h2>
      <p>Built by our team of professional developers, we ensure the most rigourous and modern websites. Built from
        scratch using HTML and CSS. Only the best for you.</p>
    </div>

  </div>
  <footer>
    <p>Create. Develop. Design.</p>
  </footer>
</body>

</html>

CSS

body {
  font-family: "Poppins", sans-serif;
  margin: 50px 50px 0 50px;
  background-color: #faf9f6;
  display: flex;
  flex-direction: column;
  min-height: 95vh;
}
.main {
  flex: 1;
}

h1 {
  font-size: 5rem;
}

footer {
  text-align: right;
  color: midnightblue;
}

.tile-image {
  height: 200px;
    float: left;
    margin-right: 50px;
}

.card {
  width:45%;
}


.left {
  float:left;
}

.right {
  float: right;
}

.creative {
  color: midnightblue;
}

@media (max-width: 680px) {
  .logo {
    width:100px;
  }


h1 {
  font-size: 3.5rem;
  text-align: center;
}

.card {
  width: 100%;
  display: block;
  margin-bottom: 30px;
  text-align: justify;
}

.card img {
  margin-bottom: 10px;
  width: 100%;
  display:inline;
  object-fit: cover;
  }
}

Result

https://brrkak.github.io/Web-design-Agency-/

object-fit

  • CSS object-fit 속성은 <img><video> 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.
  • object-position 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있습니다

0개의 댓글