From a2aab5a54ba6fafbec387011d94878111bd8ecd3 Mon Sep 17 00:00:00 2001 From: JPerry Date: Fri, 3 Oct 2025 19:42:40 -0400 Subject: [PATCH 1/3] hhgdh --- assets/css/style.css | 124 +++++++++++++++++++++++++++++-------------- index.html | 2 +- 2 files changed, 86 insertions(+), 40 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 2527600..76d8065 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -6,12 +6,12 @@ --container: 1120px; /* Typography system */ - --font-base: 16px; - --font-small: 14px; - --font-medium: 20px; - --font-large: 28px; + --font-base: 20px; + --font-small: 15px; + --font-medium: 25px; + --font-large: 35px; --font-xlarge: 40px; - --line-height-base: 24px; + --line-height-base: 50px; } * { @@ -21,39 +21,46 @@ @font-face { font-family: "Montserrat"; src: url("Montserrat-Regular.woff2") format("woff2"), - url("Montserrat-Regular.woff") format("woff"); + url("Montserrat-Regular.woff") format("woff"); font-weight: normal; font-style: normal; } -html, body { +html, +body { margin: 0; padding: 0; + align-items: flex; scroll-behavior: smooth; justify-content: center; } -body, .main-text { - background-color: rgb(10, 10, 10); +body, +.main-text { + background-color: rgb(12, 12, 12); font-family: "Montserrat", Arial, Helvetica, sans-serif; font-size: var(--font-base); line-height: var(--line-height-base); color: white; + justify-content: center; + align-items: center; + text-align: center; + scroll-behavior: smooth; } /* Typography hierarchy */ h1 { font-family: Cambria, Cochin, serif; font-size: var(--font-xlarge); - line-height: 48px; + line-height: 50px; margin: 0 0 16px; - text-shadow: black 0 0 40px; + text-shadow: black 0 0 20px; text-align: center; } h2 { font-family: Cambria, Cochin, serif; font-size: var(--font-large); - line-height: 36px; + line-height: 40px; margin: 0 0 12px; text-align: center; } @@ -67,16 +74,29 @@ h3 { p { font-size: var(--font-base); line-height: var(--line-height-base); - margin-bottom: 16px; + margin: 10px; } /* Containers */ .container { max-width: var(--container); margin-bottom: 0 auto; + position: auto; + align-items: center; +} +.container .section__cards { + max-width: var(--container); + position: relative; + display: flex; + height: auto; + width: 100%; +} +.container__CrowdPic { + max-width: var(--container); position: relative; - padding: 20px; - justify-content: flex-start; + display: flex; + height: 100%; + width: 100%; } /* Header & Navigation */ @@ -88,6 +108,8 @@ p { } .site-nav { + font-size: 20px; + justify-content: space-between; padding: 5px; display: flex; align-items: left; @@ -103,7 +125,7 @@ p { color: rgb(238, 109, 16); border: 1px solid; border-radius: 999px; - box-shadow: 2px 2px 1px 0 rgb(238, 109, 16); + box-shadow: 4px 3px 1px 1px rgb(238, 109, 16); padding: 8px; } @@ -122,7 +144,6 @@ p { justify-content: center; align-items: center; text-align: center; - min-height: 100vh; overflow: hidden; } .hero__overlay { @@ -147,10 +168,8 @@ p { } .hero h2 { color: #211994e9; - text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, - 0 0 20px #d4f321, 0 0 35px #d4f321, - 0 0 40px #d4f321, 0 0 50px #d4f321, - 0 0 75px #d4f321; + text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #d4f321, + 0 0 35px #d4f321, 0 0 40px #d4f321, 0 0 50px #d4f321, 0 0 75px #d4f321; margin-bottom: 32px; } .hero p { @@ -160,19 +179,30 @@ p { /* Sections */ .section { + flex-wrap: wrap; + display: flex; + height: auto; + width: 100%; padding: 0; + align-items: center; + text-align: center; + justify-items: center; + position: relative; } -.section__title { - font-family: Cambria, Cochin, serif; +.section__cards { + height: auto; + width: 100%; font-size: var(--font-large); - color: black; + color: #7cf321; + text-shadow: #7cf321 0 0 20px; text-align: center; - margin: 0; + flex-wrap: wrap; } .section__title p { font-size: var(--font-small); color: black; text-align: center; + flex-wrap: wrap; text-shadow: #7cf321 0 0 20px; } .section__title .p2 { @@ -180,32 +210,35 @@ p { color: var(--charcoal); text-shadow: #7cf321 0 0 20px; text-align: center; + display: flex; + justify-content: center; } .section--alt { - background: var(--charcoal); - color: greenyellow; - font-size: 40px; + height: auto; + width: auto; + background: white; + color: rgb(10, 8, 58); + font-size: 35px; + display: center; text-align: center; line-height: 40px; - margin: 0; - padding: 40px 0; } .section--alt p { font-family: Cambria, Cochin, serif; - font-size: 18px; + font-size: 20px; color: rgba(255, 115, 0, 0.949); } -.section--alt p2{ +.section--alt p2 { font-family: Cambria, Cochin, serif; color: rgb(247, 163, 5); - font-size: 35px; + font-size: 10px; text-align: center; } /* Cards */ .cards { - display: flex; flex-wrap: wrap; + display: flex; gap: 10px; } .card { @@ -223,6 +256,7 @@ p { /* Lists */ details.services__all { + align-items: center; margin-top: 16px; } .list { @@ -238,7 +272,8 @@ details.services__all { flex-direction: column; margin-bottom: 16px; } -input, textarea { +input, +textarea { padding: 12px; border-radius: 8px; border: 1px solid #ddd; @@ -254,7 +289,7 @@ input, textarea { padding: 20px 20px; color: rgb(238, 109, 16); border-radius: 999px; - box-shadow: 2px 2px 1px 1px rgb(238, 109, 16); + box-shadow: 2px 2px 1px 1px rgb(238, 109, 16); text-decoration: none; text-shadow: 2px 2px #20202e; cursor: pointer; @@ -269,7 +304,7 @@ input, textarea { /* Footer */ .site-footer { - background: black; + background: rgba(32, 30, 30, 1); text-align: center; font-size: var(--font-small); } @@ -305,6 +340,12 @@ input, textarea { display: flex; } .cards { + position: flex; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + overflow: hidden; grid-template-columns: repeat(2, 1fr); } .footer__grid { @@ -314,12 +355,17 @@ input, textarea { @media (min-width: 1024px) { .hero { - min-height: 780px; + min-height: 500px; } .cards { - grid-template-columns: repeat(2, 1fr); + justify-content: space-between; + flex-wrap: wrap; + gap: 10px; + grid-auto-flow: column; + grid-template-columns: repeat(4, 1fr); } .section__title { font-size: 32px; + align-items: center; } } diff --git a/index.html b/index.html index 89669f1..0af6d6a 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@

(216) 954-4104

-

+

Backline Equipment

From e15b298d756db734cc1797895ebd2610790a47c2 Mon Sep 17 00:00:00 2001 From: JPerry Date: Fri, 3 Oct 2025 21:12:31 -0400 Subject: [PATCH 2/3] final for today --- assets/css/style.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 76d8065..49d55b7 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -236,11 +236,6 @@ p { } /* Cards */ -.cards { - flex-wrap: wrap; - display: flex; - gap: 10px; -} .card { background: black; border: 1px solid #fff; From c78eb56fbed0f53a501fcc173df09aa091ce6f3c Mon Sep 17 00:00:00 2001 From: JPerry Date: Fri, 3 Oct 2025 21:12:49 -0400 Subject: [PATCH 3/3] sdiosgf --- assets/css/style.css | 92 ++++++++++++++++++++++---------------------- 1 file changed, 45 insertions(+), 47 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 49d55b7..59a051f 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -28,7 +28,6 @@ html, body { - margin: 0; padding: 0; align-items: flex; scroll-behavior: smooth; @@ -37,6 +36,8 @@ body { body, .main-text { + padding: 0; + margin: 0; background-color: rgb(12, 12, 12); font-family: "Montserrat", Arial, Helvetica, sans-serif; font-size: var(--font-base); @@ -53,7 +54,6 @@ h1 { font-family: Cambria, Cochin, serif; font-size: var(--font-xlarge); line-height: 50px; - margin: 0 0 16px; text-shadow: black 0 0 20px; text-align: center; } @@ -61,44 +61,38 @@ h2 { font-family: Cambria, Cochin, serif; font-size: var(--font-large); line-height: 40px; - margin: 0 0 12px; text-align: center; } h3 { font-family: Cambria, Cochin, serif; font-size: var(--font-medium); line-height: 28px; - margin: 0 0 8px; text-align: center; } p { font-size: var(--font-base); line-height: var(--line-height-base); - margin: 10px; } /* Containers */ .container { - max-width: var(--container); - margin-bottom: 0 auto; - position: auto; + justify-content: center; align-items: center; -} -.container .section__cards { - max-width: var(--container); - position: relative; - display: flex; + align-content: center; + display: center; height: auto; width: 100%; } +.container__cards { + padding-bottom: 20px; +} .container__CrowdPic { - max-width: var(--container); - position: relative; display: flex; - height: 100%; + height: auto; width: 100%; + padding: 0%; + margin: 0%; } - /* Header & Navigation */ .site-header { display: flex; @@ -108,7 +102,7 @@ p { } .site-nav { - font-size: 20px; + font-size: 15px; justify-content: space-between; padding: 5px; display: flex; @@ -164,35 +158,35 @@ p { font-style: italic; color: #7cf321; text-shadow: -2px -2px 0 #304ed3b3; - margin-bottom: 32px; } .hero h2 { color: #211994e9; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #d4f321, 0 0 35px #d4f321, 0 0 40px #d4f321, 0 0 50px #d4f321, 0 0 75px #d4f321; - margin-bottom: 32px; } .hero p { max-width: 680px; - margin: 0 auto 16px; } /* Sections */ .section { + padding: 0%; + text-align: center; + justify-content: center; + align-items: center; + align-content: center; flex-wrap: wrap; - display: flex; height: auto; width: 100%; - padding: 0; - align-items: center; - text-align: center; - justify-items: center; - position: relative; } + .section__cards { height: auto; width: 100%; - font-size: var(--font-large); + justify-content: center; + align-items: center; + align-content: center; + display: center; color: #7cf321; text-shadow: #7cf321 0 0 20px; text-align: center; @@ -210,37 +204,49 @@ p { color: var(--charcoal); text-shadow: #7cf321 0 0 20px; text-align: center; - display: flex; + display: center; justify-content: center; + align-items: flex; } .section--alt { + padding-top: 10px; + padding-bottom: 30px; + justify-content: center; + align-items: center; height: auto; width: auto; background: white; color: rgb(10, 8, 58); font-size: 35px; - display: center; + display: flex; text-align: center; line-height: 40px; } .section--alt p { + text-align: center; font-family: Cambria, Cochin, serif; - font-size: 20px; + font-size: 25px; color: rgba(255, 115, 0, 0.949); + padding: 0%; } .section--alt p2 { font-family: Cambria, Cochin, serif; color: rgb(247, 163, 5); - font-size: 10px; + font-size: 20px; text-align: center; } /* Cards */ +.cards { + flex-wrap: wrap; + display: flex; + gap: 10px; +} .card { background: black; border: 1px solid #fff; border-radius: 8px; - padding: 5px; + padding: auto; } .card h3 { color: #7cf321; @@ -252,10 +258,6 @@ p { /* Lists */ details.services__all { align-items: center; - margin-top: 16px; -} -.list { - margin: 8px 0 0 16px; } /* Forms */ @@ -265,7 +267,6 @@ details.services__all { .field { display: flex; flex-direction: column; - margin-bottom: 16px; } input, textarea { @@ -302,19 +303,16 @@ textarea { background: rgba(32, 30, 30, 1); text-align: center; font-size: var(--font-small); -} -.site-footer .skip-link { - background-color: black; color: #7cf321; text-align: center; + } .footer__grid { - display: grid; + display: center; color: #7cf321; } .social a { display: inline-block; - margin-right: 16px; } /* Misc */ @@ -353,11 +351,11 @@ textarea { min-height: 500px; } .cards { - justify-content: space-between; + height: auto; + width: auto; + justify-content: center; flex-wrap: wrap; - gap: 10px; - grid-auto-flow: column; - grid-template-columns: repeat(4, 1fr); + gap: 40px; } .section__title { font-size: 32px;