diff --git a/README.md b/README.md index 79ffabf..bc5d568 100644 --- a/README.md +++ b/README.md @@ -1 +1,15 @@ -# codestep \ No newline at end of file +# Codestep + +このリポジトリは、[Codestep](https://code-step.com/)の課題を模写コーディングした結果を、保持するものである。 + +レベルそれぞれに対してディレクトリが対応する。 +- 入門編 -> `intro/` + - [Profile](https://code-step.com/profile-menu/) -> `profile/` + - [PHOTO BOOK](https://code-step.com/photo-menu/) -> `photo/` + - [PHOTO BOOK 2](https://code-step.com/photo2-menu/) -> `photo2/` + - [Recipe Diary](https://code-step.com/recipe-menu/) -> `recipe-top/` + - [Recipe Diary](https://code-step.com/recipe2-menu/) -> `recipe-page/` + - [Wooden Jewelry](https://code-step.com/brand-menu/) -> `wooden/` +- 初級編 -> `biginner/` +- 中級編 -> `intermediate/` +- 上級編 -> `advanced/` \ No newline at end of file diff --git a/intro/photo/css/body.css b/intro/photo/css/body.css new file mode 100644 index 0000000..57046bd --- /dev/null +++ b/intro/photo/css/body.css @@ -0,0 +1,38 @@ +@charset "UTF-8"; +@import url("./header.css"); +@import url("./index.css"); +@import url("./detail.css"); +@import url("./footer.css"); + +.body { + background-color: #f4f9ff; +} + +.body__header { + max-width: 1000px; + margin: 0 auto; +} + +.body__main-visual { + display: block; + max-width: 1000px; + width: 100%; + object-fit: contain; + margin: 0 auto 3rem auto; +} + +.body__index { + max-width: 1000px; + margin: 3rem auto; + background-color: white; +} + +.body__detail { + max-width: 1000px; + margin: 3rem auto; +} + +.body__footer { + max-width: 1000px; + margin: 2rem auto 0 auto; +} \ No newline at end of file diff --git a/intro/photo/css/detail.css b/intro/photo/css/detail.css new file mode 100644 index 0000000..4f139c6 --- /dev/null +++ b/intro/photo/css/detail.css @@ -0,0 +1,77 @@ +@charset "UTF-8"; + +.detail__wrapper { + max-width: 600px; + padding: 2rem 0; + margin: 0 auto; +} + +.detail__title { + margin-bottom: 1rem; +} + +.detail__container { + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.detail__book-img { + width: 45%; + object-fit: contain; +} + +.detail__text { + width: 45%; +} + +.detail__book-title { + margin-bottom: 1rem; +} + +.detail__list { + display: flex; + flex-wrap: wrap; + padding: 1rem 0; + border-top: 1px solid rgba(128, 128, 128, 0.5); + border-bottom: 1px solid rgba(128, 128, 128, 0.5); + margin-bottom: 1rem; +} + +.detail__list-key { + width: 35%; + text-align: start; +} + +.detail__list-value { + width: 65%; + text-align: start; +} + +.detail__sentence { + margin: 1rem 0; +} + +.detail__link { + margin-top: 1rem; + color: black; +} + +.detail__link:hover { + opacity: 0.6; +} + +@media screen and (max-width: 1024px) { + .detail__container { + flex-direction: column; + } + + .detail__book-img { + width: 100%; + } + + .detail__text { + width: 100%; + margin-top: 2rem; + } +} \ No newline at end of file diff --git a/intro/photo/css/footer.css b/intro/photo/css/footer.css new file mode 100644 index 0000000..cf8ec1c --- /dev/null +++ b/intro/photo/css/footer.css @@ -0,0 +1,6 @@ +@charset "UTF-8"; + +.footer__copyright { + max-width: 600px; + margin: 0 auto; +} \ No newline at end of file diff --git a/intro/photo/css/header.css b/intro/photo/css/header.css new file mode 100644 index 0000000..6791006 --- /dev/null +++ b/intro/photo/css/header.css @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +.header { + padding: 1rem 0; +} + +.header__logo { + line-height: 0; +} + +.header__logo-link { + display: inline-block; +} + +.header__logo-img { + max-width: 15rem; +} \ No newline at end of file diff --git a/intro/photo/css/index.css b/intro/photo/css/index.css new file mode 100644 index 0000000..7147a11 --- /dev/null +++ b/intro/photo/css/index.css @@ -0,0 +1,19 @@ +@charset "UTF-8"; + +.index__wrapper { + max-width: 600px; + padding: 2rem 0; + margin: 0 auto; +} + +.index__title { + margin-bottom: 1rem; +} + +.index__list { + margin-left: 1rem; +} + +.index__item { + margin-bottom: 1rem; +} \ No newline at end of file diff --git a/intro/photo/img/detail.jpg b/intro/photo/img/detail.jpg new file mode 100644 index 0000000..dfe349d Binary files /dev/null and b/intro/photo/img/detail.jpg differ diff --git a/intro/photo/img/favicon.ico b/intro/photo/img/favicon.ico new file mode 100644 index 0000000..b32d27c Binary files /dev/null and b/intro/photo/img/favicon.ico differ diff --git a/intro/photo/img/logo.svg b/intro/photo/img/logo.svg new file mode 100644 index 0000000..fd9071b --- /dev/null +++ b/intro/photo/img/logo.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + diff --git a/intro/photo/img/mainvisual.jpg b/intro/photo/img/mainvisual.jpg new file mode 100644 index 0000000..0d58040 Binary files /dev/null and b/intro/photo/img/mainvisual.jpg differ diff --git a/intro/photo/index.html b/intro/photo/index.html new file mode 100644 index 0000000..99e61a5 --- /dev/null +++ b/intro/photo/index.html @@ -0,0 +1,71 @@ + + + + + + Photo book + + + + + + + +
+

