Hello, I’m currently working on the Product Landing Page project for the responsive web development course for freeCodeCamp. Below is a link to my codepen displaying my work. I want to have a icon go in-front of the header that says “Premium Materials”, “Fast-Shipping” , and “Warrantee Guarantee”. Here is the specific code for the area. Preferably, I would like to use Google Icons for the fonts. In CSS, I’ve tried to use a ::before
element for the <h2>
element where the “Premium Materials”, “Fast-Shipping” and “Warrantee Guarantee” are but that hasn’t worked. Any help would be appreciated.
Codepen Link:https://codepen.io/coder3o2-4/pen/XWRYQEK
HTML:
<div class = "main-link-1">
<h2>Premium Materials</h2>
<p>Our apparel is made with sustainable fabric.</p>
</div>
<div class = "main-link-2">
<h2>Fast Shipping</h2>
<p>Our items ship in 1-2 business days.</p>
<div class = "main-link-3">
<h2>Warrantee Guarantee</h2>
<p>Have a full refund on items.</p>