Tell us what’s happening:
can anyone help? I already set the navbar position to the top, but the test still say itPreformatted text not (x mark)
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="/image/logo.png" />
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&family=Oswald:wght@300;400;700&display=swap" rel="stylesheet">
<title>WaroengAcademy</title>
</head>
<body>
<!-- sy lebih suka styling dengan class selector, beberapa ID yang ada di markup ini
untuk memenuhi point" challenge di freeCodeCamp.org (Responsive web design - Product landing page) -->
<header id="header">
<nav id="nav-bar" class=" nav collapsible">
<div class="logo"><img id="header-img" src="/image/logo.png" alt="" /><a class="logo_text" href="index.html"WaroengAcademy>WaroengAcademy</a></div>
<svg class="icon">
<use xlink:href="image/menu-sprite.svg#menu2"></use>
</svg>
<ul class="nav-list">
<li class="nav-link"><a href="#daftar">Mau Daftar!</a></li>
<li class="nav-link"><a href="#masuk">Masuk</a></li>
<li class="nav-link"><a href="#program">Program</a></li>
<li class="nav-link"><a href="#kenapa">Kenapa Disini?</a></li>
<li class="nav-link"><a href="#harga">Harga</a></li>
</ul>
</nav>
</header>
<section id="daftar">
<div class="welcome-content">
<h1>Yuk gabung di WaroengAcademy dan jadi "StreetFood Warrior"</h1>
<p><i>Ilmu dapat, cuan juga dapat!!!</i></p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis qui rerum odit deleniti labore quaerat aspernatur. Cumque repellat magnam saepe, veritatis provident esse voluptatibus, quaerat sint ea deserunt iure incidunt illo natus molestiae itaque officia aliquid! Deleniti possimus, ratione dolor vitae illum corporis eius a commodi asperiores. Quia, fuga laboriosam?</p>
<div>
</section>
<!-- Input form untuk -->
<section class="register">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="Yok diisi e-mail nya disini"
required
/>
<input type="submit" id="submit" />
</form>
</div>
</div>
</section>
<section class="container">
<!-- card section -->
<h2>Program Kami</h2>
</section>
<section>
<!--kenapa harus disini section -->
<h2>Kenapa Harus disini???</h2>
</section>
<section>
<h2>Harga kelas kami</h2>
</section>
<iframe
id="video"
class="corner-wrapper"
src="https://www.youtube.com/embed/_jjudFdmE6E"
title="WORKSHOP & PELATIHAN KULINER LAKONERS • Warung Seni Lakone • Condet • Jakarta Timur"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="/image/logo.png" />
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&family=Oswald:wght@300;400;700&display=swap" rel="stylesheet">
<title>WaroengAcademy</title>
</head>
<body>
<!-- sy lebih suka styling dengan class selector, beberapa ID yang ada di markup ini
untuk memenuhi point" challenge di freeCodeCamp.org (Responsive web design - Product landing page) -->
<header id="header">
<nav id="nav-bar" class=" nav collapsible">
<div class="logo"><img id="header-img" src="/image/logo.png" alt="" /><a class="logo_text" href="index.html"WaroengAcademy>WaroengAcademy</a></div>
<svg class="icon">
<use xlink:href="image/menu-sprite.svg#menu2"></use>
</svg>
<ul class="nav-list">
<li class="nav-link"><a href="#daftar">Mau Daftar!</a></li>
<li class="nav-link"><a href="#masuk">Masuk</a></li>
<li class="nav-link"><a href="#program">Program</a></li>
<li class="nav-link"><a href="#kenapa">Kenapa Disini?</a></li>
<li class="nav-link"><a href="#harga">Harga</a></li>
</ul>
</nav>
</header>
<section id="daftar">
<div class="welcome-content">
<h1>Yuk gabung di WaroengAcademy dan jadi "StreetFood Warrior"</h1>
<p><i>Ilmu dapat, cuan juga dapat!!!</i></p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis qui rerum odit deleniti labore quaerat aspernatur. Cumque repellat magnam saepe, veritatis provident esse voluptatibus, quaerat sint ea deserunt iure incidunt illo natus molestiae itaque officia aliquid! Deleniti possimus, ratione dolor vitae illum corporis eius a commodi asperiores. Quia, fuga laboriosam?</p>
<div>
</section>
<!-- Input form untuk -->
<section class="register">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="Yok diisi e-mail nya disini"
required
/>
<input type="submit" id="submit" />
</form>
</div>
</div>
</section>
<section class="container">
<!-- card section -->
<h2>Program Kami</h2>
</section>
<section>
<!--kenapa harus disini section -->
<h2>Kenapa Harus disini???</h2>
</section>
<section>
<h2>Harga kelas kami</h2>
</section>
<iframe
id="video"
class="corner-wrapper"
src="https://www.youtube.com/embed/_jjudFdmE6E"
title="WORKSHOP & PELATIHAN KULINER LAKONERS • Warung Seni Lakone • Condet • Jakarta Timur"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="/image/logo.png" />
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&family=Oswald:wght@300;400;700&display=swap" rel="stylesheet">
<title>WaroengAcademy</title>
</head>
<body>
<!-- sy lebih suka styling dengan class selector, beberapa ID yang ada di markup ini
untuk memenuhi point" challenge di freeCodeCamp.org (Responsive web design - Product landing page) -->
<header id="header">
<nav id="nav-bar" class=" nav collapsible">
<div class="logo"><img id="header-img" src="/image/logo.png" alt="" /><a class="logo_text" href="index.html"WaroengAcademy>WaroengAcademy</a></div>
<svg class="icon">
<use xlink:href="image/menu-sprite.svg#menu2"></use>
</svg>
<ul class="nav-list">
<li class="nav-link"><a href="#daftar">Mau Daftar!</a></li>
<li class="nav-link"><a href="#masuk">Masuk</a></li>
<li class="nav-link"><a href="#program">Program</a></li>
<li class="nav-link"><a href="#kenapa">Kenapa Disini?</a></li>
<li class="nav-link"><a href="#harga">Harga</a></li>
</ul>
</nav>
</header>
<section id="daftar">
<div class="welcome-content">
<h1>Yuk gabung di WaroengAcademy dan jadi "StreetFood Warrior"</h1>
<p><i>Ilmu dapat, cuan juga dapat!!!</i></p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis qui rerum odit deleniti labore quaerat aspernatur. Cumque repellat magnam saepe, veritatis provident esse voluptatibus, quaerat sint ea deserunt iure incidunt illo natus molestiae itaque officia aliquid! Deleniti possimus, ratione dolor vitae illum corporis eius a commodi asperiores. Quia, fuga laboriosam?</p>
<div>
</section>
<!-- Input form untuk -->
<section class="register">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="Yok diisi e-mail nya disini"
required
/>
<input type="submit" id="submit" />
</form>
</div>
</div>
</section>
<section class="container">
<!-- card section -->
<h2>Program Kami</h2>
</section>
<section>
<!--kenapa harus disini section -->
<h2>Kenapa Harus disini???</h2>
</section>
<section>
<h2>Harga kelas kami</h2>
</section>
<iframe
id="video"
class="corner-wrapper"
src="https://www.youtube.com/embed/_jjudFdmE6E"
title="WORKSHOP & PELATIHAN KULINER LAKONERS • Warung Seni Lakone • Condet • Jakarta Timur"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="/image/logo.png" />
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&family=Oswald:wght@300;400;700&display=swap" rel="stylesheet">
<title>WaroengAcademy</title>
</head>
<body>
<!-- sy lebih suka styling dengan class selector, beberapa ID yang ada di markup ini
untuk memenuhi point" challenge di freeCodeCamp.org (Responsive web design - Product landing page) -->
<header id="header">
<nav id="nav-bar" class=" nav collapsible">
<div class="logo"><img id="header-img" src="/image/logo.png" alt="" /><a class="logo_text" href="index.html"WaroengAcademy>WaroengAcademy</a></div>
<svg class="icon">
<use xlink:href="image/menu-sprite.svg#menu2"></use>
</svg>
<ul class="nav-list">
<li class="nav-link"><a href="#daftar">Mau Daftar!</a></li>
<li class="nav-link"><a href="#masuk">Masuk</a></li>
<li class="nav-link"><a href="#program">Program</a></li>
<li class="nav-link"><a href="#kenapa">Kenapa Disini?</a></li>
<li class="nav-link"><a href="#harga">Harga</a></li>
</ul>
</nav>
</header>
<section id="daftar">
<div class="welcome-content">
<h1>Yuk gabung di WaroengAcademy dan jadi "StreetFood Warrior"</h1>
<p><i>Ilmu dapat, cuan juga dapat!!!</i></p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis qui rerum odit deleniti labore quaerat aspernatur. Cumque repellat magnam saepe, veritatis provident esse voluptatibus, quaerat sint ea deserunt iure incidunt illo natus molestiae itaque officia aliquid! Deleniti possimus, ratione dolor vitae illum corporis eius a commodi asperiores. Quia, fuga laboriosam?</p>
<div>
</section>
<!-- Input form untuk -->
<section class="register">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="Yok diisi e-mail nya disini"
required
/>
<input type="submit" id="submit" />
</form>
</div>
</div>
</section>
<section class="container">
<!-- card section -->
<h2>Program Kami</h2>
</section>
<section>
<!--kenapa harus disini section -->
<h2>Kenapa Harus disini???</h2>
</section>
<section>
<h2>Harga kelas kami</h2>
</section>
<iframe
id="video"
class="corner-wrapper"
src="https://www.youtube.com/embed/_jjudFdmE6E"
title="WORKSHOP & PELATIHAN KULINER LAKONERS • Warung Seni Lakone • Condet • Jakarta Timur"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
</body>
</html>
html {
font-size: 62.5%;
}
body {
font-family: 'open sans' ;
line-height: 1.3;
}
body {
background: rgb(166,5,5);
/* background: linear-gradient( rgb(133, 8, 8) 0%, rgba(252,127,0,1) 100%); */
}
h1, h2, h3 {
font-family: 'oswald';
}
p {
letter-spacing: 1px;
font-weight: 500;
}
a {
text-decoration: none;
font-size: 1.4rem;
}
li {
list-style: none;
}
/* Nav Logo */
.logo_text {
font-family: 'Oswald';
font-size: 2rem;
color: rgb(255, 255, 255);
}
/* Set the width and height of icon and logo navigation */
.icon {
width: 30px;
height: 30px;
}
.icon {
fill: rgb(255, 236, 224);
}
#header-img {
width: 30px;
height: 30px;
}
/* media querry for icon toggler on wide screen */
@media screen and (min-width:800px) {
.icon {
display: none;
}
}
/* nav list */
.nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 1rem 2rem 1rem 1rem;
align-items: center;
}
.nav-list {
width: 100%;
margin: 0;
padding: 0;
}
.nav-link > a {
color: white;
}
.nav-link {
padding: 1rem 0;
font-weight: 500;
}
.nav-link:hover {
font-weight: 600;
back
}
@media screen and (min-width:800px) {
.nav {
display: flex;
flex-wrap: nowrap;
}
.nav-list {
display: flex;
gap: 2rem;
justify-content: flex-end;
}
}
.logo {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
@media screen and (min-width:768px) {
.logo {
display: inline-flex;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Responsive Web Design Projects - Build a Product Landing Page
Link to the challenge: