26th lesson end

Zokirkhon1002 · Jun 14, 2023 · af4762a · af4762a
1 parent 954d2da
commit af4762a
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 1 deletion.
diff --git a/23-lesson/homework/index.html b/23-lesson/homework/index.html
@@ -19,7 +19,7 @@
     </style>
   </head>
   <body>
-    <a class="back__btn" href="../index.html">Back to main file</a>
+    <a class="back__btn" href="../../index.html">Back to main file</a>
     <header>
       <div class="header_inner" id="header_inner">
         <h1 id="home">

diff --git a/26-lesson/css/index.css b/26-lesson/css/index.css
@@ -0,0 +1,74 @@
+/* RESET */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* VARIABLES */
+:root {
+  --primary-color: #27374d;
+  --purple: #651fff;
+  --purple-light: rgb(231, 26, 187);
+  --lightblue: rgb(137, 137, 175);
+  --yellow-light: #ffc107;
+  --header-bg-color: #b0bec5;
+  --primary-width: 80%;
+  --white: #fff;
+  --gray: #eee;
+  --bisque-light: rgb(248, 238, 225);
+  --gray-light: #b0bec5;
+  --gray-light2: rgb(239, 228, 234);
+  --gray-dark: #a7a7a7;
+  --gray-dark2: gray;
+  --black: #000;
+  --bisque: bisque;
+}
+
+/* HTML */
+html {
+  scroll-behavior: smooth;
+}
+
+/* BODY */
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  justify-content: space-between;
+}
+
+/* GENERAL */
+header,
+main,
+footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.header_inner,
+.main_inner,
+.footer_inner {
+  max-width: var(--primary-width);
+}
+
+/* HEADER */
+header {
+  min-height: 10vh;
+  background: var(--gray-light);
+}
+
+/* MAIN */
+main {
+  background: var(--purple);
+  flex-grow: 1;
+}
+
+/* FOOTER */
+footer {
+  min-height: 10vh;
+  background: var(--gray-light);
+}
diff --git a/26-lesson/index.html b/26-lesson/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="author" content="Kotibkhonov Zokirkhon" />
+    <title>26-lesson</title>
+    <link rel="stylesheet" href="./css/index.css">
+    <style>
+      .next-lesson {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid #f00;
+        padding: 1rem;
+        margin-top: 10rem;
+      }
+      .next-lesson a {
+        display: inline-block;
+        padding: 1rem;
+        color: #00f;
+        border-radius: 10px;
+      }
+      .back__btn:any-link {
+        border: 1px solid #00f;
+      }
+    </style>
+  </head>
+  <body>
+
+    <header>
+      <div class="header_inner">
+        <h1>Header</h1>
+      </div>
+    </header>
+
+    <main>
+      <div class="main_inner">
+        <h1>Main</h1>
+      </div>
+    </main>
+
+    <footer>
+      <div class="footer_inner">
+        <h1>Footer</h1>
+      </div>
+    </footer>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <!-- <div class="next-lesson">
+      <h1 style="border: none; text-align: center">New html Files</h1>
+      <a class="back__btn" href="./remExamples.html">units Rem examples Click me to see:)</a>
+      <a class="back__btn" href="./vwExamples.html">vwExamples click me to see:)</a>
+      <a class="back__btn" href="./166-page.html">166-page example cLick me to see :)</a>
+      <a class="back__btn" href="./163-172-pages.html"
+        >163-172-pages example cLick me to see :)</a
+      >
+    </div> -->
+  </body>
+</html>
diff --git a/main/app.js b/main/app.js
@@ -131,6 +131,11 @@ let allPaths = [
     name: "lesson(2023.06.12)",
     path: "./25-lesson/index.html",
   },
+  {
+    id: "26",
+    name: "lesson(2023.06.14)",
+    path: "./26-lesson/index.html",
+  },
 ];
 
 window.addEventListener("load", () => {