루나의 TIL 기술 블로그

위코드 리플릿 과제 - Wecolor Picker 컴포넌트

06 Jul 2021 | 기초 위코드 TIL

구현 화면

파란색 색상카드

코드펜

See the Pen by Luna YooYoung Ko (@lunayyko) on CodePen.

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://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
	<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>

<body>
	<div class="colorBox">
		<div class="colorSquare">
			<span>#709fb0</span>
      </div>
      <div class="bottom">
        <button class="heartBox">
          <i class="fas fa-heart"></i>
          &nbsp&nbsp
          <strong>451</strong>
        </button>
        <div class="days"> 
          <strong>3days</strong>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

* {
  box-sizing:border-box; 
}
body{
  font-size:24px;
  font-family: 'Open Sans', sans-serif;
}
.colorBox{
  width: 520px;
  height:580px;
  background-color:#EBEFF3;
  border-radius:20px;
  margin: 0 auto;
  padding:40px;
}
.colorSquare span{
  display:none;
  position:absolute;
  top:360px;
  background-color:#578291;
  padding: 4px 12px;
}
.colorSquare:hover span{
  display:block;
  opacity:1;
  color:white;
}
.colorSquare{
  position:relative;
  background-color:#709fb0;
  color: #709fb0;
  width: 440px;
  height:420px;
  border-radius:20px;
}
.bottom{
  display: flex;
  justify-content: space-between;
  padding-top:24px;
}
button {
  border: 2px solid lightgrey;
  padding:12px 20px;
  border-radius:12px;
  font-size:24px;
}
.days{
  align-self:center;
}

Related Posts