diff --git a/week-03/css/style.css b/week-03/css/style.css
new file mode 100644
index 0000000..5ede739
--- /dev/null
+++ b/week-03/css/style.css
@@ -0,0 +1,419 @@
+/*! HTML5 Boilerplate v9.0.0-RC1 | MIT License | https://html5boilerplate.com/ */
+
+/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+
+   html {
+    color: #222;
+    font-size: 1em;
+    line-height: 1.4;
+  }
+  
+  /*
+   * Remove text-shadow in selection highlight:
+   * https://twitter.com/miketaylr/status/12228805301
+   *
+   * Customize the background color to match your design.
+   */
+  
+  ::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+  }
+  
+  ::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+  }
+  
+  /*
+   * A better looking default horizontal rule
+   */
+  
+  hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 1em 0;
+    padding: 0;
+  }
+  
+  /*
+   * Remove the gap between audio, canvas, iframes,
+   * images, videos and the bottom of their containers:
+   * https://github.com/h5bp/html5-boilerplate/issues/440
+   */
+  
+  audio,
+  canvas,
+  iframe,
+  img,
+  svg,
+  video {
+    vertical-align: middle;
+  }
+  
+  /*
+   * Remove default fieldset styles.
+   */
+  
+  fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+  
+  /*
+   * Allow only vertical resizing of textareas.
+   */
+  
+  textarea {
+    resize: vertical;
+  }
+  
+  /* ==========================================================================
+     Author's custom styles
+     ========================================================================== */
+  
+     .kosugi-maru-regular {
+      font-family: "Kosugi Maru", sans-serif;
+      font-weight: 400;
+      font-style: normal;
+    }  
+  
+     body {
+      margin:0;
+      padding:0;
+      height:100%;
+      font-family: "Kosugi Maru", sans-serif;
+      background-repeat: no-repeat;
+      background: rgb(185, 188, 221);
+      }
+  
+  .container {
+    width:100%;
+    display:flex;
+  flex-direction: column;
+  }
+  
+  
+  .vr {
+    border: 1px dashed rgb(109, 87, 132);
+    height: 0;
+    width: 100%;
+  }
+  
+  .box {
+    width:90%;
+    display: flex;
+    height:100%;
+    padding:20px 20px;
+    flex-direction: column;
+    gap: 10px;
+    padding:20px;
+    justify-content: center;
+    margin: 0 auto;
+  }
+  
+  section {
+    display: flex;
+  align-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: white;
+  gap:10px;
+  border-radius: 8px 8px;
+  padding: 20px;
+  box-shadow: 0px 0px 3px inset #0000004d, 2px 2px 6px #0000004d;
+  border: 5px solid white;
+  }
+  
+  section h2 {
+    color: white;
+    text-shadow: 1px 1px 3px #0000004d;
+    background-color: rgb(143, 161, 192);
+    border-radius: 5px;
+    border:#fff 1px solid;
+    padding: 20px;
+  }
+  header {
+  display: flex;
+  width:100%;
+  margin: 0;
+  background: rgb(148,155,233);
+  justify-content: center;
+  }
+  
+  header h1 {
+    color: white;
+    text-shadow: 1px 1px 3px #0000004d;
+    font-size: 48px;
+  }
+  
+  .title {
+    width: 100%;
+    background-image: url('../img/purple-plaid.jpg');
+  }
+  
+  .info {
+    display: flex;
+    align-content: center;
+    flex-direction: column;
+    padding: 20px;
+    gap:30px;
+    margin:20px;
+  }
+  
+  
+  .info img {
+    align-self: center;
+    transition: transform .4s; 
+    border-radius: 5rem;
+    width: 100%;
+  }
+  
+  .info img:hover {
+    transform: scale(1.2); 
+    border-radius: 15rem;  
+  }
+  
+  #sideimg {
+    width:100%;
+    border: none;
+  }
+  
+  article {
+  display: flex;
+  flex-direction: column;
+  background-color: #c9d4f4;
+  padding: 20px;
+  width:80%;
+  height:100%;
+  }
+  
+  nav {
+    display: flex;
+    background-color: rgb(224, 224, 224);
+    align-content: center;
+    align-items: center;
+    box-shadow: 0px 0px 3px inset #0000004d, 2px 2px 6px #0000004d;
+    font-size: 24px;
+  }
+  
+  .textbox {
+  color:black;
+  align-content: center;
+  align-items: center;
+  display: flex;
+  gap:20px;
+  margin:20px;
+  padding: 20px;
+  }
+  
+  footer {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    width: 100%;
+    justify-content: center;
+    background-color: rgb(224, 224, 224);
+    box-shadow: 0px 0px 3px inset #0000004d, 2px 2px 6px #0000004d;
+    font-size: 24px;
+  }
+  
+  .footertext {
+    display: flex;
+    align-items: center;
+    align-content: center;
+  }
+  
+  main {
+    display: flex;
+  }
+  
+  @media only screen and (min-width: 800px) {
+  .box {
+    flex-direction: row;
+  }
+  
+  .vr {
+    height: 700px;
+    width: 0;
+  }
+  
+  .info {
+    flex-direction: row;
+  }
+  
+  }
+  /* ==========================================================================
+     Helper classes
+     ========================================================================== */
+  
+  /*
+   * Hide visually and from screen readers
+   */
+  
+  .hidden,
+  [hidden] {
+    display: none !important;
+  }
+  
+  /*
+   * Hide only visually, but have it available for screen readers:
+   * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+   *
+   * 1. For long content, line feeds are not interpreted as spaces and small width
+   *    causes content to wrap 1 word per line:
+   *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+   */
+  
+  .visually-hidden {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+    /* 1 */
+  }
+  
+  /*
+   * Extends the .visually-hidden class to allow the element
+   * to be focusable when navigated to via the keyboard:
+   * https://www.drupal.org/node/897638
+   */
+  
+  .visually-hidden.focusable:active,
+  .visually-hidden.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    white-space: inherit;
+    width: auto;
+  }
+  
+  /*
+   * Hide visually and from screen readers, but maintain layout
+   */
+  
+  .invisible {
+    visibility: hidden;
+  }
+  
+  /*
+   * Clearfix: contain floats
+   *
+   * The use of `table` rather than `block` is only necessary if using
+   * `::before` to contain the top-margins of child elements.
+   */
+  
+  .clearfix::before,
+  .clearfix::after {
+    content: "";
+    display: table;
+  }
+  
+  .clearfix::after {
+    clear: both;
+  }
+  
+  /* ==========================================================================
+     EXAMPLE Media Queries for Responsive Design.
+     These examples override the primary ('mobile first') styles.
+     Modify as content requires.
+     ========================================================================== */
+  
+  @media only screen and (min-width: 35em) {
+    /* Style adjustments for viewports that meet the condition */
+  }
+  
+  @media print,
+    (-webkit-min-device-pixel-ratio: 1.25),
+    (min-resolution: 1.25dppx),
+    (min-resolution: 120dpi) {
+    /* Style adjustments for high resolution devices */
+  }
+  
+  /* ==========================================================================
+     Print styles.
+     Inlined to avoid the additional HTTP request:
+     https://www.phpied.com/delay-loading-your-print-css/
+     ========================================================================== */
+  
+  @media print {
+    *,
+    *::before,
+    *::after {
+      background: #fff !important;
+      color: #000 !important;
+      /* Black prints faster */
+      box-shadow: none !important;
+      text-shadow: none !important;
+    }
+  
+    a,
+    a:visited {
+      text-decoration: underline;
+    }
+  
+    a[href]::after {
+      content: " (" attr(href) ")";
+    }
+  
+    abbr[title]::after {
+      content: " (" attr(title) ")";
+    }
+  
+    /*
+     * Don't show links that are fragment identifiers,
+     * or use the `javascript:` pseudo protocol
+     */
+    a[href^="#"]::after,
+    a[href^="javascript:"]::after {
+      content: "";
+    }
+  
+    pre {
+      white-space: pre-wrap !important;
+    }
+  
+    pre,
+    blockquote {
+      border: 1px solid #999;
+      page-break-inside: avoid;
+    }
+  
+    tr,
+    img {
+      page-break-inside: avoid;
+    }
+  
+    p,
+    h2,
+    h3 {
+      orphans: 3;
+      widows: 3;
+    }
+  
+    h2,
+    h3 {
+      page-break-after: avoid;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/week-03/img/kitten.jpg b/week-03/img/kitten.jpg
new file mode 100644
index 0000000..c2ed034
Binary files /dev/null and b/week-03/img/kitten.jpg differ
diff --git a/week-03/img/pngtree-isolated-cat-on-white-background-png-image_7094927.png b/week-03/img/pngtree-isolated-cat-on-white-background-png-image_7094927.png
new file mode 100644
index 0000000..593c672
Binary files /dev/null and b/week-03/img/pngtree-isolated-cat-on-white-background-png-image_7094927.png differ
diff --git a/week-03/index.html b/week-03/index.html
new file mode 100644
index 0000000..98c1623
--- /dev/null
+++ b/week-03/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    <title>Week 3 Assignment</title>
+</head>
+<body>
+<!-- Add your site or application content here -->
+<div class="container">
+    <header>
+      <div class="textbox">
+      <h1>Home</h1>
+      </div>
+    </header>
+    <nav>
+      <div class="textbox">
+      <p>Home</p>
+      <p>About Us</p>
+      <p>Services</p>
+      </div>
+    </nav>
+    <div class="box">
+ 
+ 
+      <main>
+        <section>
+          <div class="title"><h2>About</h2></div>
+            <div class="info">
+        <img src="img/kitten.jpg" alt="profile-pic">
+          <article>
+        <h3>About the Site</h3>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam id ratione esse nemo molestias recusandae tenetur ipsam alias, pariatur aut natus rerum in fuga sequi eaque suscipit dolores cupiditate molestiae!</p>
+        </p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa non tempora assumenda architecto aliquam sit laborum consequatur incidunt, iusto fugit voluptatum vitae repellendus id magni illum tenetur laboriosam nostrum quis.</p>
+
+        <div id="sideimg">
+        <img src="img/pngtree-isolated-cat-on-white-background-png-image_7094927.png" alt="cat">
+      </div>
+      </article>
+    </div>
+      </section>
+    </main>
+ 
+ 
+ 
+ 
+      <section>
+        <div class="title"><h2>Lorem</h2></div>
+        <article>
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa non tempora assumenda architecto aliquam sit laborum consequatur incidunt, iusto fugit voluptatum vitae repellendus id magni illum tenetur laboriosam nostrum quis.</p>
+      </article>
+        <hr>
+        <div class="title"><h2>Lorem</h2></div>
+        <article>
+        <ul>
+          <li><a href="https://www.pinterest.com/">pinterest</a></li>
+          <li><a href="https://www.last.fm/">lastfm</a></li>
+          <li><a href="https://letterboxd.com/">letterboxd</a></li>
+        </ul>
+        </article>
+      </section>
+ 
+ 
+    </div>
+    <footer>
+      <div class="textbox">
+      <div class="footertext">
+      <p>Pamela Mackingue - DMD 3475</p>
+    </div>
+      </div>
+    </footer>
+  </div>
+ 
+    <script>
+        let userInput = window.prompt("Please enter your name:", "");
+    
+        if (userInput !== null) {
+            userInput = userInput.toUpperCase();
+            alert("Greetings, " + userInput + ". Welcome to my website!");
+        } else {
+            alert("You clicked Cancel.");
+        }
+    </script>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/week-03/js/week-03.js b/week-03/js/week-03.js
new file mode 100644
index 0000000..e69de29