Scribd
Upload
141 views

Computer Project Class 12

This document is a report submitted by Roshan Adhikari to the Department of Computer at Morgan International College in Nepal on 2079/12/23. It introduces a project to create a website using HTML, CSS, JS, and PHP. The report includes code samples and discusses technologies like HTML, CSS, JS, PHP, and SQL that form the foundation of web development.

Uploaded by

Roshan Adhikari
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
141 views

Computer Project Class 12

This document is a report submitted by Roshan Adhikari to the Department of Computer at Morgan International College in Nepal on 2079/12/23. It introduces a project to create a website using HTML, CSS, JS, and PHP. The report includes code samples and discusses technologies like HTML, CSS, JS, PHP, and SQL that form the foundation of web development.

Uploaded by

Roshan Adhikari
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 85

TO CREATE A PROJECT WHICH IS A WEBSITE USING HTML AND

CSS JS AND PHP OF COMPUTER

SUBMITTED BY
Roshan Adhikari

SUBMITTED TO
DEPARTMENT OF COMPUTER

MORGAN INTERNATIONAL COLLEGE

BASUNDHARA KATHMANDU NEPAL

DATE: 2079 / 12 / 23
CHAPTER 1:

INTRODUCTION
HTML (Hypertext Markup Language) is a markup language used to create web pages. It
provides a standard structure for describing the content and layout of a web page, such as
headings, paragraphs, links, images, and forms. HTML is the backbone of every web page, and
it's used to structure and display content in a standardized way.

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of
HTML documents. CSS can be used to control the layout, colors, fonts, and other visual aspects
of a web page. CSS is used to separate the presentation of a web page from its content, making it
easier to maintain and update the design of a site.

JavaScript (JS) is a programming language used to add interactivity and dynamic effects to web
pages. JS allows developers to create animations, interactive forms, and other features that can't
be achieved with HTML and CSS alone. JS is also used for client-side scripting, meaning that
the code runs on the user's web browser instead of the server, making it faster and more
responsive.

PHP (Hypertext Preprocessor) is a server-side scripting language used to create dynamic web
pages and web applications. PHP is used to generate HTML, interact with databases, and
perform other server-side tasks. PHP is often used in conjunction with a database language like
SQL to create dynamic and interactive web applications.

SQL (Structured Query Language) is a database language used to manage and manipulate data
stored in a relational database management system (RDBMS). SQL is used to create, update, and
delete data in tables, as well as retrieve data from multiple tables using advanced query
techniques. SQL is often used in web development to store and manage data used by web
applications, such as user accounts, blog posts, and product information.

Together, HTML, CSS, JS, PHP, and SQL form the foundation of web development. HTML and
CSS are used to structure and style the content of a web page, while JS is used to add
interactivity and dynamic effects. PHP is used to generate dynamic content and interact with
databases, and SQL is used to store and manage data used by web applications.
HTML CODE OF WEBSITE:

<!DOCTYPE html>
<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.0">
<title>Portfolio - Roshan</title>
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet"
href="https://unicons.iconscout.com/release/v4.0.0/css/line.css
">
<link rel="stylesheet" href="CSS/swiper-bundle.min.css">
<link rel="stylesheet"
href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<!--Header-->
<header class="header" id="header">
<nav class="nav conatiner">
<a href="#" class="nav__logo">Roshan</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list grid">
<li class="nav__item">
<a href="#" class="nav__link">
</a>
</li>

<li class="nav__item">
<a href="#home" class="nav__link
active-link">
<i class="uil uil-estate
nav__icon"></i>Home
</a>
</li>

<li class="nav__item">
<a href="#about" class="nav__link">
<i class="uil uil-user
nav__icon"></i>About
</a>
</li>

<li class="nav__item">
<a href="#skills" class="nav__link">
<i class="uil uil-file-alt
nav__icon"></i>Skills
</a>
</li>

<li class="nav__item">
<a href="#services" class="nav__link">
<i class="uil uil-briefcase-alt
nav__icon"></i>Services
</a>
</li>

<li class="nav__item">
<a href="#portfolio"
class="nav__link">
<i class="uil uil-scenery
nav__icon"></i>Portfolio
</a>
</li>

<li class="nav__item">
<a href="#contact" class="nav__link">
<i class="uil uil-message
nav__icon"></i></i>Contact
</a>
</li>
</ul>
<i class="uil uil-times nav__close " id="nav-
close"></i>
</div>

<div class="nav__btns">
<!-- Theme Change-->
<i class="uil uil-moon change-theme"
id="theme-button"></i>
<div class="nav__toggle" id="nav-toggle">
<i class="uil uil-apps"></i>
</div>
</div>
</nav>
</header>

<!-- Main -->


<main class="main">

<!-- Main -->


<section class="home section" id="home">
<div class="home__container container grid">
<div class="home__content grid">
<div class="home__social">
<a href="https://www.linkedin.com/in/roshan-
adhikari-aa26a7223/" class="home__social-icon"
target="_blank">
<i class="uil uil-linkedin-alt"></i>
</a>

<a href="https://www.facebook.com/profile.php?
id=100071888902057" class="home__social-icon"target="_blank">
<i class="uil uil-facebook"></i>
</a>

<a href="https://github.com/DeveloperRoshan01"
class="home__social-icon"target="_blank">
<i class="uil uil-github-alt"></i>
</a>
</div>
<div class="home__img">
<svg class="home__blob" viewBox="0 0 200 187"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<mask id="mask0" mask-type="alpha">
<path d="M190.312 36.4879C206.582
62.1187 201.309 102.826 182.328 134.186C163.346 165.547
130.807 187.559 100.226
186.353C69.6454 185.297 41.0228 161.023 21.7403 129.362C2.45775
97.8511 -7.48481 59.1033 6.67581
34.5279C20.9871 10.1032 59.7028 -0.149132 97.9666
0.00163737C136.23 0.303176 174.193
10.857 190.312 36.4879Z"/>
</mask>
<g mask="url(#mask0)">
<path d="M190.312 36.4879C206.582
62.1187 201.309 102.826 182.328 134.186C163.346
165.547 130.807 187.559 100.226
186.353C69.6454 185.297 41.0228 161.023 21.7403
129.362C2.45775 97.8511 -7.48481
59.1033 6.67581 34.5279C20.9871 10.1032 59.7028
-0.149132 97.9666 0.00163737C136.23
0.303176 174.193 10.857 190.312 36.4879Z"/>
<image class="home__blob-img" x =
'12', y = '18' href="Images/roshan.png"/>
</g>
</svg>
</div>
<div class="home__data">
<h1 class="home_title">
Hi, I'm Roshan
</h1>
<h3 class="home__subtitle">
Frontend Developer
</h3>
<p class="home__description">
Entry Level experience in web design and
development knowledge, producing quality work.
</p>
<button class="contacts"><a href="#contact"
class="button button--flex">
Contact Me <i class="uil uil-message
button__icon"></i>
</a></button>
</div>
</div>
<div class="home__scroll">
<a href="#about" class="home__scroll-button
button--flex">
<i class="uil uil-mouse-alt home__scroll-
mouse"></i>
<span class="home__scroll-name">Scroll
Down</span>
<i class="uil uil-arrow-down home__scroll-
arrow"></i>
</a>
</div>
</div>
</section>

