Skip to content

Product Landing page added. #318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 28, 2022
Merged

Product Landing page added. #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4098dad
Added starter files
AmolShelke2 May 27, 2022
4ab188b
Added index.html
AmolShelke2 May 27, 2022
e9a8e36
Added style.css
AmolShelke2 May 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions Product_landing/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
## Tech Stacks Used

<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/>

## Preview.

<img src="./productLanding.png">
164 changes: 164 additions & 0 deletions Product_landing/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>Product Landing Page</title>
</head>
<body>
<div class="container">
<!-- header section starts -->

<header id="header">
<!-- The logo of the page -->
<div class="logo">
<img
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
alt="Trombones Logo"
id="header-img"
/>
</div>

<!-- nav section starts here -->
<nav id="nav-bar">
<ul>
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#How-it-works" class="nav-link">work's</a></li>
<li><a href="#pricing" class="nav-link">Pricing</a></li>
</ul>
</nav>
</header>
<!-- header and nav section ends -->

<!-- The form section starts -->
<section id="form">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input
type="email"
id="email"
placeholder="Enter Your Email address"
required
/>
<input type="submit" id="submit" value="Get started" class="btn" />
</form>
</section>

<!-- Feature section starts -->
<section id="features">
<div class="grid">
<div class="icon"><i class="fa fa-3x fa-fire"></i></div>
<div class="text">
<h2 class="heading">Premium materials</h2>
<p>
Our trombones use the shiniest brass which is sourced <br />
This will increase the longevity of your purchase.
</p>
</div>
</div>

<div class="grid">
<div class="icon"><i class="fa fa-3x fa-truck"></i></div>
<div class="text">
<h2 class="heading">Fast shipping</h2>
<p>
We make sure you recieve your trombone as soon as we have finished
making <br />
We also provide free returns if you are not satisfied.
</p>
</div>
</div>

<div class="grid">
<div class="icon"><i class="fa fa-3x fa-battery-full"></i></div>
<div class="text">
<h2 class="heading">Quality Assurance</h2>
<p>
For every purchase you make, we will ensure there are no damages
<br />
or faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</section>
<!-- Feature section ends -->

<!-- how it works section starts here -->
<section id="How-it-works">
<iframe
src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
frameborder="0"
allowfullscreen
id="video"
height="315"
width="600"
></iframe>
</section>
<!-- how it works section ends -->

<!-- Pricing section starts here -->
<section id="pricing">
<!-- Tenor Trumbone pricing -->
<div class="product" id="tenor">
<div class="level">Tenor Trambone</div>
<h2>$600</h2>
<ol>
<li>Lorem, ipsum.</li>
<li>Lorem, ipsum.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum.</li>
</ol>
<!-- Selcet button -->
<button class="btn">Select</button>
</div>

<!-- Valve tumbone pricing -->
<div class="product" id="valve">
<div class="level">Valve Trombone</div>
<h2>$1200</h2>
<ol>
<li>Lorem, ipsum.</li>
<li>Lorem, ipsum.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum.</li>
</ol>
<!-- Selcet button -->
<button class="btn">Select</button>
</div>

<div class="product" id="bass">
<div class="level">Bass Trombone</div>
<h2>$900</h2>
<ol>
<li>Lorem, ipsum.</li>
<li>Lorem, ipsum.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum.</li>
</ol>
<!-- Selcet button -->
<button class="btn">Select</button>
</div>
</section>
<!-- Pricing Section ends here -->

<!-- Footer section starts here -->
<footer>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>copyright 2021, Amol Shelke</span>
</footer>
<!-- footer section ends -->
</div>
</body>
</html>
Binary file added Product_landing/productLanding.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading