ドットインストール ２５６times DAY3 DAY４ 自由課題

このはです。

ドットインストール運営 ２５６times

DAY3

課題1
絶対位置指定で要素を配置

課題２
カードや画像と絶対位置指定を組み合わせよう
この課題はpositionのやり方が
解ったら直ぐにできまさた😺

DAY4 最終課題

【自由制作】 こだわり物件をおすすめするカードを作ろう

自由程難しいです。
お題は絶対配置をposition:必ず使う。
その他

ラベルをリボンにしたかったですが、提出には間に合いません出た。
提出後に「あっ！」っと思った所を直しました。
リボンも作ってみました。

２５６times　DAY４　自由課題

リボンを練習で作れた画像です

練習後 ラベルをリボン

コードの手直しも色々しました。

HTML

リボン出来なかったコードです😹
「！aタグにスタイルしていない」

<section>
  <span class="label">2LDK・おすすめ</span>
  <h1>駅前の賃貸物件情報</h1>
    <p>広々とした安らぎの理想の空間・日当たり良好・風通し良好・駅から徒歩5分・駐車場有・バルコニー有・キッチンIH・オール電化・防音対策もお任せください♪</p>
 
  <div class="product__img">
    <span class="product__service">リビング</span>
    <span class="product__service-green">ペット可♪</span>
      <img width="400" src="https://user-images.githubusercontent.com/8720/208541252-735dee1b-4ec2-47ce-af04-c30d29a0d0ec.png">
  </div>
   <div  class="btn">
     <button>お問い合わせはこちら</button>
    </div>
<footer>
    <ul>
      <li><a href="#"><i class="bi bi-share-fill"></i>共有する</a></li>
      <li><a href="#"><i class="bi bi-heart-fill"></i>お気に入りに追加</a></li>
      <li><a href="#"><i class="bi bi-bookmark-star-fill"></i>ブックマーク</a></li>
    </ul>
</footer>
</section>

CSS

section {
  border: 2px solid #563500;
  box-sizing: border-box;
  width: 600px;
  padding: 0 16px;
  position: relative;
}

.label {
  background: #ffb2b2;
  color: #563500;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  width: 150px;
  padding: 8px;
  position: absolute;
  top: -10px;
  left: 450px;
}

h1 {
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
}

p {
  line-height: 1.6;
}

img {
  vertical-align:top;
}

.product__img {
  margin-top: 16px;
  position: relative;
}

.product__service {
  width: 100px;
  height: 50px;
  line-height: 50px;
  color: #563500;
  font-weight: bold;
  text-align: center;  
  background: #ffffff;
  border: 2px solid #ffb2b2;
  box-sizing: border-box;
  opacity: 0.8;
  position: absolute;
  bottom: -35px;
  left: -10px;
   z-index: 1;
}

.product__service-green {
  width: 100px;
  height: 50px;
  line-height: 50px;
  color: #563500;
  font-weight: bold;
  text-align: center;  
  background: #ffffff;
  border: 2px solid #6effc5;
  box-sizing: border-box;
  opacity: 0.8;
  position: absolute;
  bottom: -75px;
  left: 40px;
  z-index: 2;
}


button {
  all: unset;
  box-sizing: border-box;
  border: 1px solid hsl(137, 98%, 25%);
  border-radius: 4px 4px 0 0;
  color: #fff;
  background: hsl(137, 98%, 30%);
  text-align: center;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  padding: 8px 16px;
  cursor: pointer;
  display: inline-block;
  margin-top: 20px;
}

button:hover {
  background: hsl(64, 98%, 49%);
  opacity: 0.8;
}

 .btn {
  text-align: right;
}

 
/* footer */

ul {
  padding: 0;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
   gap: 8px;
}

li {
  padding: 4px 12px;
  border: 2px solid #cccccc;
  border-radius: 4px 4px 0 0;
  display: flex;
  font-size: 12px;
  font-weight: bold;
}

a {
  text-decoration: none;
  color: #000000;
}

i {
   color: red;
}

li a i {
  font-size: 12px;
  margin-right: 8px;
}