Bootstrapを使わないでJumbotronを実装する

はじめに

cssの勉強のためにBootstrapを使わずにJumbotronを実装してみます。

html

    <nav class="nav">
        <ul class="nav-menu">
            <li class="nav-child">SITE-LOGO</li>
            <li class="nav-child">このサイトについて</li>
            <li class="nav-child">ログイン</li>
            <li class="nav-child">会員登録</li>
        </ul>
    </nav>
    <header class="jumbotron">
        <h1 class="jumbotron-title">JumboTron</h1>
        <p class="jumbotron-msg">
            これはJumboTronです。CSSで実装しています。<br> CSSの勉強のために自前で実装していますが、普段はBootStrapを使えばいいと思います。
        </p>
        <a href="#" class="btn btn-primary">JumboTronへGo!!</a>
    </header>

CSS

/** ノーマライズ **/

body {
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

body,
ul,
li,
h1,
h2,
p,
a {
    margin: 0px;
    padding: 0px;
    font-weight: normal;
    line-height: 1em;
}


/** ナビゲーション **/
.nav {
    height: 50px;
    background-color: darkgray;
    padding: 0 20px;

    color: white;
    font-size: 1.2em;
}

.nav-menu {
    height: 50px;
    list-style: none;
    display: flex;
    align-items: center;
}

.nav-child {
    margin-left: 30px;
}

.nav-menu .nav-child:first-child {
    font-size: 1.5em;
    margin-left: 0px;
    margin-right: auto;
}

/** jumbotron **/
.jumbotron {
    background-color: #e9ecef;
    height: 300px;
    padding: 70px 150px 140px 150px;
}

.jumbotron-title {
    font-size: 4em;
    line-height: 1.5em;
}

.jumbotron-msg {
    line-height: 2em;
    margin-bottom: 60px;
}

/** ぼたん **/
.btn {
    font-weight: bold;
    display: inline-block;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 5px;
    border-style: solid;

    border-color: rgb(135, 121, 244);
    color: rgb(135, 121, 244);
}

.btn-primary {
    border-style: none;
    background-color: rgb(135, 121, 244);
    color: white;
}

出来上がりイメージ

以上です。