From abf3dbbd96e88caaf65901d92d4202eb01021a72 Mon Sep 17 00:00:00 2001 From: Nikol_Niven Date: Tue, 7 Jan 2025 18:02:11 +0100 Subject: [PATCH 1/9] navbar progression close 1 --- starter_code/stylesheets/style.css | 48 ++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 59f4a7798..35b6e6a8f 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,51 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ +body { + box-sizing: border-box; + margin: 0; +} + +body nav { + background: #540B51; + display: flex; + /* flex-wrap: wrap; */ + flex-direction: row; + align-items: center; + align-content: space-between; + +} + +nav div { + + display: flex; + + flex-direction: flex-end; + /* width: 40vh; */ + padding-top: 2vh; + padding-left: 2vh; + padding-bottom: 2vh; +} + +.navbar div { + margin: 0; + padding: 0; +} + +nav img { + display: inline-block; + height: 58%; + width: 58%; + +} + +body div img, +button { + background-color: transparent; + border: none; + +} + +ul { + display: none; +} \ No newline at end of file From e7d0fb9888aa70745ad89d1109d79f2f385a0126 Mon Sep 17 00:00:00 2001 From: Nikol_Niven Date: Tue, 7 Jan 2025 18:39:57 +0100 Subject: [PATCH 2/9] moving forward --- starter_code/stylesheets/style.css | 98 ++++++++++++++++++++++++++++-- 1 file changed, 92 insertions(+), 6 deletions(-) diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 35b6e6a8f..d71771988 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,6 +8,10 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ +html { + margin: 0; +} + body { box-sizing: border-box; margin: 0; @@ -20,7 +24,9 @@ body nav { flex-direction: row; align-items: center; align-content: space-between; - + flex-grow: 1; + /* border: 12vh; */ + width: 100%; } nav div { @@ -29,9 +35,8 @@ nav div { flex-direction: flex-end; /* width: 40vh; */ - padding-top: 2vh; - padding-left: 2vh; - padding-bottom: 2vh; + padding: 2vh; + padding-right: 1.5vh; } .navbar div { @@ -41,8 +46,8 @@ nav div { nav img { display: inline-block; - height: 58%; - width: 58%; + height: 48%; + width: 48%; } @@ -50,9 +55,90 @@ body div img, button { background-color: transparent; border: none; +} +nav>div>button { + height: 100%; + width: 7vh; } ul { display: none; +} + +header { + display: flex; + flex-direction: column; + /* Arrange items vertically */ + align-items: center; + /* Center items horizontally */ + justify-content: center; + /* Center items vertically */ + background-color: #540B51; + color: white; + font-family: Arial, Helvetica, sans-serif; + width: 100%; + min-height: 100vh; + /* Make header take full viewport height */ + box-sizing: border-box; + padding: 20px; +} + +header>div { + display: flex; + flex-direction: column; + /* Stack items vertically */ + align-items: center; + /* Center child items horizontally */ + text-align: center; + /* Align text to center */ + gap: 20px; + /* Add spacing between child elements */ +} + +header button { + margin: 10px; + /* Optional spacing for buttons */ + padding: 10px 20px; + background-color: #bfc4cd; + color: white; + border: none; + cursor: pointer; + border-radius: 5px; +} + +header img { + max-width: 100%; + height: auto; +} + +header button { + width: 100%; + /* Full width of the container */ + padding: 15px; + background-color: #4285F4; + color: white; + border: none; + cursor: pointer; + border-radius: 5px; + font-size: 1rem; + font-weight: bold; + display: flex; + /* Use flexbox for alignment */ + align-items: center; + /* Vertically center content */ + justify-content: center; + /* Horizontally center content */ + gap: 10px; + /* Space between the image and text */ + box-sizing: border-box; +} + +header button img { + width: 24px; + /* Set a fixed width for the image */ + height: auto; + /* Maintain aspect ratio */ + flex-shrink: 0; + /* Prevent image from shrinking */ } \ No newline at end of file From 9e8f3f46f5703322f25f6fd2973bf0fbeb79a5b4 Mon Sep 17 00:00:00 2001 From: Nikol_Niven Date: Tue, 7 Jan 2025 18:45:03 +0100 Subject: [PATCH 3/9] last commit halfway through mobile version --- starter_code/stylesheets/style.css | 30 ++++-------------------------- 1 file changed, 4 insertions(+), 26 deletions(-) diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index d71771988..66f70d501 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -18,23 +18,18 @@ body { } body nav { - background: #540B51; + background: #540b51; display: flex; - /* flex-wrap: wrap; */ flex-direction: row; align-items: center; align-content: space-between; flex-grow: 1; - /* border: 12vh; */ width: 100%; } nav div { - display: flex; - flex-direction: flex-end; - /* width: 40vh; */ padding: 2vh; padding-right: 1.5vh; } @@ -48,7 +43,6 @@ nav img { display: inline-block; height: 48%; width: 48%; - } body div img, @@ -69,12 +63,9 @@ ul { header { display: flex; flex-direction: column; - /* Arrange items vertically */ align-items: center; - /* Center items horizontally */ justify-content: center; - /* Center items vertically */ - background-color: #540B51; + background-color: #540b51; color: white; font-family: Arial, Helvetica, sans-serif; width: 100%; @@ -85,20 +76,15 @@ header { } header>div { - display: flex; + width: 100%; flex-direction: column; - /* Stack items vertically */ align-items: center; - /* Center child items horizontally */ text-align: center; - /* Align text to center */ gap: 20px; - /* Add spacing between child elements */ } header button { margin: 10px; - /* Optional spacing for buttons */ padding: 10px 20px; background-color: #bfc4cd; color: white; @@ -114,9 +100,8 @@ header img { header button { width: 100%; - /* Full width of the container */ padding: 15px; - background-color: #4285F4; + background-color: #4285f4; color: white; border: none; cursor: pointer; @@ -124,21 +109,14 @@ header button { font-size: 1rem; font-weight: bold; display: flex; - /* Use flexbox for alignment */ align-items: center; - /* Vertically center content */ justify-content: center; - /* Horizontally center content */ gap: 10px; - /* Space between the image and text */ box-sizing: border-box; } header button img { width: 24px; - /* Set a fixed width for the image */ height: auto; - /* Maintain aspect ratio */ flex-shrink: 0; - /* Prevent image from shrinking */ } \ No newline at end of file From b9eb9ae2a4db27071795b4f34b9154e7a91ef76b Mon Sep 17 00:00:00 2001 From: Nikol_Niven Date: Tue, 7 Jan 2025 19:20:56 +0100 Subject: [PATCH 4/9] closer mobile version --- starter_code/stylesheets/style.css | 59 +++++++++++++++++++++++++++++- 1 file changed, 57 insertions(+), 2 deletions(-) diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 66f70d501..ceb57da47 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -56,10 +56,20 @@ nav>div>button { width: 7vh; } -ul { +header>ul { display: none; } +ul { + list-style-type: none; +} + +ul>li>p span { + color: #540b51; + font-size: 10vh; + font-family: helvetica; +} + header { display: flex; flex-direction: column; @@ -72,7 +82,7 @@ header { min-height: 100vh; /* Make header take full viewport height */ box-sizing: border-box; - padding: 20px; + padding: 10px; } header>div { @@ -119,4 +129,49 @@ header button img { width: 24px; height: auto; flex-shrink: 0; +} + +main { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +main>section:first-child div>img { + width: 40%; + height: auto; + flex-shrink: 0; +} + +main>section:first-child { + background-color: rgb(219, 208, 194); +} + +main section { + + display: flex; + flex-direction: column; + align-items: center; + /* Center the text horizontally */ + justify-content: center; + /* Center the text vertically */ + text-align: center; + /* Center the text itself */ + width: 100%; + margin: 5vh; +} + +h3 { + color: #540b51; + font-size: 5vh; + font-family: Arial, Helvetica, sans-serif; + padding-bottom: 2vh; + text-align: center; + /* Ensure text in h3 is centered */ +} + +p { + text-align: center; + /* Ensure the paragraph text is centered */ } \ No newline at end of file From e89081dfe45283c738a48c3143b66e05d103e813 Mon Sep 17 00:00:00 2001 From: Nikol_Niven Date: Tue, 7 Jan 2025 20:59:46 +0100 Subject: [PATCH 5/9] latest version coming closer mobile design --- starter_code/stylesheets/style.css | 41 +++++++++++++++++++----------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index ceb57da47..f5c8a13e2 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -15,6 +15,7 @@ html { body { box-sizing: border-box; margin: 0; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } body nav { @@ -27,6 +28,26 @@ body nav { width: 100%; } +h3 { + color: #540b51; + font-size: 5vh; + font-family: Arial, Helvetica, sans-serif; + padding-bottom: 0.5vh; + text-align: center; + /* Ensure text in h3 is centered */ +} + +p { + font-weight: bold; + text-align: center; + /* Ensure the paragraph text is centered */ + padding-bottom: 5vh; +} + +section { + padding: 0vh 10vh 2vh 10vh; +} + nav div { display: flex; flex-direction: flex-end; @@ -56,14 +77,18 @@ nav>div>button { width: 7vh; } -header>ul { +nav ul { display: none; } ul { list-style-type: none; + padding: 0px; + margin: 0px; + } + ul>li>p span { color: #540b51; font-size: 10vh; @@ -160,18 +185,4 @@ main section { /* Center the text itself */ width: 100%; margin: 5vh; -} - -h3 { - color: #540b51; - font-size: 5vh; - font-family: Arial, Helvetica, sans-serif; - padding-bottom: 2vh; - text-align: center; - /* Ensure text in h3 is centered */ -} - -p { - text-align: center; - /* Ensure the paragraph text is centered */ } \ No newline at end of file From 74dc8622e4d0902d0fc16c85c6a0b82bc3f2bf52 Mon Sep 17 00:00:00 2001 From: Nikol_Niven Date: Tue, 7 Jan 2025 21:23:25 +0100 Subject: [PATCH 6/9] mobile design 99% --- starter_code/index.html | 3 +- starter_code/stylesheets/style.css | 54 +++++++++++++++++++++++++++--- 2 files changed, 52 insertions(+), 5 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index 2f593610f..566dfab21 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -139,6 +139,7 @@

Welcome to your new digital HQ