test

akairisu · akairisu · commit 498f39ee7f27 · 2023-03-18T16:31:34.000+08:00
diff --git a/index.html b/index.html
@@ -19,6 +19,19 @@
   <script src="main.js"></script>
 </head>
 <body>
-  <!-- Your Code Here -->
+  <div class="banner"></div>
+  <div class="header">
+    <div class="logo"><img src="site_images/logo.png"></div>
+    <div id="title">Scotty Shirts U Illustrate (SSUI)</div>
+  </div>
+  <hr color="#dddddd"/>
+  <ul>
+    <li><a href="#home">T-SHIRTS</a></li>
+    <li><a href="#news">HOODIES</a></li>
+    <li><a href="#contact">CREATE YOUR OWN</a></li>
+    <li><a href="#contact">ABOUT US</a></li>
+    <li><a href="#contact">YOUR ACCOUNT</a></li>
+  </ul>
+  <img src="site_images/home.png" style="width:100%;height:auto;">
 </body>
 </html>
diff --git a/shirt_images/not-found.png b/shirt_images/not-found.png
diff --git a/style.css b/style.css
@@ -1 +1,60 @@
-/* Your Code Here */
+html, body {
+    margin: 0;
+    height: 100%;
+}
+
+.banner {
+    width: 100%;
+    height: 20px;
+    background-color: #c51230;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.header .logo{
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 10%;
+}
+
+.header .logo img{
+    width: 200px;
+}
+
+.header #title {
+    display: flex;
+    align-items: center;
+    margin-right: 10%;
+    font-family: "Catamaran";
+    font-size: 45px;
+    font-weight: 200;
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+li a {
+    display: block;
+    color: #c51230;
+    text-align: center;
+    font-family: "Open Sans";
+    padding: 14px 16px;
+    text-decoration: underline solid transparent;
+}
+
+/* Change the link color to #111 (black) on hover */
+li a:hover {
+    text-decoration: underline #c51230;
+    text-decoration-thickness: 10px;
+    transition: 1s ease;
+}
