番外編：positionの練習

OUR SERVICES
We can provide flower arrangements for offices, hotels, restaurants & retail spaces.

テキストテキストテキテキストテキストテキストテキテキスト テキストテキストテキテキストテキストテキストテキテキスト テキストテキストテキテキストテキストテキストテキテキスト

詳細はこちら

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>【コーディング練習】positionの練習</title>
<link rel="stylesheet" href="css/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=Noto+Serif+JP:wght@400&display=swap" rel="stylesheet">
</head>
<body>
<div class="content">
  <div class="text-block">
    <h2 class="title">OUR SERVICES</h2>
    <p class="large">
      We can provide flower arrangements for offices,
      hotels, restaurants & retail spaces.
    </p>
    <p>
      テキストテキストテキテキストテキストテキストテキテキスト
      テキストテキストテキテキストテキストテキストテキテキスト
      テキストテキストテキテキストテキストテキストテキテキスト
    </p>
    <a class="btn" href="#">詳細はこちら</a>
  </div><!-- /.text -->
  <div class="img-block">
    <img src="img/flower.jpg" alt="">
  </div><!-- /.img-block -->
</div><!-- /.content -->
</body>
</html>

@charset "UTF-8";

/* ----------------------------------------
  reset
---------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
  border: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}


/* ----------------------------------------
  body
---------------------------------------- */
body {
  color: #333;
  font-size: 16px;
  font-family: 'Noto Serif JP', serif;
  line-height: 1.0;
}

@media screen and (min-width: 768px) {
  body {
    background-color: #efeded;
  }
}


/* ----------------------------------------
  layout
---------------------------------------- */
.text-block {
  padding: 60px 20px;
}
  .text-block > p {
    margin-bottom: 35px;
    line-height: 1.8;
  }
  .text-block > .title {
    display: inline-block;
    margin-bottom: 30px;
    border-bottom: solid 1px #444;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.4;
  }
  .text-block > .large {
    font-size: 30px;
  }
.text-block > .btn {
  display: inline-block;
  padding: 16px 50px;
  border: solid 1px #35383a;
  border-radius: 30px;
  line-height: 1.5;
  transition: all 0.3s ease;
}
  .text-block > .btn:hover {
    background-color: #efeded;
  }

@media screen and (min-width: 768px) {
  .content {
    position: relative;
    max-width: 1000px;
    margin: 100px auto;
	}
    .text-block {
      position: absolute;
      left: 0;
      max-width: 680px;
      padding: 84px 160px 84px 84px;
      background-color: #fff;
    }
    .img-block {
      position: absolute;
      top: 140px;
      right: 20px;
      max-width: 400px;
    }
}