1) indigo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./indigo_ex.css">
</head>
<body>
<div id="wrap">
<header>
<h1>INDIGO</h1>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">WE ARE</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
<!-- <div class="mobile">
<span></span>
<span></span>
<span></span>
</div> -->
</header>
<div id="container">
<!-- 비쥬얼영역 -->
<section id="visual">
<img src="images/p-images/slide01.jpg" alt="">
</section>
<!-- 비쥬얼영역 /-->
<!-- WE ARE영역 -->
<section class="inner_con" id="weare">
<div class="title">
<h2>WE ARE</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
<ul>
<li>
<img src="images/s-images/promo01.png" alt="">
<h3>HOME</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
<li>
<img src="images/s-images/promo02.png" alt="">
<h3>WE ARE</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
<li>
<img src="images/s-images/promo03.png" alt="">
<h3>WORK</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
<li>
<img src="images/s-images/promo04.png" alt="">
<h3>BLOG</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
</ul>
</section>
<!-- WE ARE영역 /-->
<!-- WORK영역 -->
<section id="work">
<div class="title">
<h2>WORK</h2>
</div>
<ul>
<li>
<img src="images/p-images/work01.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work02.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work03.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work04.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work05.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work06.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work07.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work08.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
</ul>
</section>
<!-- WORK영역 /-->
<!-- BLOG영역 -->
<section class="inner_con" id="blog">
<div class="title">
<h2>BLOG</h2>
</div>
<ul>
<li>
<img src="images/p-images/blog01.jpg" alt="">
<p>
OCT 30.2016<br/>
There are many variations of passages of Lorem Ipsum
</p>
</li>
<li>
<img src="images/p-images/blog02.jpg" alt="">
<p>
OCT 30.2016<br/>
There are many variations of passages of Lorem Ipsum
</p>
</li>
<li>
<img src="images/p-images/blog03.jpg" alt="">
<p>
OCT 30.2016<br/>
There are many variations of passages of Lorem Ipsum
</p>
</li>
</ul>
</section>
<section class="inner_con" id="contact">
<div class="title">
<h2>CONTACT</h2>
</div>
<div id="formdiv">
<form action="message.php" method="post">
<div id="inputdiv">
<input type="text" name="username" placeholder="name">
<input type="text" name="usereamil" placeholder="email">
<input type="text" name="useraddr" placeholder="address">
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
<button type="submit">send me</button>
</form>
</div>
</section>
<!-- BLOG영역 /-->
</div>
<footer>INDIGO</footer>
</div>
</body>
</html>2) indigo.css(self)
* { margin: 0; padding: 0; box-sizing: border-box;}
a { text-decoration: none; color: inherit;}
li { list-style: none;}
#wrap {
width: 100%;
/* max-width: 1200px; */
margin: 0 auto;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
nav ul {
display: flex;
}
nav li {
padding: 20px;
}
#visual img {
width: 100%;
}
.inner_con {
width: 1200px;
margin: 0 auto;
}
#weare .title {
display: flex;
padding: 80px 0;
align-items: center;
justify-content: space-between;
}
#weare h2 {
width: 30%;
color: #3f51b5;
font-size: 40px;
border-right: 4px solid #ccc;
line-height: 30px;
/* text-align: center; */
}
.title p {
width: 70%;
padding-left: 30px;
}
.inner_con ul {
display: flex;
}
.inner_con ul li img {
width: 25%;
}
.inner_con ul li {
width: 20%;
text-align: center;
}
#weare ul li:not(:last-child) {
margin-right: 6.66%;
}
.inner_con ul li h3 {
padding: 20px 0;
color: #3f51b5;
}
#work h2 ,#blog h2, #contact h2 {
color: #3f51b5;
font-size: 40px;
}
#work .title {
width: 1200px;
margin: 0 auto;
padding-top: 150px;
padding-bottom: 30px;
}
#work ul {
display: flex;
flex-wrap: wrap;
}
#work li img {
width: 100%;
vertical-align: top;
}
#work li {
width: 25%;
position: relative;
overflow: hidden;
}
.bluebg {
width: 100%;
height: 100%;
position: absolute;
transition: 0.5s;
}
#work li:hover .bluebg {
background-color: rgba(90, 90, 248, 0.5);
top: 0;
}
.bluebg div {
padding: 60px;
font-size: 14px;
position: absolute;
transition: 0.5s;
color: #fff;
opacity: 0;
top: -80%;
}
#work li:hover .bluebg div {
top: 0;
opacity: 1;
}
#blog {
display: flex;
padding: 100px 0;
justify-content: space-between;
}
#blog ul {
width: 70%;
}
#blog ul img {
width: 100%;
}
#blog ul li {
width: 33%;
text-align: left;
}
#blog ul li:not(:last-child) {
margin-right: 3%;
}
#contact {
display: flex;
justify-content: space-between;
}
#contact h2 {
width: 30%;
}
#formdiv button {
background-color: #3f51b5;
color: #fff;
padding: 15px 30px;
float: right;
}
footer {
text-align: center;
padding-top: 60px;
padding-bottom: 20px;
}
#inputdiv {
}
3) indigo.css(teach)
* { margin: 0; padding: 0; box-sizing: border-box;}
a { text-decoration: none; color: inherit;}
li { list-style: none;}
img { border: 0; vertical-align: top;}
.inner_con {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
body {
font-family: '나눔 고딕', sans-serif;
font-size: 14px;
line-height: 1.6;
color: #2d2d2d;
}
header {
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
padding-left: 20px;
}
.mobile {
display: none;
}
header ul {
display: flex;
}
header li {
padding: 0 20px;
}
img { width: 100%;}
.title {
display: flex;
padding: 30px 0;
align-items: center;
}
.title h2 {
color: #3f51b5;
font-size: 36px;
}
#weare .title h2 {
width: 30%;
position: relative;
}
#weare .title p {
width: 70%;
}
#weare .title h2::after {
content: "";
display: block;
width: 3px;
height: 30px;
background-color: #ccc;
position: absolute;
top: 15px;
right: 50px;
}
#weare ul {
display: flex;
}
#weare ul li {
width: 25%;
text-align: center;
}
#weare ul li img {
height: 60px;
width: auto;
}
#weare h3 {
padding: 30px;
color: #3f51b5;
}
section:not(#visual) {
padding: 50px 0;
}
#work ul {
display: flex;
flex-wrap: wrap;
}
#work ul li {
width: 25%;
position: relative;
overflow: hidden;
}
.bluebg {
position: absolute;
width: 100%; /* absolute는 크기 지정해줘야 함! */
height: 100%; /* absolute는 크기 지정해줘야 함! */
top: 0;
left: 0;
background-color: rgba(63, 81, 171, 0); /* 배경색만 투명하게 하기 */
color: #fff;
transition: 0.5s;
}
.bluebg h3 {
position: absolute;
top: -100px;
left: 50px;
transition: 0.5s;
}
.bluebg p {
position: absolute;
top: -70px;
left: 50px;
transition: 0.5s;
}
#work ul li:hover .bluebg h3 {
top: 50px;
}
#work ul li:hover .bluebg p {
top: 80px;
}
#work ul li:hover .bluebg {
background-color: rgba(63, 81, 171, 0.5);
}
#blog {
display: flex;
align-items: flex-start;
}
#blog .title {
width: 35%;
}
#blog ul {
width: 65%;
display: flex;
justify-content: space-between;
}
#blog ul li {
width: 32.5%;
}
#contact {
display: flex;
align-items: flex-start;
}
#contact .title {
width: 35%;
}
#contact #formdiv {
width: 65%;
}
#inputdiv {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
#inputdiv input {
width: 45%;
line-height: 60px;
border: none;
border-bottom: 1px solid #ccc;
outline: none;
}
#inputdiv textarea {
width: 45%;
border: none;
border-bottom: 1px solid #ccc;
outline: none;
height: 180px;
}
button {
width: 160px;
height: 60px;
border: none;
outline: none;
background-color: #3f51b5;
color: #fff;
float: right;
}
footer {
text-align: center;
padding: 40px;
color: #3f51b5;
}
'노력이 좋아서' 카테고리의 다른 글
| <step21>'css_갤럭시 홈페이지 따라하기' (0) | 2022.04.18 |
|---|---|
| <step20>'css_반응형_media' (0) | 2022.04.15 |
| <step19>'css_flex' (0) | 2022.04.14 |
| <step18>'css_hover,position_실습' (0) | 2022.04.13 |
| <step17>'css_position' (0) | 2022.04.12 |