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

Formatted html as I think it should go. Awful class names right now.

This commit is contained in:
Robert McGovern 2020-09-12 10:49:10 +01:00
parent 53abbe6c9e
commit 4b1e46d0a3
2 changed files with 55 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
FrontendMentor/single-price-grid-component-master/index.html
View File

@ -8,43 +8,60 @@
<link rel="stylesheet" href="./css/style.css">
<title>Frontend Mentor | Single Price Grid Component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
Join our community
<main>
<div class="topRow">
<div class="heading">
Join our community
</div>
30-day, hassle-free money back guarantee
<div class="quickSell">
30-day, hassle-free money back guarantee
</div>
Gain access to our full library of tutorials along with expert code reviews.
Perfect for any developers who are serious about honing their skills.
<div class="sellBlurb">
Gain access to our full library of tutorials along with expert code reviews.
Perfect for any developers who are serious about honing their skills.
</div>
</div>
<div class="bottomRow">
<div class="pricingBox">
<div class="heading">
Monthly Subscription
</div>
Monthly Subscription
<div class="priceRow">
<div class="price">&dollar;29</div> <span class="pricePeriod">per month</span>
</div>
&dollar;29 per month
<div class="sell">
Full access for less than &dollar;1 a day
</div>
Full access for less than &dollar;1 a day
Sign Up
Why Us
Tutorials by industry experts
Peer &amp; expert code review
Coding exercises
Access to our GitHub repos
Community forum
Flashcard decks
New videos every week
<a title="Sign Up Button" href="#" class="signupButton">Sign Up</a>
</div>
<div class="whyUsBox">
<div class="heading">
Why Us
</div>
<div class="blurb">
Tutorials by industry experts
Peer &amp; expert code review
Coding exercises
Access to our GitHub repos
Community forum
Flashcard decks
New videos every week
</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:rob@tarasis.net">Robert McGovern</a>.
</p>
</footer>
</body>

8
FrontendMentor/single-price-grid-component-master/work-through/process.md
View File

@ -4,3 +4,11 @@ As usual copy files into place and commit.
Checked size of the design images: 1440x800 and 375x870
Set up the style.css to have the base things listed in the style guide (font, colors, font size), and add style.css to index.html
Looking at the designs, I see it as Flex, with 2 rows in a column. On the desktop, the 2nd row, is a row of 2 items, on mobile the 2nd row becomes as column of 2 items.
Otherwise there doesn't seem to be any obvious/glaring differences between the 2 designs. Sizing seems largely the same, as does positioning of everything inside their respective boxes.
Set-up the HTML into `div`s to match what I think are the distinct sections. Absolutely need to change some of the names, but I can't think of better descriptors at the moment. (seriously ... "sellBlurb" 🙄)
Aside: Would love something to take all the classes I define in the html file and put them into the css file ... *quick google later* Oooooh. Such a thing does exist https://marketplace.visualstudio.com/items?itemName=diz.ecsstractor-port ... lets see how well that works.