구글링 보고 작성해 본 것입니다. 정보
구글링 보고 작성해 본 것입니다.
본문
3월말이라 일에 대한 압박이 팍팍오는데
구글링하다 css공부겸 보고 작성해 보았습니다.
menu04.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark and Light Mode | Responsive Pricing Table with CSS & Javascript</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/menu04.css">
</head>
<body>
<div class="container">
<div class="toggle"></div>
<!-- basic card -->
<div class="card">
<div class="box">
<div class="content">
<div class="icon"><i class="fa fa-paper-plane" aria-hidden="true"></i></div>
<h3>Basic</h3>
<h4><sup>$</sup>25</h4>
<ul>
<li><i class="fa fa-check" aria-hidden="true"></i> 10 GB Space</li>
<li><i class="fa fa-check" aria-hidden="true"></i> 3 Domain Names</li>
<li><i class="fa fa-check" aria-hidden="true"></i> 10 Email Address</li>
<li><i class="fa fa-times" aria-hidden="true"></i> Live Support</li>
</ul>
<a href="#">Order Now</a>
</div>
</div>
</div>
<!-- standard card -->
<div class="card">
<div class="box">
<div class="content">
<div class="icon"><i class="fa fa-plane" aria-hidden="true"></i></div>
<h3>Standard</h3>
<h4><sup>$</sup>50</h4>
<ul>
<li><i class="fa fa-check" aria-hidden="true"></i> 20 GB Space</li>
<li><i class="fa fa-check" aria-hidden="true"></i> 5 Domain Names</li>
<li><i class="fa fa-check" aria-hidden="true"></i> 20 Email Address</li>
<li><i class="fa fa-times" aria-hidden="true"></i> Live Support</li>
</ul>
<a href="#">Order Now</a>
</div>
</div>
</div>
<!-- premium card -->
<div class="card">
<div class="box">
<div class="content">
<div class="icon"><i class="fa fa-rocket" aria-hidden="true"></i></div>
<h3>Premium</h3>
<h4><sup>$</sup>100</h4>
<ul>
<li><i class="fa fa-check" aria-hidden="true"></i> 50 GB Space</li>
<li><i class="fa fa-check" aria-hidden="true"></i> 10 Domain Names</li>
<li><i class="fa fa-check" aria-hidden="true"></i> 50 Email Address</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Live Support</li>
</ul>
<a href="#">Order Now</a>
</div>
</div>
</div>
</div>
<script>
const body = document.querySelector('body');
document.querySelector('.toggle').onclick = function(){
body.classList.toggle('light');
}
</script>
</body>
</html>
menu04.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
h1,h2,h3,h4,h5,h6 { font-weight: normal; }
body {
display: flex;
/* 수평방향정렬 */
justify-content: center;
/* 수직방향정렬 */
align-items: center;
background: #232427;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 1200px;
padding: 100px 0 50px;
}
.container .card {
position: relative;
min-width: 320px;
height: 500px;
box-shadow: inset 5px 5px 5px rgba(0,0,0,0.2),
inset -5px -5px 15px rgba(255,255,255,0.1),
5px 5px 15px rgba(0,0,0,0.3),
-5px -5px 15px rgba(255,255,255,0.1);
border-radius: 15px;
margin: 30px;
}
.container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #2a2b2f;
border-radius: 15px;
border: 2px solid #1e1f23;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.4s, box-shadow 0.4s;
}
.container .card:hover .box {
transform: translateY(-50px);
box-shadow: 0 40px 70px rgba(0,0,0,0.5);
}
.container .card .box .content {
padding: 20px;
text-align: center;
}
.container .card .box .content .icon {
position: relative;
width: 80px;
height: 80px;
background: #f00;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-bottom: 10px;
}
.container .card .box .content .icon .fa {
color: #fff;
font-size: 2em;
}
.container .card .box .content h3 {
font-size: 1.8em;
color: #fff;
font-weight: 300;
}
.container .card .box .content h4 {
font-size: 3em;
color: #fff;
font-weight: 700;
}
.container .card .box .content h4 sup {
font-size: 0.75em;
color: #fff;
font-weight: 300;
}
.container .card .box .content ul {
position: relative;
}
.container .card .box .content ul li {
list-style: none;
color: #fff;
margin: 5px 0;
}
.container .card .box .content ul li .fa-check {
color: #0f0;
}
.container .card .box .content ul li .fa-times {
color: #f00;
}
.container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: #f00;
margin-top: 15px;
border-radius: 20px;
text-decoration: none;
color: #fff;
font-weight: 400;
}
.container .card:nth-child(1) .box .content a,
.container .card:nth-child(1) .box .content .icon {
background: #2196f3;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.container .card:nth-child(2) .box .content a,
.container .card:nth-child(2) .box .content .icon {
background: #e91e63;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.container .card:nth-child(3) .box .content a,
.container .card:nth-child(3) .box .content .icon {
background: #97dc47;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
/* 화면 상단에 토글버튼 부분 */
.toggle {
position: absolute;
top: 20px;
/* 버튼 가운데 보내기 위해서 전체 폭 50%에서 토글폭 60%의 반 30%를 뺀 것입니다. */
left: calc(50% - 30px);
/* 포지션 absolute를 지정하면 DIV 태그 요소가 인라인요소를 바뀌기 때문에 폭과 높이를 주었습니다. */
width: 60px;
height: 60px;
background: #fff;
cursor: pointer;
border-radius: 6px;
/* 수평,수직정렬를 하기 위해서 */
display: flex;
justify-content: center;
align-items: center;
}
.toggle::before {
content: '\f185';
font-family: fontAwesome;
font-size: 24px;
}
/* hmtl 소스에서 스크립트부분에 클릭을 하게 되면 light 클래스를 추가하게 됩니다. */
/* light 클래스를 추가했을시에 배경색,아이콘을 디자인하는 부분입니다.*/
body.light .toggle {
background: #154f56;
color: #fff;
}
body.light .toggle::before {
content: '\f186';
}
body.light {
background: #ebf5fc;
}
body.light .container .card {
box-shadow: inset 10px 10px 10px rgba(0,0,0,0.03),
inset -10px -10px 15px rgba(255,255,255,0.5),
10px 10px 10px rgba(0,0,0,0.03),
-10px -10px 15px rgba(255,255,255,0.5);
}
body.light .container .card .box {
background: #ebf5fc;
border: none;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
body.light .container .card:hover .box {
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
/* box-shadow: 0 20px 40px rgba(0,0,0,0.2); */
}
body.light .container .card .box .content h3,
body.light .container .card .box .content h4,
body.light .container .card .box .content h4 sup,
body.light .container .card .box .content ul li {
color: #32a3b1;
}
ps:호스팅임대 사업하는 홈페이지 부분에서 상품에 대한 소개부분입니다.
0
댓글 1개
