NINA

Information

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, provident libero. Error rerum, architecto id dolorum in laudantium dignissimos neque accusamus hic doloribus, dolorem mollitia iure optio maxime cumque veritatis.

spanで文字色
markでマーカー
strongで重要事項
セクション内リンク

Source code

Photo by Taylor Simpson
modelimage

Photo by taylor hernandez
20220818公開

/* Template & Designed by Towako. */
/* https://ninawas.me */

/* ウェブフォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=M+PLUS+1&display=swap');

/* 全体に適用する */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'M PLUS 1', sans-serif;
    font-weight: normal;
}

/* 共通 */
:root {
    --en-font: 'Caveat', 'M PLUS 1', sans-serif;
    --color: #f57382;
    --color2: #fff352;
    --color3: #003f8e;
    --dark-color: #888;
    --light-color: #fff;
}

/* 基本設定 */
body {
    background: var(--light-color);
    line-height: 1.7;
    letter-spacing: 0.1em;
    text-align: center;
    font-size: 13px;
    color: var(--dark-color);
}

/* リンク */
a {
    color: var(--color);
    transition: color .5s;
}

/* リンクホバー */
a:hover {
    color: var(--color2);
}

/* ヘッダー */
header {
    position: relative;
    margin-bottom: 100px;
    background: url(‘ヘッダー画像URL’) center/cover;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ボーダー */
header::after {
    position: absolute;
    display: block;
    content: '';
    top: 100%;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 50px;
    background: repeating-linear-gradient(-45deg, #fff 0, #fff 10px, #f57382 10px, #f57382 20px);
}

/* 大見出し */
header h1 {
    display: inline-block;
    transform: rotate(-3deg);
    margin-top: 1em;
    font-family: var(--en-font);
    font-size: 3em;
    color: var(--color2);
}

/* コンテンツ */
header aside,
main section {
    margin: 1.5em auto;
    width: 80%;
    max-width: 700px;
}

/* 文字揃え */
header aside,
main section {
    text-align: justify;
    word-break: break-all;
    line-break: strict;
}

/* エンターリンク */
header aside a.enterlink {
    display: inline-block;
    padding: 0.2em 1em;
    padding-right: 0.5em;
    background-color: var(--color2);
    letter-spacing: 0.5em;
    text-decoration: none;
}

/* メインコンテンツ */
main {
    margin: 3em auto;
}

/* モデル */
.modelbox {
    position: relative;
    margin-bottom: 3em;
    text-align: center;
}

.modelbox::before,
.modelbox::after {
    position: absolute;
    display: block;
    content: '';
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.modelbox::before {
    z-index: -1;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--color2);
}

.modelbox::after {
    z-index: -2;
    width: 200px;
    height: 170px;
    clip-path: polygon(33% 29%, 100% 45%, 75% 100%, 0 78%);
    background-color: var(--color);
}

.modelbox img {
    width: 100px;
    height: auto;
}

.modelbox h2 {
    position: absolute;
    top: 0;
    right: 55%;
    text-decoration: underline wavy var(--color3);
    color: var(--color3);
}

/* セクション */
section p {
    margin: 1em auto;
}

section span {
    font-weight: bold;
    color: var(--color3);
}

section mark {
    padding: 0 0.2em;
    background-color: var(--color3);
    color: var(--light-color);
}

section strong {
    font-weight: bold;
    color: red;
}

.right {
    text-align: right;
}

/* フォーム系 */
textarea,
input[type] {
    -webkit-appearance: none;
    padding: 0.5em;
    background: var(--color2);
    border: none;
    border-radius: 0;
    font-size: 11px;
    color: var(--color3);
}

textarea {
    width: 230px;
    height: 100px;
}

input[type=text] {
    width: 80px;
}

input[type=submit] {
    width: auto;
}

/* 横幅768px以上で読み込む */
@media screen and (min-width:768px) {
    body {
        font-size: 14px;
    }

header h1 {
        font-size: 5em;
    }

.modelbox img {
        width: 200px;
    }

.modelbox::before {
        width: 240px;
        height: 240px;
    }

.modelbox::after {
        width: 400px;
        height: 340px;
    }

.modelbox h2 {
        font-size: 3em;
    }
}

/* 横幅1024px以上で読み込む */
@media screen and (min-width:1024px) {
    body {
        font-size: 15px;
    }
}

/* 横幅1440px以上で読み込む */
@media screen and (min-width:1440px) {
    body {
        font-size: 16px;
    }

header h1 {
        margin-top: 0.2em;
    }
}
</style>