From ede6329a483d264e4f49e9fc13282a3c999a20e1 Mon Sep 17 00:00:00 2001 From: Desmond Zhu Date: Sun, 26 Nov 2023 22:50:37 -0500 Subject: [PATCH 1/4] add media query --- src/App.css | 3 + src/HeroSection.css | 193 +++++++++++++++++++++++++++----------------- 2 files changed, 123 insertions(+), 73 deletions(-) diff --git a/src/App.css b/src/App.css index 74b5e05..4b05fd7 100644 --- a/src/App.css +++ b/src/App.css @@ -36,3 +36,6 @@ transform: rotate(360deg); } } +body { + overflow: hidden; +} \ No newline at end of file diff --git a/src/HeroSection.css b/src/HeroSection.css index ec79a1d..00bd1b7 100644 --- a/src/HeroSection.css +++ b/src/HeroSection.css @@ -1,75 +1,122 @@ .hero-container { - display: flex; - justify-content: space-between; - align-items: center; - height: 100vh; - background-color: black; /* Set the background to black */ - color: white; - text-align: left; - } - - .hero-content { - width: 50%; - padding-left: 10%; - max-width: 600px; /* Set a max-width if needed */ - } - - .hero-greeting { - font-size: 2rem; /* Smaller font size for the greeting */ - margin: 0 0 0.5rem 0; - } - - .hero-name-title { - font-size: 4rem; /* Larger font size for the name/title */ - margin: 0 0 0.5rem 0; - } - - .hero-subtitle { - font-size: 1.5rem; /* Smaller font size for the subtitle */ - margin: 0 0 2rem 0; - } - - .hero-cta-button { - padding: 1rem 2rem; - background-color: transparent; - border: 2px solid white; - color: white; + display: flex; + justify-content: space-between; + align-items: center; + height: 100vh; + background-color: #010206; /* Set the background to black */ + color: white; + text-align: left; +} + +.hero-content { + width: 50vw; + padding-left: 10%; + max-width: 600px; +} + +.hero-greeting { + font-size: 2rem; + margin: 0 0 0.5rem 0; +} + +.hero-name-title { + font-size: 4rem; /* Larger font size for the name/title */ + margin: 0 0 0.5rem 0; +} + +.hero-subtitle { + font-size: 1.5rem; /* Smaller font size for the subtitle */ + margin: 0 0 2rem 0; +} + +.hero-cta-button { + padding: 1rem 2rem; + background-color: transparent; + border: 2px solid white; + color: white; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.hero-cta-button:hover { + background-color: white; + color: black; +} + +.hero-company-link { + color: #1800FF; /* Set the color of the link */ + text-decoration: underline; /* Ensure the link is underlined */ +} + +.hero-company-link:visited { + color: #1800FF; /* Keeps the link color the same even after being clicked */ +} + +.hero-company-link:hover, +.hero-company-link:focus { + color: #1800FF; /* Maintain the color on hover and focus for better UX */ + text-decoration: underline; /* Maintain underline on hover and focus */ +} + +.hero-image-container { + width: 50vw; + height: 100vh; + justify-content: center; + align-items: center; +} + +.hero-image { + width: auto; + height: 100%; + border-radius: 10px; +} + +/* Tablets */ +@media (max-width: 768px) { +.hero-container { + flex-direction: column; + text-align: center; +} + +.hero-content, .hero-image-container { + width: 100%; + padding: 0; +} + +.hero-greeting { + font-size: 1.5rem; +} + +.hero-name-title { + font-size: 3rem; +} + +.hero-subtitle { + font-size: 1.2rem; +} + +.hero-cta-button { + font-size: 0.9rem; +} +} + +/* Phones */ +@media (max-width: 480px) { +.hero-greeting { + font-size: 1.2rem; +} + +.hero-name-title { + font-size: 2.5rem; +} + +.hero-subtitle { font-size: 1rem; - cursor: pointer; - transition: background-color 0.3s ease; - } - - .hero-cta-button:hover { - background-color: white; - color: black; - } - - .hero-company-link { - color: #1800FF; /* Set the color of the link */ - text-decoration: underline; /* Ensure the link is underlined */ - } - - .hero-company-link:visited { - color: #1800FF; /* Keeps the link color the same even after being clicked */ - } - - .hero-company-link:hover, - .hero-company-link:focus { - color: #1800FF; /* Maintain the color on hover and focus for better UX */ - text-decoration: underline; /* Maintain underline on hover and focus */ - } - - .hero-image-container { - width: 50%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - } - - .hero-image { - max-width: 100%; /* Adjust the size as needed */ - max-height: 100%; - box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25); /* Example shadow */ - border-radius: 10px; /* If you want rounded corners */ - } \ No newline at end of file +} + +.hero-cta-button { + font-size: 0.8rem; + padding: 0.8rem 1.6rem; +} +} \ No newline at end of file From 7a9d10c43895a88c30f3dd80632f00618be211d9 Mon Sep 17 00:00:00 2001 From: Desmond Zhu Date: Mon, 27 Nov 2023 13:30:31 -0500 Subject: [PATCH 2/4] update --- src/App.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index dd706a9..9ce20b9 100644 --- a/src/App.css +++ b/src/App.css @@ -38,5 +38,5 @@ } body { - overflow: hidden; /* Prevent scrolling */ + overflow-x: hidden; /* Prevent scrolling */ } \ No newline at end of file From 90d25434e9696ddb32b56d70a4c5a6d93b1ef4a9 Mon Sep 17 00:00:00 2001 From: Desmond Zhu Date: Mon, 27 Nov 2023 13:38:44 -0500 Subject: [PATCH 3/4] update --- src/App.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.css b/src/App.css index 9ce20b9..5cad944 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,6 @@ .App { text-align: center; + } .App-logo { @@ -38,5 +39,6 @@ } body { + background-color: #010206; overflow-x: hidden; /* Prevent scrolling */ } \ No newline at end of file From d3637895072d7dc2f8c7346bc52ec8b59c5a6430 Mon Sep 17 00:00:00 2001 From: Desmond Zhu Date: Mon, 27 Nov 2023 15:26:05 -0500 Subject: [PATCH 4/4] update --- src/HeroSection.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/HeroSection.css b/src/HeroSection.css index 00bd1b7..9ff2023 100644 --- a/src/HeroSection.css +++ b/src/HeroSection.css @@ -79,11 +79,6 @@ text-align: center; } -.hero-content, .hero-image-container { - width: 100%; - padding: 0; -} - .hero-greeting { font-size: 1.5rem; }