wip near mobile chasing too much
This commit is contained in:
parent
1e0bd290a6
commit
bdc702218a
|
|
@ -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 |
|
|
@ -12,37 +12,41 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<div class="flexContainer">
|
||||||
<div class="logoSection"></div>
|
<header>
|
||||||
</header>
|
<div class="logoSection">
|
||||||
<main>
|
<img src="./images/logo.svg" alt="Ping logo" class="logo">
|
||||||
<div class="titleSection">
|
</div>
|
||||||
<p class="line1">We are launching <b>soon!</b></p>
|
</header>
|
||||||
<p class="line2">Subscribe and get notified</p>
|
<main>
|
||||||
|
<div class="titleSection">
|
||||||
|
<p class="line1">We are launching <b class="line1Bold">soon!</b></p>
|
||||||
|
<p class="line2">Subscribe and get notified</p>
|
||||||
|
</div>
|
||||||
|
<div class="formSection">
|
||||||
|
<form action="submit">
|
||||||
|
<input type="email" name="emailInput" id="emailInput" placeholder="Your email address...">
|
||||||
|
<button class="notifyButton">Notify Me</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="imageSection">
|
||||||
|
<img src="./images/illustration-dashboard.png" alt="Illustration of the dashboard" class="mockupImage">
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<div class="socialButtonsSection">
|
||||||
|
<a href="https://facebook.com/tarasis"><i class="fab fa-facebook-f"></i></a>
|
||||||
|
<a href="https://twitter.com/tarasis"><i class="fab fa-twitter"></i></a>
|
||||||
|
<a href="https://www.instagram.com/tarasis/"><i class="fab fa-instagram"></i></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="formSection">
|
<footer>
|
||||||
<form action="submit">
|
<p class="copyright">
|
||||||
<input type="email" name="emailInput" id="emailInput" placeholder="Your email address...">
|
© Copyright Ping. All rights reserved.
|
||||||
<button>Notify Me</button>
|
</p>
|
||||||
</form>
|
<p class="attribution">
|
||||||
</div>
|
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
|
||||||
<div class="imageSection">
|
Coded by <a href="mailto:work@tarasis.net">Robert McGovern</a>.
|
||||||
<img src="./images/illustration-dashboard.png" alt="Illustration of the dashboard" class="mockupImage">
|
</p>
|
||||||
</div>
|
</footer>
|
||||||
</main>
|
|
||||||
<div class="socialButtonsSection">
|
|
||||||
<a href="https://facebook.com/tarasis"><i class="fab fa-facebook-f"></i></a>
|
|
||||||
<a href="https://twitter.com/tarasis"><i class="fab fa-twitter"></i></a>
|
|
||||||
<a href="https://www.instagram.com/tarasis/"><i class="fab fa-instagram"></i></a>
|
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
|
||||||
<p class="copyright">
|
|
||||||
© Copyright Ping. All rights reserved.
|
|
||||||
</p>
|
|
||||||
<p class="attribution">
|
|
||||||
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
|
|
||||||
Coded by <a href="mailto:work@tarasis.net">Robert McGovern</a>.
|
|
||||||
</p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -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 ...
|
||||||
|
|
||||||
|
|
|
||||||
Reference in New Issue