yasu551 · yasu551 · May 5, 2022
diff --git a/README.md b/README.md
@@ -1 +1,15 @@
-# codestep
+# 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/`
diff --git a/intro/photo/css/body.css 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;
+}
diff --git a/intro/photo/css/detail.css 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;
+  }
+}
diff --git a/intro/photo/css/footer.css b/intro/photo/css/footer.css
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+.footer__copyright {
+  max-width: 600px;
+  margin: 0 auto;
+}
diff --git a/intro/photo/css/header.css 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;
+}
diff --git a/intro/photo/css/index.css 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;
+}
diff --git a/intro/photo/img/detail.jpg b/intro/photo/img/detail.jpg
diff --git a/intro/photo/img/favicon.ico b/intro/photo/img/favicon.ico
diff --git a/intro/photo/img/logo.svg b/intro/photo/img/logo.svg
diff --git a/intro/photo/img/mainvisual.jpg b/intro/photo/img/mainvisual.jpg
diff --git a/intro/photo/index.html b/intro/photo/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+  <meta charset="utf-8">
+  <title>Photo book</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="shortcut icon" href="img/favicon.ico">
+  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
+  <link rel="stylesheet" href="css/body.css">
+</head>
+
+<body class="body">
+  <header class="header body__header">
+    <h1 class="header__logo">
+      <a href="index.html" class="header__logo-link">
+        <img src="img/logo.svg" alt="photo book" class="header__logo-img">
+      </a>
+    </h1>
+  </header>
+
+  <main>
+    <img src="img/mainvisual.jpg" alt="建物と綺麗な青空" class="body__main-visual">
+
+    <section id="index" class="index body__index">
+      <div class="index__wrapper">
+        <h2 class="index__title">INDEX</h2>
+        <ol class="index__list">
+          <li class="index__item">タイトルタイトルタイトルタイトルタイトルタイトル</li>
+          <li class="index__item">タイトルタイトルタイトルタイトルタイトルタイトル</li>
+          <li class="index__item">タイトルタイトルタイトルタイトルタイトルタイトル</li>
+          <li class="index__item">タイトルタイトルタイトルタイトルタイトルタイトル</li>
+          <li class="index__item">タイトルタイトルタイトルタイトルタイトルタイトル</li>
+        </ol>
+      </div>
+    </section>
+
+    <section id="detail" class="detail body__detail">
+      <div class="detail__wrapper">
+        <h2 class="detail__title">DETAIL</h2>
+        <div class="detail__container">
+          <img src="img/detail.jpg" alt="赤いネクタイが載ったデスクと手首のアクセサリー" class="detail__book-img">
+          <div class="detail__text">
+            <h3 class="detail__book-title">タイトルタイトルタイトル</h3>
+            <dl class="detail__list">
+              <dt class="detail__list-key">著者</dt>
+              <dd class="detail__list-value">タイトルタイトルタイトル</dd>
+              <dt class="detail__list-key">出版社</dt>
+              <dd class="detail__list-value">タイトルタイトルタイトル</dd>
+              <dt class="detail__list-key">発行年</dt>
+              <dd class="detail__list-value">タイトルタイトルタイトル</dd>
+            </dl>
+            <p class="detail__sentence">
+              テキストテキストテキストテキストテキストテキスト
+              テキストテキストテキストテキストテキストテキスト
+            </p>
+            <a href="#" target="_blank" rel="noopener noreferrer" class="detail__link">
+              オンラインストアで見る
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="footer body__footer">
+    <p class="footer__copyright">&copy; 2020 PHOTO BOOK</p>
+  </footer>
+</body>
+
+</html>
diff --git a/intro/photo2/css/body.css 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;
+}