<!-- - Goal: Create a float-based, responsive grid - Create an <article> containing block with 3 children <section> elements - <section> elements are the .grid contexts - .grid elements will be parents to children <div> .col-1-4 positioned on the left and <div> .col-3-4 positioned on the right - each .col- will be parents to children <div> .module elements - the article needs an <h1> heading - each section needs an <h2> heading - Place an <img> inside .module inside .col-1-4; use placehold.it - Place placeholder text inside .module inside .col-3-4 - Create at least one link with a hover pseudo-class effect - Create an unordered list with checkmarks inside one of the right-positioned .module elements - Apply background color scheme using .bg-color class and nth-child() to the <section> elements -->
/* Using the body selector, define the default font-size to 18px. */ /* Typography: Define the fonts / font-size scheme of your headings, using the relative size rem value. Remember, em computes relative to the font-size defined in the containing block. In this case, it is the inherited 18px value from the body: 2em = 18px * 2 (36px). Use this section to also define any other personal typographic styles. */ /* Hard part: Create a simple float-based responsive grid (See my codepen for an example: https://codepen.io/lndgrn/pen/ojBpXW) > the .grid-1-4 should be 25% of the .grid container > the .grid-3-4 should be 75% of the .grid container > You will also need to use a clear-fix hack + box-sizing to make it work */ /* Using the nth-child pseudo-class, add some color to each of the articles with the class: .bg-colors. Add any other styles that you like. */ /* Make the images 100% width and centered in the div (hint: use margin). Add any other styles that you'd like. */ /* Use the first-letter pseudo-element to style the first letter of the first paragraph in each section. */ /* Use the :hover pseudo-class on the anchor tags to remove the underline. */ /* Using the :before pseudo-element, replace the bullets/discs on the ul.checkmark list items (li). Style it accordingly. Hint: If you're stuck, Google it. :-) */ /* Use any of the other classes to do any other styling here. Or, add your own, if you're so inclined. Bonus hotshot points to anyone who creates a <nav> with an inline-block ul list. */
As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.
Also see: Tab Triggers