구글링 보고 작성해 본 것입니다.

하늘뚱

프로필 보기 이 회원 글보기

· 4년 전 · 조회 1783 1783 · 댓글 1 1

screencapture-172-30-1-55-5500-menu04-html-2021-03-30-11_12_55.png

3월말이라 일에 대한 압박이 팍팍오는데

구글링하다 css공부겸 보고 작성해 보았습니다.

menu04.html

<!DOCTYPE html>

<head>

<title>Dark and Light Mode | Responsive Pricing Table with CSS & Javascript</title>

</head>

<body>

<h3>Basic</h3>

<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>

<h3>Standard</h3>

<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>

<h3>Premium</h3>

<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>

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:호스팅임대 사업하는 홈페이지 부분에서 상품에 대한 소개부분입니다.

첨부파일

screencapture-172-30-1-55-5500-menu04-html-2021-03-30-11_12_55.png (105.6 KB, 0회)

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

베스트 댓글

마젠토

프로필 보기 이 회원 글보기

4년 전 BEST

신고를 할려고 해도 안되네요..

원댓글 보기 →

마젠토

프로필 보기 이 회원 글보기

4년 전

신고를 할려고 해도 안되네요..

게시글 목록

번호	제목	글쓴이	조회	날짜
1717252	인덱스는 열리는대 그 안에 그누보드 게시판이 갑짜기 안 열려요 7	jazzlab	199	1개월 전
1717247	대전 국정자원 화재...!! 8	그레이	195	1개월 전
1717243	Google Nest Hub vs Amazon Echo Show 5: which is best? 3	울라프	131	1개월 전
1717237	영롱합니다... 6	해피아이	187	1개월 전
1717225	작업 하나 해 두고.. 8	해피아이	229	1개월 전
1717214	반응이 좋으면 진행중인 에디터 살짝 보여드.... 5	김하늘™	233	1개월 전
1717208	진작에 나왔어야 할 법인데.. 8	그레이	230	1개월 전
1717203	Q & A 글 쓴 이후 목록 2	예뜨락	138	1개월 전
1717189	해는 안보이지만 예뻐서 몇장 찍었습니다 : ) 12	예뜨락	256	1개월 전
1717183	카톡 업데이트 1	비버팩토리	195	1개월 전
1717177	홈페이지 제작 업체 모집 공고 7	해피아이	353	1개월 전
1717172	디자인 공모전 준비 중입니다... 1	bbebbee	136	1개월 전
1717163	마이산 4	jaick	158	1개월 전
1717162	공모전 본선진출했습니다 7	카깡	249	1개월 전
1717156	투덜.. 투덜.. 에디터 안에 테이블 하나 넣는 것이 이렇게 어려울 줄이야... 5	김하늘™	193	1개월 전
1717154	이런 14색 조카 크레파스들 3	엘뤼아르	186	1개월 전
1717153	멜론에 등록된 ai로 제작한 내 앨범 2	부이	216	1개월 전
1717141	유령도시 미단시티 6	반타블랙	202	1개월 전
1717140	상품 이미지 엑박 스킨 4	비버팩토리	142	1개월 전
1717138	오늘은.. 2	해피아이	110	1개월 전
1717113	새로운 숙소 밑에는…. 8	亞波治	210	1개월 전
1717111	커뮤니티와 통합된 Flarumix Shop 을 준비중 입니다. 6	UXUI	221	1개월 전
1717105	회원 아이디를 숫자로 바꾸는게 막막하네요. 9	시린♡	211	1개월 전
1717099	팀을 꾸려보고 싶은데 막막합니다. 6	신현우	214	1개월 전
1717085	Tp-Link TL-WA850RE 이건 벽에 어떻게 매다나요? 6	울라프	200	1개월 전
1717076	계속 실패하다 이제서야 9	Gothrock	264	1개월 전
1717072	같이 살고 있는 여자 사람의 따님이 유튜버가 되고 싶다는데... 9	김하늘™	241	1개월 전
1717065	천고마비(天高馬肥) 2	빛날현	139	1개월 전
1717062	안녕하세요 영카트기반 쇼핑몰 유지보수하고 있는 개발자입니다. 2	koualaKim	199	1개월 전
1717050	AI로 음악 만들어서 음반 발매 및 저작권 등록성공! 6	부이	260	1개월 전

이전 다음

1 2 3 4 5

전체 목록

커뮤니티