FOR EXTRA CREDIT SUBMISSION <3 YOU BRIAN

plb18001 · May 10, 2022 · eb2e420 · eb2e420
1 parent 774699d
commit eb2e420
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 0 deletions.
diff --git a/week-4/layout1/inbox-solid.svg b/week-4/layout1/inbox-solid.svg
diff --git a/week-4/layout1/main.css b/week-4/layout1/main.css
@@ -0,0 +1,45 @@
+nav {
+    background-color: #999;
+}
+nav a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding: 1em;
+}
+nav a:hover {
+    background-color: rgb(128, 128, 128);
+    border-radius: 10px;
+}
+ul {
+    margin:0;
+}
+body {
+    margin:0;
+}
+#inbox-div {
+    display: flex;
+    align-items: center;
+}
+img {
+    display: none;
+}
+
+@media(min-width: 750px) {
+    img {
+        display: block;
+        margin-right: 5px;
+    }
+    nav {
+        display:flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-left: 10px;
+    }
+    ul {
+        display: flex;
+        padding: 0px;
+        list-style: none;
+        gap: 1em;
+    }
+}
diff --git a/week-4/layout1/nav.html b/week-4/layout1/nav.html
@@ -0,0 +1,30 @@
+<!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">
+    <title>Layout 1</title>
+    <link rel="stylesheet" href="main.css">
+</head>
+<body>
+    <nav>
+        <ul>
+            <div id="inbox-div">
+                <img src="inbox-solid.svg" alt="inbox icon" width="20" height="20">
+                <li><a href="#">Inbox</a></li>
+            </div>
+            <li><a href="#">Sent</a></li>
+            <li><a href="#">Trash</a></li>
+        </ul>
+
+        <ul>
+            <li><a href="#">Settings</a></li>
+            <li><a href="#">Logout</a></li>
+        </ul>
+
+    </nav>
+
+
+</body>
+</html>
diff --git a/week-4/layout2/background.jpg b/week-4/layout2/background.jpg
diff --git a/week-4/layout2/fullscreen.html b/week-4/layout2/fullscreen.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=`, initial-scale=1.0">
+    <title>Layout 2</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div>
+        <img src="smile-regular.svg" alt="smiley face icon" width="60" height="60">
+        <h1>Welcome to the app!</h1>
+        <p>Thanks for signing up. Let's take a look around.</p>
+        <button>Begin Tour</button>
+    </div>
+
+</body>
+</html>
diff --git a/week-4/layout2/smile-regular.svg b/week-4/layout2/smile-regular.svg
diff --git a/week-4/layout2/style.css b/week-4/layout2/style.css
@@ -0,0 +1,24 @@
+body {
+    display: flex;
+    justify-content: center;
+    min-height: 100vh;
+    align-items: center;
+    background-image: url('background.jpg');
+    background-position: center;
+    background-size: cover;
+    text-align: center;
+}
+div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-style: solid;
+    padding: 10px;
+    color: white;
+}
+h1 {
+    margin-bottom: 0;
+}
+h1, p {
+    opacity: .7;
+}
diff --git a/week-4/layout3/index.html b/week-4/layout3/index.html
@@ -0,0 +1,33 @@
+<!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">
+    <title>Layout 3</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <section>
+        <article>
+            <h3>Bristol</h3>
+            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam quam, adipisci rem natus minus dolorum, at numquam similique atque facere laborum iure ea officiis molestias, fuga blanditiis dolor maxime. Ipsa!</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam maxime obcaecati repellendus necessitatibus at beatae ad porro asperiores sed ipsam? Facilis quo explicabo veritatis sit dolores ut maxime libero voluptatum.</p>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit aliquam reprehenderit veniam, deleniti modi repellat impedit sapiente cum voluptatum perferendis ipsam nam maiores iste numquam unde nemo veritatis! Sit, ducimus.</p>
+        </article>
+
+        <article>
+            <h3>Harbour Cranes</h3>
+            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam quam, adipisci rem natus minus dolorum, at numquam similique atque facere laborum iure ea officiis molestias, fuga blanditiis dolor maxime. Ipsa!</p>
+        </article>
+
+        <article>
+            <h3>Striped Balloon</h3>
+            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam quam, adipisci rem natus minus dolorum, at numquam similique atque facere laborum iure ea officiis molestias, fuga blanditiis dolor maxime. Ipsa!</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam maxime obcaecati repellendus necessitatibus at beatae ad porro asperiores sed ipsam? Facilis quo explicabo veritatis sit dolores ut maxime libero voluptatum.</p>
+        </article>
+    </section>
+
+</body>
+</html>
diff --git a/week-4/layout3/style.css b/week-4/layout3/style.css
@@ -0,0 +1,27 @@
+@media(min-width: 650px) {
+    section {
+        display: flex;
+        gap: 20px;
+    }
+}
+
+body {
+    margin: 1em;
+}
+article h3 {
+    background-color: rgb(62, 161, 87);
+    color: white;
+    padding: 1em;
+    padding-left: 10px;
+    margin: 0;
+}
+article p {
+    padding: 10px;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+article {
+    border: 1px solid rgb(83, 83, 83);
+    box-shadow: 3px 3px 4px 2px #e3e3e3;
+    margin-bottom: 20px;
+}