Inital

Ancliz · May 17, 2024 · 9e71811 · 9e71811
commit 9e71811
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 0 deletions.
diff --git a/css/global.css b/css/global.css
@@ -0,0 +1,21 @@
+body {
+    color: #fffff2;
+}
+
+nav {
+    background-color: #1b1e21;   
+    border-bottom: medium solid maroon;
+}
+
+
+.test {
+    background-color: maroon;
+}
+
+.test-2 {
+    background-color: blueviolet;
+}
+
+.test-3 {
+    background-color: darkcyan;
+}
diff --git a/css/home-styles.css b/css/home-styles.css
@@ -0,0 +1,23 @@
+#showcase {
+    padding: 5%;
+    display: flex;
+    flex-wrap: nowrap; 
+
+.showcase-item {
+    margin-right: 20px;
+}
+
+.showcase-item:last-child {
+    margin-right: 0; 
+}
+
+#showcase img {
+    max-width: 100%;
+    height: auto;
+}
+
+.poetsen-one-regular {
+    font-family: "Poetsen One", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
diff --git a/html/index.html b/html/index.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Ancliz</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link href="../css/global.css" rel="stylesheet">
+    <link href="../css/home-styles.css" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poetsen+One&display=swap" rel="stylesheet">
+  </head>
+  <body class="bg-dark light-text">
+    <div>
+        <header>
+            <nav class="container-fluid navbar navbar-expand-lg navbar-dark px-3">
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="collapse navbar-collapse" id="navbarNav">
+                        <ul class="navbar-nav me-auto">
+                            <li class="nav-item active">
+                                <a class="nav-link" href="#">Home</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#">Store</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#">Projects</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#">About</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#">Contact</a>
+                            </li>
+                        </ul>
+                        <ul class="navbar-nav ms-auto">
+                            <li class="nav-item">
+                                <a class="nav-link" href="#">Login</a>
+                            </li>
+                        </ul>
+                    </div>
+            </nav>
+        </header>
+        <main class="container-fluid light-text">
+            <div class="row test" id="showcase">
+                <div class="col-lg-6 showcase-item">
+                    <div class="row test-2">
+                        <div class="col-lg-6 d-flex justify-content-center align-items-center">
+                            <img src="../img/dummy.jpg" class="img-fluid">
+                        </div>
+                        <div class="col-lg-6 d-flex justify-content-center align-items-center">
+                            <p class="poetsen-one-regular">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est soluta omnis doloremque. Molestias incidunt natus 
+                                explicabo vel nobis. Atque modi ipsa magni laborum obcaecati nemo pariatur possimus ducimus dolores ab!
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6 showcase-item">
+                    <div class="row test-2">
+                        <div class="col-lg-6 d-flex justify-content-center align-items-center">
+                            <img src="../img/dummy.jpg" class="img-fluid">
+                        </div>
+                        <div class="col-lg-6 d-flex justify-content-center align-items-center">
+                            <p class="poetsen-one-regular">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est soluta omnis doloremque. Molestias incidunt natus 
+                                explicabo vel nobis. Atque modi ipsa magni laborum obcaecati nemo pariatur possimus ducimus dolores ab!
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+
+
+        <footer>
+
+        </footer>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous">
+    </script>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" 
+        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+        crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/img/dummy.jpg b/img/dummy.jpg
diff --git a/index.php b/index.php
@@ -0,0 +1,4 @@
+<?php
+header('Location: ./html/index.html');
+exit();
+?>