What mistake did i make?

HTML-CSS
1

What is This???

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
</head>  
<style>

</style>  
<main>
<body>
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img
id="header-img"
src="https://www.gstatic.com/images/branding/product/2x/keep_2020q4_48dp.png"
alt="google keep"
/>

</div>

<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header> 
</main>

<div class="container"></div>

<section id="hero">
<h2>Google keep</h2>

<form id="form" action="https://www.freecodecamp.com/email-submit">
<input
name="email"
id="email"
type="email"
placeholder="Enter your email address"
required
/>
<input id="submit" type="submit" value="Get Started" class="btn" />
</form>
</section>

<div class="container">

<section id="features">
<div class="grid">
<div class="icon"><i class="fa fa-3x -car"></i></div>
<div class="desc">
<h2>Google keep free</h2>
<p>
<li>Google keep基本功能</li>
<li>Google keep基本擴充功能</li>
<li>可使用深色及淺色主題</li>
<li>可在Google keep上傳圖片(沒有大小限制)</li>
<li>沒有儲存空間限制</li>
<li>可共用Google keep筆記(只限google帳戶共用)</li>
</p>
</div>
</div>
<div class="grid">
<div class="icon"><i class="fa fa-3x fa-pen"></i></div>
<div class="desc">
<h2>Google Keep+</h2>
<p>
<li>同時擁有Google keep free福利!</li>
<li>Google keep進階擴充功能!</li>
<li>可自訂Gogle keep主題</li>  
<li>可在Google keep插入表格及簡報等文件並編輯</li>
<li>可在Google keep上傳影片(限制每個影片大小為2GB)</li>
<li>可在視像軟件(Google Meet,Zoom)上分享Google keep筆記</li>
<li>以任何方式共用google keep筆記!</li>
<li>可使用螢光筆記下重點文字(只限黃色)</li>
</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-video" aria-hidden="true"></i>
</div>
<div class="desc">
<h2>Google keep ++</h2>
<p>
<li>同時擁有Google keep free及Google Keep+福利!</li>
<li>Google keep超進階擴充功能!</li>
<li>可在Google keep上傳任何圖片,影片及其他檔案(沒有大小限制)!</li>
<li>可使用螢光筆記下重點文字(可自訂顏色)!</li>
<li>可作為HTML,JavaScript等運行器使用!</li>
</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-desktop" aria-hidden="true"></i>
</div>
<div class="desc">
</section>

 <section id="how-it-works">
<iframe
id="video"
height="315"
src="https://www.youtube-nocookie.com/embed/j08vI9mcRmo=0"
frameborder="0"
allowfullscreen
></iframe>
</section>

<section id="pricing">
<div class="product" id="tenor">
  <div class="level">Tenor Trombone</div>
<h2>Google keep free</h2>
<h3>0$(free)</h3>
<ol>
<li>Google keep基本功能</li>
<li>Google keep基本擴充功能</li>
<li>可使用深色及淺色主題</li>
<li>可在Google keep上傳圖片(沒有大小限制)</li>
<li>沒有儲存空間限制</li>
<li>可共用Google keep筆記(只限google帳戶共用)</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="bass">
<h2>Google keep +</h2>
<h3>5$/1年</h3>
<h3>30$=終身買斷</h3>
<ol>
<li>同時擁有Google keep free福利!</li>
<li>Google keep進階擴充功能!</li>
<li>可自訂Gogle keep主題</li>  
<li>可在Google keep插入表格及簡報等文件並編輯</li>
<li>可在Google keep上傳影片(限制每個影片大小為2GB)</li>
<li>可在視像軟件(Google Meet,Zoom)上分享Google keep筆記</li>
<li>以任何方式共用google keep筆記!</li>
<li>可使用螢光筆記下重點文字(只限黃色)</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="valve">
<h2>Google keep++</h2>
<h3>10$/1年</h3>
<h3>25$/3年</h3>
<h3>100$=終身買斷</h3>
<ol>
<li>同時擁有Google keep free及Google Keep+福利!</li>
<li>Google keep超進階擴充功能!</li>
<li>可在Google keep上傳任何圖片,影片及其他檔案(沒有大小限制)!</li>
<li>可使用螢光筆記下重點文字(可自訂顏色)!</li>
<li>可作為HTML,JavaScript等運行器使用!</li>
</ol>
<button class="btn">Select</button>
</div>
</section>
<footer>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>Copyright 2022, Google</span>
</footer>
</div>
</div>
</header>
</body>
</html>

螢幕擷取畫面 2022-08-30 145106

HTML—ＣＳＳ—Build a Product Landing Page

2

Please share the css code you used.

3 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
</head>  
<style>

</style>  
<main>
<body>
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img
id="header-img"
src="https://www.gstatic.com/images/branding/product/2x/keep_2020q4_48dp.png"
alt="google keep"
/>

</div>

<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header> 
</main>

<div class="container"></div>

<section id="hero">
<h2>Google keep</h2>

<form id="form" action="https://www.freecodecamp.com/email-submit">
<input
name="email"
id="email"
type="email"
placeholder="Enter your email address"
required
/>
<input id="submit" type="submit" value="Get Started" class="btn" />
</form>
</section>

<div class="container">

<section id="features">
<div class="grid">
<div class="icon"><i class="fa fa-3x -car"></i></div>
<div class="desc">
<h2>Google keep free</h2>
<p>
<li>Google keep基本功能</li>
<li>Google keep基本擴充功能</li>
<li>可使用深色及淺色主題</li>
<li>可在Google keep上傳圖片(沒有大小限制)</li>
<li>沒有儲存空間限制</li>
<li>可共用Google keep筆記(只限google帳戶共用)</li>
</p>
</div>
</div>
<div class="grid">
<div class="icon"><i class="fa fa-3x fa-pen"></i></div>
<div class="desc">
<h2>Google Keep+</h2>
<p>
<li>同時擁有Google keep free福利!</li>
<li>Google keep進階擴充功能!</li>
<li>可自訂Gogle keep主題</li>  
<li>可在Google keep插入表格及簡報等文件並編輯</li>
<li>可在Google keep上傳影片(限制每個影片大小為2GB)</li>
<li>可在視像軟件(Google Meet,Zoom)上分享Google keep筆記</li>
<li>以任何方式共用google keep筆記!</li>
<li>可使用螢光筆記下重點文字(只限黃色)</li>
</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-video" aria-hidden="true"></i>
</div>
<div class="desc">
<h2>Google keep ++</h2>
<p>
<li>同時擁有Google keep free及Google Keep+福利!</li>
<li>Google keep超進階擴充功能!</li>
<li>可在Google keep上傳任何圖片,影片及其他檔案(沒有大小限制)!</li>
<li>可使用螢光筆記下重點文字(可自訂顏色)!</li>
<li>可作為HTML,JavaScript等運行器使用!</li>
</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-desktop" aria-hidden="true"></i>
</div>
<div class="desc">
</section>

 <section id="how-it-works">
<iframe
id="video"
height="315"
src="https://www.youtube-nocookie.com/embed/j08vI9mcRmo=0"
frameborder="0"
allowfullscreen
></iframe>
</section>

<section id="pricing">
<div class="product" id="tenor">
  <div class="level">Tenor Trombone</div>
<h2>Google keep free</h2>
<h3>0$(free)</h3>
<ol>
<li>Google keep基本功能</li>
<li>Google keep基本擴充功能</li>
<li>可使用深色及淺色主題</li>
<li>可在Google keep上傳圖片(沒有大小限制)</li>
<li>沒有儲存空間限制</li>
<li>可共用Google keep筆記(只限google帳戶共用)</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="bass">
<h2>Google keep +</h2>
<h3>5$/1年</h3>
<h3>30$=終身買斷</h3>
<ol>
<li>同時擁有Google keep free福利!</li>
<li>Google keep進階擴充功能!</li>
<li>可自訂Gogle keep主題</li>  
<li>可在Google keep插入表格及簡報等文件並編輯</li>
<li>可在Google keep上傳影片(限制每個影片大小為2GB)</li>
<li>可在視像軟件(Google Meet,Zoom)上分享Google keep筆記</li>
<li>以任何方式共用google keep筆記!</li>
<li>可使用螢光筆記下重點文字(只限黃色)</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="valve">
<h2>Google keep++</h2>
<h3>10$/1年</h3>
<h3>25$/3年</h3>
<h3>100$=終身買斷</h3>
<ol>
<li>同時擁有Google keep free及Google Keep+福利!</li>
<li>Google keep超進階擴充功能!</li>
<li>可在Google keep上傳任何圖片,影片及其他檔案(沒有大小限制)!</li>
<li>可使用螢光筆記下重點文字(可自訂顏色)!</li>
<li>可作為HTML,JavaScript等運行器使用!</li>
</ol>
<button class="btn">Select</button>
</div>
</section>
<footer>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>Copyright 2022, Google</span>
</footer>
</div>
</div>
</header>
</body>
</html>
4

Do you have any css? I think if you don’t you should add some to try to fulfill the user stories.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.