반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title> This is a Test File.</title>
<link rel="stylesheet" href="static/style.css">
<style>
.main1{
background-color:#181818;
padding:150px 70px;
color:#fff;
}
.main1 .section_sub_title{
font-size:14px;
}
.main1 .section_title{
font-size:30px;
font-weight:bold;
margin-top:15px;
margin-bottom:30px;
}
.main1 .step_itmes{
margin-top:50px;
display:flex;
justify-content:space-between;
}
.main1 .step_item{
width:20%;
transition-duration:0.2s;
}
.main1 .step_item:nth-child(2n){
margin-top:100px;
}
.main1 .step_item:hover{
opacity:0.5;
transform:translateY(40px);
}
.main1 .step_item .st_step{
font-size:18px;
margin-top:10px;
}
.main1 .step_item .st_title{
font-size:24px;
font-weight:bold;
margin-top:10px;
margin-bottom:20px;
}
.main1 .step_item .st_desc{
font-size:16px;
line-height:30px;
margin-top:30px;
}
.main1 .st_deco{
display:flex;
align-items:center;
}
.main1 .st_deco .st_circle{
width:8px;
height:8px;
background-color:#fff;
border-radius:50%;
margin-right:12px;
}
.main1 .st_deco .st_line{
width:150px;
height:1px;
background-color:#fff;
}
</style>
</head>
<body>
<div class='main1'>
<div class='section_sub_title'>made by 수지니</div>
<div class='section_title'>모각코 html/css 과정 </div>
<div class='step_itmes'>
<div class='step_item'>
<div class='st_deco'>
<div class='st_circle'></div>
<div class='st_line'></div></div>
<div class='st_step'>step1</div>
<div class='st_title'>좋아하는 유튜브 소개하기</div>
<img src="static/mongja.jpg">
<div class='st_desc'><a href="https://www.youtube.com/watch?v=A9Fw4O0dFTY" target="_blank">😆몽자 유튜브 링크</a></div>
</div>
<div class='step_item'>
<div class='st_deco'>
<div class='st_circle'></div>
<div class='st_line'></div></div>
<div class='st_step'>step2</div>
<div class='st_title'>위키 백과 만들기</div>
<div class='st_desc'>HTML, CSS 본격 시작하기!</div>
</div>
<div class='step_item'>
<div class='st_deco'>
<div class='st_circle'></div>
<div class='st_line'></div></div>
<div class='st_step'>step3</div>
<div class='st_title'>위키 백과 수정하기</div>
<div class='st_desc'>웹 폰트 적용하기</div>
</div>
<div class='step_item'>
<div class='st_deco'>
<div class='st_circle'></div>
<div class='st_line'></div></div>
<div class='st_step'>step4</div>
<div class='st_title'>웹 페이지 생성하기</div>
<div class='st_desc'>여러 방법으로 크기 적용하기</div>
</div>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Serif+KR:wght@500;700&display=swap');
div{
font-family: 'Noto Serif KR', serif;
}
반응형
'Web > 모각코' 카테고리의 다른 글
[ Visual Studio Code ] 싸이월드 페이지 만들기 - ② (2) | 2021.12.28 |
---|---|
[ Visual Studio Code ] 싸이월드 페이지 만들기 - ① (0) | 2021.12.26 |
[ Visual Studio Code ] 위키백과 웹페이지 생성 (0) | 2021.12.22 |
[ Visual Studio Code ] html 파일 만들기 - 모각코 1일차 (0) | 2021.12.21 |
[ Visual Studio Code ] 도형 만들기 (0) | 2021.12.20 |