반응형

https://filezilla-project.org/download.php?type=client 

 

Download FileZilla Client for Windows (64bit x86)

Download FileZilla Client for Windows (64bit x86) The latest stable version of FileZilla Client is 3.57.0 Please select the file appropriate for your platform below. Please select your edition of FileZilla Client FileZilla FileZilla with manual FileZilla P

filezilla-project.org

 

파일질라 사이트 에서 파일질라 다운로드 

 

파일질라에서 포트폴리오 사이트 올릴거 파일질라에다 넣기 

 

그전에 닷홈에서 무료호스트 받는걸 추천! 

 

http://mls0000.dothome.co.kr/

 

Document

Hello I'm SeokHuyn Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor sed id aspernatur ullam deleniti neque ea necessitatibus quos a, ipsum sapiente qui! Cupiditate optio nam, sed ut fugiat numquam perferendis. Lorem ipsum dolor sit amet, cons

mls0000.dothome.co.kr

 

이렇게 호스팅으로 입력 해주면 db없는 사이트연동 가능

반응형
반응형

 

지금 현재 만들고 있는 사이트 이다

 

학원에서 css를 배우고 만들어 보았는데 갑상선 수술때문에 언제 만들지..? 흠 

 

혹시 몰라 코드공유를 해본다.

 

<!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">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
        font-family: 'Nanum Pen Script', cursive;
    }
   
    ul{
        list-style: none;
    }

    a{
        text-decoration: none;
        color: black;
    }

    nav{
        position: fixed;
        width: 100%;
        height: 100px;
        background: #acdbc9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        top: 0;

        left: 0;
        right: 0;

    }

    .logo{
        font-size: 40px;
       
    }
    .navbar_manu{
        display: flex;
        padding: 0;
        margin-left: 20px;
    }

    .navbar_manu li{
        padding: 8px 25px;
        font-size: 30px;
    }
   
    .icon{
        display: flex;
    }
   
    .icon li{
        padding: 10px;
        font-size: 30px;
    }

    .logos{
        color: white;
    }

    .navbar_manu li:hover{
        background: yellowgreen;
        border-radius: 30%;
        transition: 0.5s;
    }

    /* 이미지 */

    /* first */

    .frist{
        padding-top: 150px;
        width: 100%;
        height: 600px;
    }

    .img{
        background: url(KakaoTalk_20220101_210543362.jpg);
        width: 300px;
        height: 300px;
        background-size: cover;
        border-radius: 50%;
        margin: 0 auto;
        margin-top: 30px;
        text-align: center;
    }

    /* about */

    .about{
        width: 100%;
        height: 900px;
        background: #d8e8c2;
    }

    .about_me h1{
        text-align: center;
        padding-bottom:  20px;
        padding-top: 50px;
        font-size: 40px;
    }

    .about_me p{
        text-align: center;
        font-size: 20px;

    }

    .about_me{
        width: 600px;
        height: 300px;
        margin: 0 auto;
        padding-bottom: 30px;
    }
    .about_Skils{
        display: flex;
        width: 700px;
        margin: 0 auto;
    }

    .about_job2{
        margin : 0 auto;
       
    }
   

    .about_img{
        margin-top: 30px;
        background: white;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        text-align: center;
        margin-bottom: 30px;
        float: left;
    }

    .about_img i{
        padding: 30px;
        font-size: 80px;
    }

    .my_Jobs{
        margin-top: 50px;
        font-size: 20px;
        font-weight: bold;
        margin-left: 20px;
    }

    /* skills */
   
    .skills{
        width: 100%;
        height: 800px;
        background: #fdd2b5;
    }

    .skills_intro{
        width: 600px;
        height: 300px;
        margin: 0 auto;
    }

    .skills_intro  h1{
        padding-top: 60px;
        text-align: center;
        font-size: 40px;
        margin: 0px;
    }

    .skills_intro h2{
        text-align: center;
        font-size: 30px;
    }

    .skills_intro p {
        text-align: center;
        font-size: 20px;
    }

    .skillset{
        width: 800px;
        background: grey;
        display: block;
        margin: 0 auto;
    }

    .skillsset__left{
       
    }
   

    /* my work */

    .main_box{
        width: 100%;
        height: 325px;
        margin: 0 auto;
        border: 3px double black;
    }

    .frist_box{
        width: 100%;
        height: 150px;
    }


    .box {
        width: 220px;
        height: 140px;
        margin: 10px;
        margin-right: 18px;
        background: url(/CSS/7.배경/images/sky.jpg);
        background-size: 100%;
        float: left;
        border: 1px solid black;
    }

    .second_box{
        width: 100%;
        height: 150px;
    }

    .box2{
        width: 220px;
        height: 140px;
        margin: 10px;
        margin-right: 18px;
        background: url(/CSS/7.배경/images/sky.jpg);
        background-size: 100%;
        float: left;
        border: 1px solid black;
    }
    /* footer */
    footer{
        background: #acdbc9;
        width: 100%;
        height: 200px;
        text-align: center;
    }

    .name{
        display: inline-block;
        margin: 0 auto;
    }

    .name p{
        text-align: center;
        font-size: 30px;
        font-weight: bold;
    }

    .footer_icon{
    }
   
    .footer_icon li{
        margin: 0 3px;
        font-size: 30px;
    }


</style>
<body>


