From you PC: right mouse click on the desired image and in the pop-up dialogue box click on “Copy image address”. Then, paste that address between quotes in the src attribute of ‘img’ element. So, src=“click here and then paste”.
I have given you just an example. Don’t try to put an image from your PC to freeCodeCamp. You can do it on your PC, but you must have your index.html file on the PC too. For the purpose of the step, use some image from the Web (“https://miro.medium.com/max/897/1*7wzysqclJLByh6qT1yqAnQ.png” just another example!)
Tell us what’s happening:
Describe your issue in detail here.
please i need help on how to align my list element to be on the same margin,
am using a font awesome attribute and it is causing indentation Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta carset="UTF-8">
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="content">
<div class="insid"><i class="fa fa-3x fa-fire"></i></div>
<div>
<h2>
Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="content">
<div class="inside"><i class="fa fa-3x fa-truck"></i></div>
<div>
<h2>
Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
</body>
</html>
/* file: styles.css */
.content{
display:flex
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.5249.119 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta carset="UTF-8">
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
/>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="device=width-device initial-scale=1.0">
</head>
<body>
<header id="header">
<div class="logo">
<img src="https://i.postimg.cc/fLQyJfyd/Pngtree-lineart-music-equipment-black-cartoon-6132344-Trombone-10.png" width="33%" height="100%" border="1px solid">
</div>
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<section>
<form id="form">
<h2>Handcrafted, home-made masterpieces</h2>
<div class="input">
<input id="email" type="email" placeholder="Enter your email" name="email" required>
</div>
<div class="botton">
<input id="submit" type="botton" placeholder="Get Started" color="color:#010101" >
</div>
</form>
</section>
<section id="Features">
<div class="container">
<div class="content">
<div class="inside"><i class="fa fa-3x fa-fire"></i></div>
<div>
<h2>
Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="content">
<div class="inside"><i class="fa fa-3x fa-truck"></i></div>
<div>
<h2>
Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="content">
<div class="inside"><i class="fa fa-3x fa-battery-full"></i></div>
<div>
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</div>
</section>
<section id="how it works">
<iframe id="video" height="315" src="https://youtube.com/watch?v=y8Yv4pnO7qc&feature=share&utm_source=EKLEiJECCKjOmKnC5IiRIQ" frameboredr="0" allowfullscreen>
</iframe>
</section>
</body>
</html>
