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"> <link rel="stylesheet" href="./css/style.css">
<title>Frontend Mentor | Single Price Grid Component</title> <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> </head>
<body> <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. <div class="sellBlurb">
Perfect for any developers who are serious about honing their skills. 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 <a title="Sign Up Button" href="#" class="signupButton">Sign Up</a>
</div>
Sign Up <div class="whyUsBox">
<div class="heading">
Why Us Why Us
</div>
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 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> <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:rob@tarasis.net">Robert McGovern</a>.
</p> </p>
</footer> </footer>
</body> </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 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 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.