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

First pass at marking up the html, and added classes. (Although I don't think I'll need some) 

Extracted classes into the style.css
This commit is contained in:
Robert McGovern 2020-09-27 00:03:33 +01:00
parent dee9c96fd3
commit 9f3843c8c1
4 changed files with 123 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,4 +35,39 @@
body { body {
font-size: 15px; font-size: 15px;
} }
.card {
}
.card-title {
}
.card-blurb {
}
.card-image {
}
.flexContainer {
}
.topSection {
}
.blurb {
}
.middleSection {
}
.column1 {
}
.supervisor {
}
.column2 {
}
.teamBuilder {
}
.karma {
}
.column3 {
}
.calculator {
}
/* .attribution {
} */

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

@ -16,30 +16,67 @@
</style> </style>
</head> </head>
<body> <body>
<header></header>
<main>
<div class="flexContainer">
<div class="topSection">
<h1>Reliable, efficient delivery</h1>
<h1>Powered by Technology</h1>
<p class="blurb">Our Artificial Intelligence powered tools use millions of project data points
to ensure that your project is successful</p>
</div>
Reliable, efficient delivery <div class="middleSection">
Powered by Technology <div class="column1">
<div class="supervisor card">
Our Artificial Intelligence powered tools use millions of project data points <h1 class="card-title">
to ensure that your project is successful Supervisor
</h1>
Supervisor <p class="card-blurb">
Monitors activity to identify project roadblocks Monitors activity to identify project roadblocks
</p>
Team Builder <img class="card-image" src="images/icon-supervisor.svg" alt="Supervisor icon">
Scans our talent network to create the optimal team for your project </div>
</div>
Karma
Regularly evaluates our talent to ensure quality <div class="column2">
<div class="teamBuilder card">
Calculator <h1 class="card-title">
Uses data from past projects to provide better delivery estimates Team Builder
</h1>
<p class="card-blurb">
Scans our talent network to create the optimal team for your project
</p>
<img class="card-image" src="images/icon-team-builder.svg" alt="Team building icon">
</div>
<div class="karma card">
<h1 class="card-title">
Karma
</h1>
<p class="card-blurb">
Regularly evaluates our talent to ensure quality
</p>
<img class="card-image" src="images/icon-karma.svg" alt="Karma icon">
</div>
</div>
<div class="column3">
<div class="calculator card">
<h1 class="card-title">
Calculator
</h1>
<p class="card-blurb">
Uses data from past projects to provide better delivery estimates
</p>
<img class="card-image" src="images/icon-calculator.svg" alt="Calculator icon">
</div>
</div>
</div>
</div>
</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="#">Your Name Here</a>. Coded by <a href="emailto:work@tarasis.net">Robert McGovern</a>.
</p> </p>
</footer> </footer>
</body> </body>

BIN
FrontendMentor/four-card-feature-section/notes/layout-no-styling(1440x922).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

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

@ -6,17 +6,36 @@ Last to days lost doing nothing. Spent part of today trying to find the perfect
Interesting but not quite there Interesting but not quite there
Tokyo Night - I find the Classes/ID slightly too bright compared to the attributes (green vs purple-blue) Tokyo Night - I find the Classes/ID slightly too bright compared to the attributes (green vs purple-blue)
ReUI Mirage (React) (want darker background) ReUI Mirage (React) (want darker background)
Panda Syntax Panda Syntax
Palenight Theme - issues Palenight Theme - issues
Night Owl Night Owl
Monokai Dark Soda Monokai Dark Soda
Gruvbox Dark (Hard) Gruvbox Dark (Hard)
Firefly Pro - Firefly Pro -
Dark Chrome DevTools - really nice, but JS REGEX is too hard to read Dark Chrome DevTools - really nice, but JS REGEX is too hard to read
2020-09-26 2020-09-26
Added basics to the style.css from the style guide. Added basics to the style.css from the style guide.
Again I'm setting the root font to 20px to make working with REM easier. Again I'm setting the root font to 20px to make working with REM easier.
I think the best approach for this is a flex container with
top row: The title, sub title and blurb.
middle row: Is also a flex container, with 3 columns (in destkop) for the cards.
First column is Supervisor
Second column is Team Builder and Karma
Third column is calculator.
bottom row: attribution? (might just delete it)
Added tags & classes to index.html.
Don't think I really need the classes for inside card (card-title, card-blurb, card-image). In theory that could just be handled with `card h1 {}` or `card p {}` or `card img {}`
Layout looks like this right now
![current layout](layout-no-styling(1440x922).png)