<!-- About -->


<section class="about section" id="about">
<h2 class="section__title">
About Me
</h2>
<span class="section__subtitle">
My Introduction
</span>

<div class="about__container container grid">


<img src="Images/about.png" alt="" class="about__img">

<div class="about__data">
<p class="about__description">
Web developer, with extensive knowledge and
years of experience, working in web technologies and Ui / Ux
design, delivering quality work.
</p>
<div class="about__info">
<div>
<span class="about__info-title">
02+
</span>
<span class="about__info-name">
Years <br> Experience
</span>
</div>

<div>
<span class="about__info-title">
10+
</span>
<span class="about__info-name">
Completed <br> Projects
</span>
</div>

<div>
<span class="about__info-title">
05+
</span>
<span class="about__info-name">
Working <br> Projects
</span>
</div>
</div>
<div class="about__buttons">
<button class="contacts"><a download=""
href="PDF/Roshan-Cv.pdf" class="button button--flex">
Download CV<i class="uil uil-download-alt
button__icon"></i>
</a></button>
</div>
</div>
</div>
</section>

<!-- SKILLS -->


<section class="skills section" id="skills">
<h2 class="section__title">
Skills
</h2>
<span class="section__subtitle">
My Technical Level
</span>

<div class="skills__container container grid">


<div>
<!--Skill 1-->
<div class="skills__content skills__open">
<div class="skills_header">
<i class="uil uil-brackets-curly
skills__icon"></i>
<div>
<h1 class="skills__title">
Frontend Developer
</h1>
<span class="skills__subtitle">
More than 4 years
</span>
</div>
<i class="uil uil-angle-down
skills__arrow"></i>
</div>
<div class="skills__list grid">

<div class="skills data">


<div class="skills_title">
<h3 class="skills__name">
HTML
</h3>
<span class="skills__number">
90%
</span>
</div>
<div class="skills__bar">
<span class="skills__percentage
skills__html">

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

<div class="skills data">


<div class="skills_title">
<h3 class="skills__name">
CSS
</h3>
<span class="skills__number">
80%
</span>
</div>
<div class="skills__bar">
<span class="skills__percentage
skills__css">

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

<div class="skills data">


<div class="skills_title">
<h3 class="skills__name">
JavaScript
</h3>
<span class="skills__number">
60%
</span>
</div>
<div class="skills__bar">
<span class="skills__percentage
skills__js">

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

<div class="skills data">


<div class="skills_title">
<h3 class="skills__name">
React
</h3>
<span class="skills__number">
85%
</span>
</div>
<div class="skills__bar">
<span class="skills__percentage
skills__html">

</span>
</div>
</div>
</div>
</div>
<!--Skill 2-->
<div class="skills__content skills__close">
<div class="skills_header">
<i class="uil uil-server
skills__icon"></i>

<div>
<h1 class="skills__title">
Backend Developer
</h1>

<span class="skills__subtitle">
More than 2 years
</span>
</div>
<i class="uil uil-angle-down
skills__arrow"></i>
</div>
<div class="skills__list grid">

<div class="skills data">


<div class="skills_title">
<h3 class="skills__name">
PHP
</h3>
<span class="skills__number">
80%
</span>
</div>
<div class="skills__bar">
<span class="skills__percentage
skills__php">

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

<div class="skills data">


<div class="skills_title">
<h3 class="skills__name">
Node JS
</h3>
<span class="skills__number">
70%
</span>
</div>
<div class="skills__bar">
<span class="skills__percentage
skills__node">

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

<div class="skills data">


<div class="skills_title">
<h3 class="skills__name">
FireBase
</h3>
<span class="skills__number">
90%
</span>
</div>
<div class="skills__bar">
<span class="skills__percentage
skills__firebase">

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

<div class="skills data">


<div class="skills_title">
<h3 class="skills__name">
Python
</h3>
<span class="skills__number">
60%
</span>
</div>
<div class="skills__bar">
<span class="skills__percentage
skills__python">

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

<!--Skill 3-->
<div class="skills__content skills__close">
<div class="skills_header">
<i class="uil uil-swatchbook
skills__icon"></i>

<div>
<h1 class="skills__title">
Designer
</h1>

<span class="skills__subtitle">
More than 2 years
</span>
</div>
<i class="uil uil-angle-down
skills__arrow"></i>
</div>
<div class="skills__list grid">

<div class="skills data">


<div class="skills_title">
<h3 class="skills__name">
Figma
</h3>
<span class="skills__number">
90%
</span>
</div>
<div class="skills__bar">
<span class="skills__percentage
skills__figma">

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

<div class="skills data">


<div class="skills_title">
<h3 class="skills__name">
Sketch
</h3>
<span class="skills__number">
85%
</span>
</div>
<div class="skills__bar">
<span class="skills__percentage
skills__sketch">

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

<div class="skills data">


<div class="skills_title">
<h3 class="skills__name">
Photoshop
</h3>
<span class="skills__number">
85%
</span>
</div>
<div class="skills__bar">
<span class="skills__percentage
skills__photoshop">

</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Qualifications -->


<section class="qualification section">
<h2 class="section__title">Qualification</h2>
<span class="section__subtitle">My personal Journey</span>
<div class="qualification__container container">
<div class="timeline" >
<div class="timeline__container left__container"
>
<div class="text-box" data-aos="flip-up">
<h2>Computer Engineer</h2>
<normal>Peru - University</normal>
<p><i class="uil uil-calendar-
alt"></i>2009 - 2014</p>
<span class="left__container-
arrow"></span>
</div>
</div>

<div class="timeline__container right__container"


