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:
parent
dee9c96fd3
commit
9f3843c8c1
|
|
@ -36,3 +36,38 @@
|
||||||
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 {
|
||||||
|
} */
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
||||||
|
|
||||||
Calculator
|
|
||||||
Uses data from past projects to provide better delivery estimates
|
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
<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>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
|
|
@ -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.
|
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
|
||||||
|
|
||||||
|
.png)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Reference in New Issue