Janardhan 

Bhagat Shikshan Prasarak Sanstha's 
CHANGU KANA THAKUR 
ARTS, COMMERCE, SCIENCE COLLEGE 
NEW PANVEL (Autonomous) 
 
 PROJECT ON 
“ PRODUCT LANDING PAGE “ 
 
 
DEVELOPED BY 
MS. Sonali Gondhali 
 

UNDER THE GUIDENCE OF  

PROF. MRS. Aishwarya kadam 

ACEDEMIC YEAR 
2020-2022 

TYCS[ 83 ]
 Department of Computer Science  
CERTIFICATE  
This is to certified that the project entitled  
“Drowsiness Detection”  
Is successfully completed by Ms. Gondhali sonali santosh, Roll No:
83, Examination  No: BSc under the guidance of Prof. Mrs. Aishwarya kadam 
It is also  to certify that this is original work of the candidate done during
academic year  2021-2022.  

Place: Panvel  
 
 
Date:   
 
 
Internal Examiner Principal  
 
 
External Examiner Head of Department 
 
 

 
 

 
TYCS[ 83 ]
 ACKNOWLEDGEMENT:- 
 
It is indeed a matter of great pleasure and proud privilege to be able to
present this project on “PRODUCT LANDING PAGE”
I would also like to express my deep regards and gratitude to the Principal Dr.
Prof. V. D. Barhate.

I respect and thank Head of the department Prof. Mrs.

Pratibha Jadhav , for providing me an opportunity to do the project work in
Computer lab and giving me all support and guidance which made me complete
the project duly. I am extremely thankful to her for providing such a nice support
and guidance, although he had busy schedule managing the whole computer
science department .

The completion of the project work is a milestone in student life and its
execution is inevitable in the hands of guide. I am highly indebted the projects
guide Prof. Mrs. Aishwarya kadam Her invaluable guidance and appreciation
for giving form and substance to this report. It is due to her enduring efforts;
patience and enthusiasm, which has given a sense of direction and
purposefulness to this project and ultimately made it a success..

I would wish to thank the non – teaching staff and my friends who have
helped me all the time in one way or the other.
Really it is highly impossible to repay the dept of all the people who have
directly or indirectly helped me for performing the project.

TYCS[ 83 ]
 INDEX:- 

SR.NO TITLE P. N
1 Introduction  

     

2 Requirement Specification  

     

3 System design  

     

     4 System implementation  

     

  5 Result  

     

     6 Conclusion  and Future  

scope
     

  7 References  

 
 

TYCS[ 83 ]
 ITRODUCTION

TYCS[ 83 ]
1. Introduction:  

product landing page is a web page designed to promote or sell a

product. Visitors come across your product landing pages after clicking
on a paid ad, through a link in your email newsletter, by clicking on one
of your social media posts, or after clicking on a search result.

Even if they specialize in one particular product, many companies sell

more than one: add-ons, upgrades, alternatives, etc. And the way those
products are accessed depends on the customer.
The visitor is searching intently for a specific product.

It keeps the visitor focused on the offer with a 1:1 conversion ratio.

It matches the message of the referring advertisement. Every ad needs a

dedicated post-click page to fulfill the promise of the ad, and to let
visitors know they’re in the right place.

It maintains personalization through the second half of the campaign.

The first half of the campaign is called the pre-click experience.
Whatever targeting you use on the ad in the pre-click experience, you
must use on your product landing page in the post-click landing page. If
you don’t, you’re delivering an inconsistent user experience. Post-click
TYCS[ 83 ]
automation allows advertisers to create product landing pages as
efficiently as they create ads.

It highlights the benefits of the software, quickly.

It boosts trust with authority signals, like the logos of popular users.

 Product landing pages work great for selling:

Physical products, like an ecommerce store or subscription
service

Digital products, like an online course or software tool

Memberships, like an online community or subscription service

Think of your product landing page as a virtual elevator pitch for your
product. Each landing page should contain everything a visitor needs to
know to make a purchasing decision.

TYCS[ 83 ]
 How Does Product Landing Page Work? 

Step 1: When someone sees a call to action, he/she will be directed to a

landing page with a form.
Step 2: The visitor completes a form, converting them from a visitor to a
lead.
Step 3: The data from the form fields is then saved in your database of
leads.
Step 4: Based on what you know about the contact or lead, you would
market to them.

TYCS[ 83 ]
 Requirement Specification 

TYCS[ 83 ]
 2. Requirement Specification: 

2.1. Software Requirements: 

 Java script
 HTML
 MySQL
 Visual studio code
 Operating System: Windows XP

2.2. Hardware Requirement: 

 Processor: Intel Core i3 and above

 Storage: 50 MB 
 Ram: 4GB 
 Working webcam 

OR 
 Laptop with basic hardware

TYCS[ 83 ]
 System design

TYCS[ 83 ]
2. System Design Details: 

3.1. Use-Case Diagram:

3.2. Sequence Diagram:

TYCS[ 83 ]
3.3. Activity Diagram:

TYCS[ 83 ]
TYCS[ 83 ]
 SYSTEM
IMPLEMENTATION

