|
<!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="style.css">
</head>
<body>
<div class="header">IN'O</div>
<div class="main-img"></div>
<div class="description">
<div>
<p>Portfolio</p>
<p>Make Hardware Soft</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also</p>
</div>
</div>
<div class="sub-img1"></div>
<div class="sub-img2">
<a href="#">VIEW MORE</a>
</div>
<div class="sub-img3"></div>
</body>
</html>
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}
div{
width: 100%;
}
.header{
height: 60px;
background-color: rgb(100, 100, 100);
color: white;
font-size: 1.5em;
line-height: 60px;
vertical-align: middle;
padding-left: 40px;
}
/* media 쿼리를 이용해 바꿀 내용 여기서부터 시작~!! */
.main-img{
height: 300px;
background-image: url(images/notebook.jpg);
background-size: cover;
background-position: center center;
}
.description{
height: 300px;
background-color: white;
padding: 0 30px;
line-height: 300px;
}
.description>div{
display: inline-block;
line-height: normal;
vertical-align: middle;
}
.description>div>p:first-child{
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
color: rgb(75, 75, 75);
}
.description>div>p:nth-child(2){
font-size: 20px;
font-weight: bold;
margin-bottom: 30px;
color: black;
}
.description>div>p:last-child{
font-size: 16px;
color: darkgrey;
}
.sub-img1{
height: 350px;
background-image: url(images/monitor.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.sub-img2{
height: 200px;
background-image: url(images/keyboard.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
line-height: 200px;
text-align: center;
padding: 0;
}
.sub-img2>a{
display: inline-block;
line-height: normal;
vertical-align: middle;
padding: 10px 40px;
border: 4px solid white;
font-size: 16px;
font-weight: bold;
text-decoration-line:none ;
color: white;
margin: 0;
}
.sub-img3{
height: 200px;
background-image: url(images/mouse.jpg);
background-size: cover;
background-position: center center;
}
@media screen and (min-width: 500px) {
.main-img{
height: 500px;
background-image: url(images/notebook.jpg);
background-size: cover;
background-position: center center;
}
.description{
height: 300px;
background-color: white;
padding: 0 60px;
line-height: 300px;
}
.description>div{
display: inline-block;
line-height: normal;
vertical-align: middle;
}
.description>div>p:first-child{
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
color: rgb(75, 75, 75);
}
.description>div>p:nth-child(2){
font-size: 20px;
font-weight: bold;
margin-bottom: 30px;
color: black;
}
.description>div>p:last-child{
font-size: 16px;
color: darkgrey;
}
.sub-img1{
width: 50%;
height: 300px;
float: left;
background-image: url(images/monitor.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.sub-img2{
width: 50%;
height: 150px;
float: right;
background-image: url(images/keyboard.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
line-height: 150px;
text-align: center;
padding: 0;
}
.sub-img2>a{
display: inline-block;
line-height: normal;
vertical-align: middle;
padding: 10px 40px;
border: 4px solid white;
font-size: 16px;
font-weight: bold;
text-decoration-line:none ;
color: white;
margin: 0;
}
.sub-img3{
width: 50%;
height: 150px;
float: right;
background-image: url(images/mouse.jpg);
background-size: cover;
background-position: center center;
}
}
@media screen and (min-width: 800px) {
.main-img{
float: left;
width: 50%;
height: 600px;
background-image: url(images/notebook.jpg);
background-size: cover;
background-position: center center;
}
.description{
width: 50%;
height: 300px;
float: right;
background-color: white;
padding: 0 30px;
line-height: 300px;
}
.description>div{
display: inline-block;
line-height: normal;
vertical-align: middle;
}
.description>div>p:first-child{
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
color: rgb(75, 75, 75);
}
.description>div>p:nth-child(2){
font-size: 20px;
font-weight: bold;
margin-bottom: 30px;
color: black;
}
.description>div>p:last-child{
font-size: 16px;
color: darkgrey;
}
.sub-img1{
float: left;
width: 25%;
height: 300px;
background-image: url(images/monitor.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.sub-img2{
float: right;
width: 25%;
height: 150px;
background-image: url(images/keyboard.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
line-height: 150px;
text-align: center;
padding: 0;
}
.sub-img2>a{
display: inline-block;
line-height: normal;
vertical-align: middle;
padding: 10px 40px;
border: 4px solid white;
font-size: 16px;
font-weight: bold;
text-decoration-line:none ;
color: white;
margin: 0;
}
.sub-img3{
float: right;
width: 25%;
height: 150px;
background-image: url(images/mouse.jpg);
background-size: cover;
background-position: center center;
}
}
|
'JS > JS 공부' 카테고리의 다른 글
| [JS] summernote : 작성창 가져오는 사이트! (0) | 2023.04.25 |
|---|---|
| [JS] sweet alert : alret창을 예쁘게 띄우는 사이트! (0) | 2023.04.25 |
| [JS] markup validation service 오류검사사이트! (0) | 2023.04.25 |
| [JS] 정규식 (정규표현식 사용 패턴) (0) | 2023.04.25 |
| [JS] key_event 키보드에서 입력하는 값 구하기 (0) | 2023.04.24 |