가오리의 코딩일기

세미나 2회차 전 본문

HTML+CSS+JavaScript/세미나

세미나 2회차 전

류경혜 2022. 1. 18. 18:00

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>About Me</title>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <img src="./images/halloween-profile.png" alt=" "
            style="margin:40px auto 0px; padding:0px auto">
            <h1>Jack-O'-Lantern</h1>
            <div style="color: white; background-color: rgba(0,0,0,0.7); 
            width: 400px; text-align: center; height: 110px; margin:auto;">
                A jack-o'-lantern is a carved pumpkin, turnip, 
                or other root vegetable lantern associated with Halloween.
                Its name comes from the phenomenon of a strange light flickering over peat bogs, 
                called will-o'-the-wisp or jack-o'-lantern.
            </div>
        </div>
        <div class="contents">
            <div class="section">

                <h2>Information</h2>
                <img src="./images/icon-information.png" alt=" " style="float:right;">
                <ul>
                    <li>jack@veamcamp.com</li>
                    <li>000-3234-2344</li>
                    <li>Seoul,korea</li>
                </ul>
            </div>
            <div class="section_skills">
                <h2>Skills</h2>
                <img src="./images/icon-skills.png" alt=" " style="float:right;">
                <ul>
                    <li>Photoshop</li>
                    <li>Web Front-End</li>
                    <li>Education</li>
                </ul>
            </div>
        </div>
        <div class="footer"> HAPPY HALLOWEEN </div>
    </div>
</body>
</html>

 

body{
    margin: 10px;
    padding: 0px;
    background-image: url(./images/halloween-background.gif);
}
img{ margin: auto; padding: auto; }
h1{ color: orchid; }
.header{
    background-image: url(./images/halloween-header-bg.png);
    width: 780px;
    height: 400px;
    margin:  auto;
    border: none;
    text-align: center;
}
h2{ color:#ff4500;}
ul{
    list-style-image: url(./images/icon-jack2.png);
    list-style-position: insdie;
}
li:hover{
    color: orange;
    list-style-image: url(./images/icon-jack.png);
}
.section{ 
    width: 710px; 
    height: 200px; 
    background-color: white;
    margin: auto;
    padding: 15px ;
    text-align: left;
    border: 15px solid 	#dcdcdc;
    border-bottom: 8px;
}
.section_skills{
    width: 710px; 
    height: 200px; 
    background-color: white;
    margin: auto;
    padding: 15px;
    border: 15px solid 	#dcdcdc;
    text-align: left;
}
.footer{
    width: 780px;
    margin: auto;
    padding: 2px;
    border: none;
    color: orchid;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
}
저작자표시

'HTML+CSS+JavaScript > 세미나' 카테고리의 다른 글

세미나 3회차(1)  (0) 2022.02.06
세미나 3회차 전(2)  (0) 2022.01.28
세미나 3회차 전(1)  (0) 2022.01.27
세미나 2회차  (0) 2022.01.25
세미나 1회차  (0) 2022.01.18
'HTML+CSS+JavaScript/세미나' Related Articles more