End for now. Now mobile design
This commit is contained in:
parent
75b7605199
commit
8473aa35b8
|
|
@ -1,7 +1,12 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
font-size: 16px;
|
||||
--site-color: hsl(257, 40%, 49%);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: hsl(257, 40%, 49%);
|
||||
background-color: var(--site-color);
|
||||
background-image: url("../images/bg-desktop.svg");
|
||||
/* background-repeat: no-repeat;
|
||||
background-size: contain; */
|
||||
|
|
@ -12,7 +17,8 @@ body {
|
|||
|
||||
h1 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 400;
|
||||
font-weight: 400; /* 400 & 40 are very close*/
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -21,48 +27,74 @@ body {
|
|||
|
||||
.logo {
|
||||
width: 215px;
|
||||
margin: 3.3125rem 4.4rem 0rem;
|
||||
margin: 3.75% 4.86% 0rem; /* 3.75% 4.375rem 0rem*/
|
||||
}
|
||||
|
||||
.middleSection {
|
||||
display: flex;
|
||||
margin: 5.0625rem 4.6rem 0rem 4.55rem;
|
||||
margin: 5.0625rem 0rem 0rem 4.55rem;
|
||||
}
|
||||
|
||||
.siteBlurb {
|
||||
margin: 3rem;
|
||||
margin: 1.0625rem 4rem 2rem 3.325rem;
|
||||
|
||||
/* line-height: 2rem;
|
||||
font-weight: 400; */
|
||||
}
|
||||
|
||||
.siteBlurb h1 {
|
||||
margin-right: 2em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* .siteBlurb p {
|
||||
line-height: 1.5rem;
|
||||
} */
|
||||
.siteBlurb p {
|
||||
margin-right: 1.5rem;
|
||||
margin-bottom: 1.5625rem;
|
||||
line-height: 1.7rem;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.registerButton {
|
||||
background-color: white;
|
||||
color: var(--site-color);
|
||||
font-size: 19px;
|
||||
border: none;
|
||||
padding: 17px 64px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
/* margin: 4px 2px; */
|
||||
cursor: pointer;
|
||||
border-radius: 32px;
|
||||
box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.4); /* 10px 5px 10px*/
|
||||
}
|
||||
|
||||
.socialButtonsSection {
|
||||
display: block;
|
||||
text-align: right;
|
||||
margin-right: 5.1875rem;
|
||||
}
|
||||
|
||||
.socialButtonsSection i {
|
||||
padding: 0.5em;
|
||||
margin-left: 0.5em;
|
||||
margin-top: 1em;
|
||||
padding: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
margin-top: 0.9375rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.circleIcon {
|
||||
magin: 0;
|
||||
color: white;
|
||||
background: transparent;
|
||||
border: 1px solid #fff;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1.75px solid #fff;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
line-height: 20px;
|
||||
vertical-align: middle;
|
||||
font-size: 19px;
|
||||
/* padding: 5px; */
|
||||
|
||||
/* border: 2px solid #fff;
|
||||
|
|
@ -74,6 +106,10 @@ body {
|
|||
color: transparent; */
|
||||
}
|
||||
|
||||
.circleIcon:hover {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.attribution { font-size: 11px; text-align: center; }
|
||||
.attribution a { color: hsl(228, 45%, 44%); }
|
||||
|
||||
|
|
|
|||
|
|
@ -34,9 +34,9 @@
|
|||
</div>
|
||||
|
||||
<div class="socialButtonsSection">
|
||||
<i class="fab fa-facebook-f circleIcon"></i>
|
||||
<i class="fab fa-twitter circleIcon"></i>
|
||||
<i class="fab fa-instagram circleIcon"></i>
|
||||
<a href="#"><i class="fab fa-facebook-f fa-lg circleIcon"></i></a>
|
||||
<a href="#"><i class="fab fa-twitter fa-lg circleIcon"></i></a>
|
||||
<a href="#"><i class="fab fa-instagram fa-lg circleIcon"></i></a>
|
||||
</div>
|
||||
<footer>
|
||||
<p class="attribution">
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
|
|
@ -32,8 +32,23 @@ next day
|
|||
download diffchecker trial rather than keep using website
|
||||
adjust size of logo svg
|
||||
play with positioning using margin and rem. Logo and mockup images are so close at this point (see image diff 1)
|
||||
|
||||
realise I probably should be using % rather than rem for margin positioning
|
||||
also should probably be using 0 positioning in body and doing it in each element
|
||||
tweaked logo and mid section margins mixture rem & % for the moment
|
||||
set body to have 0 margin
|
||||
seemingly no changes are made with % unless they are to a pixel, so 4.86 is the same as 4.8611111, need to go to next px % which is 4.7916666667
|
||||
then lots and lots of iterating. Making changes and comparing in diffchecker against the design doc.
|
||||
Spent 2 hours+ on this. Too long.
|
||||
Still haven't quite nailed the blurb section.
|
||||
Basically the logo is slight off
|
||||
the differences between the mockup and symbols are image quality between jpg and png
|
||||
its like a pixel off with the social media buttons
|
||||
img-diff-2-desktop-near-enough.png
|
||||
|
||||
|
||||
Still now on to the mobile variant. Can I nail it better?
|
||||
|
||||
|
||||
Things I've not touched so far:
|
||||
main section
|
||||
|
|
|
|||
Loading…
Reference in New Issue