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
|
|
@ -35,4 +35,39 @@
|
|||
|
||||
body {
|
||||
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>
|
||||
</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>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
|
|
@ -6,17 +6,36 @@ Last to days lost doing nothing. Spent part of today trying to find the perfect
|
|||
|
||||
Interesting but not quite there
|
||||
|
||||
Tokyo Night - I find the Classes/ID slightly too bright compared to the attributes (green vs purple-blue)
|
||||
ReUI Mirage (React) (want darker background)
|
||||
Panda Syntax
|
||||
Palenight Theme - issues
|
||||
Night Owl
|
||||
Monokai Dark Soda
|
||||
Gruvbox Dark (Hard)
|
||||
Firefly Pro -
|
||||
Dark Chrome DevTools - really nice, but JS REGEX is too hard to read
|
||||
Tokyo Night - I find the Classes/ID slightly too bright compared to the attributes (green vs purple-blue)
|
||||
ReUI Mirage (React) (want darker background)
|
||||
Panda Syntax
|
||||
Palenight Theme - issues
|
||||
Night Owl
|
||||
Monokai Dark Soda
|
||||
Gruvbox Dark (Hard)
|
||||
Firefly Pro -
|
||||
Dark Chrome DevTools - really nice, but JS REGEX is too hard to read
|
||||
|
||||
2020-09-26
|
||||
|
||||
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.
|
||||
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
|
||||
|
||||
.png)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Reference in New Issue