1) html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="/s24/css/hd.css">
</head>
<body>
<div>
<header>
<h1><img src="images/logo.png" alt=""></h1>
<nav>
<ul class="menu">
<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>
<li><a href="#">인재채용</a></li>
<li><a href="#">투자자정보</a></li>
</ul>
</nav>
<div>
<ul class="gnb">
<li><a href="#">ENG</a></li>
<li>
<button>FAMILY SITE</button>
<div>
<ul>
<li><a href="#">한국조선해양</a></li>
<li><a href="#">HHI Group</a></li>
<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>
<li><a href="#">한국조선해양</a></li>
</ul>
</div>
</li>
</ul>
<div class="toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<div id="content">
<!-- 비주얼 부분 -->
<section id="visual">
<div class="inner">
<div class="tit">
<h2>
<strong>
GREEN TECHNOLOGIES<br>
FOR A BETTER FUTURE</strong>
</h2>
<p> 현대삼호중공업은 친환경 기술과 스마트 기술을 통해<span class="bk">
보다 나은 미래를 준비하고 새로운 도전을 이어가고 있습니다.</span>
</p>
<a href="#" class="visual_btn">
COMPANY MORE
<span></span>
</a>
</div>
<div class="scroll"><span>SCROLL DOWN</span></div>
</div>
</section>
<!-- 비주얼 부분 /-->
<!-- 비즈니스 부분 -->
<section id="business">
<div>
<div class="txbox">
<div class="tit">
<h2>HSHI <strong class="bk">BUSINESS</strong></h2>
<p>
현대삼호중공업의
<span class="bk">조선, 산업설비, 해양사업분야를</span>
한 눈에 볼 수 있습니다.
</p>
</div>
<a href="#">
BUSINESS MORE
<i class="btn_more">
<span class="blind">자세히 보기</span>
</i></a>
</div>
<ul>
<li class="on">
<a href="#">
<em>01</em>
<span>Shipbuilding</span>
<strong>조선분야</strong>
<p>세계 최고의 선박을 만드는 현대삼호중공업은 <span class="bk">첨단 설비와 기술로 고객만족을 실현하고 </span>첨단 3차원 설계시스템 지원 및 대고객 소통 활성화를 <span class="bk">통해 무결점 선박을 적기 인도하고 있습니다.</span></p>
<i>VIEW MORE</i>
</a>
</li>
<li>
<a href="#">
<em>02</em>
<span>Offshore Business</span>
<strong>해양사업</strong>
<p>조선 분야에서 쌓아온 경험과 기술을 바탕으로 <span class="bk">2008년과 2015년 현대중공업과 공동으로 </span>FPSO와 FPU의 건조에 착수했으며, 2018년에는 <span class="bk"> 노르웨이 시탱커에 반잠수식시추선을 건조해</span></p>
<i>VIEW MORE</i>
</a>
</li>
<li>
<a href="#">
<em>03</em>
<span>Shipbuilding</span>
<strong>조선분야</strong>
<p>세계 최고의 선박을 만드는 현대삼호중공업은 <span class="bk">첨단 설비와 기술로 고객만족을 실현하고 </span>첨단 3차원 설계시스템 지원 및 대고객 소통 활성화를 <span class="bk">통해 무결점 선박을 적기 인도하고 있습니다.</span></p>
<i>VIEW MORE</i>
</a>
</li>
</ul>
</div>
</section>
<!-- 비즈니스 부분 /-->
<!-- 지속가능성 부분 -->
<section id="susta">
<div class="inner">
<ul>
<li>
<div class="tit">
<h2>HSHI <strong class="bk">SUSTAINABILITY</strong></h2>
<p>현대삼호중공업은 지속적인 성장을 통한 기업가치 증대를 추구하며 <span class="bk">기업의 사회적 책임을 실천합니다.</span></p>
</div>
</li>
<li>
<a href="#">
<h3>안전·보건·환경</h3>
<p>다 함께 안전하고 행복한 <span class="bk">일터를 만들어 나가겠습니다.</span></p>
<i class="btn_more">
<span class="blind">자세히 보기</span>
</i>
</a>
</li>
<li>
<a href="#">
<h3>윤리경영</h3>
<p>다 함께 안전하고 행복한 <span class="bk">일터를 만들어 나가겠습니다.</span></p>
<i class="btn_more">
<span class="blind">자세히 보기</span>
</i>
</a>
</li>
<li>
<a href="#">
<h3>품질경영</h3>
<p>최고의 품질로 고객에게 <span class="bk">감동과 신뢰를</span></p>
<i class="btn_more">
<span class="blind">자세히 보기</span>
</i>
</a>
</li>
<li>
<a href="#">
<h3>동반성장</h3>
<p>함께하는, 아름답고 <span class="bk">풍요로운</span></p>
<i class="btn_more">
<span class="blind">자세히 보기</span>
</i>
</a>
</li>
<li>
<a href="#">
<h3>사회공헌</h3>
<p>사회적 책임을 다하는 <span class="bk">깨끗하고 정직한 기업이 되겠습니다.</span></p>
<i class="btn_more">
<span class="blind">자세히 보기</span>
</i>
</a>
</li>
</ul>
</div>
</section>
<!-- 지속가능성 부분 /-->
<!-- 미디어센터 부분 -->
<section id="media">
<div class="inner">
<div>
<div class="tit">
<h2>MEDIA <strong class="bk">CENTER</strong></h2>
<p>현대삼호중공업의<span class="bk">다양한 소식을 전달합니다.</span></p>
</div>
<ul>
<li>사보</li>
<li>홍보영화</li>
<li>문의전화</li>
</ul>
</div>
<ul>
<li><a href="#">보도자료</a>
<ul>
<li>
<div>
<h3>현대중공업그룹, LNG DF 선박 기술 워크숍!</h3>
<p>- 영상회의 방식으로 진행......8일(화) LNG DF 선박 현장 견학 </p>
<span>2020-09-07</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
<li>
<div>
<h3>세계 최초 LNG추진 컨테이너선 건조</h3>
<p>현대중공업그룹이 세계 최초로 LNG(액화천연가스) 추진 초대형 컨테이너선을 건조 </p>
<span>2020-08-24</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
<li>
<div>
<h3>회사 봉사단, 구례에서 수해 복구 봉사활동</h3>
<p>- 영상회의 방식으로 진행......8일(화) LNG DF 선박 현장 견학 </p>
<span>2020-28-24</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
</ul>
</li>
<li><a href="#">브로슈어</a>
<ul>
<li>
<div>
<h3>현대중공업그룹, LNG DF 선박 기술 워크숍!</h3>
<p>- 영상회의 방식으로 진행......8일(화) LNG DF 선박 현장 견학 </p>
<span>2020-09-07</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
<li>
<div>
<h3>세계 최초 LNG추진 컨테이너선 건조</h3>
<p>현대중공업그룹이 세계 최초로 LNG(액화천연가스) 추진 초대형 컨테이너선을 건조 </p>
<span>2020-08-24</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
<li>
<div>
<h3>회사 봉사단, 구례에서 수해 복구 봉사활동</h3>
<p>- 영상회의 방식으로 진행......8일(화) LNG DF 선박 현장 견학 </p>
<span>2020-28-24</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
</ul>
</li>
<li><a href="#">브로슈어</a>
<ul>
<li>
<div>
<h3>현대중공업그룹, LNG DF 선박 기술 워크숍!</h3>
<p>- 영상회의 방식으로 진행......8일(화) LNG DF 선박 현장 견학 </p>
<span>2020-09-07</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
<li>
<div>
<h3>세계 최초 LNG추진 컨테이너선 건조</h3>
<p>현대중공업그룹이 세계 최초로 LNG(액화천연가스) 추진 초대형 컨테이너선을 건조 </p>
<span>2020-08-24</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
<li>
<div>
<h3>회사 봉사단, 구례에서 수해 복구 봉사활동</h3>
<p>- 영상회의 방식으로 진행......8일(화) LNG DF 선박 현장 견학 </p>
<span>2020-28-24</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</section>
<!-- 미디어센터 부분 /-->
<!-- 투자 부분 -->
<section id="relations">
<div class="inner">
<div class="tit">
<h2>INVEST <strong class="bk">RELATIONS </strong></h2>
<p>현대삼호중공업은 항상 투자자 여러분과 함께하며 더 나은 편의제공을 위해 최선을 다하고 있습니다.
<span class="bk">현대삼호중공업의 경영현황을 신속하고 정확하게 제공해드립니다.</span></p>
</div>
<div>
<div class="left">
<h3>투자자정보
<a href="#"><i class="btn_more">
<span class="blind">자세히 보기</span>
</i></a>
</h3>
<ul>
<li><a href="#"><i class="ico ico1"></i>공시·공고</a></li>
<li><a href="#"><i class="ico ico2"></i>지배구조</a></li>
<li><a href="#"><i class="ico ico3"></i>재무정보</a></li>
<li><a href="#"><i class="ico ico4"></i>IR자료실</a></li>
</ul>
</div>
<div class="right">
<h3>IR자료실
<a href="#"><i class="btn_more">
<span class="blind">자세히 보기</span>
</i></a>
</h3>
<ul>
<li><a href="#">반기사업보고서(2020.06)<span>2020-08-18</span></a></li>
<li><a href="#">반기사업보고서(2020.06)<span>2020-06-06</span></a></li>
<li><a href="#">반기사업보고서(2020.06)<span>2020-06-02</span></a></li>
<li><a href="#">반기사업보고서(2020.06)<span>2020-05-16</span></a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
<footer>
<div>
<div class="inner">
<ul>
<li>개인정보취급방침</li>
<li>법적고지</li>
<li>영상정보처리기기운영방침</li>
<li>이메일무단수집거부</li>
</ul>
</div>
</div>
<div class="inner">
<div>현대삼호중공업 주소 : 우편번호 58462 전남 영암군 삼호읍 대불로 93 전화번호 : 061-460-2114<br>
copyright ⓒ 2020 HYUNDAI SAMHO HEAVY INDUSTRIES CO.,LTD. ALL RIGHTS RESERVED.
퇴직자 제증명 신청SITE LINK
</div>
<div>
<ul>
<li>퇴직자 제증명 신청</li>
<li>sitelink</li>
</ul>
<span>웹표준마크</span>
</div>
</div>
</footer>
</div>
</body>
</html>2) scss
* { margin: 0; padding: 0; box-sizing: border-box;}
a { text-decoration: none; color: inherit;}
li { list-style: none;}
body {
width: 100%;
height: 100vh;
font-family: '나눔고딕',sans-serif;
}
@keyframes move {
0% {
margin-top: 480px;
}
50% {
margin-top: 490px;
}
100% {
margin-top: 480px;
}
}
$main-color: #114c9f;
$hover-color: #00baff;
@mixin flexlayout ($d: row, $w: nowrap, $j: space-between, $a: center) {
display: flex;
flex-flow: $d $w;
justify-content: $j;
align-items: $a;
}
header {
background: #fff;
@include flexlayout();
width: 100%;
height: 80px;
position: relative;
position: fixed;
z-index: 1;
h1 {
width: 12%;
padding-bottom: 10px;
img {
width: 100%;
}
}
nav {
height: 100%;
}
.menu {
@include flexlayout();
height: 100%;
color: $main-color;
padding-top: 10px;
li {
height: 100%;
margin: 0 30px;
font-size: 13px;
padding-top: 20px;
transition: 0.5s;
position: relative;
&::before {
content: "";
display: block;
position: absolute;
left: -10px;
right: -10px;
top: 70px;
bottom: 0;
border-bottom: 3px solid #0053a5;
transform: scaleX(0);
transition: 0.4s;
}
&:hover::before {
transform: scaleX(1);
}
}
}
> div {
margin-right: 100px;
.gnb {
color: #5d5d5d;
>li:nth-child(1) {
& a::before {
content: "";
margin: 0 5px;
display: inline-block;
width: 12px;
height: 12px;
background: url('/s24/현대중공업/images/ico_gb.png') center center/cover no-repeat;
}
&:hover a::before{
background: url('/s24/현대중공업/images/ico_gb_color.png') center center/cover no-repeat;
}
}
@include flexlayout($j: flex-start);
font-size: 12px;
button {
background: #eee;
color: #5d5d5d;
border-style: none;
font-size: 11px;
margin-top: 2px;
}
> li:nth-child(2) {
@include flexlayout($d: column);
position: relative;
ul {
background: $main-color;
color: #fff;
padding: 2px;
opacity: 0;
li {
padding: 4px 2px;
}
}
&:hover ul {
opacity: 1;
}
}
li {
padding: 0 8px;
}
div {
margin-left: 20px;
width: 100px;
ul {
position: absolute;
top: 20px;
}
}
}
}
.toggle {
position: absolute;
right: 0;
bottom: 25px;
span {
margin: 7px;
display: block;
height: 3px;
width: 40px;
background: #000;
}
}
}
#content {
#visual {
width: 100%;
height: 1000px;
background: url('/s24/현대중공업/images/main_visual_new1.jpg') center center/cover no-repeat;
position: relative;
>div {
color: #fff;
position: absolute;
top: 300px;
left: 150px;
h2 {
font-size: 40px;
}
p, a {
font-size: 13px;
padding: 20px 0;
}
a {
position: relative;
&::after {
content: "";
display: inline-block;
position: absolute;
top: 12px;
left: 0;
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
transition: 0.5s;
}
&:hover a::after{
left: 50px;
background: rgba($color: $hover-color, $alpha: 0.5);
}
span {
display: inline-block;
width: 28px;
height: 10px;
background: url('/s24/현대중공업/images/btn_arr.png') center center / 100% no-repeat;
}
}
.scroll {
font-size: 15px;
margin-top: 480px;
transform: translate(550px,0);
animation: move 2.5s 0.5s infinite;
}
}
}
.btn_more {
&::after {
position: absolute;
transition: 0.5s;
left: 0;
top: 3px;
content: "";
display: inline-block;
width: 28px;
height: 10px;
background: url('/s24/현대중공업/images/btn_arr.png') center center / 100% no-repeat;
}
position: relative;
.blind {
position: absolute;
left: 11px;
top: -7px;
font-size: 0;
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #fff;
transition: 0.5s;
}
}
#business {
width: 100%;
height: 800px;
position: relative;
background: url('/s24/현대중공업/images/bg_sct2_1.jpg') center center/cover no-repeat;
color: #fff;
> div {
@include flexlayout();
position: absolute;
top: 200px;
left: 100px;
.txbox {
width: 15%;
h2 {
font-size: 40px;
}
p {
font-size: 14px;
padding: 20px 0
}
a {
font-size: 14px;
&:hover {
.blind {
background: rgba($color: #00baff, $alpha: 0.5);
border: none;
left: 15px;
}
i::after {
left: 4px;
}
}
}
}
ul {
@include flexlayout($a: flex-start);
width: 75%;
height: 300px;
i::after {
content: "";
display: inline-block;
width: 28px;
height: 10px;
background: url('/s24/현대중공업/images/btn_arr.png') center center / 100% no-repeat;
}
li {
width: 100%;
transition: 0.7s;
span, p, i {
font-size: 14px;
padding: 20px 0;
font-style: normal;
}
span {
padding: 8px 0;
}
em, strong {
font-size: 20px;
font-style: normal;
transition: 0.7s;
}
p, i {
opacity: 0;
transition: 1s;
}
em, a >span {
transition: 0.5s;
}
a {
width: 80%;
@include flexlayout($d: column, $a: flex-start);
}
&:nth-child(2), &:nth-child(3) {
&:hover {
top: 50px;
em, strong {
font-size: 30px;
}
p, i {
opacity: 1;
}
em, a >span {
color: $hover-color;
}
}
}
&:nth-child(1) {
em, strong {
font-size: 30px;
}
p, i {
opacity: 1;
}
em, a >span {
color: $hover-color;
}
}
}
}
}
}
#susta {
width: 100%;
height: 800px;
position: relative;
background: url('/s24/현대중공업/images/bg_sct3.jpg') center center/cover no-repeat;
>div {
ul {
width: 80%;
position: absolute;
left: 50%;
top: 200px;
transform: translate(-50%,0);
@include flexlayout($w: wrap);
li {
position: relative;
i {
position: absolute;
bottom: 40px;
right: 60px;
&:hover {
.blind {
background: rgba($color: #00baff, $alpha: 0.5);
border: none;
left: 15px;
}
&::after {
left: 4px;
}
}
}
width: 100%;
height: 200px;
&:nth-child(1) {
width: 50%;
padding: 20px 10px;
h2 {
font-size: 40px;
width: 50%;
}
p {
font-size: 14px;
width: 65%;
padding-top: 15px;
}
}
&:nth-child(2) {
width: 49.3%;
margin-bottom: 15px;
background: url('/s24/현대중공업/images/bg_sct3_1.jpg') center center/cover no-repeat;
padding: 30px 15px;
h3 {
font-size: 18px;
}
p {
font-size: 14px;
padding-top: 20px;
}
}
&:nth-child(3) {
width: 24%;
background: #2489ca;
padding: 30px 15px;
h3 {
font-size: 18px;
}
p {
font-size: 14px;
padding-top: 20px;
}
}
&:nth-child(4) {
width: 24%;
background: #5d7081;
padding: 30px 15px;
h3 {
font-size: 18px;
}
p {
font-size: 14px;
padding-top: 20px;
}
}
&:nth-child(5) {
width: 24%;
background: url('/s24/현대중공업/images/bg_sct3_2.jpg') center center/cover no-repeat;
padding: 30px 15px;
h3 {
font-size: 18px;
}
p {
font-size: 14px;
padding-top: 20px;
}
}
&:nth-child(6) {
width: 24%;
background: #0054a6;
padding: 30px 15px;
h3 {
font-size: 18px;
}
p {
font-size: 14px;
padding-top: 20px;
}
}
&> :not(.tit) {
color: #fff;
}
}
}
}
}
#media {
width: 100%;
height: 800px;
background: #f0f0f0;
>div {
@include flexlayout();
position: absolute;
margin: 15% 8%;
> div {
@include flexlayout($d: column);
width: 100%;
h2 {
font-size: 40px;
width: 100px;
}
p {
padding: 20px 0;
font-size: 14px;
width: 140px;
}
ul {
margin-left: 100px;
@include flexlayout($d: column, $a: flex-start);
li {
font-size: 14px;
padding: 20px 0;
&::before {
content: "";
display: inline-block;
background: #ccc;
width: 50px;
height: 50px;
margin-right: 10px;
}
}
}
}
>ul {
@include flexlayout();
>li {
div {
position: relative;
padding: 20px;
background: url('/s24/현대중공업/images/news1.jpg') center center / 100% no-repeat;
.tx {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background: $main-color;
font-size: 10px;
color: #fff;
}
}
width: 1000px;
margin-left: 50px;
background: #fff;
h3 {
font-size: 18px;
}
p {
font-size: 14px;
padding: 10px 0;
}
span {
font-size: 14px;
}
&:nth-child(2) {
display: none;
}
&:nth-child(3) {
display: none;
}
}
}
}
}
#relations {
width: 100%;
height: 800px;
position: relative;
background: url('/s24/현대중공업/images/bg_sct4.jpg') center center /cover no-repeat;
> div {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
.tit {
border-bottom: 1px solid #fff;
margin-bottom: 20px;
h2 {
font-size: 50px;
width: 100px;
}
p {
padding: 20px 0;
width: 700px;
font-size: 14px;
}
}
>div:nth-child(2) {
@include flexlayout($j: flex-start);
position: relative;
.left {
position: relative;
i {
position: absolute;
top: 5px;
left: 100px;
&:hover {
.blind {
background: rgba($color: #00baff, $alpha: 0.5);
border: none;
left: 15px;
}
&::after {
left: 4px;
}
}
}
margin-top: 30px;
padding-right: 40px;
border-right: 1px solid #fff;
ul {
@include flexlayout();
border: 1px solid #fff;
margin-top: 40px;
li {
padding: 30px 40px;
font-size: 14px;
&:not(:last-child) {
border-right: 1px solid #fff;
}
}
}
}
.right {
position: relative;
i {
position: absolute;
top: 5px;
left: 80px;
&:hover {
.blind {
background: rgba($color: #00baff, $alpha: 0.5);
border: none;
left: 15px;
}
&::after {
left: 4px;
}
}
}
margin-left: 30px;
margin-top: 30px;
ul {
margin-top: 40px;
li {
font-size: 14px;
padding: 2px 0;
span {
margin-left: 350px;
}
}
}
}
}
}
}
}
footer {
width: 100%;
height: 400px;
background: #141414;
color: #c5c5c5;
>div {
.inner {
width: 100%;
height: 80px;
border-top: 1px solid #2c2c2c;
border-bottom: 1px solid #2c2c2c;
ul {
@include flexlayout($j: flex-start);
padding-left: 150px;
li {
padding: 0 20px;
margin: 30px 0;
font-size: 14px;
&:not(:last-child) {
border-right: 1px solid #2c2c2c;
}
}
}
}
}
>div.inner {
@include flexlayout($a: flex-start);
margin: 20px 10%;
font-size: 14px;
height: 220px;
ul {
@include flexlayout();
margin-top: 10px;
li {
padding: 10px 20px;
&:nth-child(1) {
background: url('/s24/현대중공업/images/btn_apply.jpg') center center / cover no-repeat;
}
&:nth-child(2) {
background: #444;
padding-right: 90px;
margin-left: 5px;
}
}
}
span {
background: url('/s24/현대중공업/images/logo_wa.png') center center / cover no-repeat;
font-size: 0;
margin-top: 20px;
display: block;
width: 120px;
height: 80px;
margin-left: 200px;
}
}
}3) scss_teach
$bluecolor: #00baff;
$darkbluecolor: #114c9f;
$fontcolor: #3d3d3d;
$padding: 16px;
$fontsize: 14px;
body {
font-family: 'Roboto', 'Noto Sans KR', sans-serif;
color: $fontcolor;
font-size: $fontsize;
line-height: 1.6;
}
.inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
@mixin flexlayout ($d:row, $w:nowrap, $j:space-between, $a:center) {
display: flex;
flex-flow: $d $w;
justify-content: $j;
align-items: $a;
}
@keyframes move {
0% {bottom: 50px;}
50% {bottom: 40px;}
100% {bottom: 50px}
}
@keyframes imgscale {
0% {background-size: 130%;}
100% {background-size: 120%;}
}
header {
@include flexlayout();
height: 80px;
padding: 0 $padding;
position: fixed;
width: 100%;
background: #fff;
z-index: 1;
h1 {
width: 15%;
min-width: 180px; //최소 너비 지정
img {
width: 100%;
}
}
nav {
ul {
@include flexlayout();
li {
font-size: $fontsize*1.2;
padding: 0 $padding;
position: relative;
line-height: 80px;
&::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,0);
width: 0;
height: 4px;
background: $darkbluecolor;
transition: 0.5s;
}
&:hover {
&::after {
width: 100%;
}
}
}
}
}
> div {
@include flexlayout();
.gnb {
@include flexlayout();
padding-right: $padding*3;
> li {
padding: 0 $padding;
&:nth-child(1) {
border-right: 1px solid #ccc;
background: url('/s24/현대중공업/images/ico_gb.png') left center/15px no-repeat;
&:hover {
background-image: url('/s24/현대중공업/images/ico_gb_color.png'); //image만 변경함
}
}
&:hover {
div {
display: block;
}
}
button {
border: none;
background: transparent; //배경없음(투명)
color: $fontcolor;
}
}
div {
position: absolute;
background: $darkbluecolor;
color: #fff;
padding: $padding;
display: none;
}
}
.toggle {
width: 50px;
height: 50px;
@include flexlayout($d:column, $j:center);
span { //flex를 했기 때문에 display:block 안해도 크기 지정 가능
width: 60%;
height: 3px;
background: $fontcolor;
&:not(:last-child) {
margin-bottom: 4px;
}
}
}
}
}
#content {
section {
height: 100vh;
position: relative;
}
}
// 메인 비주얼부분
.tit {
h2 {
font-size: $fontsize*3;
padding-bottom: $padding;
line-height: 1;
strong {
font-weight: bold;
}
}
p {
padding-bottom: $padding;
}
}
#visual {
background: url('/s24/현대중공업/images/main_visual_new1.jpg') center center no-repeat;
background-size: 130%;
padding-top: 20%;
animation: imgscale 2s forwards;
.tit {
color: #fff;
width: 40%;
.visual_btn {
position: relative;
line-height: 30px;
padding-left: 10px;
padding-right: 25px;
&::before {
content: "";
display: block;
width: 30px;
height: 30px;
border-radius: 15px;
background: rgba(255,255,255,0.5);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
transition: 0.5s;
}
span {
display: block;
width: 25px;
height: 8px;
background: url('/s24/현대중공업/images/btn_arr.png') left top/ 25px no-repeat;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
z-index: 1;
transition: 0.5s;
}
&::after {
content: "";
display: block;
width: 100%;
height: 30px;
border-radius: 15px;
background: $bluecolor;
position: absolute;
top: 50%;
right: -20px;
transform: translateY(-50%);
opacity: 0;
transition: 0.5s;
}
&:hover {
&::before {
width: 100%;
opacity: 0;
}
&::after {
width: 30px;
opacity: 1;
}
span {
right: -10px;
}
}
}
}
.scroll {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 50px;
color: #fff;
animation: move 3s infinite;
}
}
// 화살표 hover
a {
position: relative;
.btn_more {
&::before {
content: "";
display: block;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid #fff;
position: absolute;
right: -40px;
top: -5px;
transition: 0.5s;
}
.blind {
font-size: 0;
}
&::after {
content: "";
display: block;
width: 32px;
height: 20px;
position: absolute;
right: -30px;
top: 3px;
background: url('/s24/현대중공업/images/btn_arr.png') left top / 32px no-repeat;
transition: 0.5s;
}
}
&:hover {
.btn_more {
&::before {
right: -45px;
background: $bluecolor;
border: none;
}
&::after {
right: -35px;
}
}
}
}
// 메인 비즈니스 부분
#business {
background: url('/s24/현대중공업/images/bg_sct2_1.jpg') center center/ cover no-repeat;
> div {
position: absolute;
left: 0;
right: 80px;
top: 0;
bottom: 0;
color: #fff;
@include flexlayout();
.txbox {
width: 30%;
height: 100%;
padding-top: 16%;
padding-left: 8%;
div {
width: 60%;
p {
width: 70%;
}
}
}
ul {
width: 70%;
height: 100%;
@include flexlayout();
padding-top: 16%;
position: relative;
li {
width: 33.3333%;
height: 100%;
> a {
@include flexlayout($d:column, $j:flex-start, $a:flex-start);
em {
font-style: normal;
font-weight: bold;
transition: 0.5s;
}
strong {
font-size: $fontsize*2;
font-weight: bold;
padding-bottom: $padding;
transition: 0.5s;
}
p {
width: 70%;
padding-bottom: $padding;
opacity: 0;
transition: 0.5s 0.5s;
}
i {
padding-right: 40px; //background 넣기 위한 공간 생성
font-style: normal;
opacity: 0;
background: url('/s24/현대중공업/images/btn_arr.png') right 5px/ 32px no-repeat;
transition: 0.5s 0.5s;
}
}
&.on {
em {
font-size: $fontsize*3;
color: $bluecolor;
}
span {
color: $bluecolor;
}
strong {
font-size: $fontsize*2.4;
}
p {
opacity: 1;
span {
color: #fff;
}
}
i {
opacity: 1;
}
&::before {
height: 20%;
}
&::after {
height: 20%;
}
}
&::before {
content: "";
display: block;
width: 1px;
height: 50%;
position: absolute;
top: 0;
left: 0;
background: #fff;
transition: 0.5s;
}
&::after {
content: "";
display: block;
width: 1px;
height: 50%;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
transition: 0.5s;
}
&:nth-child(2) {
&::before {
left: 33.3333%;
}
&::after {
left: 33.3333%;
}
}
&:nth-child(3) {
&::before {
left: 66.6666%;
}
&::after {
left: 66.6666%;
}
}
&:hover {
&::before {
height: 20%;
}
&::after {
height: 20%;
}
em {
font-size: $fontsize*3;
color: $bluecolor;
}
span {
color: $bluecolor;
}
strong {
font-size: $fontsize*2.4;
}
p {
opacity: 1;
span {
color: #fff;
}
}
i {
opacity: 1;
}
}
}
}
}
}
// 지속 가능성 부분
#susta {
background: url('/s24/현대중공업/images/bg_sct3.jpg') center center/ cover no-repeat;
@include flexlayout($j:center);
ul {
@include flexlayout($w:wrap);
align-content: center;
li {
padding: $padding*2;
height: 200px;
color: #fff;
&:nth-child(1) {
width: 49%;
color: $fontcolor;
margin-bottom: 2%;
}
&:nth-child(2) {
width: 49%;
margin-bottom: 2%;
background: url('/s24/현대중공업/images/bg_sct3_1.jpg') right top/ cover;
}
&:nth-child(3) {
width: 23.5%;
background: $bluecolor;
}
&:nth-child(4) {
width: 23.5%;
background: $fontcolor;
}
&:nth-child(5) {
width: 23.5%;
background: url('/s24/현대중공업/images/bg_sct3_2.jpg') center center/ cover;
}
&:nth-child(6) {
width: 23.5%;
background: $darkbluecolor;
}
a {
display: block;
width: 100%;
height: 100%; //자식요소(.btn_more) 위치 맞춰주기 위해 설정
.btn_more {
position: absolute;
right: 30px;
bottom: 0;
}
}
}
}
}'노력이 좋아서' 카테고리의 다른 글
| <step26>'js_기초' (0) | 2022.04.25 |
|---|---|
| <step25>'scss_고운세상 홈페이지 따라하기' (0) | 2022.04.22 |
| <step24>'css_animation' (0) | 2022.04.21 |
| <step23>'sccs_호텔 홈페이지 따라하기' (0) | 2022.04.20 |
| <step22>'scss_삼성생명 홈페이지 따라하기' (0) | 2022.04.19 |