포트폴리오 템플릿(소스 코드) Html , Css

28224 단어 javascripthtmlcsswebdev
안녕하세요, 잘 지내시길 바랍니다. 오늘은 html css로 템플릿을 디자인했습니다. 이 템플릿을 사용하고 즐기시기 바랍니다.

HTML :

<!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="style.css">
    <title>Your Title</title>
</head>
<body>
    <nav>
        <div class="Logo-text">
            <h1><span>name </span>Nickname</h1>
        </div>
            <a href="#" class="up">Home</a>
            <a href="#">Skills</a>
            <a href="#">Contact</a>
            <a href="#">About</a>
        <div class="logo">
            <img src="resized_logo_UQww2soKuUsjaOGNB38o.png">
        </div>
    </nav>

    <div class="page1">
        <h1>Your Name</h1>
        <h4>You can write your info here.</h4>
        <p>You can see My dev to channel 👇</p>
        <br>
        <br>
        <br>
        <br>
        <a href="#">View</a>
    </div>
    <div class="page2">
        <div class="texts">
            <h1>Your Name</h1>
            <h3>Your job</h3>
            <p>Lorem ipsum dolor sit amet. In voluptas exercitationem et quia consequatur a distinctio omnis est pariatur quia eos aperiam quibusdam qui neque nobis. Ab fugiat velit ut nesciunt explicabo id libero fuga aut rerum consequuntur et similique explicabo. Et adipisci voluptas sed rerum sequi ut sint aspernatur. Et voluptatem consequatur in aliquid odit hic consequatur voluptatem.

                At culpa tempora est veritatis nihil nam voluptatem fugit. Id ipsa minima ex molestiae consequatur aut corporis quia qui pariatur rerum! Vel velit dicta ut voluptatum ipsum rem voluptatem enim quo accusamus explicabo! Sed tenetur quis sed vitae tenetur rem recusandae repellat.

                At quia beatae sit nihil exercitationem qui rerum vitae aut impedit iste aut distinctio aperiam non unde accusantium ea nobis magni. Eum doloremque nostrum qui labore quas sit eligendi libero.</p>
        </div>
        <img src="resized_logo_UQww2soKuUsjaOGNB38o.png">
    </div>
    <div class="page3">
        <div class="cards">
            <div class="card1" href="https://en.wikipedia.org/wiki/Python_(programming_language)">
                <br>
                <br>
                <br>
                <br>
                <br>
                <a href="#">Your Skill</a>
            </div>

            <div class="card1">
                <br>
                <br>
                <br>
                <br>
                <br>
                <a href="#">Your Skill</a>
            </div>

            <div class="card1">
                <br>
                <br>
                <br>
                <br>
                <br>
                <a href="#">Your Skill</a>
            </div>
        </div>
    </div>



    <div class="page-contact">
        <div class="contact-test">
            <h1 class="c">Contact</h1>
        </div>

        <div class="ct1">
         <h2>My Email:</h1>
         <br>
         <br>
         <h2 class="ph">Phone number:</h2>
         <br>
         <br>
         <h2>Git hub:</h2>
         <br>
         <br>
         <h2>Instagram:</h2>
        </div>

        <div class="page-contact-text">
            <h2>Your Gmail</h2>
            <br>
            <br>
            <h2>Your phone number</h2>
            <br>
            <br>
            <h2>Your id</h2>
            <br>
            <br>
            <h2>Your Id</h2>
        </div>
    </div>
    <br>
    <footer>
        <h1>Copyright ⎜ 2022</h1>
    </footer>
</body>
</html>


CSS :

*{
    margin: 0;
    padding: 0;
}

body{
    background-color:cornsilk;
    font-family:Arial, Helvetica, sans-serif;
}

nav{
    top:0;
    position:fixed;
    width: 100%;
    display:flex;
    background-color:antiquewhite;
}

nav a{
    margin:30px;
    text-decoration:none;
    color:black;
}

nav a:hover{
    transition: 2s;
    color:dodgerblue;
}
.Logo-text{
    margin-top: 25px;
    margin-left: 15px;
    color:black;
}

.Logo-text span{
    color:red;
}
.up{
    margin-left: 395px;
}


.logo img{
    width: 18%;
    margin-left:335px;
    height: 70px;
    margin-top:5px;
}

.page1 h1{
    text-align:center;
    margin-top:200px;
    font-size: 60px;
}

.page1 h4{
    text-align: center;
    margin-top: 60px;
    font-size: 20px;
}


.page1 p{
    text-align: center;
    margin-top: 60px;
}

.page1 a{
    text-decoration: none;
    color: white;
    background-color: black;
    padding:10px;
    border-radius: 12px;
    padding-left: 25px;
    padding-right: 25px;
    margin-left:670px;
    margin-top: 80px;
}

.page1 a:hover{
    transition: 2s;
    color: black;
    background-color:grey;
}

.card1{
    background-color:ivory;
    width: 55%;
    height:220px;
    border-radius: 12px;
    margin-left:120px;
    margin-top:120px;
}

.card1:hover{
    transition: 1s;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}


.card1 a{
    text-decoration: none;
    text-align: center;
    margin-left: 65px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color:black;
    font-size: 30px;
}


.cards{
    display: grid;
    grid-template-columns: auto auto auto;
}


.hi{
    color:red;
    text-align: center;
    margin-left: 600px;
}


.page2{
    margin-top:200px;
    display: flex;
}

.page2 img{
    width: 200%;
    height: 500px;
    border-radius: 21px;
    margin-right: 105px;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.page2 h1{
    text-align: center;
}


.page2 h3{
    text-align: center;
    color:gray;
    margin-top: 20px;
}


.page2 p{
    text-align: left;
    margin-top: 60px;
    width: 50%;
    margin-left: 205px;
}

.page-contact{
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    margin-top: 120px;
    display: flex;
    width:55%;
    background-color:ivory;
    border-radius: 20px;
    height: 400px;
    margin-left:310px;
}

.c{
    text-align: center;
    width: 780px;
}

.page-contact-text{
    margin-top: 95px;
    margin-left: 300px;
}

.ct1{
    margin-top: 95px;
    margin-left: -710px;
}


.ph{
    width: 120%;
}



footer{
    width: 100%;
    background-color:rgb(243, 224, 195);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}


footer h1{
    font-size:20px;
    text-align: center;
}



.page-contact:hover{
    transition: 2s;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
C++의 오류 유형 및 인포그래픽 요약
PHP로 AWS Cognito JWT 디코딩 및 검증

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage