Progate 初級編 通し模写



何も見ないで、模写した結果、ダメダメだった。

色は、macの基本ソフト digital color Meterを利用した。
このソフトを使えば、rgbが抽出できるので、それで、色をつけた。

HTMLは結構書き出せる様になった。
送信のrgbをつけないといけない
CSSの細かい部分,padding marginが全然書けない。

一応、全体的な模写.完璧を目指さずに大体できていればOK


```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progate</title>
    <link rel="stylesheet" href="./styles2.css">
    <header>
        <div class="header-wrapper">
        <div class="header-logo">Progate</div>
        <div class="header-nav">
        <ul>
            <li>プログラミングとは</li>
            <li>学べるレッスン</li>
            <li>お問い合わせ</li>
        </ul>
        </div>
        </div>
    </header>
    <main>
        <div class="contents-wrapper">
            <div class="hellow-h1">
                <h1>HELLO WORLD<span>.</span></h1>
            </div>
            <div class="welcome-h2">
                <h2>プログラミングの世界へようこそ</h2>
            </div>
            <div class="learn-h3">
                <h3>学べるレッスン</h3>
            </div>
        <div class="contents">
            <div class="contents-item">
                <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
                <p>HTML&CSS</p>
            </div>
            <div class="contents-item">
                <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
                <p>PHP</p>
            </div>
            <div class="contents-item">
                <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
                <p>Ruby</p>
            </div>
            <div class="contents-item">
                <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
                <p>Swift</p>
            </div>
        </div>
        </div>

        <div class="contact">
            <div class="contact-h3">
                <h3>お問い合わせ</h3>
            </div>
            <div class="contact-contents">
            <p>メールアドレス(必須)</p>
            <input>
            <p>お問い合わせ内容(必須)</p>
            <textarea></textarea>
            <p>※必須項目は必ずご入力ください</p>
            <input class="submit" type="submit" value="送信">
            </div>
        </div>

    </main>
    </footer>
        <div class="footer-wrapper">
        <div class="footer-logo">
            Progate
        </div>
        <div class="footer-nav">
            <ul>
                <li>会社概要</li>
                <li>採用</li>
                <li>Progate</li>
            </ul>
        </div>
        </div>
    </footer>

</head>
<body>
</body>
</html>

```


```style.css


.header-wrapper{
    padding:30px;
    height:80px;
    background-color:rgb(99,205,200);
    color:white;
}

.header-logo{
    float:left;
    font-size:40px;
    padding:20px 20px;

}

.header-nav li{
    float:left;
    list-style:none;
    padding:30px;
    margin-bottom:40px;
}

.contents-wrapper{
    padding:40px;
}

.hellow-h1{
 font-size:40px;
}

.hellow-h1 span{
    color:red;
}

.welcome-h2{
    font-size:20px;
    padding-bottom:40px;
}

.learn-h3{
    font-size:16px;
    border-bottom:2px solid gray;
    margin-bottom:20px;
}

.contents{
    height:500px;
}

.contents-item{
    float:left;
    /*ここのheight*/
    margin-right:30px;
}

.contact{
    padding:30px;
    padding-bottom:30px;
}

.contact h3{
    border-bottom:1px solid rgb(224,231,235);
}

input,textarea{
    width:400px;
    /*答え見た margin*/
    margin-top:10px;
    margin-bottom:30px;

    padding:30px;
    /*答え見た周りがマイルドになる*/
    border:1px solid rgb(224,231,235);

}
.submit{
    background-color:rgb(224,231,235);
    /*答え見た文字が薄くなる*/
    color:rgb(144,161,173);
}



.footer-wrapper{
padding:20px;
height:200px;
background-color:rgb(55,81,101);
color:white;
}

.footer-logo{
    float:left;
    padding:40px 20px;
}

.footer-nav{
    float:right;
    padding:40px;
}

.footer-nav li{
    list-style:none;
    padding-bottom:20px;
}
```