tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile version in place, except shadows on cards.

This commit is contained in:
Robert McGovern 2020-09-27 15:46:19 +01:00
parent 707dab7732
commit a1e4c4e86f
3 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
FrontendMentor/four-card-feature-section/css/style.css
View File

@ -28,7 +28,7 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; /* box-sizing: border-box; */
} }
/* Basic Styling */ /* Basic Styling */
@ -42,21 +42,22 @@ body {
.flexContainer { .flexContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 90%; width: 83.5%;
/* height: 100vh; */ /* height: 100vh; */
margin: 0 auto; margin: 0 auto;
} }
.topSection { .topSection {
margin-top: 4rem; margin-top: 3.8rem;
text-align: center; text-align: center;
} }
.topSection h1 { .topSection h1 {
font-size: 1.3rem; font-size: 1.2rem;
} }
.topSection .title1 { .topSection .title1 {
margin-top: 0.5rem;
font-weight: 200; font-weight: 200;
color: var(--grayishBlue); color: var(--grayishBlue);
} }
@ -68,33 +69,40 @@ body {
} }
.topSection .blurb { .topSection .blurb {
margin-top: 0.7rem;
text-align: center; text-align: center;
color: var(--grayishBlue); color: var(--grayishBlue);
font-size: 16px;
} }
.middleSection { .middleSection {
margin-top: 2.45rem;
} }
.card { .card {
margin-top: 1rem; margin-top: 1.35rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: white; background-color: white;
border-top: 2px solid; border-top: 4px solid;
box-shadow: var(--veryLightGray); box-shadow: 0px 3px 5px var(--veryLightGray);
padding: 23px 30px 25px 30px;
} }
.card-title { .card-title {
/* font-size: ; */ font-size: 18px;
color: var(--veryDarkBlue); color: var(--veryDarkBlue);
font-weight: 600;
} }
.card-blurb { .card-blurb {
margin-top: 0.4rem;
color: var(--grayishBlue); color: var(--grayishBlue);
/* font-size: ; */ font-size: 13px;
} }
.card-image { .card-image {
margin-top: 2rem; margin-top: 1.8rem;
align-self: flex-end; align-self: flex-end;
width: 22%;
} }
.column1 { .column1 {

4
FrontendMentor/four-card-feature-section/index.html
View File

@ -74,10 +74,10 @@
</div> </div>
</main> </main>
<footer> <footer>
<p class="attribution"> <!-- <p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="emailto:work@tarasis.net">Robert McGovern</a>. Coded by <a href="emailto:work@tarasis.net">Robert McGovern</a>.
</p> </p> -->
</footer> </footer>
</body> </body>
</html> </html>

5
FrontendMentor/four-card-feature-section/notes/process.md
View File

@ -46,5 +46,10 @@ Lots of touch ups required yet, improve shadow, spacing, shrinking icons, but it
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%? 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.) (Prob should pay for the Pro frontend Mentor sub to stop having to guess, but its part of the challenge for me too.)
2020-09-27 15:05
Picking up from yesterday.
38 minutes later. Mobile is virtually exact apart from shadow on the cards.
Basically bits of tweaking to fit. Not a horrendous amount. Havent looked at how it looks on desktop yet :)