<step21>'css_갤럭시 홈페이지 따라하기'

http://greenweb.dothome.co.kr/galaxy/

Document

프리미엄 편의장비 편안하고 안전한 여행을 위한 필수 선택 프리미엄급 편의장비(유모차,카시트)로 행복한 여행에 안전을 더하세요. go

greenweb.dothome.co.kr

1) galaxy.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="./galaxy_teach.css" type="text/css">
</head>
<body>
	<header>
		<ul>
			<li><a href="#">로그인</a></li>
			<li><a href="#">회원가입</a></li>
			<li><a href="#">비회원예약확인</a></li>
			<li>(064)-744-1116</li>
		</ul>
		<div>
			<h1><img src="img (1)/logo.png" alt="galaxy"></h1>
			<nav>
				<ul class="nav">
					<li><a href="#">실시간 예약</a></li>
					<li><a href="#">갤럭시 서비스</a></li>
					<li><a href="#">대여가이드</a></li>
					<li><a href="#">커뮤니티</a></li>
					<li><a href="#">이벤트</a></li>
				</ul>
			</nav>
			<ul class="sns">
				<li><a href="#">페이스북</a></li>
				<li><a href="#">인스타그램</a></li>
			</ul>
		</div>
	</header>
	<section class="visual">
		<h2><img src="img (1)/main_visual_copy.png" alt=""></h2>
		<ul>
			<li>
				<div class="rollout">
					<h3>얼리버드요금제!</h3>
					<p>먼저예약하고 할인받자.</p>
				</div>
				<div class="rollover">
				 	<img src="img (1)/main_tab_icon_01.png" alt="">
				 	<h3>얼리버드요금제!</h3>
				 	<span>먼저예약하고 할인받자</span>
				 	<p>예약율에 따른 할인요금제로 일찍 예약할수록 보다 더 저렴한 가격에 차량을 이용하실 수 있습니다</p>
					<a href="#" class="go">go</a>
				</div>
			</li>
			<li>
				<div class="rollout">
					<h3>無한면책</h3>
					<p>한도無+無사고시 50%환불</p>
				</div>
				<div class="rollover">
				 	<img src="img (1)/main_tab_icon_02.png" alt="">
				 	<h3>無한면책</h3>
				 	<span>한도無+無사고시 50%환불</span>
				 	<p>사고수리비와 휴차보상료 한도 無제한! 無사고시 無한면책 보험료의 50% 환불!</p>
					<a href="#" class="go">go</a>
				</div>
			</li>
			<li>
				<div class="rollout">
					<h3>프리미엄 편의장비</h3>
					<p>편안하고 안전한 여행을 위한 필수 선택</p>
				</div>
				<div class="rollover">
				 	<img src="img (1)/main_tab_icon_03.png" alt="">
				 	<h3>프리미엄 편의장비</h3>
				 	<span>편안하고 안전한 여행을 위한 필수 선택</span>
				 	<p>