<!-- navbar -->

    <nav>
        <div class="logo">
            <i class="fas fa-dragon logos"></i>  
            <a href="#">Dargon</a>
        </div>
        <!-- 일렬 정렬을 위해 div 태그 대신 ul태그 -->
        <ul class="navbar_manu">
           <li><a href="#home">Home</a></li>
           <li><a href="#about">About</a></li>
           <li><a href="#skills">Skills</a></li>
           <li><a href="#"> </a>My Work</li>
           <li><a href="#">Content</a></li>
        </ul>

        <i class="fas fa-caret-square-down"></i>

        <ul class="icon">
            <li><i class="fab fa-facebook"></i></li>
            <li><i class="fab fa-instagram-square"></i></li>
        </ul>
    </nav>


    <!-- home -->
    <section id="home">
        <div class="frist">
            <div class="img">
            </div>

            <p style="font-weight: bold; font-size: 30px; text-align: center;">Hello I'm SeokHuyn</p>

            <p style="font-size: 20px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor sed id aspernatur ullam deleniti neque ea necessitatibus quos a, ipsum sapiente qui! Cupiditate optio nam, sed ut fugiat numquam perferendis.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod beatae at laboriosam officia sint, dolore ipsa eum ipsum voluptate non ex culpa doloribus cum tempore provident illum soluta, architecto magnam.
            </p>
        </div>
    </section>

    <!-- about -->

    <section class="about" id="about">  
        <div class="about_me">
            <h1>About me</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis aperiam veritatis totam unde beatae quos vel, quo ab obcaecati consectetur hic ipsa culpa repudiandae praesentium sapiente rerum expedita fugit atque?
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed nobis reprehenderit delectus a consequuntur dolorem incidunt suscipit quibusdam aperiam omnis vitae ipsa possimus iste, dicta iure asperiores ea, illum deleniti!
            </p>
        </div>

        <div class="about_Skils">
            <div class="about_job1">
                <div class="about_img">
                    <i class="fab fa-html5"></i>
                </div>
                <h3 style="text-align: center;">Front end</h3>
                <p style="text-align: center;">  프론트 엔드 스킬 들어갈꺼임</p>
            </div>

            <div class="about_job2">
                <div class="about_img">
                    <i class="fas fa-server"></i>
                 </div>
                 <h3 style="text-align: center;">Back end</h3>
                 <p style="text-align: center;">  프론트 엔드 스킬 들어갈꺼임</p>
            </div>

            <div class="about_job3">
                <div class="about_img">
                    <i class="fas fa-window-restore"></i>
                </div>
                <h3 style="text-align: center;">Other</h3>
                <p style="text-align: center;">  프론트 엔드 스킬 들어갈꺼임</p>
            </div>
        </div>

   
        <div class="my_Jobs">
            <div >
                <div>학교이미지</div>
                <p>전공 컴퓨터 공학 재학기간 2021.08.01 ~ now (3학년)</p>
            </div>

            <div>
                <div>아드리엘 사진</div>
                <p>전공 컴퓨터 공학 재학기간 2021.08.01 ~ now (3학년)</p>
            </div>
        </div>
    </section>


    <!-- skills -->

    <section id="skills" class="skills">
        <div class="skills_intro">
            <h1>Skills</h1>
            <h2>skiils & Attributes</h2>
            <p class="skills__discrition">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis quasi enim laudantium, sit ea blanditiis officia sequi, delectus eum, reprehenderit hic laborum consectetur velit itaque tempore nulla? Deserunt, incidunt fugiat.
            </p>
        </div>
        <div class="skillset">
            <div class="skillsset__left">
                <h3 class="skillset__tittle">Skills</h3>
                <div class="skill">
                    <div class="skills__description">
                        <span>HTML</span>
                        <span>60%</span>
                    </div>
                    <div class="skills__bar">
                        <div class="skills__value"></div>
                    </div>
                </div>
            </div>
            <div class="skill">
                <div class="skills__description">
                    <span>css</span>
                    <span>60%</span>
                </div>
                <div class="skills__bar">
                    <div class="skills__value"></div>
                </div>
            </div>
            <div class="skill">
                <div class="skills__description">
                    <span>JavaScript</span>
                    <span>60%</span>
                </div>
                <div class="skills__bar">
                    <div class="skills__value"></div>
                </div>
            </div>
            <div class="skillset__right">
                <div class="tools">
                    <h3 class="skillset__tittle">tools</h3>
                    <ul class="tools__list">
                        <li><span>비주얼 스튜디오 코드</span></li>
                        <li><span>아톰</span></li>
                        <li><span>이클립스</span></li>
                    </ul>
                </div>
            </div>
            <div class="etc">
                <h3 class="skillset__title">Etc</h3>
                <ul class="etc__list">
                    <li><span>Git</span></li>
                    <li><span>Git</span></li>
                    <li><span>Git</span></li>
                </ul>
            </div>
        </div>
    </section>
        </section>
    <section class="my_work">
        <h1>My work</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nisi voluptatibus accusamus labore cumque eos eaque nobis autem impedit magnam, veritatis modi reiciendis accusantium libero error quod, dolor est. Corrupti.</p>

        <div class="main_box">
            <div class="first_box">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
            </div>
            <div class="second_box">
               <div class="box2"></div>
               <div class="box2"></div>
               <div class="box2"></div>
               <div class="box2"></div>
            </div>
        </div>
    </section>
       
    <footer>
        <div class="name">
            <p>mls0000@naver.com</p>
            <p>Moon Seok Hyun</p>
            <p>2021.12.31 <i class="fab fa-facebook"></i> <i class="fab fa-instagram-square"></i> </p>
        </div>
    </footer>
</body>
</html>
<script>

    $('a').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({scrollTop:$(this.hash).offset().top}, 300)
    })


</script>
반응형

+ Recent posts