>
<div class="text-box" data-aos="flip-up">
<h2>Web Design</h2>
<normal>Spain - Institute</normal>
<p><i class="uil uil-calendar-
alt"></i>2014 - 2017</p>
<span class="right__container-
arrow"></span>
</div>
</div>

<div class="timeline__container left__container" >


<div class="text-box" data-aos="flip-up">
<h2>Web Development</h2>
<normal>Peru - Institute</normal>
<p><i class="uil uil-calendar-
alt"></i>2017 - 2019</p>
<span class="left__container-
arrow"></span>
</div>
</div>

<div class="timeline__container right__container"


>
<div class="text-box" data-aos="flip-up">
<h2>Master in UI/UX</h2>
<normal>Peru - Institute</normal>
<p><i class="uil uil-calendar-
alt"></i>2019 - 2021</p>
<span class="right__container-
arrow"></span>
</div>
</div>

<div class="timeline__container left__container" >


<div class="text-box" data-aos="flip-up">
<h2>Software Engineer</h2>
<normal>Microsoft - Peru</normal>
<p><i class="uil uil-calendar-
alt"></i>2016 - 2018</p>
<span class="left__container-
arrow"></span>
</div>
</div>

<div class="timeline__container right__container"


>
<div class="text-box" data-aos="flip-up">
<h2>Frontend Developer</h2>
<normal>Apple Inc - Spain</normal>
<p><i class="uil uil-calendar-
alt"></i>2018 - 2020</p>
<span class="right__container-
arrow"></span>
</div>
</div>
<div class="timeline__container left__container" >
<div class="text-box" data-aos="flip-up">
<h2>UI Designer</h2>
<normal>Figma - Spain</normal>
<p><i class="uil uil-calendar-
alt"></i>2017 - 2019</p>
<span class="left__container-
arrow"></span>
</div>
</div>
</div>
</div>
</section>

<!-- Services -->


<section class="services section" id="services">
<h2 class="section__title">Services</h2>
<span class="section__subtitle">Services that I
offer</span>
<div class="services__container container grid">
<!-- Services 1-->
<div class="services__content">
<div>
<i class="uil uil-window-grid
services__icon"></i>
<h3 class="services__title">UI/UX
<br>Designer</h3>
</div>

<button class="view"><span class="more button


button--flex">
View More <i class="uil uil-arrow-right
button__icon"></i>
</span></button>
<div class="services__modal">
<div class="services__modal-content">
<h4 class="services__modal-title">
UI/UX <br> Designer
</h4>
<i class="uil uil-times services__modal-
close"></i>

<ul class="services__modal-services grid">


<li class="services__modal-service">
<i class="uil uil-check-circle
services__modal-icon"></i>
<p>I develop the user
interface.</p>
</li>

<li class="services__modal-service">
<i class="uil uil-check-circle
services__modal-icon"></i>
<p>Webpage Development.</p>
</li>

<li class="services__modal-service">
<i class="uil uil-check-circle
services__modal-icon"></i>
<p>I create UX Element
interactions.</p>
</li>

<li class="services__modal-service">
<i class="uil uil-check-circle
services__modal-icon"></i>
<p>I postion your company
brand.</p>
</li>
</ul>
</div>
</div>
</div>

<!-- Services 2-->


<div class="services__content">
<div>
<i class="uil uil-arrow services__icon"></i>
<h3 class="services__title">Frontend
<br>Developer</h3>
</div>

<button class="view"><span class="more button


button--flex">
View More <i class="uil uil-arrow-right
button__icon"></i>
</span></button>

<div class="services__modal">
<div class="services__modal-content">
<h4 class="services__modal-title">
Frontend <br> Developer
</h4>
<i class="uil uil-times services__modal-
close"></i>

<ul class="services__modal-services grid">


<li class="services__modal-service">
<i class="uil uil-check-circle
services__modal-icon"></i>
<p>I develop the user
interface.</p>
</li>

<li class="services__modal-service">
<i class="uil uil-check-circle
services__modal-icon"></i>
<p>Webpage Development.</p>
</li>

<li class="services__modal-service">
<i class="uil uil-check-circle
services__modal-icon"></i>
<p>I create UX Element
interactions.</p>
</li>

<li class="services__modal-service">
<i class="uil uil-check-circle
services__modal-icon"></i>
<p>I postion your company
brand.</p>
</li>
</ul>

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

<!-- Services 3-->


<div class="services__content">
<div>
<i class="uil uil-pen services__icon"></i>
<h3 class="services__title">Branding
<br>Designer</h3>
</div>

<button class="view"><span class=" more button


button--flex">
View More <i class="uil uil-arrow-right
button__icon"></i>
</span></button>

<div class="services__modal">
<div class="services__modal-content">
<h4 class="services__modal-title">
Branding <br> Designer
</h4>
<i class="uil uil-times services__modal-
close"></i>

<ul class="services__modal-services grid">


<li class="services__modal-service">
<i class="uil uil-check-circle
services__modal-icon"></i>
<p>I develop the user
interface.</p>
</li>

<li class="services__modal-service">
<i class="uil uil-check-circle
services__modal-icon"></i>
<p>Webpage Development.</p>
</li>

<li class="services__modal-service">
<i class="uil uil-check-circle
services__modal-icon"></i>
<p>I create UX Element
interactions.</p>
</li>

<li class="services__modal-service">
<i class="uil uil-check-circle
services__modal-icon"></i>
<p>I postion your company
brand.</p>
</li>
</ul>

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

<!-- PortFolio-->
<section class="portfolio__section" id="portfolio">
<h2 class="section__title">Portfolio</h2>
<span class="section__subtitle">Most Recent Work</span>

<div class="portfolio__container">
<div class="portfolio mySwiper">
<div class="portfolio__content swiper-wrapper">
<div class="slide swiper-slide">
<img src="Images/portfolio 1.jpg" alt=""
class="image">
<h3>Modern Website</h3>
<p class="description">Website adaptable
to all devices, with ui components and animated
interactions.</p>
<a href="" class="button contacts button--
flex portfolio__button">Demo<i class="uil uil-arrow-right
button__icon"></i></a>
</div>

<div class="slide swiper-slide">


<img src="Images/portfolio 2.jpg" alt=""
class="image">
<h3>Brand Design</h3>
<p class="description">Website adaptable
to all devices, with ui components and animated
interactions.</p>
<a href="" class="button contacts button--
flex portfolio__button">Demo<i class="uil uil-arrow-right
button__icon"></i></a>
</div>

<div class="slide swiper-slide">


