refactor html to pages

gudzsv · Feb 12, 2024 · ea98886 · ea98886
1 parent 18f0955
commit ea98886
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 48 deletions.
diff --git a/src/1-gallery.html b/src/1-gallery.html
@@ -1 +1,15 @@
-<ul class="gallery"></ul>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>gallery</title>
+    <link rel="stylesheet" href="./css/gallery.css" />
+    <script type="module" src="./js/1-gallery.js"></script>
+  </head>
+  <body>
+    <a href="./index.html">❮Go back</a>
+    <div class="container"><ul class="gallery"></ul></div>
+  </body>
+</html>
diff --git a/src/2-form.html b/src/2-form.html
@@ -1,11 +1,25 @@
-<form class="feedback-form" autocomplete="off">
-  <label>
-    Email
-    <input type="email" name="email" autofocus />
-  </label>
-  <label>
-    Message
-    <textarea name="message" rows="8"></textarea>
-  </label>
-  <button type="submit">Submit</button>
-</form>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>form</title>
+    <link rel="stylesheet" href="./css/form.css" />
+    <script type="module" src="./js/2-form.js"></script>
+  </head>
+  <body>
+    <a href="./index.html">❮Go back</a>
+    <form class="feedback-form" autocomplete="off">
+      <label>
+        Email
+        <input type="email" name="email" autofocus />
+      </label>
+      <label>
+        Message
+        <textarea name="message" rows="8"></textarea>
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+  </body>
+</html>
diff --git a/src/css/base.css b/src/css/base.css
diff --git a/src/css/form.css b/src/css/form.css
@@ -1,3 +1,26 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+
+body {
+  font-family: 'Montserrat', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  font-size: 20px;
+  color: #2e2f42;
+  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+a:hover {
+  color: lightcoral;
+}
+
+input,
+textarea,
+button {
+  font-family: 'Montserrat', sans-serif;
+}
+
 .feedback-form {
   width: 408px;
   padding: 24px;
@@ -30,6 +53,8 @@ textarea {
   padding: 8px 16px;
   margin-top: 8px;
   color: #2e2f42 !important;
+  transition: outline 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    border 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 input:hover,
@@ -39,7 +64,6 @@ textarea:hover {
 
 input:focus,
 textarea:focus {
-  outline: transparent;
   border: 1px solid #808080;
 }
 
@@ -62,5 +86,5 @@ button:focus {
 }
 
 .error {
-  border: 2px solid tomato !important;
+  border: 1px solid tomato !important;
 }
diff --git a/src/css/gallery.css b/src/css/gallery.css
@@ -1,3 +1,32 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+
+body {
+  font-family: 'Montserrat', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  font-size: 20px;
+  color: #2e2f42;
+  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+a:hover {
+  color: lightcoral;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 .container {
   max-width: 1128px;
   margin: 0 auto;

diff --git a/src/css/style.css b/src/css/style.css
@@ -1,3 +1,27 @@
-@import url('./gallery.css');
-@import url('./base.css');
-@import url('./form.css');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+
+body {
+  font-family: 'Montserrat', sans-serif;
+  background-color: lightgray;
+}
+
+a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-size: 20px;
+  color: #2e2f42;
+  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  line-height: 1.5;
+}
+
+a:hover {
+  color: lightcoral;
+}
+
+a:hover::after {
+  margin-left: 8px;
+  content: '❯';
+  font-size: 20px;
+  /* line-height: 1.5; */
+}
diff --git a/src/index.html b/src/index.html
@@ -6,12 +6,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>goit-js-hw-09</title>
     <link rel="stylesheet" href="./css/style.css" />
-    <script type="module" src="./js/main.js"></script>
   </head>
   <body>
-    <div class="container">
-      <load src="1-gallery.html" />
-      <load src="2-form.html" />
-    </div>
+    <nav class="container">
+      <ol class="list">
+        <li class="item">
+          <a href="./1-gallery.html" class="link">Go to gallery</a>
+        </li>
+        <li class="item">
+          <a href="./2-form.html" class="link">Go to form</a>
+        </li>
+      </ol>
+    </nav>
   </body>
 </html>
diff --git a/src/js/1-gallery.js b/src/js/1-gallery.js
@@ -1,4 +1,5 @@
 import SimpleLightbox from 'simplelightbox';
+import 'simplelightbox/dist/simple-lightbox.min.css';
 import data from './data';
 
 const gallery = document.querySelector('.gallery');

diff --git a/src/js/main.js b/src/js/main.js