Skip to content

Commit 946cc40

Browse files
harshita2216harshita2216
authored
Merge pull request #334 from saloni-15/saloni-15-project-1
Add "Product Landing Page"
2 parents 6249606 + 35eb1f5 commit 946cc40

File tree

7 files changed

+455
-0
lines changed

7 files changed

+455
-0
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,5 +127,6 @@
127127
I've used the concept of *Async functions* and *react hook usestate* also worked with *APIs*.
128128
| [Magic-Color-Changer](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Magic-Color-Changer)| This is a pure javascript project.
129129
|[Fetch API using react app](https://github.com/abhishektyagi2912/Web-dev-mini-projects/tree/main/Fetch%20API%20%20using%20react%20app)| That we add get user button to API calls to get user data and have a loader while API fetch the data .
130+
|[Product Landing Page](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/saloni-15-project-1/Product%20Landing%20Page)| A beginner-friendly single-page product landing website built with HTML and CSS for understanding the concept of responsive websites using CSS Grids.
130131

131132

‎Product Landing Page/Readme.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Product Landing Page
2+
3+
### Description
4+
A beginner-friendly single-page product landing website built with HTML and CSS for understanding the concept of responsive websites using CSS Grids.
5+
6+
### Built Using
7+
![HTML](https://img.shields.io/badge/-HTML-333333?style=flat&logo=HTML5)
8+
![CSS](https://img.shields.io/badge/-CSS-333333?style=flat&logo=CSS3&logoColor=1572B6)
9+
10+
###
11+
![gif3](https://github.com/saloni-15/Frontend-practice-HTML-CSS/blob/main/assets/product.gif)
12+
13+
### Live Demo
14+
https://saloni-15.github.io/Frontend-practice-HTML-CSS/Product-Landing-Page/index3.html
15+
16+
### How to use
17+
- Clone the repository
18+
- Move to directory ```Product Landing Page```
19+
- Run index.html

‎Product Landing Page/images/fire.png

1.69 KB
Loading

‎Product Landing Page/images/quality.png

3.13 KB
Loading

‎Product Landing Page/images/truck.png

2.76 KB
Loading

‎Product Landing Page/index.html

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="preconnect" href="https://fonts.gstatic.com" />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Red+Hat+Display&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Product Landing Page</title>
14+
</head>
15+
<body>
16+
<header id="header">
17+
<brand id="brand-name">
18+
<img
19+
src="https://img.icons8.com/ios/452/trumpet.png"
20+
alt=""
21+
id="header-img"
22+
/>
23+
<h1 id="header-text">Original Trombones</h1>
24+
</brand>
25+
<nav id="nav-bar">
26+
<ul>
27+
<li class="nav-link"><a href="#feature-box"> Features</a></li>
28+
<li class="nav-link"><a href="#video">How it Works</a></li>
29+
<li class="nav-link"><a href="#price-box">Pricing</a></li>
30+
</ul>
31+
</nav>
32+
</header>
33+
<div id="container">
34+
<h1 id="heading">Handcrafted, home-made masterpieces</h1>
35+
<form action="mailto: https://www.freecodecamp.com/email-submit">
36+
<input
37+
type="email"
38+
name=""
39+
id="email"
40+
placeholder="Enter email address"
41+
/>
42+
<button class="top-button" type="submit">Get Started</button>
43+
</form>
44+
<div id="feature-box">
45+
<div class="feature-item">
46+
<div class="item1">
47+
<img class="feature-img" src="./images/fire.png" alt="" />
48+
</div>
49+
<div class="item2"><h1 class="big-text">Premium Materials</h1></div>
50+
<div class="item3">
51+
<p class="small-text">
52+
Our trombones use the shiniest brass which is sourced locally.
53+
This will increase the longevity of your purchase.
54+
</p>
55+
</div>
56+
</div>
57+
<div class="feature-item">
58+
<div class="item1">
59+
<img class="feature-img" src="./images/truck.png" alt="" />
60+
</div>
61+
<div class="item2"><h1 class="big-text">Fast Shipping</h1></div>
62+
<div class="item3">
63+
<p class="small-text">
64+
We make sure you recieve your trombone as soon as we have finished
65+
making it. We also provide free returns if you are not satisfied.
66+
</p>
67+
</div>
68+
</div>
69+
<div class="feature-item">
70+
<div class="item1">
71+
<img class="feature-img" src="./images/quality.png" alt="" />
72+
</div>
73+
<div class="item2"><h1 class="big-text">Quality Assurance</h1></div>
74+
<div class="item3">
75+
<p class="small-text">
76+
For every purchase you make, we will ensure there are no damages
77+
or faults and we will check and test the pitch of your instrument.
78+
</p>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
<div class="video-box">
84+
<iframe
85+
id="video"
86+
height="315"
87+
src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
88+
frameborder="0"
89+
allowfullscreen=""
90+
></iframe>
91+
<div id="price-box">
92+
<div class="price-1 price-box-style">
93+
<h1 class="price-heading">TENOR TROMBONE</h1>
94+
<h1 class="price">$600</h1>
95+
<p class="price-desc">
96+
Lorem ipsum <br />
97+
Lorem ipsum <br />
98+
Lorem ipsum <br />
99+
Lorem ipsum
100+
</p>
101+
<button type="submit" class="price-button">SELECT</button>
102+
</div>
103+
<div class="price-2 price-box-style">
104+
<h1 class="price-heading">BASE TROMBONE</h1>
105+
<h1 class="price">$900</h1>
106+
<p class="price-desc">
107+
Lorem ipsum <br />
108+
Lorem ipsum <br />
109+
Lorem ipsum <br />
110+
Lorem ipsum
111+
</p>
112+
<button type="submit" class="price-button">SELECT</button>
113+
</div>
114+
<div class="price-3 price-box-style">
115+
<h1 class="price-heading">VALVE TROMBONE</h1>
116+
<h1 class="price">$1200</h1>
117+
<p class="price-desc">
118+
Lorem ipsum <br />
119+
Lorem ipsum <br />
120+
Lorem ipsum <br />
121+
Lorem ipsum
122+
</p>
123+
<button type="submit" class="price-button">SELECT</button>
124+
</div>
125+
</div>
126+
<div class="footer">
127+
128+
<a href="#" class="footer-list">Privacy</a>
129+
<a href="#" class="footer-list">Terms</a>
130+
<a href="#" class="footer-list">Contact</a>
131+
132+
</div>
133+
</div>
134+
</body>
135+
</html>

0 commit comments

Comments
 (0)