http://greenweb.dothome.co.kr/hotel/
Document
A Whole New World I can show you the world. Shining Shimmering Splended.Tell me when you decide let me be in your heart.
greenweb.dothome.co.kr
1) hotel.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width"/>
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="/s23/css/hotel_teach.css">
</head>
<body class="clearfix">
<header>
<h1>logo</h1>
<ul>
<li><i class="fa fa-header"></i>Hotem</li>
<li><i class="fa fa-building-o"></i>Fucility</li>
<li><i class="fa fa-suitcase"></i>Businiss</li>
<li><i class="fa fa-cutlery"></i>Restaurant</li>
</ul>
<div class="sns">
<div>
<a href="#"><img src="img/sns1.png" alt=""></a>
<a href="#"><img src="img/sns2.png" alt=""></a>
</div>
<div>
<a href="#"><img src="img/sns3.png" alt=""></a>
<a href="#"><img src="img/sns4.png" alt=""></a>
<a href="#"><img src="img/sns5.png" alt=""></a>
</div>
</div>
</header>
<div class="content">
<div class="quick">
<div>
<a href="#"><img src="img/util1.png" alt=""></a>
<a href="#"><img src="img/util2.png" alt=""></a>
</div>
<div>
<a href="#"><img src="img/util3.png" alt=""></a>
<a href="#"><img src="img/util4.png" alt=""></a>
</div>
</div>
<div class="main-content">
<ul class="clearfix">
<!-- 내용1 -->
<li>
<div class="bg bg1"></div>
<span>Maldives</span>
</li>
<!-- 내용2 -->
<li>
<div class="txt">
<i class="fa fa-angle-right"></i>
<p>
<strong>A Whole New World</strong>
<em>I can show you the world. Shining Shimmering Splended.<br/>Tell me when you decide let me be in your heart.</em>
</p>
</div>
</li>
<!-- 내용3 -->
<li>
<div class="txt">
<i class="fa fa-spin fa-refresh"></i>
<p><strong>Reservation</strong></p>
</div>
</li>
<!-- 내용4 -->
<li>
<span>Suite</span>
<div class="bg bg2"></div>
</li>
<!-- 내용5 -->
<li>
<span>Surf</span>
<div class="bg bg3"></div>
</li>
<!-- 내용6 -->
<li>
<div class="txt">
<i class="fa fa-angle-right"></i>
<p>
<strong>A Dazzling Place</strong>
<em>I can show you the world. Shining Shimmering Splended.<br/>Tell me when you decide let me be in your heart.</em>
</p>
</div>
</li>
<!-- 내용7 -->
<li>
<span>Sauna</span>
<div class="bg bg4"></div>
</li>
<!-- 내용8 -->
<li>
<div class="txt">
<i class="fa fa-angle-right"></i>
<p>
<strong>Hot spot</strong>
<em>I can show you the world. Shining Shimmering Splended.</em>
</p>
</div>
</li>
<!-- 내용9 -->
<li>
<span>Diner</span>
<div class="bg bg5"></div>
</li>
<!-- 내용10 -->
<li>
<span>Spa</span>
<div class="bg bg6"></div>
</li>
<!-- 내용11 -->
<li>
<div class="txt">
<i class="fa fa-angle-right"></i>
<p>
<strong>Open Space</strong>
<em>I can show you the world. Shining Shimmering Splended.</em>
</p>
</div>
</li>
<!-- 내용12 -->
<li>
<span>Tour</span>
<div class="bg bg7"></div>
</li>
</ul>
</div>
</div>
</body>
</html>2) hotel.scss
* { margin: 0; padding: 0; box-sizing: border-box;}
a {text-decoration: none; color:inherit; }
img { vertical-align: top; }
table {
border-collapse: collapse;
}
li { list-style: none;}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
address {
font-style: normal;
}
input, select {
outline: none;
}
$light: #bff7fa;
$hover-color: #87ceeb;
$light2: #e3f1fb;
@mixin flexlayout ($d: row, $w: nowrap, $j: space-between, $a: center) {
display: flex;
flex-flow: $d $w;
justify-content: $j;
align-items: $a;
}
@mixin box-style {
padding: 20px 40px;
strong {
font-size: 40px;
}
em {
font-size: 13px;
}
}
@mixin span-style ($o: 0) {
span {
display: block;
position: absolute;
bottom: 0;
right: 10px;
color: #fff;
font-size: 50px;
opacity: $o;
}
}
body {
width: 100%;
}
body.clearfix {
@include flexlayout();
}
.clearfix {
content: "";
display: block;
clear: both;
}
header {
@include flexlayout($d: column);
width: 20%;
h1 {
background: url('/s23/hotel/img/logo1.png') center center/100% no-repeat;
width: 150px;
height: 300px;
font-size: 0;
margin-bottom: 250px;
}
ul {
font-size: 14px;
li {
padding: 13px;
i {
padding-right: 10px;
}
}
}
.sns {
margin-top: 300px;
}
}
.content {
width: 100%;
height: 1200px;
.quick {
@include flexlayout();
width: 100%;
height: 40px;
padding: 0 20px;
background: #222;
}
.main-content {
vertical-align: top;
ul {
li {
position: relative;
overflow: hidden;
&:nth-child(1) {
float: left;
width: 60%;
height: 500px;
overflow: hidden;
.bg1 {
background: url('/s23/hotel/img/pic1.jpg') center center/100% no-repeat;
// width: 100%;
height: 500px;
}
span {
display: block;
position: absolute;
bottom: 0;
right: 0;
font-size: 120px;
line-height: 110px;
color: #fff;
}
}
&:nth-child(2) {
float: right;
width: 40%;
height: 250px;
@include box-style();
}
&:nth-child(3) {
float: left;
width: 20%;
height: 250px;
@include box-style();
background: $light;
}
&:nth-child(4) {
float: right;
width: 20%;
.bg2 {
background: url('/s23/hotel/img/pic2.jpg') center center/100% no-repeat;
width: 100%;
height: 250px;
}
@include span-style();
}
&:nth-child(5) {
float: left;
width: 20%;
.bg3 {
background: url('/s23/hotel/img/pic3.jpg') center center/100% no-repeat;
// width: 100%;
height: 250px;
}
@include span-style();
}
&:nth-child(6) {
float: left;
width: 40%;
height: 250px;
@include box-style();
}
&:nth-child(7) {
float: left;
width: 20%;
.bg4 {
background: url('/s23/hotel/img/pic4.jpg') center center/100% no-repeat;
// width: 1000px;
height: 250px;
}
@include span-style();
}
&:nth-child(8) {
float: left;
width: 20%;
height: 250px;
@include box-style();
}
&:nth-child(9) {
float: left;
width: 40%;
height: 250px;
.bg5 {
background: url('/s23/hotel/img/pic5.jpg') center center/100% no-repeat;
width: 100%;
height: 250px;
}
@include span-style();
}
&:nth-child(10) {
float: left;
width: 20%;
height: 250px;
.bg6 {
background: url('/s23/hotel/img/pic6.jpg') center center/100% no-repeat;
width: 100%;
height: 250px;
}
@include span-style();
}
&:nth-child(11) {
float: left;
width: 20%;
height: 250px;
@include box-style();
background: $light2;
}
&:nth-child(12) {
float: right;
width: 20%;
height: 250px;
.bg7 {
background: url('/s23/hotel/img/pic7.jpg') center center/100% no-repeat;
width: 100%;
height: 250px;
}
@include span-style();
}
.bg {
@include span-style();
transition: 0.5s;
}
&:hover .bg {
transform: scale(1.5,1.5);
@include span-style($o:1)
}
}
}
}
}3) hotel_teach.scss
* { margin: 0; padding: 0; box-sizing: border-box;}
a {text-decoration: none; color:inherit; }
img { vertical-align: top; }
table {
border-collapse: collapse;
}
li { list-style: none;}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
address {
font-style: normal;
}
input, select {
outline: none;
}
$libg: #bff7fa;
$lihover: #86cdea;
$libg2: #e3f1fb;
@mixin flexlayout ($dir: row, $wrap: nowrap, $just: space-between, $align: center) {
display: flex;
flex-flow: $dir $wrap;
justify-content: $just;
align-items: $align;
}
.clearfix {
&::after {
content: "";
display: block;
clear: both;
}
}
body {
@include flexlayout();
header {
@include flexlayout($dir: column);
width: 15%;
height: 100vh; //브라우저의 높이만큼 주는 단위 : vh, 브라우저의 너비만큼 주는 단위 : vw
padding: 110px 0;
h1 {
background: url('/s23/hotel/img/logo1.png') center center / contain no-repeat;
font-size: 0;
width: 80%;
height: 120px;
}
li {
padding: 14px;
}
}
.content {
width: 85%;
height: 100vh; //브라우저의 높이만큼 주는 단위 : vh, 브라우저의 너비만큼 주는 단위 : vw
.quick {
@include flexlayout();
background: #222;
color: #fff;
height: 40px;
padding: 0 16px;
}
.main-content {
height: calc(100% - 40px); //부모요소에 높이 값이 있어야 한다!
ul {
height: 100%; //부모요소에 높이 값이 있어야 한다!
li {
float: left;
position: relative;
overflow: hidden;
.bg {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 100%;
transition: 0.5s;
}
.bg1 {
background-image: url('/s23/hotel/img/pic1.jpg');
}
.bg2 {
background-image: url('/s23/hotel/img/pic2.jpg');
}
.bg3 {
background-image: url('/s23/hotel/img/pic3.jpg');
}
.bg4 {
background-image: url('/s23/hotel/img/pic4.jpg');
}
.bg5 {
background-image: url('/s23/hotel/img/pic5.jpg');
}
.bg6 {
background-image: url('/s23/hotel/img/pic6.jpg');
}
.bg7 {
background-image: url('/s23/hotel/img/pic7.jpg');
}
span {
position: absolute;
bottom: 30px;
right: 30px;
color: #fff;
font-size: 34px;
z-index: 1;
transition: 0.5s;
opacity: 0;
}
.txt {
padding: 30px;
height: 100%;
transition: 0.5s;
i {
position: absolute;
bottom: 30px;
right: -100px;
font-size: 36px;
color: #ccc;
transition: 0.5s;
}
strong {
font-size: 32px;
font-weight: normal;
}
}
&:nth-child(1) {
width: 60%;
height: 50%;
span {
font-size: 126px;
bottom: -10px;
line-height: 1;
opacity: 1;
}
&:hover span {
color: #333;
}
}
&:nth-child(2) {
width: 40%;
height: 25%;
}
&:nth-child(3) {
width: 20%;
height: 25%;
background: $libg;
i {
right: 30px;
}
}
&:nth-child(4) {
width: 20%;
height: 25%;
}
&:nth-child(5) {
width: 20%;
height: 25%;
}
&:nth-child(6) {
width: 40%;
height: 25%;
}
&:nth-child(7) {
width: 20%;
height: 25%;
}
&:nth-child(8) {
width: 20%;
height: 25%;
}
&:nth-child(9) {
width: 40%;
height: 25%;
}
&:nth-child(10) {
width: 20%;
height: 25%;
}
&:nth-child(11) {
width: 20%;
height: 25%;
background: $libg2;
}
&:nth-child(12) {
width: 20%;
height: 25%;
}
&:hover {
.bg {
transform: scale(1.3);
}
span {
opacity: 1;
}
.txt:not(.bgtxt) {
background: $lihover;
i {
right: 30px;
}
}
}
}
}
}
}
}
@media screen and (max-width:1582px) {
body {
flex-direction: column;
header {
width: 100%;
flex-direction: row;
justify-content: flex-end;
padding: 0 20px;
height: 80px;
h1 {
background-image: url('/s23/hotel/img/logo2.png');
width: 18%;
min-width: 200px;
position: absolute;
left: 30px
}
> ul {
@include flexlayout();
}
.sns {
@include flexlayout();
div:nth-child(1) {
padding-top: 10px;
padding-right: 20px;
}
}
}
.content {
width: 100%;
}
}
}
@media screen and (max-width:1260px) {
body {
header {
.sns {
display: none;
}
}
.content {
.main-content {
ul li {
&:nth-child(1) { width: 75%;}
&:nth-child(2) { width: 25%;}
&:nth-child(3) { width: 25%;}
&:nth-child(4) { width: 25%;}
&:nth-child(5) { width: 25%;}
&:nth-child(6) { width: 50%;}
&:nth-child(7) { width: 50%;}
&:nth-child(8) { width: 25%;}
&:nth-child(9) { width: 25%;}
&:nth-child(10) { width: 50%;}
&:nth-child(11) { width: 25%;}
&:nth-child(12) { width: 25%;}
}
}
}
}
}
@media screen and (max-width: 1006px) {
body {
.content {
.main-content {
ul li {
&:nth-child(1) { width: 100%;}
&:nth-child(2) { width: 66.6666%;}
&:nth-child(3) { width: 33.3333%;}
&:nth-child(4) { width: 33.3333%; display: none;}
&:nth-child(5) { width: 33.3333%;}
&:nth-child(6) { width: 66.6666%;}
&:nth-child(7) { width: 50%; display: none;}
&:nth-child(8) { width: 33.3333%;}
&:nth-child(9) { width: 33.3333%;}
&:nth-child(10) { width: 33.3333%; display: none;}
&:nth-child(11) { width: 33.3333%;}
&:nth-child(12) { width: 25%; display: none;}
}
}
}
}
}
@media screen and (max-width: 762px) {
body {
.content {
.main-content {
ul li {
&:nth-child(1) { width: 100%;}
&:nth-child(2) { width: 100%;}
&:nth-child(3) { width: 33.3333%; display: none;}
&:nth-child(4) { width: 33.3333%; display: none;}
&:nth-child(5) { width: 50%;}
&:nth-child(6) { width: 50%;}
&:nth-child(7) { width: 50%; display: none;}
&:nth-child(8) { width: 50%;}
&:nth-child(9) { width: 50%;}
&:nth-child(10) { width: 33.3333%; display: none;}
&:nth-child(11) { width: 50%;}
&:nth-child(12) { width: 50%; display: block;}
}
}
}
}
}
@media screen and (max-width: 622px) {
body {
header {
height: 150px;
flex-direction: column;
h1 {
left: 50%;
transform: translate(-50%,0);
top: 20px;
height: 80px;
}
ul {
width: 100%;
li {
width: 25%;
text-align: center;
}
}
.sns {
display: none;
}
}
.content {
.quick {
display: none;
}
}
}
}
@media screen and (max-width: 476px) {
body {
header {
height: 100vh;
background: url('/s23/hotel/img/pic1.jpg') center center /cover no-repeat;
justify-content: center;
h1 {
position: static; //default 값
transform: translate(0, 0);
}
ul {
@include flexlayout($dir: column);
padding-top: 100px;
li {
background: rgba(0, 0, 0, 0.4);
color: #fff;
border-radius: 4px;
margin-bottom: 10px;
width: 80%;
i {
padding-right: 15px;
}
}
}
}
.content {
display: none;
}
}
}
'노력이 좋아서' 카테고리의 다른 글
| <step25>'scss_현대 중공업 홈페이지 따라하기' (0) | 2022.04.22 |
|---|---|
| <step24>'css_animation' (0) | 2022.04.21 |
| <step22>'scss_삼성생명 홈페이지 따라하기' (0) | 2022.04.19 |
| <step22>'scss_연습하기' (0) | 2022.04.19 |
| <step22>'scss_이자녹스 홈페이지 따라하기' (0) | 2022.04.19 |