Landing Page

Content
S. No. Topic Page No.

1. Introduction to INTERNSHALA 1-4
2. Introduction of Technology 5-6
3. Project Introduction 7
4. Landing/Home 8-22
Page Code
5. ScreenShot of 23-24
Home Page
6. Register Page 25-30

Code
7. ScreenShot of Register 31
Page
8. Product Description Page 32-37

Code
9. ScreenShot of 38
Product
Description Page
10. Conclusion 39
11. Bibliography 40
Int
Introduction of INTERNSHALA
Basic Information Internshala is an online recruitment and training platform. On recruitment
portal of Internshala, the internship seekers and job-seeking freshers from all over India,
across different education streams, can search and apply to various internships and fresher
jobs of their choice and organisations. Additionally, startups, corporates, SMEs, NGOs,
education institutes, and big brands, can post their intern and entry-level job requirements to
hire university students and fresh graduates all over India. On Internshala Trainings, the e
learning arm of Internshala, the online learners including students and professionals can avail
online trainings in the latest in-demand industry skills to build their career, upskill
themselves, and become industry-ready.
Internshala was launched as a WordPress blog initially. The blog dealt with education,
technology, and issues about gaps in skills. It was then transformed into an internship portal.
It is a free portal for both interns as well as employers. Currently, Internshala has more than
3000000 student visits and 80000+ companies registered on its website. Internshala also
offers online educational training in various streams.
The courses on offer are on a chargeable basis but can be downloaded along with the
supporting materials such as videos for offline reference. Internshala's courses are largely
divided into Summer Training and Winter Training. Internshala offers different kinds of
internships—full time, part-time, and work from home. One can find both paid and unpaid
internships on Internshala.
Internshala - Founders
Sarvesh Agrawal is the Founder of Internshala.

Sarvesh comes from a business family and was born and brought up in Nawalgarh, a small
town of Rajasthan. He completed his bachelor's and Master's degrees in Civil Engineering
from the Indian Institute of Technology in 2006. After his Master's, he started working in
Capital One company in Nottingham (United Kingdom) as a Business Analyst in the product
innovation team.
After a year, he came back to India to work with Barclays Bank’s credit card analytics
division. In the year 2010, he switched to Aviva Life Insurance in Gurgaon to set up a
Business Analytics team for the organization.
How it Started?
Sarvesh always had an interest in the field of education and learning. While he created blogs
to generate awareness about the same, he was asked many questions about internships. It was
a stark realization that the domain of internships was one area where nothing was happening
in India; it wasn’t as mainstream as in the West.
Sarvesh left his job and began building a team and a portal. An incident occurred when one
of Sarvesh's friends from his college days went on to pursue an MBA from London Business
School.
During his semester break, he was looking for an internship in India and informed Sarvesh
about the lack of internship opportunities in the country. This served enough motivation for
Sarvesh to start a platform where people could get ample of internship opportunities at one
place.
Internshala - Name, Tagline, and Logo
The name Internshala means a place where you will find Internships. If we break the
name into two parts, then the word ‘Intern’ means a person who is seeking an internship in
some firm and ‘shala’ is a Hindi word which means a place. On combining the two words,
the meaning is clear—a place where a person can get internships.
The tagline of Internshala is ‘internships that matter’; it means that the company provides
you a platform for seeking meaningful and helpful internships.
Internshala - Business Model and How it Works?
Internshala operates through its website and mobile app. A student has to register, create a
decent profile, and apply for various internships listed on the portal. Internshala is a free
platform when it comes to applying or searching for internships but earns revenue through
two mediums:
1. Internshala charges some amount for its online training programs. These programs
vary based on duration, category, and finances.
2. Internshala also charges fees from third parties such as advertisers who want to post
ads, posters or email busters, etc. on its website.
Internshala - Startup Challenges
Sarvesh Agrawal, the founder of Internshala, mentioned in one of his interviews that a big
challenge faced by Internshala was attracting good talent as the business continued to grow.
In the initial days, one of the main obstacles the team had to face was the lack of good technical
talent at both the junior and senior levels. Sarvesh was from a non-programming background and
had to struggle the most in this area.
Another challenge for the company was that employers were facing hurdles in finding interns as
Indian students favored in-office internships during summer and winter breaks, making it difficult
to hire interns during the rest of the months. There was a hindrance in matching the location and
timelines of students and employers. In short, getting the students to be in sync with the
companies providing internships was difficult.
Internshala - Internship and Training Sectors
Internshala provides internships in various sectors like web development, arts, management,
science, IT, data analysis, law, engineering, architecture, and many others. The training
courses include, but are not restricted to, Photography, Business Communication Skills,
Computing, Excel, Design, etc.
Internshala - Future Plans
Internshala concentrates on helping students in learning, training, and garnering on-field