프리미엄급 편의장비(유모차,카시트)로 행복한 여행에 안전을 더하세요.</p>
					<a href="#" class="go">go</a>
				</div>
			</li>
			<li>
				<div class="rollout">
					<h3>금연차량</h3>
					<p>NO SMOKING! 쾌적한 여행을 위한 금연차량!</p>
				</div>
				<div class="rollover">
				 	<img src="img (1)/main_tab_icon_04.png" alt="">
				 	<h3>얼리버드요금제!</h3>
				 	<span>NO SMOKING! 쾌적한 여행을 위한 금연차량!</span>
				 	<p>최신 금연차량과 함께하는 건강한 여행 행복 두배! 추억 두배! 되세요~</p>
					<a href="#" class="go">go</a>
				</div>
			</li>
		</ul>
	</section>
	<section class="open inner">
		<div>
			<h2>GRAND OPEN</h2>
			<p>갤럭시렌터카 웹사이트가 새로운 모습으로 리뉴얼 오픈 하였습니다.</p>
		</div>
		<ul>
			<li><a href="#"><img src="img (1)/event_thumb_01.jpg" alt=""></a></li>
			<li><a href="#"><img src="img (1)/event_thumb_02.jpg" alt=""></a></li>
			<li><a href="#"><img src="img (1)/event_thumb_03.jpg" alt=""></a></li>
			<li><a href="#"><img src="img (1)/event_thumb_04.jpg" alt=""></a></li>
		</ul>
	</section>
	<section class="review inner">
		<div class="realres">
			<img src="img (1)/main_real_res_icon.png" alt="">
			<h3>실시간예약</h3>
			<p>더이상 상담원과의 전화상담이 필요 없습니다. 이제부터는 원하시는 차량을 실시간으로 직접 예약하세요.</p>
			<a href="#" class="realbtn">실시간 예약하기</a>
		</div>
		<div class="bestre">
			<ul>
				<li>
					<img src="img (1)/review_20150306.jpg" alt="">
					<div>
						<h3>리뷰제목을 작성하는 공간</h3>
						<p>리뷰에 대한 내용이 출력되도록 작성되는 공간</p>
						<span>2019-04-30</span>
					</div>
					<div class="besticon">
						BEST REVIEW
					</div>
				</li>
				<li>
					<img src="img (1)/review_20150306.jpg" alt="">
					<div>
						<h3>리뷰제목을 작성하는 공간</h3>
						<p>리뷰에 대한 내용이 출력되도록 작성되는 공간</p>
						<span>2019-04-30</span>
					</div>
					<div class="besticon">
						BEST REVIEW
					</div>
				</li>
				<li>
					<img src="img (1)/review_20150306.jpg" alt="">
					<div>
						<h3>리뷰제목을 작성하는 공간</h3>
						<p>리뷰에 대한 내용이 출력되도록 작성되는 공간</p>
						<span>2019-04-30</span>
					</div>
					<div class="besticon">
						BEST REVIEW
					</div>
				</li>
				<li>
					<img src="img (1)/review_20150306.jpg" alt="">
					<div>
						<h3>리뷰제목을 작성하는 공간</h3>
						<p>리뷰에 대한 내용이 출력되도록 작성되는 공간</p>
						<span>2019-04-30</span>
					</div>
					<div class="besticon">
						BEST REVIEW
					</div>
				</li>
			</ul>
		</div>
	</section>
	<section class="quickmenu inner">
		<ul>
			<li>
				<img src="img (1)/main_guide_icon01.gif" alt="">
				렌터카 아무나 이용할 수 있나요?
				<span>예약 전 참고사항</span>
			</li>
			<li>
				<img src="img (1)/main_guide_icon01.gif" alt="">
				내게 필요한 차량은?
				<span>실시간 예약 안내</span>
			</li>
			<li>
				<img src="img (1)/main_guide_icon01.gif" alt="">
				제 차는 어디에 있을까
				<span>차량 인수와 반납 안내</span>
			</li>
			<li>
				<img src="img (1)/main_guide_icon01.gif" alt="">
				렌터카 보험 너무 어려워
				<span>차량면책보험 하나씩 알아보기</span>
			</li>
		</ul>
	</section>
	<footer class="inner">
		<h1><img src="img (1)/f_logo.png" alt=""></h1>
		<address>대표이사 : 오종윤 | (주)갤럭시렌터카 | 제주특별자치도 제주시 오일장중길 128 (도두이동)
사업자등록번호 : 616-86-17047 | 통신판매신고번호 : 제 2014-6510058-30-2-00018호 | TEL : 064-744-1116 | FAX : 064-744-1176
COPYRIGHT© 2019 GALAXY RENTCAR. ALL RIGHTS RESERVED.</address>
	</footer>
</body>
</html>

2) galaxy.css

* { margin: 0; padding: 0; box-sizing: border-box;}
a { text-decoration: none; color: inherit;}
li { list-style: none;}
body { 
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ccc;
}
header > ul {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
}
header > ul li {
    padding: 10px;
}
header > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
}
header > div ul {
    display: flex;
}
header h1 {
    width: 18%;
    line-height: 20px;
}
header ul li {
    padding: 0 10px;
}
.nav li {
    color: #fff;
}
.sns li {
    background-color: blueviolet;
    padding: 10px;
    margin: 5px;
    color: #fff;
}
.visual {
    background: url("img (1)/main_visual.jpg");
}
.visual h2 {
    text-align: center;
    padding-top: 70px;
    margin-bottom: 200px;
}
.visual > ul {
    display: flex;
    text-align: center;
    justify-content: space-between;
    margin-bottom: 120px;
}




