wip near mobile chasing too much

This commit is contained in:
Robert McGovern 2020-09-07 14:35:50 +01:00
parent 1e0bd290a6
commit bdc702218a
5 changed files with 209 additions and 34 deletions

View File

@ -2,7 +2,7 @@
:root { :root {
/* primary */ /* primary */
font-size: 16px; font-size: 20px;
--site-blue: hsl(223, 87%, 63%); --site-blue: hsl(223, 87%, 63%);
/* secondary */ /* secondary */
--site-paleBlue: hsl(223, 100%, 88%); --site-paleBlue: hsl(223, 100%, 88%);
@ -13,17 +13,179 @@
} }
* { * {
margin: 0; margin: 0 auto;
padding: 0;
} }
body { body {
font-family: 'Libre Franklin', sans-serif; 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 👍 */ /* Feel free to remove these styles or customise in your own stylesheet 👍 */
.attribution { font-size: 11px; text-align: center; } .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) { @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%;
}
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 23 KiB

View File

@ -12,18 +12,21 @@
</head> </head>
<body> <body>
<div class="flexContainer">
<header> <header>
<div class="logoSection"></div> <div class="logoSection">
<img src="./images/logo.svg" alt="Ping logo" class="logo">
</div>
</header> </header>
<main> <main>
<div class="titleSection"> <div class="titleSection">
<p class="line1">We are launching <b>soon!</b></p> <p class="line1">We are launching <b class="line1Bold">soon!</b></p>
<p class="line2">Subscribe and get notified</p> <p class="line2">Subscribe and get notified</p>
</div> </div>
<div class="formSection"> <div class="formSection">
<form action="submit"> <form action="submit">
<input type="email" name="emailInput" id="emailInput" placeholder="Your email address..."> <input type="email" name="emailInput" id="emailInput" placeholder="Your email address...">
<button>Notify Me</button> <button class="notifyButton">Notify Me</button>
</form> </form>
</div> </div>
<div class="imageSection"> <div class="imageSection">
@ -44,5 +47,6 @@
Coded by <a href="mailto:work@tarasis.net">Robert McGovern</a>. Coded by <a href="mailto:work@tarasis.net">Robert McGovern</a>.
</p> </p>
</footer> </footer>
</div>
</body> </body>
</html> </html>

View File

@ -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????__ __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 ...