diff --git a/FrontendMentor/ping-coming-soon-page-master/css/style.css b/FrontendMentor/ping-coming-soon-page-master/css/style.css index 0d4a607..86ffd6f 100644 --- a/FrontendMentor/ping-coming-soon-page-master/css/style.css +++ b/FrontendMentor/ping-coming-soon-page-master/css/style.css @@ -2,7 +2,7 @@ :root { /* primary */ - font-size: 16px; + font-size: 20px; --site-blue: hsl(223, 87%, 63%); /* secondary */ --site-paleBlue: hsl(223, 100%, 88%); @@ -13,17 +13,179 @@ } * { - margin: 0; + margin: 0 auto; + padding: 0; } body { font-family: 'Libre Franklin', sans-serif; - font-size: 20px; + /* font-size: 20px; */ + /* display: flex; + flex-direction: column; + align-items: center; */ +} + +.flexContainer { + display: flex; + flex-direction: column; + align-items: center; + align-content: center; + + margin-top: 4.1rem; +} + +.logoSection { + display: flex; + justify-content: center; +} + +.logoSection img { + /* text-align: center; */ + width: 66%; + /* height: auto; */ +} + +.titleSection { + margin-top: 2rem; +} + +.titleSection p { + text-align: center; + /* display: flex; + align-items: center; */ +} + +.titleSection .line1 { + font-weight: 300; + color: var(--site-gray); + letter-spacing: 1.2; +} + +.line1 b { + color: black; + font-weight: 600; +} + +.titleSection .line2 { + margin-top: 1rem; + font-size: 12px; + color: var(--site-gray); +} + +.formSection { + margin: 1.6rem 0 0 0; + text-align: center; + /* width: 100%; */ +} + +.formSection form { + display: flex; + flex-direction: column; + width: 83%; +} + +.formSection input[type=email] { + font-family: 'Libre Franklin', sans-serif; + /* width: 85%; */ + width: calc(100% - 46px); + + color: var(--site-paleBlue); + font-size: 12px; + font-weight: 300; + border: 2px solid var(--site-paleBlue); + padding: 0.55rem 0; + padding-left: 20px; + padding-right: 20px; + text-align: justify; + text-decoration: none; + /* cursor: ; */ + border-radius: 32px; + /*box-shadow: 3px 3px 1px 1px var(--site-paleBlue); */ +} + +.formSection button { + font-family: 'Libre Franklin', sans-serif; + width: 100%; + background-color: var(--site-blue); + color: white; + font-size: 12px; + font-weight: 300; + border: none; + padding: 0.6rem 0; + text-align: center; + text-decoration: none; + /* display: inline-block; */ + /* margin: 4px 2px; */ + cursor: pointer; + border-radius: 32px; + box-shadow: 0px 3px 10px 1px var(--site-paleBlue); /* 10px 5px 10px*/ + +} + +.imageSection { + margin-top: 4rem; + text-align: center; + /* display: flex; + justify-content: center; */ +} + +.imageSection img { + width: 100%; + /* height: auto; */ +} + +.socialButtonsSection a { + color: var(--site-blue); +} + +.copyright { + color: var(--site-gray); + font-size: 12px; + text-align: center; } /* Feel free to remove these styles or customise in your own stylesheet 👍 */ .attribution { font-size: 11px; text-align: center; } -.attribution a { color: hsl(228, 45%, 44%); } +.attribution a i { color: hsl(228, 45%, 44%); } @media screen and (max-width: 600px) { + /* body { + width: 90%; + align-content: center; + align-items: center; + } */ + .flexContainer { + /* text-align: center; + width: 50vw; */ + /* max-width: 85%; */ + width: 90vw; + height: 100vh; + } + + /* .formSection form { + } */ + + .formSection button { + margin-top: 0.45rem; + } +} + +@media screen and (min-width: 600px) { + .flexContainer { + width: 50vw; + height: 100vh; + } + + .formSection form { + flex-direction: row; + } + + .formSection input[type=email] { + flex-basis: 60%; + } + .formSection button { + margin-left: 1rem; + flex-basis: 40%; + } + } \ No newline at end of file diff --git a/FrontendMentor/ping-coming-soon-page-master/design/mobile-design-375x812.jpg b/FrontendMentor/ping-coming-soon-page-master/design/mobile-design-375x812.jpg new file mode 100644 index 0000000..ade809b Binary files /dev/null and b/FrontendMentor/ping-coming-soon-page-master/design/mobile-design-375x812.jpg differ diff --git a/FrontendMentor/ping-coming-soon-page-master/design/mobile-design.jpg b/FrontendMentor/ping-coming-soon-page-master/design/mobile-design.jpg index 567c1a6..ade809b 100644 Binary files a/FrontendMentor/ping-coming-soon-page-master/design/mobile-design.jpg and b/FrontendMentor/ping-coming-soon-page-master/design/mobile-design.jpg differ diff --git a/FrontendMentor/ping-coming-soon-page-master/index.html b/FrontendMentor/ping-coming-soon-page-master/index.html index 03a4a8f..bdbad40 100644 --- a/FrontendMentor/ping-coming-soon-page-master/index.html +++ b/FrontendMentor/ping-coming-soon-page-master/index.html @@ -12,37 +12,41 @@ -
-
-
-
-
-

We are launching soon!

-

Subscribe and get notified

+
+
+
+ +
+
+
+
+

We are launching soon!

+

Subscribe and get notified

+
+
+
+ + +
+
+
+ Illustration of the dashboard +
+
+
+ + +
-
-
- - -
-
-
- Illustration of the dashboard -
-
-
- - - +
- \ No newline at end of file diff --git a/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md b/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md index e0214ef..b77704a 100644 --- a/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md +++ b/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md @@ -19,3 +19,12 @@ Add basic tags to index.html for header/main/footer, then in main splitting into __Q should the copyright be added to the footer or the bottom of the main????__ +Started mostly with mobile + +spent the morning struggling to get flex to work the way I wanted. Got there but also realised that I didn't need to use it the way I did. *facepalm* + +Continue to play with positioning rather than focusing on main styling + +Nudge screenshot nudge screenshot nudge screenshot *sigh* +I'm not OCD I swear ... +