Merge pull request #1 from GolimarGit/create-grid-elements

Create grid elements
GolimarGit · Aug 20, 2024 · 5b1ea56 · 5b1ea56
2 parents becbc4e + 4ea935e
commit 5b1ea56
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 0 deletions.
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Critique Blog</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="flex-container">
+        <div class="header">
+            <h1>Golimar's Critique Blog</h1>
+        </div>
+
+        <section id="navbar-section">
+            <div id="navbar-div">
+                <ul id="navbar-ul">
+                    <li id="navbar-li"><a href="index.html">Home</a></li>
+                    <li id="navbar-li"><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">About Me</a></li>
+                    <li id="navbar-li"><a href="mailto:laurenzgomez23@gmail.com">Contact Me</a></li>
+                </ul>
+            </div>
+        </section>
+
+
+        <div id="body">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, aliquam! Ut blanditiis minus, fugiat autem animi nesciunt sit adipisci beatae expedita magni officia inventore officiis similique dignissimos vitae eos aspernatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem veritatis mollitia porro sunt reprehenderit officiis aliquid atque totam omnis ipsum, cum quas magnam sequi blanditiis accusantium ab commodi quidem saepe? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur cupiditate nam quas enim voluptates maiores. Dolorem suscipit sequi ad enim quis, beatae molestias soluta delectus architecto possimus aliquid libero quaerat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, temporibus voluptatem! Officia facilis libero beatae quia explicabo accusamus commodi inventore, alias debitis ex laudantium perspiciatis soluta. Provident alias neque soluta. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam iusto asperiores aliquid deserunt consequatur eius, natus qui, facere consectetur pariatur distinctio provident quam similique reprehenderit sit in iure tenetur sapiente. Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero atque sint minima earum facere nesciunt itaque tempore repellendus unde! Omnis magni alias quas similique voluptates praesentium, sequi facere! Saepe, corporis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit dolores sint consectetur reiciendis commodi consequuntur error, vitae pariatur quas eveniet perferendis voluptatibus laboriosam accusamus, assumenda optio libero unde tenetur repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, voluptatem perferendis dicta rem, sequi officia eum recusandae, aspernatur veritatis quos error ipsam corporis. In soluta esse molestiae odio, dolorum deserunt! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus distinctio hic sint. Ad ratione architecto mollitia laudantium officiis hic quo voluptates dolor, enim, id laborum assumenda tempore accusantium placeat quod?
+        </div>
+
+
+        <div class="footer">
+            <img id="wott" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a719e8f0-9f65-4188-a7a9-2a77c96f4640/d47kjfh-208175cd-d0e2-48ab-8a64-175216c669fd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3MTllOGYwLTlmNjUtNDE4OC1hN2E5LTJhNzdjOTZmNDY0MFwvZDQ3a2pmaC0yMDgxNzVjZC1kMGUyLTQ4YWItOGE2NC0xNzUyMTZjNjY5ZmQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.SQTDBzx94QV4b0V6uCpmQiUaFJ9IkR8oOwMzYPMpaME"
+                alt="wott-sprite">
+        </div>
+    </div>
+</body>
+</html>
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,86 @@
+/* Gets rid of borders */
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+.flex-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+}
+
+/* .window-layout {
+    display: grid;
+    grid-template-rows: 1 fr, 1 fr, 1fr;
+    grid-template-columns: repeat(3, 1fr);
+    width: 100 vw;
+    height: 100 vh;
+    background-color: gray;
+} */
+
+.header {
+    /* grid-row: 1 / 1;
+    grid-column: 1 / 3; */
+    text-align: center;
+    background-color: #448899;
+}
+
+#body {
+    width: 100%;
+    height: 100%;
+    background-color: #77ddee;
+}
+
+
+#navbar-section {
+    background-color: #dddddd;
+}
+
+#navbar-div {
+    /* grid-row: 2 / 2;
+    grid-column: 1 / 3; */
+    display: flex;
+    justify-content: center;
+}
+
+#navbar-ul {
+    display: block;
+    list-style-type: none;
+    overflow: hidden;
+}
+
+#navbar-li {
+    float: left;
+    display: block;
+    text-align: center;
+    padding: 16px;
+}
+
+#navbar-li a {
+    text-decoration: none;
+    list-style-type: none;
+    color: #448899;
+}
+
+#navbar-li:hover {
+    background-color: #ffffff;
+}
+
+
+.footer {
+    background-color: royalblue;
+    text-align: center;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+#wott {
+    padding-top: 5px;
+    width: 100px;
+    height: 100px;
+}