basic stylings, chasing mobile design. More in the morning.

This commit is contained in:
Robert McGovern 2020-09-27 00:41:30 +01:00
parent 9f3843c8c1
commit 707dab7732
5 changed files with 66 additions and 11 deletions

View File

@ -35,39 +35,85 @@
body { body {
font-size: 15px; font-size: 15px;
background-color: var(--veryLightGray);
height: 100vh;
}
.flexContainer {
display: flex;
flex-direction: column;
width: 90%;
/* height: 100vh; */
margin: 0 auto;
}
.topSection {
margin-top: 4rem;
text-align: center;
}
.topSection h1 {
font-size: 1.3rem;
}
.topSection .title1 {
font-weight: 200;
color: var(--grayishBlue);
}
/* should be a class but wanted to play with :nth-child() */
.topSection .title2 {
font-weight: 600;
color: var(--veryDarkBlue);
}
.topSection .blurb {
text-align: center;
color: var(--grayishBlue);
}
.middleSection {
} }
.card { .card {
margin-top: 1rem;
display: flex;
flex-direction: column;
background-color: white;
border-top: 2px solid;
box-shadow: var(--veryLightGray);
} }
.card-title { .card-title {
/* font-size: ; */
color: var(--veryDarkBlue);
} }
.card-blurb { .card-blurb {
color: var(--grayishBlue);
/* font-size: ; */
} }
.card-image { .card-image {
margin-top: 2rem;
align-self: flex-end;
} }
.flexContainer {
}
.topSection {
}
.blurb {
}
.middleSection {
}
.column1 { .column1 {
} }
.supervisor { .supervisor {
border-top-color: var(--cyan);
} }
.column2 { .column2 {
} }
.teamBuilder { .teamBuilder {
border-top-color: var(--red);
} }
.karma { .karma {
border-top-color: var(--orange);
} }
.column3 { .column3 {
} }
.calculator { .calculator {
border-top-color: var(--blue);
} }
/* .attribution { /* .attribution {
} */ } */

View File

@ -20,8 +20,8 @@
<main> <main>
<div class="flexContainer"> <div class="flexContainer">
<div class="topSection"> <div class="topSection">
<h1>Reliable, efficient delivery</h1> <h1 class="title1">Reliable, efficient delivery</h1>
<h1>Powered by Technology</h1> <h1 class="title2">Powered by Technology</h1>
<p class="blurb">Our Artificial Intelligence powered tools use millions of project data points <p class="blurb">Our Artificial Intelligence powered tools use millions of project data points
to ensure that your project is successful</p> to ensure that your project is successful</p>
</div> </div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

View File

@ -37,5 +37,14 @@ Layout looks like this right now
![current layout](layout-no-styling(1440x922).png) ![current layout](layout-no-styling(1440x922).png)
Added some styling, working of the mobile design and building it up.
Lots of touch ups required yet, improve shadow, spacing, shrinking icons, but its taking shape.
![mobile difference](mobile-difference-basic-styling.png)
![mobile difference side by side](mobile-diff-sidebyside.png)
My card titles and card blurbs are too big. Probabl h3 rather than h1, font size is a guess. Icons are also a little big, although its not far off 75% rather than 100%?
(Prob should pay for the Pro frontend Mentor sub to stop having to guess, but its part of the challenge for me too.)