experience. Internshala was launched with a mission to equip 30 million college students in
India with practical knowledge and real-life skills to achieve their dreams and turn them into
reality.
They are constantly working towards providing internships and training across cities, small
towns, and villages. This is the driving factor for Internshala. In the coming years,
Internshala wants to take the step of providing meaningful internships to students and
individuals in tier 2 and tier 3 cities by creating awareness and bringing opportunities to
them.
What is the Internshala business model like?
Internshala is a free platform when it comes to applying or searching for internships but
earns revenue through two mediums:
1. Internshala charges some amount for its online training programs. These programs
vary based on duration, category, and finances.
2. Internshala also charges fees from third parties such as advertisers who want to post
ads, posters or email busters, etc. on its website.
Introduction to Technology
How website works:

Role of HTML :-
 Hyper text markup language.

 It is basically a standard markup language for giving a static skeleton to web application and sites.
 It’s a well standardized System.
Role of CSS :-
 Cascading Style Sheets.

 It use a separate language from HTML, CSS allows you to apply consistent styling of elements across all
pages on your site, so that all headings, lists, and paragraphs look and act the same on every page of a
site.
Role of JavaScript :-
 High-level dynamic interpreted programming language.

 It allows client-side scripting to create completely dynamic web application and websites.
Role of PHP :-
 Dynamic content: PHP is a more dynamic use of code. For example, when you enter welcome/html
you will always receive the response, ‘Welcome!’, however when you request welcome.php,
depending on the time of day, you may receive ‘Good Morning!’. This indicates that PHP produces
more dynamic coded content.
 Easy to learn: PHP is considered one of the easiest, most common web development languages,
compared to another popular one like Java.
 Open source and free: The components of the language are free, so all you have to do is hire some Zen
Cart web developers to have your projects completed cost-effectively.
 Easy to deploy: Many hosting companies are willing to offer a server for companies that run using PHP.
 Reliable: The web language is rather efficient because it possesses a scalable code.
 Fast processing: PHP uses its own memory space, automatically reducing the loading time for the
server. This allows a faster processing capacity which is incredibly beneficial for websites with high
traffic.
 Secure: Known for its vast layers of security protection.
 User-friendly: Not only is PHP easy to learn but it’s also easy to use with a high level of simplicity at the
root of its function.
 Easy to integrate: There’s no need to re-code or re-develop because PHP is easy to coordinate with all
company software.
Role of React :-
 React is an excellent framework for web development in 2023. It’s easy to learn, and it offers a lot of
benefits over other JavaScript libraries, including those that are more popular. With the growing
popularity of React, it’s not hard to understand why a lot of people are choosing to use the React
framework for their web development processes.
 React offers an amazing ecosystem, tons of features and tools, and tremendous community support,
and also is SEO-friendly. However, more than knowing all these benefits, you must know how they
contribute to your web development process is required.
 The main reason why React is so popular is that it offers developers an easy way to create applications
with a lot of functionality at once. This means that your app doesn’t need to be as complicated as
other frameworks; instead, you can focus on building features in your app rather than how to get
those features up and running on the web. This can help make your app easier for users to understand
and use! There are multiple platforms based on React to create web applications, mobile applications,
and cross- hybrid Platform for Desktops.
Project Introduction
E-commerce Website
An e-commerce website is a platform that allows businesses to sell products or services online. In this
project, we aim to create a simple e-commerce website that enables customers to browse products,
make purchases and pay online.
Design
The design of the website should be user-friendly and simple. We will use a minimalistic approach
with a white background, simple fonts and clear navigation. The website should also be responsive,
meaning that it should adjust to different screen sizes.
Functionality
The website should provide customers with a simple checkout process. Customers should be able to
add items to their cart, select a shipping method, and pay online. It is also important to include a
search bar so that customers can easily find the products they are looking for.
Security
Security is an essential part of any e-commerce website. We will ensure that the website is secure by
using an SSL certificate to encrypt data sent between the website and the user's browser. We will also
use a reputable payment gateway to handle online payments.
Aim
This project aims to create a simple and user-friendly e-commerce website that provides customers
with a convenient and safe way to purchase products online.
Landing Page/Home Page Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">

