total depolyed projects

Builter251 · Jul 24, 2024 · 7f4a8b1 · 7f4a8b1
1 parent 6fa0324
commit 7f4a8b1
Show file tree

Hide file tree

Showing 12 changed files with 652 additions and 134 deletions.
diff --git a/img/precontract_hover_after.png → html-css/ax1/img/precontract_hover_after.png b/img/precontract_hover_after.png → html-css/ax1/img/precontract_hover_after.png
diff --git a/img/precontract_hover_before.png → ...-css/ax1/img/precontract_hover_before.png b/img/precontract_hover_before.png → ...-css/ax1/img/precontract_hover_before.png
diff --git a/html-css/ax1/index.html b/html-css/ax1/index.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>CASPER Electric</title>
+  </head>
+
+  <body>
+    <!-- Background Video -->
+    <iframe
+      class="vidBg"
+      src="https://www.youtube.com/embed/a3xpXkBj_Ak?si=dTMuJlheMIn26Rat&amp;controls=0&autoplay=0&mute=1&loop=0&playlist=a3xpXkBj_Ak"
+      title="YouTube video player"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+    ></iframe>
+
+    <header>
+      <h1>CASPER<br>Electric</h1>
+
+      <!-- Navigation -->
+      <nav>
+        <ul>
+          <li>
+            <a href="#">The Look</a>
+            <ul class="dropdown">
+              <li><a href="#">Electric City Car</a></li>
+              <li><a href="#">Versatility</a></li>
+            </ul>
+          </li>
+
+          <li>
+            <a href="#">Interior</a>
+            <ul class="dropdown">
+              <li><a href="#">Roominess</a></li>
+              <li><a href="#">Flexibility</a></li>
+            </ul>
+          </li>
+
+          <li>
+            <a href="#">Performance</a>
+            <ul class="dropdown">
+              <li><a href="#">Driving Range</a></li>
+              <li><a href="#">Fast Charging</a></li>
+            </ul>
+          </li>
+
+          <li>
+            <a href="#">Safety</a>
+            <ul class="dropdown">
+              <li><a href="#">Advanced Driver Assistance</a></li>
+              <li><a href="#">Smart Senses</a></li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+
+      <!-- SNS Lists -->
+      <ul class="snsLists">
+        <li>
+          <a href="https://www.facebook.com/hyundai.kor"
+            ><i class="fab fa-facebook"></i
+          ></a>
+        </li>
+        <li>
+          <a href="https://www.youtube.com/@hyundai_kor"
+            ><i class="fab fa-youtube"></i
+          ></a>
+        </li>
+        <li>
+          <a href="https://x.com/hyundai_kor"><i class="fab fa-twitter"></i></a>
+        </li>
+        <li>
+          <a href="https://www.instagram.com/hyundai_kor/"
+            ><i class="fab fa-instagram"></i
+          ></a>
+        </li>
+      </ul>
+    </header>
+
+    <aside>
+      <!-- Reference Docs Menu -->
+      <section class="reference">
+        <h2 class="sr-only">Reference</h2>
+
+        <input type="checkbox" id="refToggle" class="sr-only" />
+        <label for="refToggle" class="refLabel">
+          <i class="fas fa-plus-circle"></i>
+        </label>
+
+        <ul>
+          <li>
+            <a href="https://casper.hyundai.com/vehicles/electric/catalog"
+              >Digital Catalog</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://casper.hyundai.com/wcontents/repn-car/catalog/AX03/AX_CASPER_Electric_price.pdf"
+              >Price List</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://casper.hyundai.com/wcontents/repn-car/catalog/AX03/AX_CASPER_Electric_manual.pdf"
+              >EV Manual</a
+            >
+          </li>
+          <li>
+            <a href="https://www.mobis-as.com/multi_prod_manual.do"
+              >Infotainment System Manual</a
+            >
+          </li>
+        </ul>
+      </section>
+
+      <!-- Precontract Link Button -->
+      <section class="precontract">
+        <h2 class="sr-only">Precontract</h2>
+        <a
+          href="https://casper.hyundai.com/vehicles/electric/making/model"
+          class="precontract-button"
+          >Go to Precontract</a
+        >
+      </section>
+    </aside>
+  </body>
+</html>
diff --git a/style.css → html-css/ax1/style.css b/style.css → html-css/ax1/style.css
diff --git a/html-css/mobile/handwriting.jpg b/html-css/mobile/handwriting.jpg
diff --git a/html-css/mobile/hongong.jpg b/html-css/mobile/hongong.jpg
diff --git a/html-css/mobile/index.html b/html-css/mobile/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://kit.fontawesome.com/75ff4a9aa3.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="style.css">
+    <title>Mobile Page</title>
+</head>
+
+<body>
+    <header>
+        <h1>Hanbit</h1>
+        <nav>
+            <div class="navButton">
+                <label for="navToggle"><i class="fa-solid fa-sort-down"></i></label>
+            </div>
+            <input type="checkbox" id="navToggle" class="sr-only">
+
+            <ul>
+                <li><a href="#">Brand</a></li>
+                <li><a href="#">Network</a></li>
+                <li><a href="#">Store</a></li>
+                <li><a href="#">Support</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section>
+            <h2>Lorem Ipsum</h2>
+            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem, quidem odio voluptatum excepturi
+                repudiandae, quae doloribus, corporis accusantium quisquam a molestiae nostrum quis possimus repellendus
+                numquam reiciendis dolor unde blanditiis.</p>
+        </section>
+
+        <article>
+            <h2>혼자 공부하는 머신러닝 + 딥러닝</h2>
+            <h3>1:1 과외하듯 배우는 인공지능 자습서</h3>
+            <img src="hongong.jpg" alt="도서 [혼자 공부하는 머신러닝 + 딥러닝] 표지">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cumque aliquam natus porro repudiandae
+                consequatur eum, voluptas, incidunt, molestias perferendis ad iste non eveniet perspiciatis? Qui
+                architecto eaque expedita modi!</p>
+        </article>
+
+        <article>
+            <h2>나도 손글씨 반듯하게 잘 쓰면 소원이 없겠네</h2>
+            <h3>악필 교정부터 유려한 글씨체까지 4주 완성 펜크체 연습법</h3>
+            <img src="handwriting.jpg" alt="도서 [나도 손글씨 반듯하게 잘 쓰면 소원이 없겠네] 표지">
+            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore, cumque fugit, velit provident sed
+                aperiam rerum iste saepe corrupti aspernatur quo possimus in culpa quia officiis id sapiente repellendus
+                magni!</p>
+        </article>
+    </main>
+
+    <footer>
+        ©1991-2023 Example. All rights reserved
+    </footer>
+</body>
+
+</html>
diff --git a/html-css/mobile/style.css b/html-css/mobile/style.css
@@ -0,0 +1,132 @@
+:root {
+    --primary-color: #00afa0;
+    --text-color: #2a2a2a;
+    --background-color: #fff;
+    --footer-background: rgba(0, 0, 0, 0.8);
+    --footer-text-color: #fff;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    list-style: none;
+    text-decoration: none;
+    border: none;
+    word-break: keep-all;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+html {
+    font-size: 16px;
+}
+
+body {
+    min-height: 100vh;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    font-family: Arial, sans-serif;
+    color: var(--text-color);
+    background-color: var(--background-color);
+}
+
+h1 {
+    font-size: 2rem;
+    height: 2rem;
+    margin-left: 10px;
+}
+
+.navButton label {
+    text-align: center;
+    width: 1.6rem;
+    height: 1.6rem;
+    position: absolute;
+    right: 10px;
+    top: 0;
+    border: 2px solid var(--text-color);
+    border-radius: 25%;
+    margin: 0.2rem;
+}
+
+nav ul {
+    display: none;
+}
+
+nav li a {
+    display: block;
+    padding: 1rem;
+    color: var(--text-color);
+}
+
+#navToggle:checked~ul {
+    display: block;
+}
+
+section {
+    background-color: var(--primary-color);
+    padding: 20px 30px;
+    text-align: center;
+    color: var(--background-color);
+}
+
+section h2 {
+    margin-bottom: 20px;
+    font-weight: 500;
+}
+
+article {
+    padding-top: 30px;
+    padding-bottom: 30px;
+    text-align: center;
+}
+
+article p {
+    font-size: 1.0625rem;
+    color: var(--text-color);
+    padding: 20px 30px;
+}
+
+article img {
+    max-width: 100%;
+    width: 200px;
+    display: block;
+    margin: 10px auto;
+}
+
+footer {
+    padding: 10px;
+    text-align: center;
+    color: var(--footer-text-color);
+    background-color: var(--footer-background);
+}
+
+@media (min-width: 768px) {
+    .navButton {
+        display: none;
+    }
+
+    nav ul {
+        display: flex;
+        justify-content: space-around;
+    }
+
+    nav li {
+        display: inline-block;
+    }
+
+    article {
+        max-width: 800px;
+        margin: 0 auto;
+    }
+}