Lead Gen Landing Page

Gujarat Technological University

Chandkheda, Ahmedabad

Gandhinagar Institute of Technology

Moti Bhoyan Road, Gandhinagar, Gujarat (Affiliated with GTU)

A Summer Internship Report on

“Lead Gen Landing Page”

At the industry or company
Flamingo Travels Pvt. Ltd.
Under the subject
Summer Internship (3170001)

Computer Engineering
Submitted By
Name: Priyal Munshi Enrollment No. 200120107091

Internal Guide
Ms. Hetal Shah

Academic Year
(2023-2024)

HOD - CE External Guide

Prof. (Dr.) Nimisha Patel Mr. Nirav Shah
 Lead Gen Landing Page

Gandhinagar Institute of Technology

Moti Bhoyan Road, Gandhinagar, Gujarat
(Affiliated with GTU)

CERTIFICATE

This is to certify that the work of Sumer Internship (3170001) entitled “Lead Gen Landing
Page” has been carried out by Priyal Munshi (200120107091) under my guidance in partial
fulfilment for the degree of Bachelor of Engineering in Computer Engineering 7th Semester at
the Department of Computer Engineering, Gandhinagar Institute of Technology, Moti-Bhoyan,
Gandhinagar, Gujarat, during the academic year 2023-2024 and his/her work is satisfactory. This
student has successfully completed all the activity under my guidance related to Summer
Internship for 7th semester.

Internal Guide, External Guide,

Ms. Hetal Shah, Mr. Nirav Shah,
Computer Engineering Department. Flamingo Travels Pvt. Ltd.

Prof. (Dr.) Nimisha Patel,

Head of Department,
Computer Engineering Department,
Gandhinagar Institute of Technology
Lead Gen Landing Page
 Lead Gen Landing Page

Acknowledgement

I have taken efforts in this Summer Internship. However, it would not have been
possible without the kind support and help of many individuals and organizations. I
would like to extend my sincere thanks to all of them.

I am highly indebted to Ms Hetal Shah & Mr. Nirav Shah for their guidance and
constant supervision as well as for providing necessary information regarding the
Internship. I take this opportunity to thank all my friends and colleagues who
started me out on the topic and provided extremely useful review feedback and for
their all-time support and help in each and every aspect of the course of my project
preparation. I am grateful to my college Gandhinagar Institute of Technology, for
providing me all required resources and good working environment.

I would like to express my gratitude towards Head of Department, Prof. (Dr.)

Nimisha Patel and Director, Dr. K N Sheth for their kind co-operation and
encouragement which help me in this Summer Internship.

Thank You
Priyal Munshi
(200120107091)
 Lead Gen Landing Page

Contents

Particular Page No.

Title Page I
Certificates II
Acknowledgement III
Content IV
List of Figures V
List of Table VI
1 Introduction 1
1.1 Introduction of Summer Internship (Summary) 1
1.2 Aim and Objectives 2
1.3 Tools & Technologies 3
2 Implementation 4
2.1 Functional 4
2.2 Non-Functional 5
3 Outcomes 6
3.1 Conclusion 6
3.2 Future Enhancement 6
3.3 Progress report with result Pictures 7
4 Bibliography 29
 Lead Gen Landing Page

List of Figures

Figure Page No.

Code implementation of HTML 3

Code implementation of CSS 3
Different HTML Tags, Inserting various media 8
Different Selectors 9
Understanding padding, margin, opacity, etc 11
Css of Navbar Section with view 14
Css of Navbar Section using media query with view 15
Css of flickity section with view 17
Css of flickity section using media query with view 18
Css of image section with view 19
Responsive and desktop view of image section 19
CSS of carousel section with view 21
CSS of carousel section using media query with view 22
CSS of feedback section with view 24
CSS of feedback using media query section with view 25
CSS of About Us section with view 26
CSS of feedback section using media query with view 27
 Lead Gen Landing Page

List of Tables

Table Page No.

Contents IV
List of Figures V
List of Tables VI
Progress Report 7
 Lead Gen Landing Page

Chapter 1 : Introduction

1.1 Introduction of Summer Internship (Summary):

Worked on Lead Generation Landing Page for various destination using

HTML, CSS so that Flamingo’s sales staff can help customer to curate their
travel plans.

This opportunity allowed me to bridge the gap between academic knowledge

and transformed them into practical web page. Throughout this internship, I had
the privilege of engaging myself in the world of code, tags, and styles which
was guided by experienced mentors. The project scope covered designing and
building responsive web page, learning the art of layout and design, and
understanding of cross-browser compatibility.