+ + photo book + +

+
+ +
+ 建物と綺麗な青空 + +
+
+

INDEX

+
    +
  1. タイトルタイトルタイトルタイトルタイトルタイトル
    2. +
  2. タイトルタイトルタイトルタイトルタイトルタイトル
    3. +
  3. タイトルタイトルタイトルタイトルタイトルタイトル
    4. +
  4. タイトルタイトルタイトルタイトルタイトルタイトル
    5. +
  5. タイトルタイトルタイトルタイトルタイトルタイトル
    6. +
+
+
+ +
+
+

DETAIL

+
+ 赤いネクタイが載ったデスクと手首のアクセサリー +
+

タイトルタイトルタイトル

+
+
著者
+
タイトルタイトルタイトル
+
出版社
+
タイトルタイトルタイトル
+
発行年
+
タイトルタイトルタイトル
+
+

+ テキストテキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキストテキスト +

+ + オンラインストアで見る + +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/intro/photo2/css/body.css b/intro/photo2/css/body.css new file mode 100644 index 0000000..687348e --- /dev/null +++ b/intro/photo2/css/body.css @@ -0,0 +1,41 @@ +@charset "UTF-8"; + +@import url("./header.css"); +@import url("./index.css"); +@import url("./photos.css"); +@import url("./detail.css"); +@import url("./footer.css"); + + +.body__header { + max-width: 1000px; + margin: 0 auto; +} + +.body__main-visual { + display: block; + max-width: 1000px; + width: 100%; + object-fit: contain; + margin: 0 auto 3rem auto; +} + +.body__index { + max-width: 800px; + margin: 3rem auto; +} + +.body__photos { + max-width: 800px; + margin: 3rem auto; +} + +.body__detail { + max-width: 800px; + margin: 3rem auto; +} + +.body__footer { + max-width: 1000px; + margin: 2rem auto 0 auto; +} \ No newline at end of file diff --git a/intro/photo2/css/detail.css b/intro/photo2/css/detail.css new file mode 100644 index 0000000..805386c --- /dev/null +++ b/intro/photo2/css/detail.css @@ -0,0 +1,70 @@ +@charset "UTF-8"; + +.detail { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: rgba(128, 128, 128, 0.2); + width: 100%; + padding: 3rem 0; + margin: 0 auto; +} + +.detail__title { + margin-bottom: 1rem; +} + +.detail__container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.detail__list { + width: 35%; + padding: 1rem; + border-right: 1px solid black; +} + +.detail__list-key { + font-weight: bold; +} + +.detail__list-value { + margin-bottom: 1rem; +} + +.detail__description { + width: 65%; + padding: 1rem; +} + +.detail__sentence { + margin-bottom: 1rem; +} + +.detail__link { + display: block; + color: black; +} + +.detail__link:hover { + opacity: 0.7; +} + +@media screen and (max-width: 1024px) { + .detail__container { + flex-direction: column; + } + + .detail__list { + width: 100%; + border-right: none; + border-bottom: 1px solid black; + } + + .detail__description { + width: 100%; + } +} \ No newline at end of file diff --git a/intro/photo2/css/footer.css b/intro/photo2/css/footer.css new file mode 100644 index 0000000..2fe185b --- /dev/null +++ b/intro/photo2/css/footer.css @@ -0,0 +1,7 @@ +@charset "UTF-8"; + +.footer__copyright { + width: 100%; + margin: 0 auto; + text-align: center; +} \ No newline at end of file diff --git a/intro/photo2/css/header.css b/intro/photo2/css/header.css new file mode 100644 index 0000000..6791006 --- /dev/null +++ b/intro/photo2/css/header.css @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +.header { + padding: 1rem 0; +} + +.header__logo { + line-height: 0; +} + +.header__logo-link { + display: inline-block; +} + +.header__logo-img { + max-width: 15rem; +} \ No newline at end of file diff --git a/intro/photo2/css/index.css b/intro/photo2/css/index.css new file mode 100644 index 0000000..02bb29a --- /dev/null +++ b/intro/photo2/css/index.css @@ -0,0 +1,25 @@ +@charset "UTF-8"; + +.index { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: rgba(128, 128, 128, 0.2); + width: 100%; + padding: 3rem 0; + margin: 0 auto; +} + +.index__title { + margin-bottom: 1rem; +} + +.index__list { + padding: 1rem 5rem; + border: 1px solid black; +} + +.index__item { + margin-bottom: 1rem; +} \ No newline at end of file diff --git a/intro/photo2/css/photos.css b/intro/photo2/css/photos.css new file mode 100644 index 0000000..af61809 --- /dev/null +++ b/intro/photo2/css/photos.css @@ -0,0 +1,32 @@ +@charset "UTF-8"; + +.photos { + width: 100%; + margin: 0 auto; +} + +.photos__list { + display: flex; + flex-wrap: wrap; + list-style: none; + justify-content: space-between; + align-items: center; +} + +.photos__item { + width: 49%; +} + +.photos__img { + width: 100%; +} + +@media screen and (max-width: 1024px) { + .photos_list { + flex-direction: column; + } + + .photos__item { + width: 100%; + } +} \ No newline at end of file diff --git a/intro/photo2/img/favicon.ico b/intro/photo2/img/favicon.ico new file mode 100644 index 0000000..b32d27c Binary files /dev/null and b/intro/photo2/img/favicon.ico differ diff --git a/intro/photo2/img/logo.svg b/intro/photo2/img/logo.svg new file mode 100644 index 0000000..84f62ff --- /dev/null +++ b/intro/photo2/img/logo.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + diff --git a/intro/photo2/img/mainvisual.jpg b/intro/photo2/img/mainvisual.jpg new file mode 100644 index 0000000..0d58040 Binary files /dev/null and b/intro/photo2/img/mainvisual.jpg differ diff --git a/intro/photo2/img/photo1.jpg b/intro/photo2/img/photo1.jpg new file mode 100644 index 0000000..18e9546 Binary files /dev/null and b/intro/photo2/img/photo1.jpg differ diff --git a/intro/photo2/img/photo2.jpg b/intro/photo2/img/photo2.jpg new file mode 100644 index 0000000..18e9546 Binary files /dev/null and b/intro/photo2/img/photo2.jpg differ diff --git a/intro/photo2/img/photo3.jpg b/intro/photo2/img/photo3.jpg new file mode 100644 index 0000000..18e9546 Binary files /dev/null and b/intro/photo2/img/photo3.jpg differ diff --git a/intro/photo2/img/photo4.jpg b/intro/photo2/img/photo4.jpg new file mode 100644 index 0000000..18e9546 Binary files /dev/null and b/intro/photo2/img/photo4.jpg differ diff --git a/intro/photo2/index.html b/intro/photo2/index.html new file mode 100644 index 0000000..0e7e9c8 --- /dev/null +++ b/intro/photo2/index.html @@ -0,0 +1,88 @@ + + + + + + Photo book 2 + + + + + + + +
+

