Bca 5th Sem Project Report
Bca 5th Sem Project Report
Bca 5th Sem Project Report
on
“Rolex(Watch Website)”
Submitted for partial fulfillment for the award of the degree
Session 2021-24
Submitted to Submitted By
2111730580031
A Summer Training Report
on
“Rolex(Watch Website)”
Submitted for partial fulfillment for the award of the degree
Session 2021-24
Submitted to Submitted By
2111730580031
ACKNOWLEDGEMENT
At the very beginning I would like to the Founders & developers of INTERNSHALA and also all
employees of INTERNSHALA by whom active response I was able to complete my great summer
training.
I will be highly grateful to INTERNSHALA for rending his valuable guidance and help to know
more about working of a website, and how a web-application or a website works and developed
and also providing internal guidance for preparing this report.
This is certify that the work reported in the present project entitled “Rolex(Watch Website)” is a
record of work done by us in Bachelor of Computer Application, Collage of Innovative Management
and science, Lucknow.
The reports are based on the project work done entirely by us using Documentations and Video
Lectures and not copied from any other sources.
3. Project Introduction 4
5. ScreenShot 14-15
of HTML
Code
6. Adding Website CSS 16-34
Code
9. Conclusion 41
10. Bibliography 42
Introduction to Organization
Internshala Website
Internshala is a popular Indian internship search platform. It offers internships acrossvarious
industries and fields, including engineering, management, media, design, andmore. The platform was
launched in 2010 and has since helped thousands of students and professionals find internships that
match their interests and qualifications.
Features of Internshala
Internships across various industries and fields
Virtual internships that can be done from anywhere
Courses and training programs to improve skills
Easy application process
Internship alerts through email and notifications
Role
Internshala is an excellent platform for students and professionals looking for internships in India. It
offers a wide range of internship opportunities, training programs, and courses, making it easier for
people to find the right internship and improve their skills. Its user-friendly interface and easy
application process make it a popular choice among job seekers. Overall, if you're looking for an
internship in India,Internshala is definitely worth checking out.
Introduction to Technology
How website works:
Client request for
Role of HTML :-
Role of CSS :-
Role of JavaScript :-
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
Key Features
Search functionality: Customers can easily search for the specific watch they are looking for based on brand,
model, price range, and other key features.
Product pages: Each watch will have its own product page with detailed descriptions, high-quality images,
and customer reviews.
Shopping cart: Customers can add watches to their shopping cart, and easily check out when they are ready
to make a purchase.
Order tracking: Customers can track their order and receive updates on its progress through the website.
Payment options: We will offer a variety of payment options, including credit card, PayPal, and Apple Pay, to
ensure ease and convenience for our customers.
Customer service: We will provide high-quality customer service through a dedicated team that will be
available to answer any questions or concerns that customers may have.
Target Audience
Our target audience is watch enthusiasts and collectors who are looking for a reliable and convenient way
to shop for watches online. We will also target customers who are looking for gift ideas for their loved ones.
Our website will appeal to customers who value quality, affordability, and excellent customer service.
Aim
Our watch selling website project aims to provide customers with a hassle-free and enjoyable shopping
experience for high-quality watches. We will ensure that our website is optimized for both desktop and
mobile devices, and offer a range of key features such as search functionality and a shopping cart to ensure
ease and convenience for our customers. With our targeted marketing strategy, we are confident that we
will attract a loyal customer base and become a leading player in the online watch selling industry.
Website HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watches website</title>
</head>
<body>
<!--==================== HEADER ====================-->
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav__logo">
<i class='bx bxs-watch nav__logo-icon'></i> Rolex
</a>
<div class="nav__btns">
<!-- Theme change button -->
<i class='bx bx-moon change-theme' id="theme-button"></i>
<div class="cart__container">
<article class="cart__card">
<div class="cart__box">
<img src="assets/img/featured1.png" alt="" class="cart__img">
</div>
<div class="cart__details">
<h3 class="cart__title">Jazzmaster</h3>
<span class="cart__price">$1050</span>
<div class="cart__amount">
<div class="cart__amount-content">
<span class="cart__amount-box">
<i class='bx bx-minus' ></i>
</span>
<span class="cart__amount-number">1</span>
<span class="cart__amount-box">
<i class='bx bx-plus' ></i>
</span>
</div>
<article class="cart__card">
<div class="cart__box">
<img src="assets/img/featured3.png" alt="" class="cart__img">
</div>
<div class="cart__details">
<h3 class="cart__title">Rose Gold</h3>
<span class="cart__price">$850</span>
<div class="cart__amount">
<div class="cart__amount-content">
<span class="cart__amount-box">
<i class='bx bx-minus' ></i>
</span>
<span class="cart__amount-number">1</span>
<span class="cart__amount-box">
<i class='bx bx-plus' ></i>
</span>
</div>
<article class="cart__card">
<div class="cart__box">
<img src="assets/img/new1.png" alt="" class="cart__img">
</div>
<div class="cart__details">
<h3 class="cart__title">Longines Rose</h3>
<span class="cart__price">$980</span>
<div class="cart__amount">
<div class="cart__amount-content">
<span class="cart__amount-box">
<i class='bx bx-minus' ></i>
</span>
<span class="cart__amount-number">1</span>
<span class="cart__amount-box">
<i class='bx bx-plus' ></i>
</span>
</div>
<div class="cart__prices">
<span class="cart__prices-item">3 items</span>
<span class="cart__prices-total">$2880</span>
</div>
</div>
<div class="home__social">
<a href="https://www.facebook.com/" target="_blank" class="home__social-link">
Facebook
</a>
<a href="https://twitter.com/" target="_blank" class="home__social-link">
Twitter
</a>
<a href="https://www.instagram.com/" target="_blank" class="home__social-link">
Instagram
</a>
</div>
<div class="home__data">
<h1 class="home__title">NEW WATCH <br> COLLECTIONS B720</h1>
<p class="home__description">
Latest arrival of the new imported watches of the B720 series,
with a modern and resistant design.
</p>
<span class="home__price">$1245</span>
<div class="home__btns">
<a href="#" class="button button--gray button--small">
Discover
</a>
<div class="featured__data">
<h3 class="featured__title">Jazzmaster</h3>
<span class="featured__price">$1050</span>
</div>
<article class="featured__card">
<span class="featured__tag">Sale</span>
<div class="featured__data">
<h3 class="featured__title">Ingersoll</h3>
<span class="featured__price">$250</span>
</div>
<article class="featured__card">
<span class="featured__tag">Sale</span>
<div class="featured__data">
<h3 class="featured__title">Rose gold</h3>
<span class="featured__price">$890</span>
</div>
<h1 class="story__title">
Inspirational Watch of <br> this year
</h1>
<p class="story__description">
The latest and modern watches of this year, is available in various
presentations in this store, discover them now.
</p>
<a href="#" class="button button--small">Discover</a>
</div>
<div class="story__images">
<img src="assets/img/story.png" alt="" class="story__img">
<div class="story__square"></div>
</div>
</div>
</section>
<button class="products__button">
<i class='bx bx-shopping-bag'></i>
</button>
</article>
<article class="products__card">
<img src="assets/img/product2.png" alt="" class="products__img">
<button class="products__button">
<i class='bx bx-shopping-bag'></i>
</button>
</article>
<article class="products__card">
<img src="assets/img/product3.png" alt="" class="products__img">
<button class="products__button">
<i class='bx bx-shopping-bag'></i>
</button>
</article>
<article class="products__card">
<img src="assets/img/product4.png" alt="" class="products__img">
<button class="products__button">
<i class='bx bx-shopping-bag'></i>
</button>
</article>
<article class="products__card">
<img src="assets/img/product5.png" alt="" class="products__img">
<h3 class="products__title">Duchen</h3>
<span class="products__price">$950</span>
<button class="products__button">
<i class='bx bx-shopping-bag'></i>
</button>
</article>
</div>
</section>
<div class="testimonial__perfil">
<img src="assets/img/testimonial1.jpg" alt="" class="testimonial__perfil-img">
<div class="testimonial__perfil-data">
<span class="testimonial__perfil-name">Lee Doe</span>
<span class="testimonial__perfil-detail">Director of a company</span>
</div>
</div>
</div>
<div class="testimonial__perfil">
<img src="assets/img/testimonial2.jpg" alt="" class="testimonial__perfil-img">
<div class="testimonial__perfil-data">
<span class="testimonial__perfil-name">Samantha Mey</span>
<span class="testimonial__perfil-detail">Director of a company</span>
</div>
</div>
</div>
<div class="testimonial__perfil-data">
<span class="testimonial__perfil-name">Raul Zaman</span>
<span class="testimonial__perfil-detail">Director of a company</span>
</div>
</div>
</div>
</div>
<div class="swiper-button-next">
<i class='bx bx-right-arrow-alt' ></i>
</div>
<div class="swiper-button-prev">
<i class='bx bx-left-arrow-alt' ></i>
</div>
</div>
<div class="testimonial__images">
<div class="testimonial__square"></div>
<img src="assets/img/testimonial.png" alt="" class="testimonial__img">
</div>
</div>
</section>
<div class="new__container">
<div class="swiper new-swiper">
<div class="swiper-wrapper">
<article class="new__card swiper-slide">
<span class="new__tag">New</span>
<div class="new__data">
<h3 class="new__title">Longines rose</h3>
<span class="new__price">$980</span>
</div>
<div class="new__data">
<h3 class="new__title">Jazzmaster</h3>
<span class="new__price">$1150</span>
</div>
<div class="new__data">
<h3 class="new__title">Portuguese rose</h3>
<span class="new__price">$1590</span>
</div>
<ul class="footer__list">
<li>1234 - Peru</li>
<li>La Libertad 43210</li>
<li>123-456-789</li>
</ul>
</div>
<div class="footer__content">
<h3 class="footer__title">About Us</h3>
<ul class="footer__links">
<li>
<a href="#" class="footer__link">Support Center</a>
</li>
<li>
<a href="#" class="footer__link">Customer Support</a>
</li>
<li>
<a href="#" class="footer__link">About Us</a>
</li>
<li>
<a href="#" class="footer__link">Copy Right</a>
</li>
</ul>
</div>
<div class="footer__content">
<h3 class="footer__title">Product</h3>
<ul class="footer__links">
<li>
<a href="#" class="footer__link">Road bikes</a>
</li>
<li>
<a href="#" class="footer__link">Mountain bikes</a>
</li>
<li>
<a href="#" class="footer__link">Electric</a>
</li>
<li>
<a href="#" class="footer__link">Accesories</a>
</li>
</ul>
</div>
<div class="footer__content">
<h3 class="footer__title">Social</h3>
<ul class="footer__social">
<a href="https://www.facebook.com/" target="_blank" class="footer__social-link">
<i class='bx bxl-facebook'></i>
</a>
html {
scroll-behavior: smooth;
}
body,
button,
input {
font-family: var(--body-font);
font-size: var(--normal-font-size);
}
body {
margin: 0;
background-color: var(--body-color);
color: var(--text-color);
/*For animation dark mode*/
transition: .4s;
}
ul {
list-style: none;
}
a{
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
button {
cursor: pointer;
border: none;
outline: none;
}
/*==========
Color changes in some parts of
the website, in dark theme
==========*/
.dark-theme .change-theme,
.dark-theme .nav__toggle,
.dark-theme .nav__shop,
.dark-theme .button--gray {
color: hsl(0, 0%, 15%);
}
.dark-theme .scroll-header {
box-shadow: 0 1px 4px hsla(0, 0%, 4%, .3);
}
.scroll-header .change-theme,
.scroll-header .nav__toggle,
.scroll-header .nav__shop {
color: var(--title-color);
}
.dark-theme::-webkit-scrollbar {
background: hsl(0, 0%, 30%);
}
.grid {
display: grid;
}
.main {
overflow: hidden;
}
.section {
padding: 6.5rem 0 1rem;
}
.section__title {
position: relative;
font-size: var(--h3-font-size);
margin-bottom: var(--mb-3);
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}
.section__title::before {
content: '';
position: absolute;
top: -1rem;
left: 0;
right: 0;
margin: 0 auto;
width: 67px;
height: 1px;
background-color: var(--first-color);
}
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo,
.nav__toggle,
.nav__shop,
.nav__close {
color: var(--title-color);
}
.nav__logo {
text-transform: uppercase;
font-weight: var(--font-bold);
letter-spacing: 1px;
display: inline-flex;
align-items: center;
column-gap: .25rem;
}
.nav__logo-icon {
font-size: 1.25rem;
}
.nav__btns {
display: flex;
align-items: center;
column-gap: 1rem;
}
.nav__toggle,
.nav__shop {
font-size: 1.25rem;
cursor: pointer;
}
.nav__list {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 2rem;
}
.nav__link {
color: var(--title-color);
font-weight: var(--font-medium);
text-transform: uppercase;
font-size: var(--h2-font-size);
transition: .3s;
}
.nav__link:hover {
color: var(--first-color);
}
.nav__close {
font-size: 2rem;
position: absolute;
top: .9rem;
right: 1.25rem;
cursor: pointer;
}
/* Show menu */
.show-menu {
right: 0;
}
/* Active link */
.active-link {
color: var(--first-color);
}
.home__img {
width: 240px;
}
.home__img-bg {
background-color: var(--first-color);
width: 258px;
height: 430px;
padding-bottom: 2rem;
display: flex;
justify-content: center;
align-items: flex-end;
justify-self: flex-end;
transform: translateX(1.5rem);
}
.home__social {
position: absolute;
top: 35%;
left: -5rem;
transform: rotate(-90deg);
display: flex;
column-gap: 1rem;
}
.home__social-link {
font-size: var(--smaller-font-size);
color: var(--text-color-light);
transition: .3s;
}
.home__social-link:hover {
color: var(--title-color);
}
.home__title {
font-size: var(--biggest-font-size);
font-weight: var(--font-bold);
margin-bottom: var(--mb-1);
}
.home__description {
margin-bottom: var(--mb-1-5);
}
.home__price {
display: inline-block;
font-size: var(--h2-font-size);
font-weight: var(--font-medium);
color: var(--first-color);
margin-bottom: var(--mb-3);
}
.home__btns {
display: flex;
align-items: center;
}
.home__button {
box-shadow: 0 12px 24px hsla(0, 0%, 10%, .2);
}
.button:hover {
background-color: var(--button-color-alt);
}
.button--gray {
background-color: hsl(0, 0%, 75%);
color: var(--title-color);
}
.button--gray:hover {
background-color: hsl(0, 0%, 63%);
}
.button--small {
padding: 1rem 1.5rem;
}
.featured__card {
position: relative;
text-align: center;
background-color: var(--container-color);
padding-top: 2rem;
border: 1px solid var(--border-color);
overflow-y: hidden;
transition: .3s;
}
.featured__tag {
background-color: var(--first-color);
padding: .5rem 1rem;
color: #fff;
text-transform: uppercase;
font-size: var(--small-font-size);
font-weight: var(--font-medium);
position: absolute;
transform: rotate(-90deg);
left: -1rem;
top: 3rem;
}
.featured__img {
height: 214px;
margin-bottom: var(--mb-1);
}
.featured__title,
.featured__price {
font-size: var(--h3-font-size);
font-weight: var(--font-bold);
}
.featured__title {
text-transform: uppercase;
margin-bottom: var(--mb-0-75);
}
.featured__price {
display: block;
color: var(--first-color);
transition: .3s;
}
.featured__button {
font-size: var(--small-font-size);
transform: translateY(1rem);
opacity: 0;
}
.featured__card:hover {
box-shadow: 0 12px 32px hsla(0, 0%, 20%, .1);
padding: 2rem 0 3rem 0;
}
.featured__card:hover .featured__button {
transform: translateY(0);
opacity: 1;
}
.featured__card:hover .featured__price {
margin-bottom: var(--mb-1-5);
}
.story__title {
font-size: var(--h1-font-size);
margin-bottom: var(--mb-1);
}
.story__description {
margin-bottom: var(--mb-2-5);
}
.story__images {
position: relative;
}
.story__img,
.story__square {
width: 250px;
}
.story__square {
height: 250px;
background-color: var(--first-color);
}
.story__img {
position: absolute;
left: 3rem;
top: -3rem;
}
.products__card {
position: relative;
background-color: var(--container-color);
padding: 1.25rem 0;
border: 1px solid var(--border-color);
text-align: center;
transition: .3s;
}
.products__img {
height: 125px;
margin-bottom: var(--mb-1);
}
.products__title,
.products__price {
font-size: var(--small-font-size);
font-weight: var(--font-medium);
}
.products__title {
text-transform: uppercase;
margin-bottom: var(--mb-0-5);
}
.products__price {
color: var(--first-color);
}
.products__button {
background-color: var(--button-color);
padding: .4rem;
color: #fff;
font-size: 1rem;
position: absolute;
right: 0;
bottom: 0;
transition: .3s;
}
.products__button:hover {
background-color: var(--button-color-alt);
}
.products__card:hover {
box-shadow: 0 8px 32px hsla(0, 0%, 10%, .1);
}
.testimonial__quote {
display: inline-flex;
background-color: var(--container-color);
padding: .5rem .75rem;
font-size: 1.5rem;
color: var(--first-color);
box-shadow: 0 4px 12px hsla(0, 0%, 20%, .1);
margin-bottom: var(--mb-2);
}
.testimonial__description {
margin-bottom: var(--mb-1);
}
.testimonial__date {
font-size: var(--normal-font-size);
margin-bottom: var(--mb-2);
}
.testimonial__perfil {
display: flex;
align-items: center;
column-gap: 1rem;
margin-bottom: 7rem;
}
.testimonial__perfil-img {
width: 60px;
height: 60px;
border-radius: 3rem;
}
.testimonial__perfil-data {
display: flex;
flex-direction: column;
row-gap: .5rem;
}
.testimonial__perfil-name {
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
color: var(--title-color);
}
.testimonial__perfil-detail {
font-size: var(--small-font-size);
}
.testimonial__images {
position: relative;
}
.testimonial__img,
.testimonial__square {
width: 250px;
}
.testimonial__square {
height: 250px;
background-color: var(--first-color);
margin-left: auto;
}
.testimonial__img {
position: absolute;
right: 2rem;
top: 3rem;
}
.testimonial-swiper {
margin-left: initial;
margin-right: initial;
}
.swiper-button-prev:after,
.swiper-button-next:after {
content: '';
}
/* Swiper class */
.swiper-button-next,
.swiper-button-prev {
top: initial;
bottom: 5%;
width: initial;
height: initial;
background-color: var(--container-color);
box-shadow: 0 4px 12px hsla(0, 0%, 20%, .1);
padding: .25rem;
font-size: 1.5rem;
color: var(--first-color);
}
.swiper-button-next {
right: initial;
left: 4rem;
}
.new__tag {
background-color: var(--first-color);
padding: .5rem 1rem;
color: #fff;
text-transform: uppercase;
font-size: var(--small-font-size);
font-weight: var(--font-medium);
position: absolute;
top: 1rem;
right: 1rem;
transition: .3s;
}
.new__img {
height: 215px;
margin-bottom: var(--mb-1);
}
.new__title,
.new__price {
font-size: var(--h3-font-size);
font-weight: var(--font-bold);
}
.new__title {
text-transform: uppercase;
margin-bottom: var(--mb-0-75);
}
.new__price {
display: block;
color: var(--first-color);
transition: .3s;
}
.new__button {
font-size: var(--small-font-size);
transform: translateY(1rem);
opacity: 0;
}
.new__card:hover {
background-color: var(--first-color);
box-shadow: 0 12px 32px hsla(0, 0%, 20%, .1);
padding: 2rem 0 3rem 0;
}
.new__card:hover .new__tag {
background-color: var(--button-color);
}
.new__card:hover .new__button {
transform: translateY(0);
opacity: 1;
}
.new__card:hover .new__title {
color: hsl(0, 0%, 15%);
}
.new__card:hover .new__price {
color: hsl(0, 0%, 15%);
margin-bottom: var(--mb-1-5);
}
.newsletter__title {
font-size: var(--h1-font-size);
color: hsl(0, 0%, 15%);
margin-bottom: var(--mb-1-5);
}
.newsletter__description {
color: hsl(0, 0%, 35%);
}
.newsletter__subscribe {
display: flex;
flex-direction: column;
row-gap: .75rem;
}
.newsletter__input {
border: none;
outline: none;
background-color: hsl(0, 0%, 94%);
padding: 1.25rem 1rem;
color: hsl(0, 0%, 15%);
}
.footer__title {
font-size: var(--h2-font-size);
margin-bottom: var(--mb-1-5);
}
.footer__list,
.footer__links {
display: flex;
flex-direction: column;
row-gap: .75rem;
}
.footer__link {
color: var(--text-color);
}
.footer__link:hover {
color: var(--title-color);
}
.footer__social {
display: flex;
column-gap: 1rem;
}
.footer__social-link {
font-size: 1.25rem;
color: var(--text-color);
}
.footer__social-link:hover {
color: var(--title-color);
}
.footer__copy {
display: block;
margin: 3.5rem 0 1rem 0;
text-align: center;
font-size: var(--smaller-font-size);
color: var(--text-color-light);
}
.scrollup:hover {
opacity: 1;
}
.scrollup__icon {
font-size: 1.5rem;
color: var(--first-color);
}
::-webkit-scrollbar-thumb {
background: hsl(0, 0%, 17%);
}
.cart__title-center {
font-size: var(--h2-font-size);
text-align: center;
margin-bottom: var(--mb-3);
}
.cart__close {
font-size: 2rem;
color: var(--title-color);
position: absolute;
top: 1.25rem;
right: .9rem;
cursor: pointer;
}
.cart__container {
display: grid;
row-gap: 1.5rem;
}
.cart__card {
display: flex;
align-items: center;
column-gap: 1rem;
}
.cart__box {
background-color: var(--container-color);
padding: .75rem 1.25rem;
border: 1px solid var(--border-color);
}
.cart__img {
width: 50px;
}
.cart__title {
font-size: var(--normal-font-size);
margin-bottom: .5rem;
}
.cart__price {
display: block;
font-size: var(--small-font-size);
color: var(--first-color);
margin-bottom: var(--mb-1-5);
}
.cart__amount,
.cart__amount-content{
display: flex;
align-items: center;
}
.cart__amount{
column-gap: 3rem;
}
.cart__amount-content{
column-gap: 1rem;
}
.cart__amount-box {
display: inline-flex;
padding: .25rem;
background-color: var(--container-color);
border: 1px solid var(--border-color);
cursor: pointer;
}
.cart__amount-trash {
font-size: 1.15rem;
color: var(--first-color);
cursor: pointer;
}
.cart__prices {
margin-top: 6rem;
display: flex;
justify-content: space-between;
}
.cart__prices-item,
.cart__prices-total {
color: var(--title-color);
}
.cart__prices-item {
font-size: var(--small-font-size);
}
.cart__prices-total {
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
}
/* Show cart */
.show-cart {
right: 0;
}
.story__square,
.story__img,
.testimonial__square,
.testimonial__img {
width: 180px;
}
.story__square,
.testimonial__square {
height: 180px;
}
.products__container {
grid-template-columns: repeat(1, 180px);
justify-content: center;
}
}
.featured__container {
grid-template-columns: repeat(2, 1fr);
justify-content: center;
align-items: flex-start;
gap: 1.5rem;
}
.footer__container {
grid-template-columns: repeat(2, 1fr);
}
}
.cart {
width: 420px;
box-shadow: -2px 0 4px hsla(0, 0%, 15%, .1);
}
.nav {
height: calc(var(--header-height) + 1.5rem);
justify-content: initial;
column-gap: 3rem;
}
.nav__toggle,
.nav__close {
display: none;
}
.nav__list {
flex-direction: row;
column-gap: 2.5rem;
}
.nav__link {
text-transform: initial;
font-size: var(--normal-font-size);
}
.nav__btns {
margin-left: auto;
}
.home__container {
padding-top: 6rem;
grid-template-columns: 1fr max-content;
align-items: center;
}
.home__img-bg {
order: 1;
transform: translate(1.5rem, -6rem);
}
.home__data {
padding: 0 0 3rem 6rem;
}
.home__social {
top: 47%;
column-gap: 2rem;
}
.featured__title,
.featured__price,
.new__title,
.new__price {
font-size: var(--normal-font-size);
}
.story__container,
.testimonial__container,
.newsletter__bg {
grid-template-columns: repeat(2, 1fr);
align-items: center;
}
.story__section-title {
text-align: initial;
}
.story__section-title::before {
margin: initial;
}
.story__images {
order: -1;
}
.products__container {
grid-template-columns: repeat(3, 200px);
justify-content: center;
gap: 2.5rem;
}
.products__card {
padding: 2rem 0;
}
.products__img {
height: 155px;
}
.newsletter__bg {
text-align: initial;
column-gap: 2rem;
padding: 4.5rem;
}
.newsletter__subscribe {
flex-direction: row;
}
.newsletter__input {
width: 100%;
}
.footer__container {
grid-template-columns: repeat(4, max-content);
justify-content: space-between;
}
.footer__title {
font-size: var(--h3-font-size);
}
}
.home__container {
column-gap: 2rem;
}
.home__img-bg {
width: 480px;
height: 680px;
}
.home__img {
width: 420px;
}
.home__social {
left: -6rem;
}
.home__data {
padding: 0 0 8rem 6rem;
}
.featured__container {
grid-template-columns: repeat(3, 312px);
padding-top: 2rem;
}
.story__container,
.testimonial__container {
column-gap: 8rem;
}
.story__square,
.story__img,
.testimonial__square,
.testimonial__img {
width: 450px;
}
.story__square,
.testimonial__square {
height: 450px;
}
.products__container,
.new__container {
padding-top: 2rem;
}
.testimonial__container {
padding-bottom: 4rem;
}
}
.story__container,
.testimonial__container {
column-gap: 13rem;
}
.story__container {
padding-top: 3rem;
}
.story__img {
left: 5rem;
top: -5rem;
}
.testimonial__img {
right: 5rem;
top: 5rem;
}
.scrollup {
right: 3rem;
}
}
ScreenShot Of Website with CSS
Adding Website JavaScript Code
/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close')
/* Menu show */
if(navToggle){
navToggle.addEventListener('click', () =>{
navMenu.classList.add('show-menu')
})
}
/* Menu hidden */
if(navClose){
navClose.addEventListener('click', () =>{
navMenu.classList.remove('show-menu')
})
}
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
breakpoints: {
576: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
1024: {
slidesPerView: 4,
},
},
});
sections.forEach(current =>{
const sectionHeight = current.offsetHeight,
sectionTop = current.offsetTop - 58,
sectionId = current.getAttribute('id'),
sectionsClass = document.querySelector('.nav__menu a[href*=' + sectionId + ']')
// We obtain the current theme that the interface has by validating the dark-theme class
const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bx bx-moon' : 'bx bx-sun'
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:-
REFERENCES:-
www.javapoint.com
http://www.w3school.com
www.github.com