<img src="Images/portfolio 3.jpg" alt=""
class="image">
<h3>Online Store</h3>
<p class="description">Website adaptable
to all devices, with ui components and animated
interactions.</p>
<a href="" class="button contacts button--
flex portfolio__button">Demo<i class="uil uil-arrow-right
button__icon"></i></a>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>

<!-- Project In Mind-->


<section class="project section">
<div class="project__bg">
<div class="project__container container grid">
<div class="project__data">
<h2 class="project__title">You have a new
project</h2>
<p class="project__description">Contact me now
and get a 30% discount on your new project.</p>
<a href="#contact" class="button contacts
button--flex button--white">Contact Me <i class="uil uil-
message button__icon"></i></a>
</div>
<img src="Images/project.png" alt=""
class="project__img">
</div>
</div>
</section>

<!-- TESTIMONIAL -->


<section class="testimonial__section">
<h2 class="section__title">
Testimonial
</h2>
<span class="section__subtitle">My client saying</span>

<div class="testimonial__container">
<div class="testimonial mySwiper">
<div class="testimonial-content swiper-wrapper">
<div class="slide1 swiper-slide">
<img src="Images/testimonial 1.jpg" alt=""
class="image">
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Aspernatur quia, aut veniam laboriosam eaque
perferendis velit minima distinctio! Quam, temporibus!</p>
<div class="star__icon">
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
</div>
<div class="details">
<span class="name">John Smith</span>
<span class="job">Web Developer</span>
</div>
</div>

<div class="slide1 swiper-slide">


<img src="Images/testimonial 2.jpg" alt=""
class="image">
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Aspernatur quia, aut veniam laboriosam eaque
perferendis velit minima distinctio! Quam, temporibus!</p>
<div class="star__icon">
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
</div>
<div class="details">
<span class="name">Matt
Robinson</span>
<span class="job">Web Designer</span>
</div>
</div>

<div class="slide1 swiper-slide">


<img src="Images/testimonial 3.jpg" alt=""
class="image">
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Aspernatur quia, aut veniam laboriosam eaque
perferendis velit minima distinctio! Quam, temporibus!</p>
<div class="star__icon">
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
</div>
<div class="details">
<span class="name">Alex Jobs</span>
<span class="job">UI/UX
Designer</span>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>

<!-- Contact ME-->


<section class="contact__section" id="contact">
<h2 class="section__title">Contact Me</h2>
<span class="section__subtitle">Get in touch</span>

<div class="contact__container container grid">


<div>
<div class="contact__information">
<i class="uil uil-phone-alt
contact__icon"></i>

<div>
<h3 class="contact__title">Call
Me</h3>
<span class="contact__subtitle">+977
984-473-7589</span>
</div>
</div>

<div class="contact__information">
<i class="uil uil-envelope
contact__icon"></i>

<div>
<h3 class="contact__title">Email</h3>
<span
class="contact__subtitle">[email protected]</span>
</div>
</div>

<div class="contact__information">
<i class="uil uil-map-marker
contact__icon"></i>

<div>
<h3
class="contact__title">Location</h3>
<span
class="contact__subtitle">Basundhara - 3 Kathmandu near
National Cardiac Centre</span>
</div>
</div>
</div>

<form action="PHP/index.php" method="POST"


class="contact__form grid">
<div class="contact__inputs grid">
<div class="contact__content">
<label for=""
class="contact__label">Name</label>
<input name="name" type="text"
class="contact__input" id="name">
</div>

<div class="contact__content">
<label for=""
class="contact__label">Email</label>
<input name="email" type="email"
class="contact__input" id="email">
</div>

<div class="contact__content">
<label for=""
class="contact__label">Project</label>
<input name="project" type="text"
class="contact__input" id="project">
</div>

<div class="contact__content">
<label for=""
class="contact__label">Message</label>
<textarea name="message" id="message"
cols="0" rows="7" class="contact__input" id="message"
></textarea>
</div>
<div>
<button type="submit" class="button
contacts button--flex">Send Message<i class="uil uil-message
button__icon"></i></button>

</div>
</div>

</form>

</div>
</section>
</main>

<!-- Footer -->


<footer class="footer">
<div class="footer__bg">
<div class="footer__container container grid">
<div>
<h1 class="footer__title">
Roshan
</h1>
<span class="footer__subtitle">Frontend
Developer</span>
</div>
<ul class="footer__links">
<li>
<a href="#services"
class="footer__link">Services</a>
</li>

<li>
<a href="#portfolio"
class="footer__link">Portfolio</a>
</li>

<li>
<a href="#contact"
class="footer__link">Contact</a>
</li>
</ul>

<div class="footer__socials">
<a href="https://www.facebook.com/profile.php?
id=100071888902057"target="_blank" class="footer__social">
<i class="uil uil-facebook-f"></i>
</a>

<a
href="https://www.instagram.com/not_roshan_adhikari/"target="_b
lank" class="footer__social">
<i class="uil uil-instagram"></i>
</a>

<a
href="https://twitter.com/_not_roshan_"target="_blank"
class="footer__social">
<i class="uil uil-twitter-alt"></i>
</a>
</div>
</div>
<p class="footer-copy">&#169; Roshan. All right
reserved</p>
</div>
</footer>

<!-- Scroll Top -->


<a href="#" class="scrollup" id="scroll-up">
<i class="uil uil-arrow-up scrollup__icon"></i>
</a>

<!-- Swiper Js-->


<script src="Js/swiper-bundle.min.js"></script>

<!--Js Link-->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/pop
per.min.js" integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooA
o" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-
alpha1/js/bootstrap.min.js" integrity="sha384-
oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf
/" crossorigin="anonymous"></script>
<script
src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script src="JS/main.js"></script>
<script
src="https://unicons.iconscout.com/release/v4.0.0/script/monoch
rome/bundle.js"/>
</body>
</html>
CSS of Website:

/* GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;600&display=swap");

/* VARIABLES CSS */
:root {
--header-height: 3rem;

/* Colors */
--hue-color: 210;

/* HSL color mode */


--first-color: hsl(var(--hue-color), 69%, 61%);
--first-color-second: hsl(var(--hue-color), 69%, 61%);
--first-color-alt: hsl(var(--hue-color), 57%, 53%);
--first-color-lighter: hsl(var(--hue-color), 92%, 85%);
--title-color: hsl(var(--hue-color), 8%, 15%);
--text-color: hsl(var(--hue-color), 8%, 45%);
--text-color-light: hsl(var(--hue-color), 8%, 65%);
--input-color: hsl(var(--hue-color), 70%, 96%);
--body-color: hsl(var(--hue-color), 60%, 99%);
--container-color: #fff;
--scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
--scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;

/* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */


--big-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;

/* Font weight */
--font-medium: 500;
--font-semi-bold: 600;

/* Margenes Bottom */
/* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
--mb-0-25: .25rem;
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
--mb-3: 3rem;

/* z index */
--z-tooltip: 10;
--z-fixed: 100;
--z-modal: 1000;
}