.visual .rollout {
    background-color: #7b70ac;
    padding: 30px;
    color: #fff;
    width: 100%;
    top: 300px;
    transition: 0.5s;
    position: absolute;
}
.visual .rollout p {
    font-size: 11px;
}
.visual li {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 400px;
    /* background-color: tomato; */
}
.visual .rollover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 400px;
    left: 0;
    transition: 0.5s;
    color: #fff;
    padding-top: 20px;
}
.visual .rollover span {
    font-size: 14px;
    color: yellow;
}
.visual .rollover a {
    background-color: #fff;
    font-size: 50px;
    color: #7b70ac;
}
.visual li:hover .rollover {
    top: 0;
    background-color: rgba(123, 112, 172, 0.7);
}
.visual li:hover .rollout {
    top: 300px;
}






.open_inner > div {
    text-align: center;
    padding-bottom: 30px;
}
.open_inner > ul {
    display: flex;
    padding-bottom: 20px;
}
.open_inner > ul li img {
    width: 100%;
}
.review_inner {
    display: flex;
}
.realres {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url("img (1)/main_real_res_visual.jpg");
}
.realres h3 {
    padding: 20px;
}
.realres p {
    padding: 20px 50px;
}
.bestre {
    width: 50%;
}
.bestre ul {
    display: flex;
    flex-wrap: wrap;
}
.bestre ul li {
    width: 50%;
    background-color: #fff;
    position: relative;
}
.bestre ul li img {
    width: 100%;
}
.bestre ul li div:nth-child(2) {
    padding: 10px;
}
.bestre ul li div:nth-child(3) {
    position: absolute;
    top: 0;
    left: 0;
    background-color: blueviolet;
    color: #fff;
    padding: 10px;
}
.quickmenu_inner > ul {
    display: flex;
    margin: 20px 0;
}
.quickmenu_inner li {
    display: flex;
    flex-direction: column;
    width: 25%;
    align-items: center;
    color: #fff;
    padding: 20px 0;
}
.quickmenu_inner li img {
    width: 30%;
    padding-bottom: 10px;
}
.quickmenu_inner li:nth-child(1) {
    background-color: #7b70ac;
}
.quickmenu_inner li:nth-child(2) {
    background-color: #ba70a5;
}
.quickmenu_inner li:nth-child(3) {
    background-color: #c19596;
}
.quickmenu_inner li:nth-child(4) {
    background-color: #c2b497;
}

3) galaxy_teach.css

