Ambitious

Web/모각코

[ Visual Studio Code ] 웹 페이지 생성

곽수진 2021. 12. 24. 01:45
반응형
<!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

'Web/모각코'의 다른글

  • 현재글[ Visual Studio Code ] 웹 페이지 생성

관련글

티스토리툴바