/* Font size for large devices */


@media screen and (min-width: 968px) {
:root {
--big-font-size: 3rem;
--h1-font-size: 2.25rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}

/* Variable Dark Themes */


body.dark-theme{
/* HSL color mode */
--first-color-second: hsl(var(--hue-color), 30%, 8%);
--title-color: hsl(var(--hue-color), 8%, 95%);
--text-color: hsl(var(--hue-color), 8%, 75%);
--input-color: hsl(var(--hue-color), 29%, 16%);
--body-color: hsl(var(--hue-color), 28%, 12%);
--container-color: hsl(var(--hue-color), 29% 16%);
}

/* Button Dark/Light */
.nav__btns{
display: flex;
align-items: center;
}

.change-theme{
font-size: 1.25rem;
color: var(--title-color);
margin-right: var(--mb-1);
cursor: pointer;
}

.change-theme:hover{
color: var(--first-color);
}

/* Base */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0 0 var(--header-height) 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}

h1, h2, h3, h4 {


color: var(--title-color);
font-weight: var(--font-semi-bold);
}

ul {
list-style: none;
}

a {
text-decoration: none;
}

img {
max-width: 100%;
height: auto;
}

/* Reusable CSS Classes*/


.section {
padding: 2rem 0 4rem;
}

.section__title {
font-size: var(--h1-font-size);
color: var(--title-color);
}

.section__subtitle {
display: block;
font-size: var(--small-font-size);
margin-bottom: var(--mb-3);
}

.section__title,
.section__subtitle {
text-align: center;
}

/* layout*/
.container {
max-width: 768px;
margin-left: var(--mb-1-5);
margin-right: var(--mb-1-5);
}

.grid {
display: grid;
gap: 1.5rem;
}
.header {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--body-color);
}

.nav{
max-width: 968px;
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}

.nav__logo,
.nav__toggle{
color: var(--title-color);
font-weight: var(--font-medium);
}

.nav__logo:hover{
color: var(--first-color);
}

.nav__toggle{
font-size: 1.1rem;
cursor: pointer;
}

.nav__toggle:hover{
color: var(--first-color);
}
@media screen and (max-width: 767px){
.nav__menu{
position: fixed;
bottom: -100%;
left: 0;
width: 100%;
background-color:var(--body-color);
padding: 2rem 1.5rem 4rem;
box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
transition: .3s;
}
}

.nav__list{
grid-template-columns: repeat(3fr, 1fr);
gap: 1rem;
}

.nav__link{
display: flex;
flex-direction: column;
align-items: center;
font-size: var(--small-font-size);
color: var(--title-color);
font-weight: var(--font-medium);
}

.nav__link:hover{
color: var(--first-color);
}

.nav__icon{
font-size: 1.2rem;
}
.nav__close{
position: absolute;
right: 1.3rem;
bottom: 0.5rem;
font-size: 1.5rem;
cursor: pointer;
color: var(--first-color);
}

.nav__close:hover{
color: var(--first-color-alt);
}

.show-menu{
bottom: 0;
}

/* Active Link */
.active-link{
color: var(--first-color);
}

/* Change background header */


.scroll-header{
box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
}

/* Home*/
.home__container{
gap: 1rem;
}

.home__content{
grid-template-columns: .5fr 3fr;
padding-top: 3.5rem;
align-items: center;
}

.home__social{
display: grid;
grid-template-columns: max-content;
row-gap: 1rem;
}

.home__social-icon{
font-size: 1.25rem;
color: var(--first-color);
}

.home__social-icon:hover{
color: var(--first-color-alt);
}

.home__blob{
width: 200px;
fill: var(--first-color);
}

.home__blob-img{
width: 200px;
}

.home__data{
grid-column: 1/3;
}

.home__title{
font-size: var(--big-font-size);
}
.home__subtitle{
font-size: var(--h3-font-size);
color: var(--text-color);
font-weight: var(--font-medium);
margin-bottom: var(--mb-0-75);
}

.home__description{
margin-bottom: var(--mb-2);
}

.home__scroll{
display: none;
}

.home__scroll-button{
color: var(--first-color);
transition: .3s;
}

.home__scroll-button:hover{
transform: translateY(.25rem)
}

.home__scroll-mouse{
font-size: 2rem;
}

.home__scroll-name{
font-size: var(--small-font-size);
color: var(--title-color);
font-weight: var(--font-medium);
margin-right: var(--mb-0-25);
}

.home__scroll-arrow{
font-size: 1.25rem;
}

/* Buttons*/
.contacts{
display: inline-block;
background-color: var(--first-color);
padding: 1rem;
border: none;
border-radius: .5rem;
font-weight: var(--font-medium);
cursor: pointer;
}
.contacts:hover{
background-color: var(--first-color-alt);
}
.button{
color: #fff;
font-weight: var(--font-medium);
font-size: var(--normal-font-size);
}

.button__icon{
font-size: 1.25rem;
margin-left: var(--mb-0-5);
transition: .3s;
}

.button--white{
background-color: #fff;
color: var(--first-color);
}

.button--white:hover{
background-color: #fff;
}
.button--flex{
display: inline-flex;
align-items: center;
}

/* About */
.about__img{
width: 200px;
border-radius: .5rem;
justify-self: center;
align-self: center;
}

.about__description{
text-align: center;
margin-bottom: var(--mb-2-5);
}

.about__info{
display: flex;
justify-content: space-evenly;
margin-bottom: var(--mb-2-5);
}

.about__info-title{
font-size: var(--h2-font-size);
font-weight: var(--font-semi-bold);
color: var(--title-color);
}

.about__info-name{
font-size: var(--smaller-font-size);
}

.about__info-title,
.about__info-name{
display: block;
text-align: center;
}

.about__buttons{
display: flex;
justify-content: center;
}

/* Skills */
.skills__container{
row-gap: 0;
}

.skills_header{
display: flex;
align-items: center;
margin-bottom: var(--mb-2-5);
cursor: pointer;
}

.skills__icon,
.skills__arrow{
font-size: 2rem;
color: var(--first-color);
}

