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

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

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

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

@ -16,30 +16,67 @@
</style>
</head>
<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
Powered by Technology
Our Artificial Intelligence powered tools use millions of project data points
to ensure that your project is successful
Supervisor
Monitors activity to identify project roadblocks
Team Builder
Scans our talent network to create the optimal team for your project
Karma
Regularly evaluates our talent to ensure quality
Calculator
Uses data from past projects to provide better delivery estimates
<div class="middleSection">
<div class="column1">
<div class="supervisor card">
<h1 class="card-title">
Supervisor
</h1>
<p class="card-blurb">
Monitors activity to identify project roadblocks
</p>
<img class="card-image" src="images/icon-supervisor.svg" alt="Supervisor icon">
</div>
</div>
<div class="column2">
<div class="teamBuilder card">
<h1 class="card-title">
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>
<p class="attribution">
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>
</footer>
</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

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

@ -20,3 +20,22 @@ Dark Chrome DevTools - really nice, but JS REGEX is too hard to read
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.
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)