<link href="https://fonts.googleapis.com/css2?family=Recursive:wght@300;400;500;600;700&display=swap"
rel="stylesheet">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">

<script defer
src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyCl7F3URup7S4Of3R3cJQLk535vNnUQRzg&callback=initMap">
</script>
<title>ElectroHub | World's Best Market</title>
</head>
<body>
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="images/logo.png" style="height:60px;" alt="logo-image">
</div>
<nav>
<ul id="menu-items">
<li><a href="">Home</a></li>
<li><a href="index2.html">Products</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="register.html">Account</a></li>
</ul>
</nav>
<img src="images/cart.png" alt="cart" width="30px" height="30px" class="cart-img">
<img src="images/menu.png" alt="menu" width="30px" height="30px" class="menu-icon"
onclick="menutoggle()">
</div>
<div class="row">
<div class="col-md-6 ">
<h1 class="text-white">Great deals happening <br> Right Now!</h1>
<p>Enjoy a safe, convenient shopping experience</p>
<p>Shop stress-free from home. We’re ready to help, online or by phone.</p>
<a href="" class="btn btn-main">Explore Now →</a>
</div>
<div class="col-md-6">
<img src="images/laptop-banner.png" alt="banner-image" class="center">
</div>
</div>
</div>
</div>

<div class="small-container mt-5">
<h2 class="title">Featured Products</h2>
<div class="row horizontal-scroll-wrapper squares">
<div class="col-4 box-container">
<div class="image-overlay"></div>
<img src="images/power-tab.jpeg" alt="tablet pc">
<h5 class="product_name">Tablet Pc</h5>
<a href="products.html" class="btn btn-primary">BUY NOW</a>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Tablet Pc</h3>
<h4 class="content-price">Rs1000.99</h4>
<div class="content-btn btn btn-secondary" title="Add to Cart"><i class="fa fa-cart-plus" aria-
hidden="true"></i></div>
</div>
<p class="price_name" >Rs1000.99</p>

</div>
<img src="images/ps4-gaming.jpg" alt="Gaming console">
<h5 class="product_name">X-box Console</h5>
</div>
<p class="price_name" >Rs2000</p>
</div>
<img src="images/iphonex-phone.jpg" alt="Iphone X">
<h5 class="product_name">IPhone X</h5>
</div>
</div>
<img src="images/keyboard.jpg" alt="keyboard">
<h5 class="product_name">Logitech Super Slim</h5>
</div>
</div>
</div>

<h2 class="title">Latest Products</h2>
<div class="row">
<img src="images/Alienware-laptop.png" alt="Gaming Laptop">
<h5 class="product_name">X-box Console</h5>
</div>
<button type="button" class="btn btn-primary btn-sm">BUY NOW</button>
<button type="button" class="btn btn-secondary btn-sm">ADD CART</button>
</div>
<img src="images/canon-cam.jpg" alt="Camera">
<h5 class="product_name">Canon 12X Pro Shoot</h5>
<i class="fa fa-star-half-o"></i>
</div>
</div>
<img src="images/iphone9-phone.jpg" alt="Iphone SE">
<h5 class="product_name">IPhone SE</h5>
</div>
</div>
<img src="images/logitech-tab.png" alt="Tablet Pc">
<h5 class="product_name">Samsung Tablet PC</h5>
</div>
</div>
<img src="images/imac.jpg" alt="Imac">
<h5 class="product_name">Apple Imac</h5>
</div>
</div>
<img src="images/thunderbolt.jpeg" alt="Gaming Laptop">
<h5 class="product_name">USB Type-C Thunderbolt</h5>
</div>
</div>
<img src="images/laptop-gaming.jpg" alt="Gaming Laptop">
<h5 class="product_name">Alienware Laptop</h5>
</div>
</div>
<img src="images/cod-ps4.jpg" alt="Playstation 4">
<h5 class="product_name">Call of Duty MW</h5>
</div>
</div>
<img src="images/phantom-drone.png" alt="Phantom Drone">
<h5 class="product_name">Phantom Drone</h5>
</div>
</div>
<img src="images/epson-projector.png" alt="Epson Projector">
<h5 class="product_name">Epson Projector</h5>
</div>
</div>
<img src="images/ps4-headset.jpg" alt="Gaming Headset">
<h5 class="product_name">Ps4 Gaming Headset</h5>
</div>
</div>
<img src="images/superbass-speakers.jpg" alt="Super Bass Laptop Speakers">
<h5 class="product_name">Super Bass USB Speakers</h5>
</div>
</div>
<img src="images/xbox-game.jpg" alt="Fifa 20 Xbox">
<h5 class="product_name">Fifa 20 Xbox</h5>
</div>
</div>
<img src="images/xbox-headset.jpg" alt="Xbox Headset">
<h5 class="product_name">X-box Headset</h5>
</div>
</div>
<img src="images/falcon-drone.jpg" alt="falcon-drone">
<h5 class="product_name">Falcon Drone</h5>
</div>
</div>
<img src="images/ps4-fortnite.jpg" alt="Fortnite">
<h5 class="product_name">Ps4 Fornite</h5>
</div>
</div>
</div>
</div>