.skills__icon{
margin-right: var(--mb-0-75);
}

.skills__title{
font-size: var(--h3-font-size);
}
.skills__subtitle{
font-size: var(--small-font-size);
color: var(--text-color-light);
}

.skills__arrow{
margin-left: auto;
transition: .4s;
}

.skills__list{
row-gap: 1.5rem;
padding-left: 2.7rem;
}

.skills_title{
display: flex;
justify-content: space-between;
}
.skills__name{
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}

.skills__bar,
.skills__percentage{
height: 5px;
border-radius: .25rem;
}

.skills__bar{
background-color: var(--first-color-lighter);
}

.skills__percentage{
display: block;
background-color: var(--first-color);

.skills__html{
width: 90%;

.skills__css{
width: 80%;
}

.skills__js{
width: 60%;
}

.skills__react{
width: 85%;
}

.skills__php{
width: 80%;
}

.skills__node{
width: 70%;
}
.skills__firebase{
width: 90%;
}

.skills__python{
width: 60%;
}
.skills__figma{
width: 90%;
}

.skills__sketch{
width: 90%;
}

.skills__photoshop{
width: 85%;
}

.skills__close .skills__list{
height: 0;
overflow: hidden;
transition: .30s;
}

.skills__open .skills__list{
height: max-content;
margin-bottom: var(--mb-2-5);
transition: .30s;
}

.skills__open .skills__arrow{
transform: rotate(-180deg);

/* Qualifications */
.qualification__tabs{
display: flex;
justify-content: space-evenly;
margin-bottom: var(--mb-2);
}

.qualification__button{
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
cursor: pointer;
}

.qualification__button:hover{
color: var(--first-color);
}

.qualification__icon{
font-size: 1.8rem;
margin-right: var(--mb-0-25);
}

.timeline{
position: relative;
max-width: 1200px;
margin: 100px auto;
}

.timeline__container{
padding: 10px 50px;
position: relative;
width: 50%;
background: var(--first-color);
border-radius: 2rem;
align-items: center;

.text-box{
padding: 20px 30px;
color: #fff;
position: relative;
border-radius: 6px;
font-size: 18px;
}

.left__container{
left: -5%;
}
.right__container{
right: -55%;
}

.timeline:after{
content: '';
position: absolute;
width: 6px;
height: 100%;
background: rgba(0, 0, 0, .15);
top: 0;
left: 50%;
margin-left: -3px;
z-index: -1;

.text-box h2{
font-weight: 600;
}

.text-box normal{
display: inline-block;
margin-bottom: 15px;
}
.left__container-arrow{
height: 0;
width: 0;
position: absolute;
top: 28px;
left: 118%;
z-index: 1;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid var(--first-color);
right: -15px;

.right__container-arrow{
height: 0;
width: 0;
position: fixed;
top: 28px;
left: -24%;
z-index: 1;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid var(--first-color);
right: -15px;

/* Media Queries for timeline*/


@media screen and (max-width: 600px) {
.timeline{
margin: 100px auto;
position: relative;

}
.timeline::after{
left: 50px;
}
.timeline__container{
width: 100%;
padding-left: 90px;
padding-right: 60px;
margin-bottom: 25px;
}

.left__container-arrow{
margin-left: -40px;
}
.text-box{
font-size: 15px;
}
.text-box normal{
margin-bottom: 20px;
}
.right__container{
left: -15px;
text-align: center;

}
}

/* Services */
.services__container{
gap: 1.5rem;
grid-template-columns: repeat(2,1fr);
}

.services__content{
position: relative;
background-color: var(--container-color);
padding: 3.5rem, .5rem, 1.25rem, 1.5rem;
border-radius: .25rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}

.services__content:hover{
box-shadow: 0 4px 8px rgba(0, 0, 0, .25);
}

.services__icon{
display: block;
font-size: 1.5rem;
color: var(--first-color);
margin-bottom: var(--mb-1);
}

.services__title{
font-size: var(--h3-font-size);
margin-bottom: var(--mb-1);
font-weight: var(--font-medium);
}

.view{
display: inline-block;
background-color: white;
padding: 1rem;
border: none;
border-radius: .5rem;
font-weight: var(--font-medium);
cursor: pointer;
}
.more{
color: var(--first-color);
}

.more:hover .button__icon{
transform: translateX(.25rem);
}

.services__modal{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
z-index: var(--z-modal);
opacity: 0;
visibility: hidden;
transition: .3s;
}

.services__modal-content{
position: relative;
background-color: var(--container-color);
padding: 1.5rem;
border-radius: .5rem;
}

.services__modal-services{
row-gap: 1rem;
}

.services__modal-service{
display: flex;
}

.services__modal-title{
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
margin-bottom: var(--mb-1-5);
}

.services__modal-close{
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.5rem;
color: var(--first-color);
cursor: pointer;
}

.services__modal-icon{
color: var(--first-color);
margin-right: var(--mb-0-25);
}

/* ACTIVE MODAL */
.active-modal{
opacity: 1;
visibility: visible;
}

/* Portfolio */
.portfolio__container{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.portfolio__button:hover .button__icon{
transform: translateX(.50rem);
}

.portfolio{
position: relative;
max-width: 900px;
width: 100%;
padding: 50px 0;
overflow: hidden;
}

.portfolio .image{
height: 170px;
width: 170px;
object-fit: cover;
border-radius: .5rem;
}

.portfolio .slide{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
row-gap: 20px;

.slide p{
padding: 0 160px;
font-size: var(--small-font-size);
font-weight: 500;
}

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


.slide p{
font-size: 13px;
padding: 0 20px;
}
}

/* Project In Mind */
.project{
text-align: center;
}

.project__bg{
background-color: var(--first-color-second);
padding-top: 3rem;
}

.project__title{
font-size: var(--h2-font-size);
margin-bottom: var(--mb-0-75);
}

.project__description{
margin-bottom: var(--mb-1-5);
}

.project__title,
.project__description{
color: #fff;
}

.project__img{
width: 232px;
justify-self: center;
}

/* TESTIMONIAL */
.testimonial__container{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.testimonial{
position: relative;
max-width: 900px;
width: 100%;
padding: 50px 0;
row-gap: 30px;
overflow: hidden;
}

.testimonial .image{
height: 170px;
width: 170px;
object-fit: cover;
border-radius: 50%;
}

.testimonial .slide1{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
row-gap: 10px;

.slide1 p{
text-align: center;
padding: 0 160px;
font-size: 1rem;
}

.slide1 .star__icon{
font-size: 1rem;
color: var(--first-color);
}

.slide1 .details{
display: flex;
flex-direction: column;
align-items: center;
}

.details .name{
font-size: 14px;
font-weight: 600;
color: #333;
}

.details .job{
font-size: 12px;
font-weight: 400;
color: #333;
}

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


.slide1 p{
font-size: 13px;
padding: 0 20px;
}
}

/* Contact */
.contact__container{
row-gap: 3rem;
position: relative;
}

.contact__information{
display: flex;
margin: 0 0 30px 0 ;
}

.contact__icon{
font-size: 2rem;
color: var(--first-color);
margin-right: var(--mb-0-75);
}

.contact__title{
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
}

.contact__subtitle{
font-size: var(--small-font-size);
color: var(--text-color);
}

.contact__content{
background-color: var(--input-color);
border-radius: .5rem;
padding: .75rem 1rem .25rem;
}

.contact__label{
font-size: var(--smaller-font-size);
color: var(--title-color);
}

.contact__input{
width: 100%;
background-color: var(--input-color);
color: var(--text-color);
font-family: var(--body-font);
font-size: var(--normal-font-size);
border: none;
outline: none;
padding: .25rem .5rem .5rem 0;
}
.success{
background-color: var(--input-color);
padding: 5px 10px;
text-align: center;
color: var(--title-color);
}

/* Footer */
.footer{
padding-top: 2rem;
}

.footer__container{
row-gap: 3.5rem;
}

.footer__bg{
background-color: var(--first-color-second);
padding: 2rem 0 3rem;
}

.footer__title{
font-size: var(--h1-font-size);
margin-bottom: var(--mb-0-25);
}

.footer__subtitle{
font-size: var(--small-font-size);
}

.footer__links{
display: flex;
flex-direction: column;
row-gap: 1.5rem;
}

.footer__link:hover{
color: var(--first-color-lighter);
}

.footer__social{
font-size: 1.25rem;
margin-right: var(--mb-1-5);
}

.footer__social:hover{
color: var(--first-color-lighter);
}
.footer-copy{
font-size: var(--smaller-font-size);
text-align: center;
color: var(--text-color-light);
margin-top: var(--mb-3);
}

.footer__title,
.footer__subtitle,
.footer__link,
.footer__social{
color: #fff;
}

/* scroll Up */
.scrollup{
position: fixed;
right: 1rem;
bottom: -20%;
background-color: var(--first-color);
opacity: .8;
padding: 0 .3rem;
border-radius: .4rem;
z-index: var(--z-tooltip);
transition: .4s;
}

.scrollup:hover{
background-color: var(--first-color-alt);
}

.scrollup__icon{
font-size: 1.5rem;
color: #fff;
}

/* Show scroll */
.show-scroll{
bottom: 5rem;
}

/* Scroll Bar */
::-webkit-scrollbar{
width:.60rem;
background-color: var(--scroll-bar-color);
border-radius: .5rem;
}

::-webkit-scrollbar-thumb{
background-color: var(--scroll-thumb-color);
border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover{
background-color: var(--text-color-light);
}

/* Media Queries */

/* For small Devices */


@media screen and (max-width: 350px) {
.container{
margin-left: var(--mb-1);
margin-right: var(--mb-1);
}

.nav__menu{
padding: 2rem .25rem 4rem;
}

.nav__list{
column-gap: 0;
}

.home__content{
grid-template-columns: .25fr 3fr;
}

.home__blob{
width: 180px;
}

.skills__title{
font-size: var(--normal-font-size);
}

.services__container{
grid-template-columns: max-content;
justify-content: center;
}

.services__content{
padding-right: 3.5rem;
}

.services__modal{
padding: 0 .5rem;
}

.project__img{
width: 200px;
}

.testimonial p{
padding: 0 0 7px 0;
}

.image{
margin-right: 0;
margin-bottom: var(--mb-0-25);
}
}

/* For medium Devices */


@media screen and (min-width: 568px)
{
.home__content{
grid-template-columns: max-content 1fr 1fr;
}

.home__data{
grid-column: initial;
}
.home__img{
order: 1;
justify-self: center;
}

.about__container,
.contact__container,
.footer__container,
.project__container{
grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width:768px){


.container{
margin-left: auto;
margin-right: auto;
}

body{
margin: 0;
}

.section{
padding: 6rem 0 2rem;
}

.section__subtitle{
margin-bottom: 4rem;
}

.header{
top: 0;
bottom: initial;
}

.header,
.main,
.footer__container{
padding: 0 1rem;
}

.nav{
height: calc(var(--header-height));
column-gap: 1rem;
}

.nav__icon,
.nav__close,
.nav__toggle{
display: none;
}

.nav__list{
display: flex;
column-gap: 2rem;
}

.nav__menu{
margin-left: auto;
}

.change-theme{
margin: 0;
}

.home__container{
row-gap: 5rem;
}

.home__content{
padding-top: 5.5rem;
column-gap: 2rem;
}

.home__blob{
width: 270px;
}

.home__scroll{
display: block;
}

.home__scroll-button{
margin-left: 3rem;
}

.about__container{
column-gap: 5rem;
}

.about__img{
width: 450px;
height: 450px;
}

.about__description{
text-align: initial;
}

.about__info{
justify-content: space-between;
}
.about__buttons{
justify-content: initial;
}

.services__container{
grid-template-columns: repeat(3, 218px);
justify-content: center;
}

.services__icon{
font-size: 2rem;
}

.services__content{
padding: 6rem 0 2rem 2.5rem;
}

.services__modal-content{
width: 450px;
}

.project{
text-align: initial;
}

.project__bg{
background: none;
}

.project__container{
background-color: var(--first-color-second);
border-radius: 1rem;
padding: 3rem 2.5rem 0;
grid-template-columns: 1fr max-content;
column-gap: 3rem;
}
.project__data{
padding-top: .8rem;
}

.footer__container{
grid-template-columns: repeat(3, 1fr);
}

.footer__bg{
padding: 3rem 0 3.5rem;
}

.footer__links{
flex-direction: row;
column-gap: 2rem;
}

.footer__socials{
justify-self: flex-end;
}

.footer-copy{
margin-top: 4.5rem;
font-size: 15px;
}
}

/* for large Devices */


@media screen and (min-width: 1024px){
.header,
.main,
.footer__container{
padding: 0;
}
.home__blob{
width: 320px;
}

.home__social{
transform: translateX(-6rem);
}

.services__container{
grid-template-columns: repeat(3, 238px);
}

.contact__form{
width: 460px;
}
}

JavaScript Code of Website:

const navMenu = document.getElementById('nav-menu'),


navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close')
/* Open Menu */
if(navToggle){
navToggle.addEventListener('click', () =>{
navMenu.classList.add('show-menu')
})
}
/*Close Menu*/
if(navClose){
navClose.addEventListener('click',() =>{
navMenu.classList.remove('show-menu')
})
}
/* Remove Menu */
const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
const navMenu = document.getElementById('nav-menu')
// When we click on each nav__link, we remove the show-menu
class
navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

/* Rotate the arrow to 180 deg*/


const skillsContent =
document.getElementsByClassName('skills__content'),
skillsHeader = document.querySelectorAll('.skills_header')
function toggleSkills(){
let itemClass = this.parentNode.className

for(i=0; i<skillsContent.length; i++){


skillsContent[i].className = 'skills__content
skills__close'
}
if(itemClass === 'skills__content skills__close'){
this.parentNode.className = 'skills__content
skills__open'
}
}
skillsHeader.forEach((el) =>{
el.addEventListener('click',toggleSkills)
})

/* Open services view more option*/


const modalViews =
document.querySelectorAll('.services__modal'),
modalBtns = document.querySelectorAll('.view'),
modalCloses = document.querySelectorAll('.services__modal-
close')

let modal = function(modalClick){


modalViews[modalClick].classList.add('active-modal')
}

modalBtns.forEach((modalBtn, i) =>{
modalBtn.addEventListener('click', () =>{
modal(i)
})
})

modalCloses.forEach((modalClose)=>{
modalClose.addEventListener('click',()=>{
modalViews.forEach((modalView)=>{
modalView.classList.remove('active-modal')
})
})
})

/* Portfolio Swiper */
var swiperPortfolio = new Swiper(".portfolio", {
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
mousewheel: true,
keyboard: true,
});

/* Testimonial Swiper */
var swiper = new Swiper(".mySwiper", {
loop: true,
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
},
mousewheel: true,
keyboard: true,
});

/*==================== SCROLL SECTIONS ACTIVE LINK


====================*/
const sections = document.querySelectorAll('section[id]')

function scrollActive(){
const scrollY = window.pageYOffset

sections.forEach(current =>{
const sectionHeight = current.offsetHeight
const sectionTop = current.offsetTop - 50;
sectionId = current.getAttribute('id')

if(scrollY > sectionTop && scrollY <= sectionTop +


sectionHeight){
document.querySelector('.nav__menu a[href*=' +
sectionId + ']').classList.add('active-link')
}else{
document.querySelector('.nav__menu a[href*=' +
sectionId + ']').classList.remove('active-link')
}
})
}
window.addEventListener('scroll', scrollActive)

/*==================== CHANGE BACKGROUND HEADER


====================*/
function scrollHeader(){
const nav = document.getElementById('header')
// When the scroll is greater than 200 viewport height, add
the scroll-header class to the header tag
if(this.scrollY >= 80) nav.classList.add('scroll-header');
else nav.classList.remove('scroll-header')
}
window.addEventListener('scroll', scrollHeader)

/*==================== SHOW SCROLL UP ====================*/


function scrollUp(){
const scrollUp = document.getElementById('scroll-up');
// When the scroll is higher than 560 viewport height, add
the show-scroll class to the a tag with the scroll-top class
if(this.scrollY >= 560) scrollUp.classList.add('show-
scroll'); else scrollUp.classList.remove('show-scroll')
}
window.addEventListener('scroll', scrollUp)

/*==================== DARK LIGHT THEME ====================*/


const themeButton = document.getElementById('theme-button')
const darkTheme = 'dark-theme'
const iconTheme = 'uil-sun'

// Previously selected topic (if user selected)


const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')

// 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) ? 'uil-moon' : 'uil-
sun'

// We validate if the user previously chose a topic


if (selectedTheme) {
// If the validation is fulfilled, we ask what the issue was
to know if we activated or deactivated the dark
document.body.classList[selectedTheme === 'dark' ? 'add' :
'remove'](darkTheme)
themeButton.classList[selectedIcon === 'uil-moon' ? 'add' :
'remove'](iconTheme)
}

// Activate / deactivate the theme manually with the button


themeButton.addEventListener('click', () => {
// Add or remove the dark / icon theme
document.body.classList.toggle(darkTheme)
themeButton.classList.toggle(iconTheme)
// We save the theme and the current icon that the user
chose
localStorage.setItem('selected-theme', getCurrentTheme())
localStorage.setItem('selected-icon', getCurrentIcon())
})

PHP code with SQL connectivity:

<?php
// Define connection variables
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "portfolio";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Check if form was submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get form data
$name = $_POST["name"];
$email = $_POST["email"];
$project = $_POST["project"];
$message = $_POST["message"];

// Prepare and bind SQL statement


$stmt = $conn->prepare("INSERT INTO form_data (name, email,
project, message) VALUES (?, ?, ?, ?)");
$stmt->bind_param("ssss", $name, $email, $project,
$message);

// Execute SQL statement


if ($stmt->execute()) {
header("Location: thanks.php");
exit();
} else {
echo "Error inserting data: " . $stmt->error;
}

// Close statement
$stmt->close();
}

// Close connection
$conn->close();

?>

Code for Interface after submitting the form:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thank you for your submission</title>
<style>
/* wrapper styles */
.wrapper {
max-width: 800px;
margin: 0 auto;
text-align: center;
padding: 50px;
background-color: #f7f7f7;
}
/* heading styles */
h1 {
font-size: 48px;
margin-bottom: 30px;
color: #333333;
}

/* paragraph styles */
p {
font-size: 24px;
margin-bottom: 20px;
line-height: 1.5;
color: #666666;
}

/* link styles */
a {
display: inline-block;
padding: 12px 24px;
background-color: #007bff;
color: #ffffff;
font-size: 18px;
border-radius: 5px;
text-decoration: none;
transition: all 0.2s ease-in-out;
}

/* link hover styles */


a:hover {
background-color: #0062cc;
}

</style>
</head>
<body>
<div class="wrapper">
<h1>Thank You!</h1>
<p>Thank you for submitting your information. We
appreciate your interest and will get back to you shortly.</p>
<p>In the meantime, feel free to explore our website to
learn more about our products and services.</p>
<a href="/web-design/index.php">Go to Homepage</a>
</div>
</body>
</html>
Output:
Output after Submitting the form:

You might also like