wip near mobile chasing too much
This commit is contained in:
parent
1e0bd290a6
commit
bdc702218a
|
|
@ -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%;
|
||||
}
|
||||
|
||||
}
|
||||
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>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logoSection"></div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="titleSection">
|
||||
<p class="line1">We are launching <b>soon!</b></p>
|
||||
<p class="line2">Subscribe and get notified</p>
|
||||
<div class="flexContainer">
|
||||
<header>
|
||||
<div class="logoSection">
|
||||
<img src="./images/logo.svg" alt="Ping logo" class="logo">
|
||||
</div>
|
||||
</header>
|
||||
<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 class="formSection">
|
||||
<form action="submit">
|
||||
<input type="email" name="emailInput" id="emailInput" placeholder="Your email address...">
|
||||
<button>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>
|
||||
<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>
|
||||
</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>
|
||||
</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????__
|
||||
|
||||
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