Assignment#4[HTML&CSS]Wecolor Pickerコンポーネント

8947 ワード
assignment テキストリンク

|Wecolor Picker構成部品



> [index.html]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
  </head>
  <body>
    <div class="colorBox1">
      <div class="colorBox2">
        <span class="color">#709fb0</span>
      </div>
      <div class="love">
        <div class="l love1"><i class="fas fa-heart"></i>451</div>
        <div class="l love2">3 days</div>
      </div>
    </div>
  </body>
</html>

> [style.css]

.colorBox1 {
  position:relative;
  border: 1px solid white;
  background-color: aliceblue;
  border-radius: 10px;
  width: 300px;
  height: 350px;
}
`
.colorBox2 {
  position:absolute;
  border: 1px solid #709fb0;
  background-color: #709fb0;
  border-radius: 10px;
  width: 250px;
  height: 250px;
  left: 23px;
  top: 20px;
  }
`
span.color {
  position: absolute;
  color: white;
  background-color: #476b6b;
  padding: 5px;
  bottom: 10px;
}
`
.love {
  position: absolute;
  display: flex;
  bottom: 20px;
  width: 250px;
  justify-content: space-between;
  left:22px;
  right:3px;
  align-items: center;
}
`
.fa-heart {
  margin-right: 10px;
}
`
.love1 {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px 15px;
}
```
TIL023_210415
勉強するit秘密メッセージの作成