fucca ~~~ main longstory.

’©‚ð”‚ª‚µ‚½‚çŒŽ—j“ú –²‚Ì’†‚Ì‚¢‚é‰Î—j“ú “¹‚É–À‚Á‚½…—j“ú ‚½‚Ô‚ñ–Ø—j“ú •à‚«”æ‚ê‚½‹à—j“ú ¯‚ÌŒ©‚¦‚È‚¢“y—j“ú ‚à‚¤‚·‚®I‚í‚é“ú—j“ú

Thanks title by ENAMEL

Caution

Request

No.3 okome‚³‚ñ
ƒnƒbƒs[‚È—ö‚Ì‚¨˜b‚É‡‚¤¬àƒy[ƒW‚Ì’gFƒeƒ“ƒvƒŒ[ƒg

Material

EVENTs Design - ŠÛƒŒ[ƒX‘fÞ3
ENAMEL - ŒŽ—j“ú‚©‚ç“ú—j“ú‚Ü‚Å‚ÌˆêTŠÔ

¬àˆê——“à‚ÌƒŠƒ“ƒN‚É‰ºü‚ð•t‚¯‚Ä‚¢‚Ü‚¹‚ñ‚Ì‚Å‚²’ˆÓ‚‚¾‚³‚¢BƒŠƒ“ƒN‚Ì˜b”‚ÍŽ©“®‚Å˜A”Ô‚³‚ê‚éŽd‘g‚Ý‚Æ‚È‚Á‚Ä‚¢‚Ü‚·BãŽè‚“®ì‚µ‚È‚¢ê‡‚Ícontent: counter(num);‚ðŠO‚µ‚ÄŽg—p‚µ‚Ä‚‚¾‚³‚¢B

TIPS
ƒwƒbƒ_[A’†Œ©o‚µ‚ÌƒXƒgƒ‰ƒCƒv‚ð‰©F‚É‚µ‚Ä‚¢‚Ü‚·‚ªAƒsƒ“ƒN‚É‚µ‚½‚¢ê‡‚Írgba(255, 177, 188, 0.3)‚É‚µ‚Ä‚‚¾‚³‚¢B

Source

HTML

¦ ‘SŠp”‚É‚È‚Á‚Ä‚¢‚é‚½‚ßA”¼Šp#‚É“K‹X’¼‚µ‚Ä‚‚¾‚³‚¢

”novel”

<header>
    <h1>
        <div class="icon">
            <i class="fa fa-heart" aria-hidden="true"></i>
            <i class="fa fa-heart" aria-hidden="true"></i>
            <i class="fa fa-heart" aria-hidden="true"></i>
        </div>
        fucca
        <span>~~~ main longstory.</span>
    </h1>
</header>
<div class="main">
    <p class="head">
        <a href="">name change</a>
    </p>
    <div class="list">
        ”list”
    </div>
</div>
<div class="icon">
    <i class="fa fa-heart" aria-hidden="true"></i>
    <i class="fa fa-heart" aria-hidden="true"></i>
    <i class="fa fa-heart" aria-hidden="true"></i>
</div>

‚È‚µ

<header></header>
<div class="main story">
       <div class="icon">
        <i class="fa fa-heart" aria-hidden="true"></i>
        <i class="fa fa-heart" aria-hidden="true"></i>
        <i class="fa fa-heart" aria-hidden="true"></i>
    </div>
    ”text”
    <footer>
        <p>- <strong>”title”</strong></p>
    </footer>
</div>

<header>
    <h1>
        <div class="icon">
            <i class="fa fa-heart" aria-hidden="true"></i>
            <i class="fa fa-heart" aria-hidden="true"></i>
            <i class="fa fa-heart" aria-hidden="true"></i>
        </div>
        fucca
        <span>~~~ main longstory.</span>
    </h1>
</header>
<div class="main">
    ”formStart”
    ”formInput_”name””
    ”formInput_”name1””
    ”formSubmit_Ý’è”
</div>
<div class="icon">
    <i class="fa fa-heart" aria-hidden="true"></i>
    <i class="fa fa-heart" aria-hidden="true"></i>
    <i class="fa fa-heart" aria-hidden="true"></i>
</div>

HEAD

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
    list-style-type: none;
}

.clearfix:after { 
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
}

a {
    color: #FC9D9D;
    text-decoration: none;
    transition: .4s;
}

strong {
    font-weight: bold;
}

h2 {
    padding: 0 55px;
    margin: 50px auto 25px;
    width: 100px;
    font-family: "Alice", "ƒqƒ‰ƒMƒmŠpƒS Pro", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", "Meiryo", cursive;
    text-align: center;
    font-size: 25px;
    position: relative;
    display: block;
}

h2::before, 
h2::after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 2px;
    border-top: solid 1px #8B8B8B;
    border-bottom: solid 1px #8B8B8B;
}

h2::before {
    left:0;
}

h2::after {
    right: 0;
}

h3 {
    margin: 40px 0 10px;
    font-weight: bold;
    text-transform: uppercase;
    font-weight: bold;
    font-family: "Cabin", "ƒqƒ‰ƒMƒmŠpƒS Pro", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", "Meiryo", sans-serif; 
    letter-spacing: 3px;
    padding: 4px 10px;
    background: repeating-linear-gradient(
        45deg,
        #fff,
        #fff 3px,
        rgba(255, 178, 59, 0.2) 3px,
        rgba(255, 178, 59, 0.2) 6px
    );
}

body {
    font-size: 13px;
    font-family: "Cabin", "ƒqƒ‰ƒMƒmŠpƒS Pro", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", "Meiryo", sans-serif;
    color: #5B5B5B;
    letter-spacing: 0.8px;
    line-height: 24px;
    text-align: justify;
}

header {
    font-family: "Alice", "ƒqƒ‰ƒMƒmŠpƒS Pro", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", "Meiryo", cursive;
    text-align: center;
    background: repeating-linear-gradient(
        45deg,
        #fff,
        #fff 6px,
        rgba(255, 178, 59, 0.2) 6px,
        rgba(255, 178, 59, 0.2) 12px
    );
}

header::after {
    display: block;
    content: '';
    width: 100%;
    height: 10px;
    border-top: 6px double #FFF;
}

header h1 {
    font-size: 40px;
    padding: 72px 10px 10px 10px;
    background: url(#ƒŒ[ƒX‘fÞ#)  no-repeat center 20px;
    background-size: 188px;
    height: 140px;
}

header h1 span {
    display: block;
    font-size: 12px;
    margin-top: 8px;
}

.icon {
    margin-left: 8px;
    font-size: 10px;
    letter-spacing: 6px;
    text-align: center;
}

.icon i:nth-child(odd) {
    color: #DFDFDF;
}

.icon i:nth-child(even) {
    color: #FC9D9D;
}

.more,
.main {
    max-width: 400px;
    width: 80%;
    margin: 40px auto;
}

.main .head {
    text-align: center;
}

.main .head a {
    display: inline-block;
    color: #FFF;
    background: #FC9D9D;
    border: 1px solid #FC9D9D;
    width: 150px;
    padding: 4px 10px;
    border-radius: 30px;
    font-family: "Montserrat", "ƒqƒ‰ƒMƒmŠpƒS Pro", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", "Meiryo", sans-serif; 
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.main .head a:hover {
    background: #FFF;
    color: #FC9D9D;
}

.main .list {
    margin: 30px 0;
    padding: 30px 0;
    border-top: 1px dashed #E9E9E9;
    border-bottom: 1px dashed #E9E9E9;
}

.main .list a {
    counter-increment: num;
    color: #5B5B5B;
    font-size: 12px;
    letter-spacing: 1px;
}

.main .list a::before {
    font-family: "Alice", "ƒqƒ‰ƒMƒmŠpƒS Pro", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", "Meiryo", cursive;
    content: counter(num);
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #FFF;
    background: #FC9D9D;
    border-radius: 3px;
    margin-right: 8px;
}

.main .list a:nth-child(odd)::before {
    background: #DDD;
}

.main .list a::after {
    display: block;
    height: 5px;
    content: '';
}

.main .list a:hover {
    color: #CCC;
}

.story footer {
    padding-top: 20px;
    border-top: 1px dashed #E9E9E9;
    text-align: right;
}

.story p {
    letter-spacing: 0;
    margin-bottom: 20px;
}

.story .icon {
    margin-bottom: 30px;
}

form {
    text-align: center;
    margin-bottom: 30px;
}

form br {
    display: none;
}

input[type=submit],
input[type=text] {
    display: inline-block;
    color: #5B5B5B;
    background: #EFEFEF;
    border: none;
    width: 150px;
    padding: 3px 10px;
    border-radius: 30px;
    font-family: "Montserrat", "ƒqƒ‰ƒMƒmŠpƒS Pro", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", "Meiryo", sans-serif; 
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    width: 120px;
}

form input[type=submit] {
    color: #FFF;
    background: #FC9D9D;
    border: 1px solid #FC9D9D;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
</style>

u#ƒGƒv‚ÌBL¬à‚ð“Ç‚Þ
BL¬à BLove