From ad3ffb0866603b633409afbc7488fba788962208 Mon Sep 17 00:00:00 2001 From: underdorff18 Date: Mon, 24 Jul 2023 19:26:11 -0400 Subject: [PATCH] adjusted styling on system blocks --- index.js | 11 ++++---- styles.css | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++-- systems.html | 15 ++++++++--- 3 files changed, 89 insertions(+), 11 deletions(-) diff --git a/index.js b/index.js index b0be012..0394514 100644 --- a/index.js +++ b/index.js @@ -15,16 +15,15 @@ function formatSystems(systems) { let systemsHTML = "" systems.forEach((system) => { systemsHTML = systemsHTML.concat(` -
-

${system.model}

\n -
-

${system.price} ${system.OS}

-
    +
    +

    ${system.model}

    +

    ${system.OS}

    +
      `) system.specs.forEach((spec) => { systemsHTML = systemsHTML.concat(`
    • ${spec}
      • `) }) - systemsHTML = systemsHTML.concat('
') + systemsHTML = systemsHTML.concat(`\$${system.price}
`) }); return systemsHTML; diff --git a/styles.css b/styles.css index 636dae1..6c97549 100644 --- 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; } \ No newline at end of file diff --git a/systems.html b/systems.html index 66d474d..dd876db 100644 --- a/systems.html +++ b/systems.html @@ -7,8 +7,8 @@ - + @@ -37,6 +37,15 @@

Computers Page

-
Test
+
+
+

Tech Sales

+

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.

+
+

Computers

+
system
+