<div class="offer">
<div class="small-container">
<div class="row">
<div class="col-6">
<img src="images/asus-banner.png" class="offer-img">
</div>
<div class="col-6 text-data text-white">
<p>Top Prodcuts you should take it</p>
<h1>Best Product limited offer!</h1>
</div>
</div>
</div>
</div>


<div class="brands">
<div class="small-container">
<div class="row">
<div class="col-3">
<img src="images/amazon_PNG24.png" alt="amazon logo">
</div>
<div class="col-3">
<img src="images/apple_logo_PNG19675.png" alt="apple logo">
</div>
<div class="col-3">
<img src="images/samsung_logo_PNG2.png" alt="samsung logo">
</div>
<div class="col-3">
<img src="images/mastercard_PNG7.png" alt="mastercard logo">
</div>
<div class="col-3">
<img src="images/paypal_PNG19.png" alt="mastercard logo">
</div>
</div>
</div>
</div>


<div class="footer">
<div class="container">
<div class="row">
<div class="footer-col-1">
<h3>Download our app</h3>
<p>Top G5 Enabled Prodcuts with good support</p>
<div class="app-logo">
<img src="images/playstore.png" alt="">
<img src="images/appstore.png" alt="">
</div>
</div>
<img src="images" alt="">
<p>Best technology enabled product?</p>
</div>
<h3>Useful Links</h3>
<ul>
<li>Coupons</li>
<li>Blog Post</li>
<li>Return Policy</li>
<li>Join Affiliate</li>
</ul>
</div>
<h3>Follow Us</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>YouTube</li>
</ul>
</div>
</div>
<hr>
<p class="copyright">Copyright 2023</p>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS :-
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
.navbar{
display: flex;
align-items: center;
padding: 20px;
}
.price_name{
color: #000;
}
nav{
flex: 1;
text-align: right;
}
nav ul{
display: inline-block;
list-style-type: none;
}
nav ul li{
margin-right: 20px;
}
a{
text-decoration: none;
color: rgb(245, 244, 244);
}
p{
color: rgb(194, 181, 181);
}
.header{
background: #000;
}
.header .row{
margin-top: 70px;
}
.container{
max-width: 1300px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
/* .row {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.box-container {
flex: 0 0 auto;
} */
.col-2{
flex-basis: 50%;
min-width: 300px;
}
/* .col-2 img{
max-width: 100%;
padding: 50px 0;
height: 450px;
/* margin-left: 20%; */
/* place-self: center;
} */
.center {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
padding: 50px 0;
height: 470px;
}
.col-2 h1{
font-size: 50px;
line-height: 60px;
margin: 25px 0;
color: #ffffff;
}
.btn-main{
background: #210583;
color: rgb(255, 255, 255);
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.cart-img{
filter: invert(100%);
-webkit-filter: invert(100%);
}
.btn-main:hover{
background-color: #170653;
.categories{
margin: 60px 0;
}
.col-3{
flex-basis: 30%;
min-width: 250px;
margin-bottom: 30px;
}
.col-3 img{
width: 100%;
}
.small-container{
max-width: 1080px;
margin: auto;
padding-left: 15px;
padding-right: 15px;
}
.small-container h2{
text-align: center;
font-size: 2.2rem;
}
.col-4{
flex-basis: 50%;
padding: 10px;
max-width: 220px;
transition: transform 0.5s;
}
.col-4 img{
width: 100%;
height: 200px;
}
.title{
color: rgb(41, 36, 36);
position: relative;
line-height: 60px;
}
.box-container {
height: 340px;
box-shadow: 0 8px 6px -6px rgba(104, 99, 99, 0.712); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
/* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.title::after{
content: '';
background: #210583;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
h4{
color: #555;
font-weight: normal;
}
.col-4 p{
font-size: 14px;
}
.rating .fa{
color: #ffbf00
}
.col-4:hover{
transform: translateY(-5px);
}
.col-4 img:hover{
background: url(./techbg.jpg);
}
.box-container .image-overlay {
background: rgba(0,0,0,0.7);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.box-container:hover .image-overlay{
opacity: 1;
}
.content-details {
position: absolute;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.box-container:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3{
color: #fff;
font-weight: 300;
margin-bottom: 0.5em;
}
.content-details p{
color: #fff;
font-size: 0.8em;
}
.fadeIn-bottom{
top: 80%;
}
.fadeIn-top{
top: 20%;
}
.fadeIn-left{
left: 20%;
}
.fadeIn-right{
left: 80%;
}
/* google maps */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
/* ----offer--- */
.offer{
background-color: #000;
margin-top: 80px;
padding: 30px 0;
}
.col-2 .offer-img{
padding: 50px;
width: 32rem;
}
small{
color: #555
}
/* --------brands--------- */
.brands{
margin: 100px auto;
}
.col-5{
width: 100px;
}
.col-5 img{
height: 50px;
width: 100%;
cursor: pointer;
filter: grayscale(100%);
}
.col-5 img:hover{
filter: grayscale(0);
}
.footer{
background: #000;
color: #8a8a8a;
font-size: 14px;
padding: 60px 0 20px;
}
.footer p{
color: #8a8a8a;
}
.footer h3{
color: #fff;
}
.footer-col-1, .footer-col-2, .footer-col-3, .footer-col-4{

min-width: 250px;
}
.footer-col-1{
flex-basis: 30%;
}
.footer-col-2{
flex: 1;
text-align: center;
}
.footer-col-2 img{
width: 180px;
}
.footer-col-3, .footer-col-4{
flex-basis: 12%;
text-align: center;
}
ul{
list-style: none;
}
.app-logo{
margin-top: 20px;
}
.app-logo img{
height: 50px;
width: 50px;
}
.footer hr{
border: none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;
}
.copyright{
text-align: center;
}
.menu-icon{
width: 28px;
margin-left: 20px;
display: none;
filter: invert(100)
}
/* ------------ media query for menu -------------------- */
@media only screen and (max-width: 800px){

nav ul{
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: maxHeight 0.5s;
}
nav ul li{
display: block;
margin-right: 50px;
margin-top: 10px;
}
nav ul li a{
color: #fff;
}
.menu-icon{
display: block;
cursor: pointer;
}
}
Javascript :-
// toggle menu
var MenuItems = document.getElementById("menu-items");
MenuItems.style.maxHeight = "0px";
function menutoggle(){
if(MenuItems.style.maxHeight == "0"){
} else {
}
}
ScreenShot Of Home Page
Register Page Code
<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, minimum-scale=1.0, shrink-to-fit=no">
<link href="images/favicon.png" rel="icon">
<title>Oxyy - Login and Register Form Html Template</title>
<meta name="description" content="Login and Register Form Html Template">
<meta name="author" content="harnishdesign.net">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Poppins:100,200,300,400,500,600,700,800,900" type="text/css">

<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet" type="text/css" href="enhanced.css">

<link id="color-switcher" type="text/css" rel="stylesheet" href="#">
</head>
<body>
<div id="main-wrapper" class="oxyy-login-register">
<div class="container-fluid px-0">
<div class="row no-gutters min-vh-100">

<div class="col-md-6 d-flex flex-column align-items-center order-2 order-md-1">
<div class="container pt-5">
<div class="row">
<div class="col-11 col-md-10 mx-auto">
</div>
</div>
</div>
<div class="container my-auto py-5">
<div class="row">
<div class="col-11 col-md-10 col-lg-9 col-xl-8 mx-auto">
<h3 class="font-weight-300 text-9 mb-5">Sign up</h3>
<form id="registerForm" method="post">
<div class="form-group font-weight-300">
<label for="fullName">Full Name</label>
<input type="text" class="form-control bg-light" id="fullName" required="" placeholder="Enter Your
Name">
</div>
<label for="emailAddress">Email Address</label>
<input type="email" class="form-control bg-light" id="emailAddress" required="" placeholder="Enter
Your Email">
</div>
<label for="loginPassword">Password</label>
<input type="password" class="form-control bg-light" id="loginPassword" required=""
placeholder="Enter Password">
</div>
<div class="form-group font-weight-300 mt-4">
<div class="form-check text-2 custom-control custom-checkbox">
<input id="agree" name="agree" class="custom-control-input" type="checkbox">
<label class="custom-control-label" for="agree">I agree to the <a href="#">Terms</a> and <a
href="#">Privacy Policy</a>.</label>
</div>
</div>
<button class="btn btn-dark btn-block shadow-none font-weight-400 my-4" type="submit">Sign
Up</button>
</form>
<p class="text-right text-2 text-muted font-weight-300">Already a member? <a class="btn-link font-
weight-300" href="login-9.html">Sign in now</a></p>
</div>
</div>
</div>
</div>


<div class="col-md-6 bg-dark order-1 order-md-2">
<div class="container h-100 d-flex flex-column">
<div class="row no-gutters">
<div class="logo mt-5 mb-5 mb-md-0"> <a class="d-flex" href="index.html" title="Oxyy"><img
src="images/logo.png" alt="Oxyy"></a> </div>
</div>
</div>
<div class="row no-gutters my-auto">
<h1 class="text-13 font-weight-400 mb-4 text-light">Best Deals, Best Prices, Fast Delivery</h1>
<p style="color: #cecece;">Consoles, Games, Accessories, Electronics, Phones</p>
</div>
</div>
</div>
</div>

</div>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
CSS :-
body, html {
height: 100%;
}
body {
background: #f1f3f6;
color: #4c4d4d;
font-family: "Poppins", sans-serif;
}
input{
border-bottom: solid 2px #00000057 !important;
}
/*-------- Preloader --------*/
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
}
}
0% {
}
100% {
}
}
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
form {
padding: 0;
margin: 0;
display: inline;
}
img {
vertical-align: inherit;
}
a, a:focus {
color: #007bff;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
a:hover, a:active {
color: #006adb;
}
a:focus, a:active,
.btn:active:focus,
.btn:focus,
button:focus,
button:active {
outline: none;
}
p{
line-height: 1.8;
}
h1, h3 {
color: #252b33;
font-family: "Poppins", sans-serif;
}
/* Text Size */
.oxyy-login-register .text-2 {
font-size: 14px !important;
font-size: 0.875rem !important;
}
font-size: 36px !important;
}
}
@media (max-width: 1200px) {
font-size: calc(1.45rem + 2.4vw) !important;
}
}
line-height: 1.3;
}
/* Line height */
/* Font Weight */
.oxyy-login-register .font-weight-300 {
font-weight: 300 !important;
}
.oxyy-login-register .font-weight-400 {
font-weight: 400 !important;
}
/* Opacity */
/* Background light */
/* Background Dark */
.oxyy-login-register hr {
border-top: 1px solid rgba(16, 85, 96, 0.1);
}
/* =================================== */
/* 3. Layouts
/* =================================== */
#main-wrapper.oxyy-login-register {
background: #fff;
}
@media (min-width: 1200px) {
.oxyy-login-register .container {
max-width: 1170px !important;
}
}
/* 6.1 Form */
.oxyy-login-register .form-control {
border-color: #dae1e3;
font-size: 16px;
color: #656565;
}
.oxyy-login-register .form-control.bg-light {
background-color: #f5f5f6 !important;
}
.oxyy-login-register .form-control.border-light {
border-color: #f5f5f6 !important;
}
.oxyy-login-register .form-control:not(.form-control-sm) {
padding: .810rem .96rem;
height: inherit;
}
.oxyy-login-register .form-control:focus {
-webkit-box-shadow: 0 0 5px rgba(128, 189, 255, 0.5);
box-shadow: 0 0 5px rgba(128, 189, 255, 0.5);
border-color: #80bdff !important;
}
.oxyy-login-register .form-control::-webkit-input-placeholder {
color: #b1b4b6;
}
.oxyy-login-register .form-control:-moz-placeholder {
/* FF 4-18 */
color: #b1b4b6;
}
.oxyy-login-register .form-control::-moz-placeholder {
/* FF 19+ */
color: #b1b4b6;
}
.oxyy-login-register .form-control:-ms-input-placeholder, .oxyy-login-register .form-control::-ms-input-placeholder
{
/* IE 10+ */
color: #b1b4b6;
}
/* 6.6 Other Bootstrap Specific */