Code :

<!DOCTYPE html>
<html lang="en">
</html>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">
    <titile>product page</titile>
    <link rel="stylesheet" href="style.css">
</head>
TYCS[ 83 ]
<body>
    <div class="container">
        <div class="wrapper">
           <div class="product-box">
               <div class="all-images"></div>
              <div class="small-images 1">
                  <img src="images 1/app1.jpg"
onclick="clickimg(this)">
                   <img src="images 1/app2.jpg"
onclick="clickimg(this)">
                   <img src="images 1/app3.jpg"
onclick="clickimg(this)">
                   <img src="images 1/app5.jpg"
onclick="clickimg(this)">
              </div>
            </div class="main-imagees 1">
                   <img src="images 1/app1.jpg"
id="imagebox">
           </div>

        <div class="text">
            <div class="content">
                <p class="Brand">Brand : Apple</p>
                <h2>APPLE iphone 12 pro max (graphite,
128GB)</h2>
                <div class="review">
                    <span>(4.6)</spam>
                    <span class="fa fa-star"></span>
                </div>
                <div class="price-box">
                    <p class="price">&#8377; 95,900</p>
                    <strike>&#8377; 1,19,9000.00</strike>
     </div>
     <p>size : <select name="size">
            <option value="select colour">select
colour</option>
                <option value="graphite">graphite</option>
                <option value="gold">gold</option>
                <option value="pacific blue">pacific
blue</option>
TYCS[ 83 ]
                <option value="silver">silver</option>
            </select></p>

            <p>Quantity <input type="text" value="1">

             <button>
                 <span class="fa fa-shopping-cart"></span>
                 Add to chart
            <button>
            </button class="buy">
                <span class="fa fa-shopping-cart"></span>
                Buy now
            <button>
            </div>
        </div>
    </div>
    <script>

        function clickimg(samllmg){
            var fullmg =
document.getElementById("imagebox");
            fullmg.src = samllmg.src

        }
       
</body>
 
</html>

{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
}
TYCS[ 83 ]
.container{
    width: 100%;
}

.wrapper{
    width: 90%;
    height: 100;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.text{
    flex-basis: 45%;
}
.all-images {
    height: 80vh;
    display: flex;
    flex-direction: column
}

.small-images img{
    height: 19vh;
    margin-bottom: 9px;
    cursor: pointer;
    opacity: 0.6;
     
}

.small-image img:hover{
    opacity: 1;

.main-images img{
    height: 100%;

TYCS[ 83 ]
}

p{
    margin-bottom: 20px;

}
.brand{
     background-color: #008000;
     width: fit-content;
     color: #fff;
     font-size: 12px;
     padding: 2px 5px;
}

h2{
    font-size: 35px;
    color: #555;
    margin-bottom: 20px;

.review{
    background-color: #008000;
    display: inline-block;
    color: #fff;
    padding: 4px;
    border-radius: 5px;
    font-size: 15px;

.review .fa{
    counter-reset: #fff

}
.price{
    color: rgb(29,28,28);
    font-size: 26px;
    padding-top: 10px;
TYCS[ 83 ]
    padding-right: 10px;

.price-box{
    display:flex;
    align-items: center;

input{
    width: 30px;
    border: 1px solid #ccc;
    font-weight: bold;
    text-align: center;
}

button{
    width: 140px;
    color: #fff;
    font-size: 15px;
    outline: none;
    border: 0;
    border-radius: 5px;
    background-color: #fe980f;
    padding: 10px 15px;
    box-sizing: border-box;
    cursor: pointer;
}

button .fa{
    margin-right: 10px;

.buy{
    background-color: rgb(201,97,57);
}

TYCS[ 83 ]
 RESULTS

TYCS[ 83 ]
5 . RESULT :

5.1 create product landing page.

TYCS[ 83 ]
5.2 select mobile color.

TYCS[ 83 ]
5.3 select quantity

TYCS[ 83 ]
5.4 Implement in phone size

TYCS[ 83 ]
TYCS[ 83 ]
 CONCLUSION
AND
FUTURE SCOPE

6. Conclusion :

 Landing pages are destinations for marketing or advertising campaigns,

helping businesses to generate leads or sales
 Each landing page focuses on a single call to action
 You don’t need your own website to create a landing page
 Since you need a different landing page for each campaign, it’s fine to have
multiple landing pages
TYCS[ 83 ]
 the technologies and the trends behind such pages are also evolving
with time.

FUTURE SCOPE :
 In all, there is very little doubt that interactive landing pages are
transforming the future for businesses, at least on the digital
platform.

 Without a doubt, landing pages are an extremely important part

of any marketing strategy. 

TYCS[ 83 ]
TYCS[ 83 ]
 References

7. References:

https://instapage.com/blog/product-landing-pages#:~:text=A
%20product%20landing%20page%20is,similar%20a%20traditional
%20landing%20page.

https://sendpulse.com/blog/product-landing-page

TYCS[ 83 ]
https://store.magenest.com/blog/product-landing-page/

https://www.wsiworld.com/blog/the-importance-of-landing-
pages

TYCS[ 83 ]