The challenges I encountered, whether in aligning elements perfectly or

ensuring a experience across various devices.

Project Summary:

Utilize HTML to establish the foundational structure of the landing page,

including headings, paragraphs, images, buttons, forms, and other essential
elements.
Apply CSS to enhance the visual appeal of the landing page, ensuring
consistent styling, such as fonts, colors, backgrounds, and spacing. Implement
responsive design principles to ensure the landing page displays optimally on
various devices and screen sizes, utilizing media queries and flexible layouts.
Consist of various components like Destination Cards, Video, Place, News and
Testimonial. Our goal is making travelling plan easy and accessible.
Flamingo offers a wide range of travelling packages across the world which is
delivered by a team of skilled professionals. The goal of a traveling website is
to simplify and enhance the travel planning and booking process for users by
providing relevant information, seamless booking options, and valuable
resources.
Our website serves as a gateway to learn more about us, explore our services,
read testimonials, and easily reach out to our team.

1
 Lead Gen Landing Page

1.2 Aim and Objectives:

Aim:

To inspire and flare up travelers' desire to travel by showcasing fascinating

destinations, unique experiences, and cultural insights. To provide accurate, up-
to-date, and comprehensive travel information and more. To assist users in
efficiently planning their trips by offering tools for itinerary creation an
personalized recommendations. To facilitate accommodations, tours, activities,
and transportation options through user-friendly interfaces. To engage users
through interactive content, travel stories, reviews, developing a sense of shared
exploration.

Objectives:

1. Create an intuitive and user-friendly website interface that ensures easy

navigation and quick access to information and services.
2. Offer a diverse range of content, including articles, photos, videos, and
user-generated content, to cater to different preferences and travel styles.
3. Maintain accurate and updated travel information to build trust an
provide users with reliable guidance.
4. Develop features that allow users to personalize their travel experiences
based on interests, preferences, and travel goals
5. Enable users to make secure and hassle-free bookings directly through
the website.
6. Ensure functionality and a positive user experience across various
devices, particularly mobile phones and tablets.
7. Safeguard user data and privacy, adhering to relevant data protection
regulations and clearly communicating the website's privacy policies.
8. Regularly gather user feedback and conduct usability tests to
continuously improve the website's features, content, and services.

2
 Lead Gen Landing Page

1.3 Tools & Technologies:

Tools:

1. Visual Studio
2. Chrome Browser

Technologies:

1. HTML
2. CSS
3. Javascript
4. Bootstrap 5 framework

Chapter 2 : Implementation

(Code implementation)

3
 Lead Gen Landing Page

2.1 Functional
High-quality images and videos showcasing destinations and experiences.
Prominent buttons for booking and exploring options. User-friendly search and
filtering for destinations and preferences. Brief descriptions with links to
detailed pages. Compatibility with different devices. Display partners, awards,
and certifications. Offer tailored recommendations. Newsletter Signup:
Subscribe for updates on deals. Social Media Links: Connect through social
profiles.

2.2 Non-Functional
1. Performance: Fast loading, responsive design, and smooth navigation.
2. Intuitive interface, accessibility, and consistent design.
3. High availability, effective error handling, and uptime.
4. Compatibility: Works on various browsers and devices..
5. Supports different cultural preferences.
6. Modular design, easy content management, and updates.
7. Prioritize user-centered design and clear information presentation.
8. Incorporate user feedback to enhance functionality and features.

Chapter 3 : Outcomes

3.1 Conclusion

Users gain comprehensive travel information and insights. Capture interest and
encourage exploration of travel options. Showcase packages, destinations, and
travel insights. Build credibility through reviews, ratings, and transparency.
Ensure compatibility, personalization, and responsiveness. Foster lead
generation via subscriptions and social media. Utilize analytics for optimization
and data-driven improvements. User feedback informs ongoing website
enhancements. At the end we learnt about how to implement HTML, CSS and
Bootstrap and convert our knowledge into making a responsive static landing
page fo Flamingo Transworld Pvt. Ltd. This opportunity filled the gap between
our academic knowledge and practical applications in the commercial business.
Through the fusion of HTML, CSS, JavaScript, and Bootstrap, we've crafted a
dynamic landing page.

4
 Lead Gen Landing Page

3.2 Future Enhancement

1. Submission of inquiry form which connected with Flamingo’

