adjusted styling on system blocks

underdorff18 · Jul 24, 2023 · ad3ffb0 · ad3ffb0
1 parent ad6811d
commit ad3ffb0
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 11 deletions.
diff --git a/index.js b/index.js
@@ -15,16 +15,15 @@ function formatSystems(systems) {
     let systemsHTML = ""
     systems.forEach((system) => {
         systemsHTML = systemsHTML.concat(`
-            <div id="system">
-            <h1>${system.model}</h1>\n
-            <div id="system-details">
-            <p>${system.price} ${system.OS}</p>
-            <ul id="system-specs">
+            <div class="system-block">
+            <h2 class="system-title">${system.model}</h2>
+            <h3 class="system-OS">${system.OS}</h3>
+            <ul class="system-specs">
             `)
         system.specs.forEach((spec) => {
             systemsHTML = systemsHTML.concat(`<li id="system-spec">${spec}</li>`)
         })
-        systemsHTML = systemsHTML.concat('</ul></div></div>')
+        systemsHTML = systemsHTML.concat(`</ul><span class="system-price">\$${system.price}</span></div>`)
     });
 
     return systemsHTML;

diff --git a/styles.css b/styles.css
@@ -43,6 +43,15 @@ table {
 	border-spacing: 0;
 }
 
+
+/*general*/
+h1 {
+    padding: 1em;
+    font-family: 'Tektur', cursive;
+    font-size: larger;
+}
+
+
 /*Header*/
 #main-header {
     display: flex;
@@ -76,15 +85,76 @@ table {
 
 
 /*Main Content*/
+#main-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
 
+#sales-info-container {
+    max-width: 1192px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#main-content-title {
+    padding: 1em;
+    font-family: 'Tektur', cursive;
+    font-size: larger;
+}
+
+#sales-info {
+    font-size: large;
+    padding-left: 2em;
+    padding-right: 2em;
+    text-align: justify;
+}
 
 #systems-container {
     display: flex;
     justify-content: center;
+    flex-wrap: wrap;
 }
 
-#system {
+
+.system-block {
     padding: 1rem;
-    border: 2px solid gray; 
+    border: solid 2px lightslategray;
+    box-shadow: 10px 10px 5px lightgray;
     margin: 1rem;
+}
+
+.system-title {
+    font-family: 'Tektur', cursive;
+    font-size: 40px;
+    font-weight: 700;
+}
+
+.system-OS {
+    font-family: Arial, sans-serif;
+    font-size: 20px;
+    font-weight: 100;
+    letter-spacing: .25px;
+    color: rgb(75, 75, 105);
+    padding: .5rem 0rem 1rem;
+}
+
+.system-specs {
+    font-family: Arial, sans-serif;
+    font-size: .875rem;
+    font-weight: 300;
+    letter-spacing: 0.3px;
+    padding-bottom: 2rem;
+}
+
+.system-spec {
+    padding: .2rem 0rem;
+}
+
+.system-price {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 40px;
+    font-weight: 300;
+    padding: 1rem 0rem;
 }
diff --git a/systems.html b/systems.html
@@ -7,8 +7,8 @@
     <style></style>
     <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=Inter:wght@300;400;500;600;700&family=Tektur:wght@600&display=swap"
-      rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@100&family=Tektur:wght@600&display=swap"
+     rel="stylesheet">
   </head>
   <body>
     <!--Header-->
@@ -37,6 +37,15 @@ <h1 id="title">Computers Page</h1>
       </div>
     </header>
     <!--Main Content-->
-    <div id="systems-container">Test</div>
+    <main id="main-content">
+      <div id="sales-info-container">
+        <h1 id="main-content-title">Tech Sales</h1>
+        <p id="sales-info">We carry a wide variety of computers and parts. Most of our items are used, but we do occasionally have new items in stock. 
+          We carry laptop and desktop PCs, MacBooks, iMacs, and more. All used computers come with a 30 day hardware warranty. Have a 
+          look at some of our computers we have in stock below.</p>
+      </div>
+      <h1 id="systems-title">Computers</h1>
+      <div id="systems-container">system</div>
+    </main>
   </body>
 </html>