+ + photo book 2 + +

+
+ +
+ 青空の下に黄色い建物 + +
+

INDEX

+
    +
  1. タイトルタイトルタイトルタイトルタイトル
    2. +
  2. タイトルタイトルタイトルタイトルタイトル
    3. +
  3. タイトルタイトルタイトルタイトルタイトル
    4. +
  4. タイトルタイトルタイトルタイトルタイトル
    5. +
  5. タイトルタイトルタイトルタイトルタイトル
    6. +
+
+ +
+ +
+ +
+

DETAIL

+
+
+
著者：
+
タイトルタイトルタイトル
+
出版社
+
タイトルタイトルタイトル
+
発行年：
+
タイトルタイトルタイトル
+
+
+

+ テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト +

+

+ テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト +

+ + オンラインストアで見る + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/intro/profile/.DS_Store b/intro/profile/.DS_Store new file mode 100644 index 0000000..9e117f5 Binary files /dev/null and b/intro/profile/.DS_Store differ diff --git a/intro/profile/css/about.css b/intro/profile/css/about.css new file mode 100644 index 0000000..69725d4 --- /dev/null +++ b/intro/profile/css/about.css @@ -0,0 +1,54 @@ +@charset "UTF-8"; + +.about { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.about__title { + padding-bottom: 0.5rem; + margin: 0 auto 3rem auto; + border-bottom: 1px solid grey; +} + +.about__container { + display: flex; +} + +.about__portrait { + width: 100px; + height: 100px; + border-radius: 50%; + margin: 0 2rem; +} + +.about__text { + width: 70%; +} + +.about__name { + margin-bottom: 1rem; +} + + +@media screen and (max-width: 600px) { + .about { + max-width: 600px; + } + + .about__container { + flex-direction: column; + align-items: center; + } + + .about__portrait { + margin: 0 auto 2rem auto; + } + + .about__text { + max-width: 100%; + } +} \ No newline at end of file diff --git a/intro/profile/css/bicycle.css b/intro/profile/css/bicycle.css new file mode 100644 index 0000000..f035167 --- /dev/null +++ b/intro/profile/css/bicycle.css @@ -0,0 +1,54 @@ +@charset "UTF-8"; + +.bicycle { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.bicycle__title { + padding-bottom: 0.5rem; + margin-bottom: 3rem; + border-bottom: 1px solid grey; +} + +.bicycle__gallery { + display: flex; + list-style: none; + justify-content: space-between; +} + +.bicycle__item { + width: 30%; +} + +.bicycle__img { + max-width: 100%; +} + +.bicycle__name { + text-align: center; +} + +.bicycle__description { + text-align: center; +} + +@media screen and (max-width: 600px) { + .bicycle { + max-width: 600px; + } + + + .bicycle__gallery { + flex-direction: column; + align-items: center; + } + + .bicycle__item { + width: 100%; + margin-bottom: 3rem; + } +} \ No newline at end of file diff --git a/intro/profile/css/body.css b/intro/profile/css/body.css new file mode 100644 index 0000000..e387754 --- /dev/null +++ b/intro/profile/css/body.css @@ -0,0 +1,36 @@ +@charset "UTF-8"; + +@import url("./header.css"); +@import url("./about.css"); +@import url("./bicycle.css"); +@import url("./footer.css"); + +.body__header { + max-width: 960px; + padding: 1rem 0; + margin: 0 auto; +} + +.body__main-visual { + display: block; + height: 600px; + width: 100%; + object-fit: cover; + margin-bottom: 2rem; +} + +.body__about { + max-width: 960px; + padding: 0 4%; + margin: 4rem auto; +} + +.body__bicycle { + max-width: 960px; + padding: 0 4%; + margin: 4rem auto; +} + +.body__footer { + margin-top: 2rem; +} \ No newline at end of file diff --git a/intro/profile/css/footer.css b/intro/profile/css/footer.css new file mode 100644 index 0000000..ac3e58a --- /dev/null +++ b/intro/profile/css/footer.css @@ -0,0 +1,8 @@ +@charset "UTF-8"; + +.footer { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/intro/profile/css/header.css b/intro/profile/css/header.css new file mode 100644 index 0000000..8025bd9 --- /dev/null +++ b/intro/profile/css/header.css @@ -0,0 +1,39 @@ +@charset "UTF-8"; + +.header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.header__logo { + line-height: 0; +} + +.header__logo-link { + display: inline-block; +} + +.header__logo-img { + max-width: 10rem; +} + +.header__nav-list { + display: flex; + list-style: none; + justify-content: space-around; + align-items: center; +} + +.header__nav-item { + padding: 0 1rem; +} + +.header__nav-link { + color: black; + text-decoration: none; +} + +.header__nav-link:hover { + opacity: 0.7; +} \ No newline at end of file diff --git a/intro/profile/img/about.jpg b/intro/profile/img/about.jpg new file mode 100644 index 0000000..c52d15c Binary files /dev/null and b/intro/profile/img/about.jpg differ diff --git a/intro/profile/img/bicycle1.jpg b/intro/profile/img/bicycle1.jpg new file mode 100644 index 0000000..bada9d8 Binary files /dev/null and b/intro/profile/img/bicycle1.jpg differ diff --git a/intro/profile/img/bicycle2.jpg b/intro/profile/img/bicycle2.jpg new file mode 100644 index 0000000..bada9d8 Binary files /dev/null and b/intro/profile/img/bicycle2.jpg differ diff --git a/intro/profile/img/bicycle3.jpg b/intro/profile/img/bicycle3.jpg new file mode 100644 index 0000000..bada9d8 Binary files /dev/null and b/intro/profile/img/bicycle3.jpg differ diff --git a/intro/profile/img/favicon.ico b/intro/profile/img/favicon.ico new file mode 100644 index 0000000..50eba96 Binary files /dev/null and b/intro/profile/img/favicon.ico differ diff --git a/intro/profile/img/logo.svg b/intro/profile/img/logo.svg new file mode 100644 index 0000000..bbb4594 --- /dev/null +++ b/intro/profile/img/logo.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + diff --git a/intro/profile/img/mainvisual.jpg b/intro/profile/img/mainvisual.jpg new file mode 100644 index 0000000..3e92f8c Binary files /dev/null and b/intro/profile/img/mainvisual.jpg differ diff --git a/intro/profile/index.html b/intro/profile/index.html new file mode 100644 index 0000000..b8fe6dd --- /dev/null +++ b/intro/profile/index.html @@ -0,0 +1,83 @@ + + + + + + Profile + + + + + + + +
+

+ + Profile + +

+ +
+ +
+ 自転車の大きな画像 + +
+

+ About +

+
+ 自画像 +
+

+ KAKERU MIYAICHI +

+

+ テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト +

+
+
+
+ +
+

+ Bicycle +

+ +
+
+ + + + + \ No newline at end of file diff --git a/intro/recipe-page/css/body.css b/intro/recipe-page/css/body.css new file mode 100644 index 0000000..ef0d999 --- /dev/null +++ b/intro/recipe-page/css/body.css @@ -0,0 +1,54 @@ +@charset "UTF-8"; + +@import url("./header.css"); +@import url("./ingredient.css"); +@import url("./how-to-make.css"); +@import url("./footer.css"); + +.body { + font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif; +} + +.body__main { + display: flex; +} + +.body__main-visual { + max-width: 50%; + height: 700px; + object-fit: cover; +} + +.body__text { + width: 50%; + margin: 2rem auto 0 auto; + padding: 0 5%; +} + +.body__ingredient { + margin: 2rem auto; +} + +.body__how-to-make { + margin: 2rem auto 0 auto; +} + +.body__footer { + margin: 4rem auto 0 auto; +} + +@media screen and (max-width: 834px) { + .body__main { + flex-direction: column; + } + + .body__main-visual { + max-width: 100%; + width: 100%; + margin-bottom: 3rem; + } + + .body__text { + width: 100%; + } +} \ No newline at end of file diff --git a/intro/recipe-page/css/footer.css b/intro/recipe-page/css/footer.css new file mode 100644 index 0000000..1a9105b --- /dev/null +++ b/intro/recipe-page/css/footer.css @@ -0,0 +1,39 @@ +@charset "UTF-8"; + +.footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.footer__button { + margin-bottom: 5rem; +} + +.footer__button-link { + color: black; + padding: 1rem 3rem; + border: 1px solid black; + text-decoration: none; +} + +.footer__button-link:hover { + opacity: 0.5; +} + +.footer__sns-list { + display: flex; + list-style: none; + justify-content: center; + align-items: center; + margin-bottom: 1rem; +} + +.footer__sns-item { + padding: 0 2rem; +} + +.footer__sns-link { + color: black; +} \ No newline at end of file diff --git a/intro/recipe-page/css/header.css b/intro/recipe-page/css/header.css new file mode 100644 index 0000000..d2f2a77 --- /dev/null +++ b/intro/recipe-page/css/header.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +.header__title { + margin-bottom: 1rem; +} \ No newline at end of file diff --git a/intro/recipe-page/css/how-to-make.css b/intro/recipe-page/css/how-to-make.css new file mode 100644 index 0000000..e67c584 --- /dev/null +++ b/intro/recipe-page/css/how-to-make.css @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +.how-to-make__title { + padding-bottom: 0.5rem; + border-bottom: 1px solid rgba(128, 128, 128, 0.5); + margin-bottom: 0.5rem; +} + +.how-to-make__list { + margin-left: 1rem; +} + +.how-to-make__item { + padding-bottom: 0.5rem; + margin-bottom: 0.5rem; + border-bottom: 1px dotted rgba(128, 128, 128, 0.5); +} \ No newline at end of file diff --git a/intro/recipe-page/css/ingredient.css b/intro/recipe-page/css/ingredient.css new file mode 100644 index 0000000..bf1803d --- /dev/null +++ b/intro/recipe-page/css/ingredient.css @@ -0,0 +1,28 @@ +@charset "UTF-8"; + +.ingredient__title { + padding-bottom: 0.5rem; + border-bottom: 1px solid rgba(128, 128, 128, 0.5); + margin-bottom: 0.5rem; +} + +.ingredient__list { + display: flex; + flex-wrap: wrap; +} + +.ingredient__list-key { + width: 75%; + text-align: start; + padding-bottom: 0.5rem; + margin-bottom: 0.5rem; + border-bottom: 1px dotted rgba(128, 128, 128, 0.5); +} + +.ingredient__list-value { + width: 25%; + text-align: end; + padding-bottom: 0.5rem; + margin-bottom: 0.5rem; + border-bottom: 1px dotted rgba(128, 128, 128, 0.5); +} \ No newline at end of file diff --git a/intro/recipe-page/img/favicon.ico b/intro/recipe-page/img/favicon.ico new file mode 100644 index 0000000..71d1c38 Binary files /dev/null and b/intro/recipe-page/img/favicon.ico differ diff --git a/intro/recipe-page/img/recipe.jpg b/intro/recipe-page/img/recipe.jpg new file mode 100644 index 0000000..5905ffa Binary files /dev/null and b/intro/recipe-page/img/recipe.jpg differ diff --git a/intro/recipe-page/index.html b/intro/recipe-page/index.html new file mode 100644 index 0000000..ee2ae8f --- /dev/null +++ b/intro/recipe-page/index.html @@ -0,0 +1,76 @@ + + + + + + Recipe Diary Cuisine page + + + + + + + +
+ メキシコ料理 +
+
+

ひよこ豆とアボカドのタコス

+

たっぷりのひよこ豆とレンズ豆にアボガドとトマトを添えて、少しライムを絞ったら美味しいタコスの出来上がりです。

+
+ +
+

材料（2人分）

+
+
テキストテキスト
+
1個
+
テキストテキスト
+
1個
+
テキストテキスト
+
1個
+
テキストテキスト
+
1個
+
テキストテキスト
+
1個
+
+
+ +
+

作り方

+
    +
  1. テキストテキストテキストテキスト
    2. +
  2. テキストテキストテキストテキスト
    3. +
  3. テキストテキストテキストテキスト
    4. +
  4. テキストテキストテキストテキスト
    5. +
  5. テキストテキストテキストテキスト
    6. +
+
+
+
+ + + + + \ No newline at end of file diff --git a/intro/recipe-top/css/body.css b/intro/recipe-top/css/body.css new file mode 100644 index 0000000..7b4da46 --- /dev/null +++ b/intro/recipe-top/css/body.css @@ -0,0 +1,49 @@ +@charset "UTF-8"; + +@import url("./header.css"); +@import url("./cuisine.css"); +@import url("./footer.css"); + +.body { + font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif; +} + +.body__main-visual { + display: block; + height: 100vh; + width: 100%; + margin: 0 auto; + object-fit: cover; +} + +.body__header { + width: 100%; + margin: 3rem auto; +} + +.body__cuisine { + width: 100%; + margin: 3rem 0; +} + +.body__button { + display: flex; + justify-content: center; + align-items: center; +} + +.body__button-link { + text-decoration: none; + color: black; + border: 1px solid black; + padding: 1rem 3rem; +} + +.body__button-link:hover { + opacity: 0.5; +} + +.body__footer { + width: 100%; + margin: 1rem auto; +} \ No newline at end of file diff --git a/intro/recipe-top/css/cuisine.css b/intro/recipe-top/css/cuisine.css new file mode 100644 index 0000000..f4a75d9 --- /dev/null +++ b/intro/recipe-top/css/cuisine.css @@ -0,0 +1,33 @@ +@charset "UTF-8"; + +.cuisine { + width: 100%; + margin: 3rem 0; +} + +.cuisine__list { + display: flex; + justify-content: center; + align-items: center; + list-style: none; +} + +.cuisine__item { + width: calc(100%/3); +} + +.cuisine__img { + width: 100%; + height: 500px; + object-fit: cover; +} + +@media screen and (max-width: 834px) { + .cuisine__list { + flex-direction: column; + } + + .cuisine__item { + width: 100%; + } +} \ No newline at end of file diff --git a/intro/recipe-top/css/footer.css b/intro/recipe-top/css/footer.css new file mode 100644 index 0000000..709fc85 --- /dev/null +++ b/intro/recipe-top/css/footer.css @@ -0,0 +1,26 @@ +@charset "UTF-8"; + +.footer { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding-top: 3rem; +} + +.footer__sns-list { + display: flex; + list-style: none; + justify-content: center; + align-items: center; + margin-bottom: 1rem; +} + +.footer__sns-item { + padding: 0 2rem; +} + +.footer__sns-link { + color: black; +} \ No newline at end of file diff --git a/intro/recipe-top/css/header.css b/intro/recipe-top/css/header.css new file mode 100644 index 0000000..f645905 --- /dev/null +++ b/intro/recipe-top/css/header.css @@ -0,0 +1,16 @@ +@charset "UTF-8"; + +.header { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.header__title { + margin-bottom: 1rem; +} + +.header__sentence { + text-align: center; +} \ No newline at end of file diff --git a/intro/recipe-top/img/favicon.ico b/intro/recipe-top/img/favicon.ico new file mode 100644 index 0000000..71d1c38 Binary files /dev/null and b/intro/recipe-top/img/favicon.ico differ diff --git a/intro/recipe-top/img/mainvisual.jpg b/intro/recipe-top/img/mainvisual.jpg new file mode 100644 index 0000000..562fa30 Binary files /dev/null and b/intro/recipe-top/img/mainvisual.jpg differ diff --git a/intro/recipe-top/img/recipe1.jpg b/intro/recipe-top/img/recipe1.jpg new file mode 100644 index 0000000..b725fac Binary files /dev/null and b/intro/recipe-top/img/recipe1.jpg differ diff --git a/intro/recipe-top/img/recipe2.jpg b/intro/recipe-top/img/recipe2.jpg new file mode 100644 index 0000000..b725fac Binary files /dev/null and b/intro/recipe-top/img/recipe2.jpg differ diff --git a/intro/recipe-top/img/recipe3.jpg b/intro/recipe-top/img/recipe3.jpg new file mode 100644 index 0000000..b725fac Binary files /dev/null and b/intro/recipe-top/img/recipe3.jpg differ diff --git a/intro/recipe-top/index.html b/intro/recipe-top/index.html new file mode 100644 index 0000000..25ab41f --- /dev/null +++ b/intro/recipe-top/index.html @@ -0,0 +1,66 @@ + + + + + + Recipe Diary Top page + + + + + + + + 食卓の風景 + +
+

Recipe Diary

+

+ 日々の料理レシピをまとめています。
+ 和食や洋食、中華、お菓子までいろんな料理レシピをアップしていますので、
+ みなさんの献立にお役立てくださいね！ +

+
+ +
+
+ +
+
+ レシピ一覧を見る +
+
+ + + + + \ No newline at end of file diff --git a/intro/wooden/css/body.css b/intro/wooden/css/body.css new file mode 100644 index 0000000..0025e7e --- /dev/null +++ b/intro/wooden/css/body.css @@ -0,0 +1,35 @@ +@charset "UTF-8"; +@import url("./header.css"); +@import url("./concept.css"); +@import url("./work.css"); +@import url("./footer.css"); + +.body { + font-family: "Crimson Text", serif; +} + +.body__main-visual { + display: block; + width: 90vw; + margin: 0 auto; +} + +.body__header { + width: 90vw; + margin: 0 auto; +} + +.body__concept { + max-width: 1000px; + margin: 3rem auto; +} + +.body__work { + max-width: 1000px; + margin: 3rem auto; +} + +.body__footer { + width: 90vw; + margin: 3rem auto 0 auto; +} \ No newline at end of file diff --git a/intro/wooden/css/concept.css b/intro/wooden/css/concept.css new file mode 100644 index 0000000..4bcef8d --- /dev/null +++ b/intro/wooden/css/concept.css @@ -0,0 +1,45 @@ +@charset "UTF-8"; + +.concept { + width: 100%; + margin: 2rem auto; + display: flex; + justify-content: center; + align-items: center; +} + +.concept__img { + width: 50%; +} + +.concept__text { + width: 50%; + padding: 0 2rem; +} + +.concept__title { + font-weight: normal; + margin-bottom: 1rem; +} + +.concept__title-en { + font-size: 0.95rem +} + +@media screen and (max-width: 767px) { + .concept { + flex-direction: column; + } + + .concept__img { + width: 100%; + } + + .concept__text { + width: 100%; + } + + .concept__title { + margin-top: 1rem; + } +} \ No newline at end of file diff --git a/intro/wooden/css/footer.css b/intro/wooden/css/footer.css new file mode 100644 index 0000000..e334345 --- /dev/null +++ b/intro/wooden/css/footer.css @@ -0,0 +1,9 @@ +@charset "UTF-8"; +@import url("./logo.css"); + +.footer { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 0; +} \ No newline at end of file diff --git a/intro/wooden/css/header.css b/intro/wooden/css/header.css new file mode 100644 index 0000000..a373746 --- /dev/null +++ b/intro/wooden/css/header.css @@ -0,0 +1,28 @@ +@charset "UTF-8"; +@import url("./logo.css"); + +.header { + display: flex; + align-items: center; + padding: 1rem 0; +} + +.header__logo { + margin-right: 3rem; +} + +.header__menu { + display: flex; + justify-content: center; + align-items: center; + list-style: none; +} + +.header__menu-item { + padding: 0 1rem; +} + +.header__menu-link { + color: black; + text-decoration: none; +} \ No newline at end of file diff --git a/intro/wooden/css/logo.css b/intro/wooden/css/logo.css new file mode 100644 index 0000000..e61e1ce --- /dev/null +++ b/intro/wooden/css/logo.css @@ -0,0 +1,14 @@ +@charset "UTF-8"; + +.logo { + line-height: 0; +} + +.logo__link { + display: inline-block; + max-width: 10rem; +} + +.logo__img { + width: 100%; +} \ No newline at end of file diff --git a/intro/wooden/css/work.css b/intro/wooden/css/work.css new file mode 100644 index 0000000..76c7414 --- /dev/null +++ b/intro/wooden/css/work.css @@ -0,0 +1,45 @@ +@charset "UTF-8"; + +.work { + width: 100%; + margin: 2rem auto; + display: flex; + justify-content: center; + align-items: center; +} + +.work__img { + width: 50%; +} + +.work__text { + width: 50%; + padding: 0 2rem; +} + +.work__title { + font-weight: normal; + margin-bottom: 1rem; +} + +.work__title-en { + font-size: 0.95rem +} + +@media screen and (max-width: 767px) { + .work { + flex-direction: column-reverse; + } + + .work__img { + width: 100%; + } + + .work__text { + width: 100%; + } + + .work__title { + margin-top: 1rem; + } +} \ No newline at end of file diff --git a/intro/wooden/img/concept.jpg b/intro/wooden/img/concept.jpg new file mode 100644 index 0000000..dfe349d Binary files /dev/null and b/intro/wooden/img/concept.jpg differ diff --git a/intro/wooden/img/favicon.ico b/intro/wooden/img/favicon.ico new file mode 100644 index 0000000..f334f51 Binary files /dev/null and b/intro/wooden/img/favicon.ico differ diff --git a/intro/wooden/img/logo.svg b/intro/wooden/img/logo.svg new file mode 100644 index 0000000..6d52a6a --- /dev/null +++ b/intro/wooden/img/logo.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/intro/wooden/img/mainvisual.jpg b/intro/wooden/img/mainvisual.jpg new file mode 100644 index 0000000..e608d79 Binary files /dev/null and b/intro/wooden/img/mainvisual.jpg differ diff --git a/intro/wooden/img/work.jpg b/intro/wooden/img/work.jpg new file mode 100644 index 0000000..dfe349d Binary files /dev/null and b/intro/wooden/img/work.jpg differ diff --git a/intro/wooden/index.html b/intro/wooden/index.html new file mode 100644 index 0000000..c139d76 --- /dev/null +++ b/intro/wooden/index.html @@ -0,0 +1,91 @@ + + + + + + Wooden Jewelry + + + + + + + + + + ネズミ色の服を着た女性 + +
+

+ + Wooden Jewelry + +

+ +
+ +
+
+ 木の指輪 +
+

+ 私たちの考えるジュエリーとは
+ Concept +

+

+ テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト +

+

+ テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト +

+
+
+ +
+
+

+ ハンドメイドにこだわる理由
+ Work +

+

+ テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト +

+

+ テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト + テキストテキストテキストテキストテキスト +

+
+ ラベンダー +
+
+ + + + + \ No newline at end of file