<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
img{
width: 100%;
display: block;
}
body{
font-family: Arial, "맑은 고딕", sans-serif;
color: #333;
}
.menu_wrap{
width: 620px;
height: 100px;
background-color: #ff6a00;
position: absolute;
top: 0;
left: 0;
padding: 20px 30px;
}
.logo{
width: 220px;
float: left;
margin-top: 6px;
}
.company_name{
width: 240px;
float: left;
margin-top: 20px;
}
.company_name p{
font-size: 26px;
color: #fff;
font-weight: 900;
line-height: 1.2;
}
/* =========================
메인 비주얼
========================= */
.main_visual{
width: 100%;
height: 980px;
background: url("img/main.webp") no-repeat center / cover;
}
.section_1{
height: 1000px;
padding: 100px 0;
background-color: rgb(228, 230, 230);
}
.section_2{
height: 1000px;
padding: 100px 0;
background-color: rgb(228, 230, 230);
}
.card_text{
width: 1800px;
height: 150px;
margin: 0 auto;
font-size: 30px;
color: #222;
font-weight: 900;
margin-bottom: 30px;
}
.card_wrap{
width: 1800px;
height: 500px;
margin: 0 auto;
}
.card1{
width: 500px;
float: left;
margin-right: 30px;
}
.card2{
width: 500px;
float: left;
margin-right: 30px;
}
.card3{
width: 500px;
float: left;
}
.card1,.card2,.card3{
position: relative;
}
.circle_hover{
width: 400px;
height: 400px;
border-radius: 50%;
background-color: #ff6a00;
position: absolute;
top: 42px;
left: 42px;
display: none;
color: #fff;
font-size: 22px;
font-weight: bold;
text-align: center;
line-height: 400px;
}
.card1:hover .circle_hover,
.card2:hover .circle_hover,
.card3:hover .circle_hover{
display: block;
}
.brand_text{
width: 1800px;
height: 150px;
margin: 0 auto;
font-size: 30px;
color: #222;
font-weight: 900;
margin-bottom: 30px;
}
.brand_wrap{
width: 1800px;
height: 500px;
margin: 0 auto;
}
.brand_left{
width: 500px;
float: left;
margin-right: 30px;
}
.brand_right{
width: 1000px;
float: right;
}
.brand_left,.brand_right{
position: relative;
}
.card_text p,
.brand_text p{
line-height: 1.4;
}
.arrow_left{
width: 46px;
height: 46px;
border: 2px solid #bdbdbd;
border-radius: 50%;
text-align: center;
line-height: 42px;
font-size: 28px;
color: #8a8a8a;
position: absolute;
top: 200px;
left: 10px;
}
.arrow_right{
width: 46px;
height: 46px;
border: 2px solid #bdbdbd;
border-radius: 50%;
text-align: center;
line-height: 42px;
font-size: 28px;
color: #8a8a8a;
position: absolute;
top: 200px;
right: 50px;
}
.brand_right img{
width: 100%;
height: 970px;
}
</style>
</head>
<body>
<div class="main_visual">
<div class="menu_wrap">
<div class="logo">
<a href="#">
<img src="img/logo.png" alt="로고">
</a>
</div>
<div class="company_name">
<p>삼양라운드스퀘어</p>
</div>
</div>
</div>
<section class="section_1">
<div class="card_text">
<p>Inside Roundsquare <br>
라운드스퀘어 자세히 보기</p>
</div>
<div class="card_wrap">
<div class="card1">
<a href="#">
<img src="img/image01.WEBP" alt="New CI">
</a>
<div class="circle_hover">
역사와 미래가 담긴 새 얼굴
</div>
<h3>New CI</h3>
</div>
<div class="card2">
<a href="#">
<img src="img/image02.WEBP" alt="Business">
</a>
<div class="circle_hover">
성장과 전략을 담은 사업 이야기
</div>
<h3>Business</h3>
</div>
<div class="card3">
<a href="#">
<img src="img/image03.WEBP" alt="삼양people">
</a>
<div class="circle_hover">
삼양을 만드는 사람들의 이야기
</div>
<h3>삼양 <span>People</span></h3>
</div>
</div>
</section>
<section class="section_2">
<div class="brand_text">
<p>Our Brand <br>
라운드스퀘어 브랜드 이야기</p>
</div>
<div class="brand_wrap">
<div class="brand_left">
<div class="arrow_left">❮</div>
<a href="#">
<img src="img/buldak_left_01.webp" alt="samall">
</a>
<div class="arrow_right">❯</div>
<h3 class="brand_name">불닭볶음면</h3>
<p class="brand_desc">
상상 그 이상의,<br>
세상에 없던 매운맛 라면
</p>
<a href="#" class="read_more">Read More</a>
</div>
<div class="brand_right">
<a href="#">
<img src="img/buldak_left_01.webp" alt="detail">
</a>
</div>
</div>
</section>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
img{
width: 100%;
display: block;
}
body{
font-family: Arial, "맑은 고딕", sans-serif;
color: #333;
}
.menu_wrap{
width: 620px;
height: 100px;
background-color: #ff6a00;
position: absolute;
top: 0;
left: 0;
padding: 20px 30px;
}
.logo{
width: 220px;
float: left;
margin-top: 6px;
}
.company_name{
width: 240px;
float: left;
margin-top: 20px;
}
.company_name p{
font-size: 26px;
color: #fff;
font-weight: 900;
line-height: 1.2;
}
/* =========================
메인 비주얼
========================= */
.main_visual{
width: 100%;
height: 980px;
background: url("img/main.webp") no-repeat center / cover;
}
.section_1{
height: 1000px;
padding: 100px 0;
background-color: rgb(228, 230, 230);
}
.section_2{
height: 1000px;
padding: 100px 0;
background-color: rgb(228, 230, 230);
}
.card_text{
width: 1800px;
height: 150px;
margin: 0 auto;
font-size: 30px;
color: #222;
font-weight: 900;
margin-bottom: 30px;
}
.card_wrap{
width: 1800px;
height: 500px;
margin: 0 auto;
}
.card1{
width: 500px;
float: left;
margin-right: 30px;
}
.card2{
width: 500px;
float: left;
margin-right: 30px;
}
.card3{
width: 500px;
float: left;
}
.card1,.card2,.card3{
position: relative;
}
.circle_hover{
width: 400px;
height: 400px;
border-radius: 50%;
background-color: #ff6a00;
position: absolute;
top: 42px;
left: 42px;
display: none;
color: #fff;
font-size: 22px;
font-weight: bold;
text-align: center;
line-height: 400px;
}
.card1:hover .circle_hover,
.card2:hover .circle_hover,
.card3:hover .circle_hover{
display: block;
}
.brand_text{
width: 1800px;
height: 150px;
margin: 0 auto;
font-size: 30px;
color: #222;
font-weight: 900;
margin-bottom: 30px;
}
.brand_wrap{
width: 1800px;
height: 500px;
margin: 0 auto;
}
.brand_left{
width: 500px;
float: left;
margin-right: 30px;
}
.brand_right{
width: 1000px;
float: right;
}
.brand_left,.brand_right{
position: relative;
}
.card_text p,
.brand_text p{
line-height: 1.4;
}
.arrow_left{
width: 46px;
height: 46px;
border: 2px solid #bdbdbd;
border-radius: 50%;
text-align: center;
line-height: 42px;
font-size: 28px;
color: #8a8a8a;
position: absolute;
top: 200px;
left: 10px;
}
.arrow_right{
width: 46px;
height: 46px;
border: 2px solid #bdbdbd;
border-radius: 50%;
text-align: center;
line-height: 42px;
font-size: 28px;
color: #8a8a8a;
position: absolute;
top: 200px;
right: 50px;
}
.brand_right img{
width: 100%;
height: 970px;
}
</style>
</head>
<body>
<div class="main_visual">
<div class="menu_wrap">
<div class="logo">
<a href="#">
<img src="img/logo.png" alt="로고">
</a>
</div>
<div class="company_name">
<p>삼양라운드스퀘어</p>
</div>
</div>
</div>
<section class="section_1">
<div class="card_text">
<p>Inside Roundsquare <br>
라운드스퀘어 자세히 보기</p>
</div>
<div class="card_wrap">
<div class="card1">
<a href="#">
<img src="img/image01.WEBP" alt="New CI">
</a>
<div class="circle_hover">
역사와 미래가 담긴 새 얼굴
</div>
<h3>New CI</h3>
</div>
<div class="card2">
<a href="#">
<img src="img/image02.WEBP" alt="Business">
</a>
<div class="circle_hover">
성장과 전략을 담은 사업 이야기
</div>
<h3>Business</h3>
</div>
<div class="card3">
<a href="#">
<img src="img/image03.WEBP" alt="삼양people">
</a>
<div class="circle_hover">
삼양을 만드는 사람들의 이야기
</div>
<h3>삼양 <span>People</span></h3>
</div>
</div>
</section>
<section class="section_2">
<div class="brand_text">
<p>Our Brand <br>
라운드스퀘어 브랜드 이야기</p>
</div>
<div class="brand_wrap">
<div class="brand_left">
<div class="arrow_left">❮</div>
<a href="#">
<img src="img/buldak_left_01.webp" alt="samall">
</a>
<div class="arrow_right">❯</div>
<h3 class="brand_name">불닭볶음면</h3>
<p class="brand_desc">
상상 그 이상의,<br>
세상에 없던 매운맛 라면
</p>
<a href="#" class="read_more">Read More</a>
</div>
<div class="brand_right">
<a href="#">
<img src="img/buldak_left_01.webp" alt="detail">
</a>
</div>
</div>
</section>
</body>
</html>
#스타일시트 1차작업