diff --git a/left.jpg b/left.jpg new file mode 100644 index 0000000..5a990bf --- /dev/null +++ b/left.jpg Binary files differ diff --git a/neko.css b/neko.css new file mode 100644 index 0000000..3f8a4b9 --- /dev/null +++ b/neko.css @@ -0,0 +1,156 @@ +@charset "UTF-8"; + +body { + color: black; + font-size: 18px; + background-color: #56ccf2; +} +a { + text-decoration: none; +} +img { + max-width: 100%; +} +li{ + list-style: none; +} +.section-title { + display: inline-block; + font-size: 24px; + text-align: center; + margin-bottom: 45px; +} +.wrapper { + max-width: 960px; + margin: 0 auto 100px auto; + padding: 0 4%; + text-align: center; +} + +/*------------------------------------------- +ヘッダー +-------------------------------------------*/ +#header { + background-color: #f2c94c; +} +.header-inner{ + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; +} +.site-title { + line-height: 1px; + padding: 10px 0; +} +.site-title a { +display: block; +color: black; +font-size: 23px; +} +.header-inner ul { + display: flex; + padding: 20px 0; +} +.header-inner li { + margin-left: 30px; +} +.header-inner li a { + color: black; + font-size: 18px; +} +.header-inner li a:hover { + opacity: 0.7; +} + +/*------------------------------------------- +Mainvisual +-------------------------------------------*/ +#mainvisual { + margin-bottom: 80px; +} +#mainvisual img { + width: 100%; + max-width: 1920px; + height: 600px; + object-fit: cover; +} + +/*------------------------------------------- +about +-------------------------------------------*/ +#about { + background-color: #f5f5f5; + padding: 60px; + margin-bottom: 60px; +} +#about .about-inner { + border: solid 1px #333; + padding: 30px; +} +#about .about-inner .about-text { + text-align: center; +} +/*------------------------------------------- +neko +-------------------------------------------*/ +#neko{ + padding: 50px 16px 150px 16px; + margin: 80px auto 80px auto; + background-color: white; +} +#neko .grid { + display: grid; + gap: 50px; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); +} +#neko .grid .item img { + vertical-align: top; + height: 420px; + width: 100%; + object-fit: cover; +} +#neko .grid .item .neko-name{ + text-align: center; + margin-top: 30px; +} +/*------------------------------------------- +footer +-------------------------------------------*/ +#footer { + font-size: 16px; + padding: 20px 0; + text-align: center; + background-color: #f2c94c; +} + +/*------------------------------------------- +SP +-------------------------------------------*/ +@media screen and (max-width: 600px) { + body { + font-size: 15px; + } + /*------------------------------------------- +ヘッダー +-------------------------------------------*/ +.site-title a { +font-size: 15px; +} +.header-inner ul { + padding: 10px 0; +} +.header-inner li a { + font-size: 14px; +} + /*------------------------------------------- + Mainvisual + -------------------------------------------*/ + #mainvisual img { + height: calc(100vh - 60px); + } + /*------------------------------------------- + neko + -------------------------------------------*/ + +} diff --git a/neko.html b/neko.html new file mode 100644 index 0000000..a4883ac --- /dev/null +++ b/neko.html @@ -0,0 +1,62 @@ + + + + + かわいい猫の世界 + + + + + + + + +
+
+ 寝てる猫 +
+ +
+

猫とは

+
+

+ 猫とはとてもかわいい生き物です。
+ 甘えてくるのに突然離れていっちゃうかわいい生き物。
+ 罪な奴だけどみんなを癒してくれる最高な子なのです。
+ かわいい子の子達をたくさん目に収めましょう。 +

+
+ +
+

みんなのニャンコ

+
+
+ きりりニャンコ +

きりりニャンコ

+
+ +
+ しろニャンコ +

しろニャンコ

+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/right.jpg b/right.jpg new file mode 100644 index 0000000..dc2c07b --- /dev/null +++ b/right.jpg Binary files differ diff --git a/top.jpg b/top.jpg new file mode 100644 index 0000000..03301ec --- /dev/null +++ b/top.jpg Binary files differ