반응형
<!DOCTYPE html>
<html>
<head>
<title> This is a Test File.</title>
<link rel="stylesheet" href="./style.css">
<style>
.main1{
background-color:#181818;
padding:200px 40px;
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:hover{
opacity:0.5;
transform:translateY(40px);
}
.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;
}
.main1 .step_item .st_step{
font-size:18px;
margin-top:10px;
}
.main1 .step_item .st_title{
font-size:20px;
font-weight:bold;
margin-top:10px;
margin-bottom:30px;
}
.main1 .step_item .st_desc{
font-size:16px;
line-height:30px;
margin-top:30px;
}
</style>
</head>
<body>
<div class='main1'>
<div class='section_sub_title'>made by 수지니</div>
<div class='section_title'>모각코 html/css 과정</div>
<div class='step_items'>
<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>
</div>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&display=swap');
div{
font-family: 'Noto Serif KR', serif;
}
반응형
'Web > 모각코' 카테고리의 다른 글
| [ Visual Studio Code ] 웹 페이지 생성 (0) | 2021.12.24 |
|---|---|
| [ Visual Studio Code ] 위키백과 웹페이지 생성 (0) | 2021.12.22 |
| [ Visual Studio Code ] 도형 만들기 (0) | 2021.12.20 |
| [ Visual Studio Code ] 텍스트 색 각자 다르게 설정하기 (0) | 2021.12.19 |
| [ Visual Studio Code ] 태그 정리 (0) | 2021.12.18 |