Scribd
Upload
7K views2 pages

Build A Product Landing Page

The document is a product landing page with a header containing an image and navigation links, a video, and a email signup form. It uses CSS for styling and layout including flexbox and media queries.

Uploaded by

Mugisha ivan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7K views2 pages

Build A Product Landing Page

The document is a product landing page with a header containing an image and navigation links, a video, and a email signup form. It uses CSS for styling and layout including flexbox and media queries.

Uploaded by

Mugisha ivan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

** start of undefined **

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Landing Page</title>
<link
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville
%7CRaleway&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header id='header'>
<img id='header-img' src='https://picsum.photos/200/300' />
<div id="footer">
<div id="services">
<div id="bottom">
<nav id='nav-bar'>
<a class='nav-link' href='#footer'>Features</a>
<a class='nav-link' href='#services'>How It Works</a>
<a class='nav-link' href='#bottom'>Pricing</a>
</nav>
</header>
<video id='video' src='https://youtu.be/y8Yv4pnO7qc'></video>
<form id="form" action='https://www.freecodecamp.com/email-submit'>

<label id="email-label"><input id="email" type="email" name="email"


placeholder="Enter your email address" required/></label>
<a href="https://www.freecodecamp.com/email-submit"><input type="submit"
id="submit" value="submit" name="submit"></a>
</form>
</body>
</html>

** end of undefined **

** start of undefined **

.body{
display:flex;
}

@media (max-width: 800px)

.product

max-width:400px;

width: 100%;
margin: 0 auto;

margin-bottom: 10px

}
header {
position: fixed;
top: 0px;
}

** end of undefined **

You might also like