CRM(customer management system).
2. Streamline the booking process with a one-click booking option for
returning users.
3. Enhance maps with interactive pins highlighting attractions, restaurants, and
local hotspots.
4. Provide more sophisticated filtering options, such as budget range, travel
style, and specific amenities.
5. Allow users to search and explore travel options using voice commands,
catering to the rise of voice-activated devices.
6. Develop a dedicated mobile app for convenient travel planning, booking,
and accessing personalized content.
7. Highlight sustainable and eco-friendly travel choices, catering to the
growing demand for responsible tourism.

3.3 Progress report with result Pictures

(Progress Report)

5
 Lead Gen Landing Page

Day 1: Introduction to Web Designing and Figma

The company gave a brief introduction about fundamentals of web designing and
tools used to implement it.
i.e., Importance of Responsive web design
Importance of using proper fonts
Using matching designing patterns etc.

Install Visual Studio. Discussed about the project with the head and learnt how to
make a landing page. Started with basics of html and syntax. Practiced html in
various editors like notepad, visual studio, etc

Referred HTML Tags[(h1-h6), <head>, <body>, <title>, <meta>, <html>,

<form>, <a>, <button>, <div>, <input>, <img>, <ul,li>, <table>, <td,tr,th>],
Attributes[action,color,bd-color, class, href, id, name],etc

Implemented tags and made a practice program.

(basic tags implementation)

6
 Lead Gen Landing Page

Made form using { form, input, action, text, textarea, name, value, button,
submit, password, fieldset, label }

(form tag implementation)

Made table for practice using { table, th, ,tr, td, colspan, rowspan }

(table tag implementation)

7
 Lead Gen Landing Page

Day 2: Introduction to Html and CSS

Gained knowledge that what actually CSS is and it's use. Learnt the types of css:
Inline , External , Document and also the syntax of CSS. Selectors and it's use:
Simple selectors: id Selector, class Selector, Universal Selector, Grouping Selector.
Learnt about the use of background-color and color and also tried different types of
borders.

(Different Selectors)

Margin: margin-top, margin-right, margin-bottom, margin-left padding: padding-

top, padding-right, padding-bottom, padding-left height/width, box model
(Content, Padding, Border, Margin) outline: (outline-style, outline-color, outline-
width, outline-offset, outline) text: (text-align, text-align-last, direction, unicode-
bidi, vertical-align) fonts, icons: <i class="fas fa-cloud"></i> links, lists:
(ordered, unordered).

8
 Lead Gen Landing Page

(margin and padding)

gain idea of various CSS topics like tables: (tr,td,th) , display: (flex, inline,
block,inherit), z-index: The z-index property specifies the stack order of an
element. overflow, float: (left, right, none, inherit) align, inline-block ,opacity: img
{opacity: 0.5;} , navigation-bar, drop-down, position: (relative, absolute, fixed,
static, sticky), display, forms , shadow
!important: The !important rule in CSS is used to add more importance to a
property/value than normal.

(CSS of opacity and float methods)

9
 Lead Gen Landing Page

Day 3: Bootstrap 5

Gained the knowledge about the use and importance of bootstrap 5. Got the idea
related to the functions of the bootstrap like Components like : base classes,
modifiers, responsive, creating your own CSS variables like: root variables,
component variables. Break points for small, medium, large, extra large, etc which
is use to control when your layout can be adapted at a particular viewport or device
size
Practiced the concept of the media query for min-width and max-width, single
breakpoints, between breakpoints. Media queries are a feature of CSS that allow
you to condition all apply styles based on a set of browser and operating system
parameters Learnt about some more features of bootstrap. Containers are the most
basic layout element in Bootstrap and are required when using our default grid
system. Containers are used to contain, pad, and (sometimes) center the content
within them. While containers can be nested, most layouts do not require a nested
container. Bootstrap comes with three different containers: {.container, which sets
a max-width at each responsive breakpoint, .container-fluid, which is width:
100% at all breakpoints .container-{breakpoint}, which is width: 100% until the
specified breakpoint}
Columns used for horizontal or vertical alignment also for column wrapping and
column breaks. Grid: Bootstrap’s grid system can adapt across all six default
breakpoints, and any breakpoints you customize like small, medium, large, extra
large, extra small. z-index: z-indexes play an important part in how our
components overlay and interact with one another. Dicussed with our head
regarding landing page for our project and took idea start it and explained about
various sections like navigation bar, header, footer, etc and importance of
comments. Took reference from google to get similar look and fill bootstrap
template. Studied the code and understood the pattern of divisions by going
through the functions like parent div, row, container, col tag, etc

10
 Lead Gen Landing Page

(CSS code including z-index)

Day 4: Working on navbar section

Started the modification of the code starting from getting the link of CSS for the
use of bootstrap. Secondly given the background image to the section by giving
height, width, padding and marging to the background. Arranged the navbar in the
required order and cleared the doubts raised regarding navigation bar.
Also gave the font-size, font-weight and color as per the requirement. Got the idea
of how the division of cols are are done. Made the second half of the page i.e.
header section. Gave the alignment of the text and also the color and font
size/weight as per the requirement. Learnt the usage of the importance tag in CSS
and also got to know the easiness by using the inspect option. Using inspect,
corrected the minor mistakes suggested by the head.

11
 Lead Gen Landing Page

(CSS of navbar section)

(Desktop view of section 1)

12
 Lead Gen Landing Page

Day 5: Responsive navbar section

Learnt how to make the responsive/dynamic page using the “col-sm-12” and media
query and d-lg-none, d-sm-none (for hiding the content). Implemented the media
query and made the content aligned as per the requirement. Made the background
image set and the content too by giving padding, margin, text-align,etc. Studied
about the navbar toggle method and learnt it’s implementation with the help of the
bootstrap. Implemented the changes in the navbar using the navbar toggle method
in the mobile screen by using the bootstrap code. Made the correction in the in the
bootstrap code and got the output as per the requirement. Modified the content and
got the first section done in both static and dynamic screen Showed the output to
the guide and solved the corrections suggested by them. Modified the corrections
and completed the first section.

(CSS of section 1 with media query)

13
 Lead Gen Landing Page

(responsive view of navbar)

Day 6: Using Flickity Slider

Collected images and logos from Unsplash site.Removed the background of the
images and made it transparent form adobe. Arranged the 4 logos in the first part
of the section by "col-lg-3". Managed the height and width , margin and padding of
the images according to the requirement. Wrote a heading and moved it in center
and managed the height, font-size, font-weight, etc. Arranged the images as per the
screen size using col function and spaces in between by padding. Gave required
height and width to the class as per the requirement. Search the code of flickity
slider from the bootstrap and arrnged the images in the slider. Managed the width
and height of the carousel-cell and also the carousel-viewport Wrote the text on the
image by giving the positon: absolute and top/bottom/left/right. Managed the font
of the text and arranged it as per the requirement. Gave the whole section the
border-radius and the background colour.

14
 Lead Gen Landing Page

(CSS of flickity section)

(Desktop view of flickity section)

15
 Lead Gen Landing Page

Day:7 Made section responsive including flickity

Started making the same section dyanamic. Arranged the logos in vertical manner
as in one on each row by giving col-md-12 and col-sm-12 and arranged it in
middle of the screen and also gave height and width. Arranged the images one on
the screen by giving col-md-12 and col-sm-12. Added the flickity slider and added
the images and arranged the carousel-cell and carousel-viewport as per the required
display. Wrote the text on the image by giving the position : absolute and arranging
it as per the requirement. Gave the font-weight and font-size to the fonts which
goes good with the whole page. Done the same thing in the mobile by using the
media query as @media (max-width:480px) Made the whole section responsive
(dynamic) as per the device.

(Responsive view of flickity section)

16
 Lead Gen Landing Page

(Responsive view of flickity section)

Day 8: Image Section Using z-index

Started working in next section on desktop mode. Collected the images required
and arranged the image as per given measures. Gave border-radius, width and
height. Wrote the side para in another div and arranged it in the second part of the
coloum of the page. Gave the style to the paragraph by giving font-size, font-
weight, and justified the content to left. Made the button and gave the css styling to
the button gave the shape to the button by giving the border-radius. Started to make
the same section in tablet and mobile. Gave col-md-12 and col-sm-12 to arrange
both the parts one on each coloumn. Gave the css of Object fit : cover to easily
arrange the height and width of the image. Arranged the para in the next line and
aligned it as per the requirement. Made the other division below the section. Gave
the section border, box-shadow, border-radius, width, height. Overlaped it by
giving the margin-top in minus and gave margin and padding as per the required.

17
 Lead Gen Landing Page

(CSS of image section)

(responsive and desktop view of image section)

18
 Lead Gen Landing Page

Day 9: Form on the left and carousel on right

Started another section in the desktop format. Made 2 parts by giving col-lg-6.
Gave heading in the first section and made it bold, padding, margin Started making
container having location, date and search button. Arranged them in a line by using
display : flex and gave them fonts and designed it as per the requirement. Added
the dropdown in location and date Made the button slightly square and gave that
the colour. Used the "svg" code to bring the search logo in the button and added
the css to the logo. Gave colour to the section and made it 70% and curved the
upper right and upper left corner and ended the left sided part. Added flickity slider
on the left side of the section and arranged the images in the carousel. Arranged the
carousel-cell and carousel-viewport as per the required display. Added the text on
the image by giving the position : absolute and using top/bottom.right/left
attributes and gave the css according to the requirements.

(CSS of carousel section)

19
 Lead Gen Landing Page

(View of carousel section)

Day 10: Responsive carousel section

Started the same section in the tablet and mobile. Made the whole section and
divided it in two parts making col-md-12 and col-sm-12 and aligned it in the
middle of the device. Made the container longer and arrange the items in the
vertical manner. Arranged the whole dropdown menu in the manner that it covers
the whole screen. Made another search button which contain the text "search" with
logo and gave the parameter which hides the button in large screen and only
displays on medium and small screen by using "d-lg-none" and took it in the next
line. Arranged the container in the required manner and gave the box-shadow, and
border and also more required css to match the original design. Arranged the
images in the next div and made the equal spacing between the images by giving
proper col function. Added the flickity slider and arranged the images in the slider
and adjusted the slider and viewport as per the measures of the screen. Polished the
whole section and made it familiar to the original.

20
 Lead Gen Landing Page

(CSS fifth section)

(Responsive view of fifth section)

21
 Lead Gen Landing Page

Day 11: Feedback section

Started the feedback section by writing the heading and giving the fonts and other
css. Also aligned it in the middle of the section. Kept it in one div giving the col-
lg-12 to made it set in all the devices i.e. responsive. Collected the cards from the
bootstrap 5 site and also collected the needed images from google to set them in
card. Understood the whole code of the card. Arranged the cards in the horizontal
line by giving col-lg-4 and gave padding and marging to set them at equal interval.
To give them a circle effect gave them border-radius, fonts, box-shadow Added
the image of stars in the feedback card and also the image to identify that whose
feedback it is. Then taken the flickity slider from bootstrap 5 and arranged the card
in the carousel-cell. Arranged the flickity slider and carousel-cell as per the display
requirement. Polished the whole section and made it better.

(CSS of sixth section)

22
 Lead Gen Landing Page

(View of sixth section)

Day 12: Responsive feedback section

Started the whole section in the responsive manner. In tablet arranged the section
in one line using col-md-12 and col-sm-12. Arranged the cards in the screen the
only one displays on the screen. Arranged the cards in the slider and adjusted the
padding and margin in them. Increased the width by making it 100% so that it
covers the whole screen Arranged the padding and margin of the whole section and
gave the background colour to the section. Started the next and the last section of
the whole landing page. Divided the whole row in 2 parts col-lg-6 each. Arranged
the logo first by making background transparent from adobe site. Collected logos
of instagram, facebook, twitter, and youtube from google and made the transparent
from abode. Arranged the left side of the section using unordred list and it's sub
types. Made the diaplay of them in the required manner.

23
 Lead Gen Landing Page

(CSS of feedback section)

Day 13: About Us Section

Started the right side of the section. Divided right side in to three sub parts by
giving col-lg-4 in the right side section. Wrote the three coloumns in the list and
aligned them in horizontal manner using display : flex. Wrote the heading in <h3>
tag. Gave equal distance between the coloums giving equal padding in the common
class. Started making it in the responsive manner Arranged them in the way that
ecah coloumn gets displayed in single line by giving col-md-12 and col-sm-12
Added the div of copyright for the website in the last section section. Edited the
whole section in the arrangement required in all the devices.

24
 Lead Gen Landing Page

(CSS of feedback section)

(View of feedback section)

25
 Lead Gen Landing Page

Day 14: Responsive About Us Section

Polished the whole page from the first section. Showed the whole landing page to
our external guide and took review from them. Done the changes in the first and
second section.

(CSS of About Us section)

(Responisve view of About US section)

26
 Lead Gen Landing Page

Day 15: Polished the code and made website live

Tried the code in the large desktop and after getting it right our guide uploaded the
web page on the live url. Now our web page can be accessed in all the devices.
Live Preview
https://www.flamingotransworld.co.in/priyal-lp/

Chapter 4 : Bibliography

 https://www.w3schools.com/html/default.asp
 https://www.w3schools.com/css/default.asp
 https://www.figma.com/file/QAViGuVDbtmMt4MjSHU8IG/Electronics-E-
Commerce-Website-%7C-UI-DESIGN-(Community)?type=design&node-
id=0-1&mode=design&t=bTzaof0K6FLKilgb0
 https://www.tutorialspoint.com/web_development_tutorials.html

27