* { margin: 0; padding: 0; box-sizing: border-box;}
a { text-decoration: none; color: inherit;}
li { list-style: none;}
img { vertical-align: top; border: none;}
h1, h2 ,h3, h4, h5, h6 { font-weight: normal;}
address { font-style: normal;}
/* 변수선언 */
:root {
    --main-color1: #7b70ac;
    --main-color2: #ba70a5;
    --main-color3: #c19596;
    --main-color4: #c2b497;
    --main-op-color1: rgba(123, 112, 172, 0.7);
    --main-op-color2: rgba(186, 112, 165, 0.7);
    --main-op-color3: rgba(193, 149, 150, 0.7);
    --main-op-color4: rgba(194, 180, 151, 0.7);
}
body { 
    font-family: '나눔고딕', sans-serif; 
    font-size: 14px; 
    line-height: 1.6; 
    color: #2d2d2d;
    background: #ccc;
}
header {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    color: #fff;
}
header > div {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header > div > h1 {
    width: 15%;
}
header > div > h1 img {
    width: 85%;
}
header > div > ul {
    display: flex;
}
header > div > ul li {
    background-color: blueviolet;
    padding: 10px 16px;
    color: #fff;
    margin-right: 10px;
}
header nav ul {
    display: flex;
}
header nav ul li {
    padding: 0 24px;
    color: #fff;
}
header > ul {
    display: flex;
}
header > ul > li {
    padding: 8px 16px;
}
.mobile {
    display: none;
}
.inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.visual {
    background: url('img (1)/main_visual.jpg') center center ;
    background-size: cover;
    height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.visual h2 {
    text-align: center;
    padding-top: 200px;
}
.visual h2 img {
    width: 50%;
}
.visual > ul {
    display: flex;
    width: 1200px;
}
.visual > ul li {
    width: 25%;
    text-align: center;
    color: #fff;
    position: relative;
    height: 300px;
    overflow: hidden;
}
.visual > ul li div {
    position: absolute;
    left: 0;
    width: 100%;
}
.visual > ul li:nth-child(1) .rollout {background: var(--main-color1);}
.visual > ul li:nth-child(2) .rollout {background: var(--main-color2);}
.visual > ul li:nth-child(3) .rollout {background: var(--main-color3);}
.visual > ul li:nth-child(4) .rollout {background: var(--main-color4);}
.rollout {
    bottom: 0;
    height: 120px;
    padding: 30px 20px;
    transition: 0.3s;
}
.visual > ul li:nth-child(1) .rollover {background: var(--main-op-color1);}
.visual > ul li:nth-child(2) .rollover {background: var(--main-op-color2);}
.visual > ul li:nth-child(3) .rollover {background: var(--main-op-color3);}
.visual > ul li:nth-child(4) .rollover {background: var(--main-op-color4);}
.rollover {
    height: 300px;
    top: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    transition: 0.5s;
}
.rollover span {
    color: #ff0;
    padding-bottom: 10px;
}
.go {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    text-transform: uppercase;
    line-height: 50px;
    font-size: 18px;
}
.go:hover {
    background: #ff0;
}
.visual > ul > li:nth-child(1) .go {color: var(--main-op-color1);}
.visual > ul > li:nth-child(2) .go {color: var(--main-op-color2);}
.visual > ul > li:nth-child(3) .go {color: var(--main-op-color3);}
.visual > ul > li:nth-child(4) .go {color: var(--main-op-color4);}
.visual > ul > li:hover .rollout {
    bottom: -120px;
}
.visual > ul > li:hover .rollover {
    top: 0;
}
.open div {
    text-align: center;
    padding: 30px;
}
.open ul {
    display: flex;
    flex-wrap: wrap;
}
.open ul li {
    width: 25%;
}
.open ul li img {
    width: 100%;
}
.review {
    display: flex;
}
.review > div {
    width: 50%;
}
.realres {
    background: url('img (1)/main_real_res_visual.jpg') center center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 100px;
}
.realres h3 {
    padding: 40px 0 30px;
}
.realres p {
    padding-bottom: 30px ;
}
.realres a {
    background: blueviolet;
    line-height: 40px;
    border-radius: 4px;
    padding: 0 20px;
    color: #fff;
}
.bestre ul {
    display: flex;
    flex-wrap: wrap;
}
.bestre ul li {
    width: 50%;
    position: relative;
    background: #fff;
}
.bestre ul li img {
    width: 100%;
}
.bestre ul li div:nth-child(2) {
    padding: 10px;
}
.bestre ul li .besticon {
    position: absolute;
    background: blueviolet;
    color: #fff;
    padding: 10px;
    top: 0;
    left: 0;
}
.quickmenu ul {
    display: flex;
    flex-wrap: wrap;
}
.quickmenu ul li {
    width: 25%;
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}
.quickmenu ul li:nth-child(1) {background: var(--main-color1);}
.quickmenu ul li:nth-child(2) {background: var(--main-color2);}
.quickmenu ul li:nth-child(3) {background: var(--main-color3);}
.quickmenu ul li:nth-child(4) {background: var(--main-color4);}
footer {
    background: url('img (1)/footer_visual.jpg') center top;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 40px;
    color: #fff;
    text-align: center;
}
footer address {
    width: 60%;
    padding-top: 40px;
}
/* 1024이하일 때 */
@media screen and (max-width: 1024px) {
    .visual ul {
        display: none;
    }
    .open > ul > li {
        width: 50%;
    }
    .review {
        flex-direction: column;
    }
    .review > div {
        width: 100%;
    }
    .quickmenu ul li {
        width: 50%;
    }
    .web {
        display: none;
    }
    .menu {
        display: flex;
        width: 60px;
        height: 60px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .menu span {
        width: 80%;
        height: 4px;
        background: #fff;
    }
    .menu span:not(:last-child) {
        margin-bottom: 5px;
    }
    .toprealres {
        display: flex;
        flex-direction: column;
        padding: 10px;
        align-items: center;
    }
    .toprealres img {
        width: 80%;
    }
    header > div > h1 {
        width: 30%;
    }
}
/* 768이하일 때 */
@media screen and (max-width: 768px) {
    .open ul li {
        width: 100%;
    }
}

'노력이 좋아서' 카테고리의 다른 글

<step21>'scss_기초' (0)	2022.04.18
<step21>'css_nots 홈페이지 따라하기' (0)	2022.04.18
<step20>'css_반응형_media' (0)	2022.04.15
<step19>'css_flex실습' (0)	2022.04.15
<step19>'css_flex' (0)	2022.04.14

'노력이 좋아서' 카테고리의 다른 글

티스토리툴바