Add files via upload

smithin45 · Aug 4, 2024 · d4c2504 · d4c2504
commit d4c2504
Show file tree

Hide file tree

Showing 14 changed files with 316 additions and 0 deletions.
diff --git a/KOMBAN-main/README.md b/KOMBAN-main/README.md
@@ -0,0 +1,32 @@
+# 🐠 Welcome to Fin Fancy Exotic Fish Store Project! 🐟
+
+## 🌊 Dive Into Our Project
+
+Hello, young web explorers! Get ready to submerge into the deep blue sea with the Fin Fancy Exotic Fish Store project. This underwater adventure will introduce you to the dazzling world of exotic fish while teaching you the basics of creating a website. 🌐🐡
+
+## 📚 What Will We Learn?
+
+Building the Fin Fancy website is like embarking on a scuba diving trip, where you'll discover hidden treasures in the form of HTML and CSS skills. Here's a sneak peek of what's in store:
+
+### HTML: Your Aquarium
+
+- **Structure Your Page**: Learn how to set up your webpage with the `<!DOCTYPE html>` and explore the roles of the `html`, `head`, and `body` tags.
+- **Dive Into Headings and Paragraphs**: Use `<h1>`, `<h2>`, and `<p>` to tell everyone about the Fin Fancy Exotic Fish Store.
+- **Showcase Your Fish**: Bring your page to life with `<img>` tags, displaying the colorful inhabitants of your digital aquarium.
+- **Clickable Buttons**: Discover how to use `<button>` tags to invite visitors to order their favorite fish.
+
+### CSS: Decorating Your Aquarium
+
+- **Splash of Color**: Use CSS to add color and style to your webpage, making it as vibrant as a coral reef.
+- **Layouts and Flexbox**: Arrange your content neatly using CSS Flexbox, ensuring your fish cards swim gracefully across the page.
+- **Responsive Design**: Make sure your digital aquarium looks great on any device, teaching you the basics of responsive web design.
+
+## 🎨 Let's Make It Fun!
+
+This project isn't just about learning to code; it's about creating an online space where everyone can explore the beauty of the ocean's hidden wonders. By the end of this project, you'll not only have a deeper appreciation for exotic fish but also the skills to create your very own website.
+
+## 🚀 Ready to Start?
+
+Grab your diving gear (keyboard and mouse) and prepare to dive into the coding depths! By the end of this adventure, you'll have discovered the fascinating world of Fin Fancy Exotic Fish Store and learned how to share it with the world through your very own website.
+
+Happy Coding, young explorers! 🚀👩‍💻👨‍💻
diff --git a/KOMBAN-main/images/finfancy.png b/KOMBAN-main/images/finfancy.png
diff --git a/KOMBAN-main/images/fish1.png b/KOMBAN-main/images/fish1.png
diff --git a/KOMBAN-main/images/fish2.png b/KOMBAN-main/images/fish2.png
diff --git a/KOMBAN-main/images/fish3.png b/KOMBAN-main/images/fish3.png
diff --git a/KOMBAN-main/images/fish4.png b/KOMBAN-main/images/fish4.png
diff --git a/KOMBAN-main/images/fish5.png b/KOMBAN-main/images/fish5.png
diff --git a/KOMBAN-main/images/fish6.png b/KOMBAN-main/images/fish6.png
diff --git a/KOMBAN-main/images/fish7.png b/KOMBAN-main/images/fish7.png
diff --git a/KOMBAN-main/images/fish8.png b/KOMBAN-main/images/fish8.png
diff --git a/KOMBAN-main/images/fish9.png b/KOMBAN-main/images/fish9.png
diff --git a/KOMBAN-main/index.html b/KOMBAN-main/index.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KOMBAN STORE</title>
+
+    <link href="./style.css" rel="stylesheet" />
+</head>
+<body>
+
+    <div class="top__container">
+        <h1>KOMBAN STORE </h1>
+
+        <p>FANCY ITEMS</p>
+    </div>
+
+
+
+    <div class="bottom__container">
+
+        <div class="fish__card">
+            <div class="image__container">
+                <img src="./images/fish1.png" alt="fish" />
+            </div>
+
+            <div class="card__info">
+                <p>$89</p>
+
+                <h3>Fish Name</h3>
+
+                <button>Order Now</button>
+            </div>
+        </div>
+
+
+
+        <div class="fish__card">
+            <div class="image__container">
+                <img src="./images/fish2.png" alt="fish" />
+            </div>
+
+            <div class="card__info">
+                <p>$89</p>
+
+                <h3>Fish Name</h3>
+
+                <button>Order Now</button>
+            </div>
+        </div>
+
+
+        <div class="fish__card">
+            <div class="image__container">
+                <img src="./images/fish3.png" alt="fish" />
+            </div>
+
+            <div class="card__info">
+                <p>$89</p>
+
+                <h3>Fish Name</h3>
+
+                <button>Order Now</button>
+            </div>
+        </div>
+
+
+
+        <div class="fish__card">
+            <div class="image__container">
+                <img src="./images/fish4.png" alt="fish" />
+            </div>
+
+            <div class="card__info">
+                <p>$89</p>
+
+                <h3>Fish Name</h3>
+
+                <button>Order Now</button>
+            </div>
+        </div>
+
+
+        <div class="fish__card">
+            <div class="image__container">
+                <img src="./images/fish5.png" alt="fish" />
+            </div>
+
+            <div class="card__info">
+                <p>$89</p>
+
+                <h3>Fish Name</h3>
+
+                <button>Order Now</button>
+            </div>
+        </div>
+
+
+
+
+        <div class="fish__card">
+            <div class="image__container">
+                <img src="./images/fish6.png" alt="fish" />
+            </div>
+
+            <div class="card__info">
+                <p>$89</p>
+
+                <h3>Fish Name</h3>
+
+                <button>Order Now</button>
+            </div>
+        </div>
+
+
+        <div class="fish__card">
+            <div class="image__container">
+                <img src="./images/fish7.png" alt="fish" />
+            </div>
+
+            <div class="card__info">
+                <p>$89</p>
+
+                <h3>Fish Name</h3>
+
+                <button>Order Now</button>
+            </div>
+        </div>
+
+
+
+        <div class="fish__card">
+            <div class="image__container">
+                <img src="./images/fish8.png" alt="fish" />
+            </div>
+
+            <div class="card__info">
+                <p>$89</p>
+
+                <h3>Fish Name</h3>
+
+                <button>Order Now</button>
+            </div>
+        </div>
+
+
+        <div class="fish__card">
+            <div class="image__container">
+                <img src="./images/fish9.png" alt="fish" />
+            </div>
+
+            <div class="card__info">
+                <p>$89</p>
+
+                <h3>Fish Name</h3>
+
+                <button>Order Now</button>
+            </div>
+        </div>
+
+    </div>
+
+
+</body>
+</html>
diff --git a/KOMBAN-main/komban/README.md b/KOMBAN-main/komban/README.md
@@ -0,0 +1 @@
+# komban
diff --git a/KOMBAN-main/style.css b/KOMBAN-main/style.css
@@ -0,0 +1,118 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+}
+
+.top__container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+
+    margin-top: 48px;
+    margin-bottom: 48px;
+}
+
+
+.top__container h1 {
+    font-size: 44px;
+    margin-bottom: 12px;
+    text-align: center;
+}
+
+.top__container p {
+    text-align: center;
+}
+
+
+.bottom__container {
+    display: flex;
+    flex-direction: row;
+
+    align-items: flex-start;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 45px;
+}
+
+.bottom__container .fish__card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+
+    height: 380px;
+    width: 30%;
+    padding: 18px;
+    margin-bottom: 26px;
+
+    -webkit-box-shadow: 5px 5px 27px 6px rgba(0,0,0,0.44); 
+    box-shadow: 5px 5px 27px 6px rgba(0,0,0,0.44);
+}
+
+
+.bottom__container .fish__card .image__container {
+    width: 90%; 
+    height: 200px; 
+    overflow: hidden;
+}
+
+.bottom__container .fish__card .image__container img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.bottom__container .fish__card .card__info {
+    display: flex;
+    flex-direction: column;
+
+    justify-content: space-between;
+    width: 90%;
+    height: 30%;
+}
+
+.bottom__container .fish__card .card__info p {
+    font-size: 26px;
+}
+
+.bottom__container .fish__card .card__info h3 {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.bottom__container .fish__card .card__info button {
+    height: 34px;
+    border: none;
+    background-color: #4287f5;
+
+    color: #fff;
+    font-size: 18px;
+
+    cursor: pointer;
+    transition: 0.2s all ease-in;
+}
+
+.bottom__container .fish__card .card__info button:hover {
+    background-color: #1c51a7;
+}
+
+
+
+@media screen and (max-width: 900px) {
+    .bottom__container .fish__card {
+        width: 48%;
+    }
+
+}
+
+@media screen and (max-width: 530px) {
+    .bottom__container .fish__card {
+        width: 98%;
+    }
+}