.oxyy-login-register .btn {
padding: 0.8rem 2.6rem;
font-weight: 500;
}
.oxyy-login-register .btn-sm {
padding: 0.5rem 1rem;
}
.oxyy-login-register .btn:not(.btn-link) {
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.oxyy-login-register .btn:not(.btn-link):hover {
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}
@media (max-width: 575.98px) {
.oxyy-login-register .btn:not(.btn-sm) {
padding: .810rem 2rem;
}
}
.oxyy-login-register .btn-link {
color: #007bff !important;
}
.oxyy-login-register .btn-link:hover {
color: #006adb !important;
}
.oxyy-login-register .custom-control-input:checked ~ .custom-control-label::before,

.oxyy-login-register .custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
.oxyy-login-register .custom-control-input:checked ~ .custom-control-label:before {
background-color: #007bff;
border-color: #007bff;
}
ScreenShot of Register Page
Product Description Page Code
<!doctype html>
<html lang="en">
<head>
<title>Unit 19 Homework</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">


<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-
xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe"
crossorigin="anonymous"></script>


<link rel="stylesheet" href="style2.css">
</head>
<body class="d-flex align-items-start flex-column">




<nav class="w-100 navbar align-self-start navbar-expand-lg navbar-light bg-light sticky-top">
<div>
<img class="navbar-brand" src="img/unicorn.png" alt="">
<a class="navbar-brand" href="">Everything Indian Toy</a>
</div>

<ul class="removed mr-auto navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
More Information
</a>
<div id="sections" class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#product-info">Product Information</a>
<a class="dropdown-item" href="#similar-items">Similar Items</a>
</div>
</li>
</ul>


<form class="removed form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn my-2 my-sm-0" type="submit">Search</button>
</form>


<ul class="ml-2 navbar-nav">
<li class="nav-item" data-toggle="modal" data-target="#signUpModal">

<a class="nav-link signUpButton" href="#signUpModal">
<i class="fas fa-user">Sign Up for Savings</i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<div class="cart">
<i class="fas fa-shopping-cart"></i>
<span id="cartItems" class="badge badge-light">0</span>
</div>
</a>
</li>
</ul>
</nav>


<main class="container">
<div class="row">


<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/product1.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/product2.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/product3.png" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>


</div>


<h2>Giant Unicorn Plush

<span class="badge badge-secondary">New</span>
</h2>
<p>Soft, Sparkly, Magical</p>
<hr>
<h6>Price</h6>
<p>$99.99</p>

<form id="quantityOfUnicornsForm">


<div class="form-row add-to-cart align-items-center">
<div class="col-12 my-1">
<label class="mr-sm-12" for="quantityOfUnicorns">Select a Quantity</label>
</div>
<div class="col-12 my-1 form-group">

<select class="custom-select mr-sm-2 form-control" id="quantityOfUnicorns">

<option value="1">1</option>
</select>
</div>
<div class="col-12 my-1">
<button type="submit" class="btn btn-primary">Add to Cart</button>
</div>
</div>

</form>
</div>
</div>


<div data-spy="scroll" data-target="#sections" data-offset="0">


<div class="row">
<div class="col-12">
<h4 id="product-info" class="section-header">Product Information</h4>


<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-
controls="nav-home" aria-selected="true">Description</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-
controls="nav-profile" aria-selected="false">Details</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<p>This graceful unicorn will prance right into any child’s collection -- and heart! With its pretty
pink mane and tail, both scattered through with shimmering silver strands that catch the light,
this enchanting friend is sure to become a new favorite. Additional irresistible details include
super-silky plush fur, satin star decorations, beautiful blue eyes, and a soft, shiny horn.</p>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<ul>
<li> Suitable for ages 3 years and up</li>
<li> Silky plush fur</li>
<li> Measure 36" H</li>
<li> Imported</li>
</ul>
</div>
</div>
</div>
</div>


<div class="row">
<div class="col-12">
<h4 id="similar-items" class="section-header">Similar Items</h4>
<div class="row">

<div class="col-3">
<img class="w-100" src="img/recommendedProduct1.jpg" alt="First similar">
</div>
<div class="col-3">
<img class="w-100" src="img/recommendedProduct2.jpg" alt="Second similar">
</div>
<div class="col-3">
<img class="w-100" src="img/recommendedProduct3.jpg" alt="Third similar">
</div>
<div class="col-3">
<img class="w-100" src="img/recommendedProduct4.jpg" alt="Fourth similar">
</div>
</div>
</div>
</div>
</div>
</div>
</main>



<button id="chatPopover" type="button" class="chat btn">Need help?</button>


<footer class="mt-auto d-flex justify-content-center align-items-center">
<p class="m-0">Everything Unicorns</p>
</footer>


<div class="modal fade" id="signUpModal" tabindex="-1" role="dialog" aria-labelledby="mySignUpModal" aria-
hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">


<div class="modal-header">
<h5 class="modal-title" id="modalHeader">Sign up for savings sent right to your inbox!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>


<div class="modal-body">

<form>
<div class="form-group">
<label for="formGroupFirstNameInput">First Name</label>
<input type="text" class="form-control" id="formGroupFirstNameInput" placeholder="">
</div>
<label for="formGroupLastNameInput2">Last Name</label>
<input type="text" class="form-control" id="formGroupLastNameInput2" placeholder="">
</div>
<label for="formGroupInputEmail">E-mail</label>
<input type="email" class="form-control" id="formGroupInputEmail" aria-describedby="emailHelp"
placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>

</form>
</div>


<div class="modal-footer">
<button type="button" id="signUpBtn" class="btn btn btn-primary">Sign me up!</button>

</div>
</div>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
<script src="./app2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
</body>
</html>
CSS :-
/* Alert info */
.alert {
margin-bottom: 0px;
}
.alert-info {
color: #ffffff;
background-color: #977CB7;
border-color: #bee5eb;
}
.alert p{
text-align: center;
}
/* Nav bar */
.navbar img{
height: 50px;
}
.removed button {
background: #977CB7;
color: #ffffff;
}
.removed button:hover {
background-color: #a668f1;
color: #ffffff;
}
/* Carousel Images */
.carousel-control-prev-icon{
}
.carousel-control-next-icon{
}
/* SELECT QUANTITY DROPDOWN & ADD TO CART BUTTON HERE */

.custom-select{
width: auto;
}
.add-to-cart button{
border: #977CB7;
}
.add-to-cart button:hover{
background-color: #a668f1;
color: #ffffff;
/* Similar Items */
.my-footer{
background: #977CB7;
}
ScreenShot of Product Description Page
Conclusion
It is naive for an Extension professional to feel that if information is delivered during a learning
activity, the educational mission has been accomplished. The broader mandate that learning
generate change in behaviour, practice, or belief requires a much more sophisticated science and
art. In today's information-rich culture, Extension's store of information no longer makes the
organization unique.
Rather, Extension's organizational strength and uniqueness lie in the experience and capability of
its professionals to motivate individuals and groups to action.
It is important for Extension educators to develop and field test useful models for program design
and delivery that include behaviour change. It is equally important for the models to be linked to
sound educational theory that will be valued by partnering agencies and understood by the
targeted clients.
The process described in this article accomplished these objectives and resulted in information
that now provides a framework for quality training in a broad range of programming. Further
development of the model has resulted in additional insights with practical application beyond
the scope of this article.
BIBLIOGRAPHY
BOOKS:-
HTML AND CSS: Design and build Websites

Learning web design: - A Beginner’s Guide
REFERENCES:-
 www.javapoint.com
 http://www.w3school.com
 www.github.com

Landing Page

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Landing Page

Uploaded by

Copyright:

Available Formats

Content

S. No. Topic Page No.

2. Introduction of Technology 5-6

6. Register Page 25-30

8. Product Description Page 32-37

Sarvesh Agrawal is the Founder of Internshala.

Internshala - Name, Tagline, and Logo

Internshala - Business Model and How it Works?

Internshala - Startup Challenges

Internshala - Internship and Training Sectors

Internshala - Future Plans

Internshala concentrates on helping students in learning, training, and garnering on-field

What is the Internshala business model like?

How website works:

 Hyper text markup language.

 Cascading Style Sheets.

 High-level dynamic interpreted programming language.

.footer-col-1, .footer-col-2, .footer-col-3, .footer-col-4{

/* ------------ media query for menu -------------------- */

@media only screen and (max-width: 800px){

<!-- Web Fonts

<!-- Welcome Text

/*-------- Preloader --------*/

/* 6.6 Other Bootstrap Specific */

.oxyy-login-register .custom-control-input:checked ~ .custom-control-label::before,

<body class="d-flex align-items-start flex-column">

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

<h2>Giant Unicorn Plush

/* SELECT QUANTITY DROPDOWN & ADD TO CART BUTTON HERE */

HTML AND CSS: Design and build Websites

You might also like

/-------- Preloader --------/