In this article, we’ll make a clone of the GeeksforGeeks website. The clone includes home, about, courses, and contact pages. On the home page, we’ve added sections like categories, features, testimonials, and FAQs, similar to the GFG website. We named our clone GeeksforGeeks 2.0 to avoid copyright issues. The about page showcases achievements and introduces our team. The courses page features GFG courses, and the contact page provides contact information.
Approach :
-
File Structure Setup:
- Create a folder and generate five HTML files: index.html, contact.html, about.html, blog.html, and courses.html.
- Write the HTML code for each file to define the layout of the website.
- Link these HTML files with respective CSS files: style.css, about.css, contact.css, and blog.css.
-
CSS Styling:
- Develop four CSS files (style.css, about.css, contact.css, blog.css) for proper visualization of the website.
- Implement styling in HTML and CSS files to enhance the overall appearance and layout of the website.
-
Website Code Implementation:
- Write HTML and CSS code to construct the structure and design of the website.
- Ensure proper visualization of the website through well-crafted HTML and CSS elements.
-
JavaScript Logic:
- Create a script.js file to incorporate logic for testimonials swiper and navbar coloring.
- Implement functionality to enhance user experience and interactivity on the website.
-
Responsive Design:
- Integrate media queries to make the website responsive, adapting to different screen sizes and devices.
- Ensure a seamless user experience across various devices through responsive design practices.
Example: The below code implements all the point written in the approach practically.
HTML Files:
HTML
<!-------------- index.html -----------------> <!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< link rel = "shortcut icon" href =
type = "image/x-icon" >
< title >GeeksforGeeks 2.0</ title >
<!------------Iconscout CDN--------------------->
< link rel = "stylesheet" href =
< link rel = "stylesheet" href = "style.css" >
<!-- --------------Google Fonts--------------------- -->
< link href =
"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel = "stylesheet" >
<!-- ----------------Swiper JS------------------------------ -->
< link rel = "stylesheet" href =
</ head >
< style >
#login:hover {
color: white;
}
</ style >
< body >
< nav >
< div class = "container nav__container" >
< a href = "index.html" >
< img alt = "" src =
style = "width: 50%;" >
</ a >
< ul class = "nav__menu" >
< li >< a href = "./index.html" >Home</ a ></ li >
< li >< a href = "./about.html" >About</ a ></ li >
< li >< a href = "./courses.html" >Courses</ a ></ li >
< li >< a href = "./blog.html" >Blog</ a ></ li >
< li >< a href = "./contact.html" >Contact</ a ></ li >
< li >
< a href = "./login.html" class = "btn btn-primary"
id = "login" >
Login/Register
</ a >
</ li >
</ ul >
< button id = "open-menu-btn" >
< i class = "uil uil-bars" ></ i >
</ button >
< button id = "close-menu-btn" >
< i class = "uil uil-multiply" ></ i >
</ button >
</ div >
</ nav >
<!-- ======================End Navbar================== -->
<!-- ====================Header========================== -->
< header >
< div class = "container header__container" >
< div class = "header__left" >
< h1 >
Start Your Coding Journay with GeeksforGeeks 2.0
</ h1 >
< p style = "text-align: justify;" >
Welcome to GeeksforGeeks 2.0, an updated version
of GeeksforGeeks. This version has new features and
an updated learning path to help you achieve your goals.
</ p >
< a href = "/courses.html" class = "btn btn-primary" >
Let's Start
</ a >
</ div >
< div class = "header__right" >
< div class = "header__right-image" >
< img alt = "" src =
</ div >
</ div >
</ div >
</ header >
<!-- ==================End Header========================= -->
<!-- ==============End Category=================== -->
< section class = "categories" >
< div class = "container container categories__container" >
< div class = "categories__left" >
< h1 >New Categories</ h1 >
< p style = "text-align: justify;" >
There are some new categories or areas in which
GeeksforGeeks 2.0 explores for our Geeks, and correct
and high-quality content is the point that makes
GeeksforGeeks 2.0 different from others.
</ p >
Learn More
</ a >
</ div >
< div class = "categories__right" >
< article class = "category" >
< span class = "category__icon" >
< i class = "uil uil-bitcoin-circle" ></ i >
</ span >
< h5 >
target = "_blank" >
Blockchain
</ a >
</ h5 >
< p >
Blockchain is a secure way of
recording transactions.
</ p >
</ article >
< article class = "category" >
< span class = "category__icon" >
< i class = "uil uil-palette" ></ i >
</ span >
< h5 >
Graphic Design
</ a >
</ h5 >
< p >
Graphic Design can be found on anything
from billboards to mobile apps.
</ p >
</ article >
< article class = "category" >
< span class = "category__icon" >
< i class = "uil uil-usd-circle" ></ i >
</ span >
< h5 >
Finance
</ a >
</ h5 >
< p >
The specialised study of how a company manages
its funds is known as Finance.
</ p >
</ article >
< article class = "category" >
< span class = "category__icon" >
< i class = "uil uil-megaphone" ></ i >
</ span >
< h5 >
Marketing
</ a >
</ h5 >
< p >
Marketing is key in management, involving activities
to promote services for sale.
</ p >
</ article >
< article class = "category" >
< span class = "category__icon" >
< i class = "uil uil-music" ></ i >
</ span >
< h5 >Music </ h5 >
< p >
Music is the art form that combines sounds
to create expression, and harmony.
</ p >
</ article >
< article class = "category" >
< span class = "category__icon" >
< i class = "uil uil-puzzle-piece" ></ i >
</ span >
< h5 >
< a href =
Business
</ a >
</ h5 >
< p >
Business is the pursuit of profit through
the exchange of services.
</ p >
</ article >
</ div >
</ div >
</ section >
<!-- =============End Category================ -->
<!-- ==============Courses================= -->
< section class = "courses" >
< h2 style="color: gray
;">GeeksforGeeks 2.0 Courses</ h2 >
< div class = "container courses__container" >
< article class = "course" >
< div class = "course__image" >
< img alt = "" src =
</ div >
< div class = "course__info" >
< h4 >Master Java Programming</ h4 >
< p style = "text-align: justify;" >
"GeeksforGeeks 2.0 offers a 90% refund if you
complete 90% of the course within 90 days."</ p >
< a href = "/blog.html" target = "_blank"
class = "btn btn-primary" >
Learn More
</ a >
</ div >
</ article >
< article class = "course" >
< div class = "course__image" >
< img src =
alt = "compiler" >
</ div >
< div class = "course__info" >
< h4 >Software Testing and Automation</ h4 >
< p style = "text-align: justify;" >
GeeksforGeeks 2.0 offers a 90% refund if you
complete 90% of the course within 90 days.
</ p >
< a href = "courses.html" class = "btn btn-primary" >
Learn More
</ a >
</ div >
</ article >
< article class = "course" >
< div class = "course__image" >
< img alt = "" src =
</ div >
< div class = "course__info" >
< h4 >Interview Prepration</ h4 >
< p style = "text-align: justify;" >
GeeksforGeeks 2.0 offers a 90% refund if you
complete 90% of the course within 90 days.
</ p >
< a href = "courses.html" class = "btn btn-primary" >
Learn More
</ a >
</ div >
</ article >
</ div >
</ section >
<!-- ===============End Courses===================== -->
<!-- ===============Testimonial ================== -->
< section class = "container testimonials__container mySwiper" >
< h2 style = "color:rgb(98, 95, 95);" >
Student Testimonials
</ h2 >
< div class = "swiper-wrapper" >
< article class = "testimonial swiper-slide" >
< div class = "avatar" >
< img alt = "" src =
</ div >
< div class = "testimonial__info" >
< h5 >Suraj Kath</ h5 >
< small >Placed In Google</ small >
</ div >
< div class = "testimonial__body" >
< p >
Hello, I have been practicing questions on this site
for the last 2 years and recently I got placed at Google.
Really loved the breadth of concepts and topics available
on this site. Great work guys!! Thank you
</ p >
</ div >
</ article >
< article class = "testimonial swiper-slide" >
< div class = "avatar" >
< img alt = "" src =
</ div >
< div class = "testimonial__info" >
< h5 >Siddharth Rajpal</ h5 >
< small >Placed In Google, Amazon</ small >
</ div >
< div class = "testimonial__body" >
< p >
I am Siddharth Rajpal, a 2014 passout from NSIT
and I used to visit your website to prepare for
job interviews and once I was ready I started
applying to various companies. I got recruited at
Google, Amazon,
</ p >
</ div >
</ article >
< article class = "testimonial swiper-slide" >
< div class = "avatar" >
< img alt = "" src =
</ div >
< div class = "testimonial__info" >
< h5 >Kyoo San Martin Monroy</ h5 >
< small >Amazon(2014) Google(2015)
</ small >
</ div >
< div class = "testimonial__body" >
< p >
I just want to say “Thank you for create GeeksForGeeks”.
My life change when I was accepted first in Amazon (2014)
and then in Google( 2015), and it was possible studying
everything from the GeeksforGeeks.
</ p >
</ div >
</ article >
< article class = "testimonial swiper-slide" >
< div class = "avatar" >
< img alt = "" src =
</ div >
< div class = "testimonial__info" >
< h5 >Vivek Kumar Thakur</ h5 >
< small >Placed In Amazon</ small >
</ div >
< div class = "testimonial__body" >
< p >
Thank you for providing great platform for learning.
Recently amazon visited our campus and I was
interviewed by Amazon and got the offer just because
of geeksforgeeks. Thanks a lot.
</ p >
</ div >
</ article >
< article class = "testimonial swiper-slide" >
< div class = "avatar" >
< img alt = "" src =
</ div >
< div class = "testimonial__info" >
< h5 >Murlidar Setty</ h5 >
< small >Placed</ small >
</ div >
< div class = "testimonial__body" >
< p >
Thank you so much for providing one of the best
portal to learn problem solving techniques,
programming languages, Puzzles and many more.
</ p >
</ div >
</ article >
</ div >
< div class = "swiper-pagination" ></ div >
</ section >
<!-- ===================End Testimonials==================== -->
<!-- ===============FAQ======================= -->
< section class = "faqs" >
< h2 style = "color:rgb(98, 95, 95);" >
Frequently Asked Questions
</ h2 >
< div class = "container faqs__container" >
< article class = "faq " >
< div class = "faq__icon" >
< i class = "uil uil-plus" ></ i >
</ div >
< div class = "question__answer" >
< h4 >
Will I actually get 90% of my course fee back?
</ h4 >
< p >
Yes, To qualify for the refund,you must complete 90%
of the course content within 90 days from
the date of purchase.
</ p >
</ div >
</ article >
< article class = "faq" >
< div class = "faq__icon" >
< i class = "uil uil-plus" ></ i >
</ div >
< div class = "question__answer" >
< h4 >
Is there any number to contact for queries?
</ h4 >
< p >
You may call us on +91-7982906637 in case
of any query.
</ p >
</ div >
</ article >
< article class = "faq" >
< div class = "faq__icon" >
< i class = "uil uil-plus" ></ i >
</ div >
< div class = "question__answer" >
< h4 >
How can I enroll for this program?
</ h4 >
< p >
You need to fill out an Application form post
initial registration. After that, your application
will be reviewed by our team to assess your
eligibility for this program.
</ p >
</ div >
</ article >
< article class = "faq" >
< div class = "faq__icon" >
< i class = "uil uil-plus" ></ i >
</ div >
< div class = "question__answer" >
< h4 >
What if I am not selected?
</ h4 >
< p >
You will be able to re-apply to the program
based on your eligibility criteria.
</ p >
</ div >
</ article >
< article class = "faq" >
< div class = "faq__icon" >
< i class = "uil uil-plus" ></ i >
</ div >
< div class = "question__answer" >
< h4 >
Once I am enrolled in the program, for
how long will the course content be available for?
</ h4 >
< p >
The course content will be available for a period
of 1 year from the date of purchase.
</ p >
</ div >
</ article >
< article class = "faq" >
< div class = "faq__icon" >
< i class = "uil uil-plus" ></ i >
</ div >
< div class = "question__answer" >
< h4 >
Can I make the payment through PayPal?
</ h4 >
< p >
Yes. Mail us with your details at
courses@geeksforgeeks.org.
</ p >
</ div >
</ article >
</ div >
</ section >
<!-- ========================End FAQ===================== -->
<!-- =================================Footer===================== -->
< footer >
< div class = "container footer__container" >
< div class = "footer__1" >
< a href = "/index.html" class = "footer__logo" >
< a href = "index.html" >
< img alt = "" src =
</ a >
</ a >
< p >
< i class = "uil uil-location-point" ></ i >
A-143, 9th Floor, Sovereign Corporate Tower,
Sector-136, Noida, Uttar Pradesh - 201305
</ p >
</ div >
< div class = "footer__2" >
< h4 >Explore</ h4 >
< ul class = "permalinks" >
< li >< a href = "./index.html" >Home</ a ></ li >
< li >< a href = "./about.html" >About</ a ></ li >
< li >< a href = "./courses.html" >Courses</ a ></ li >
< li >< a href = "./contact.html" >Contact</ a ></ li >
</ ul >
</ div >
< div class = "footer__3" >
< h4 >Legal</ h4 >
< ul class = "privacy" >
< li >< a href = "#" >Privacy Policy</ a ></ li >
< li >< a href = "#" >Terms and conditions</ a ></ li >
< li >< a href = "#" >Refund Policy</ a ></ li >
</ ul >
</ div >
< div class = "footer__4" >
< h4 >Contact Us</ h4 >
< div >
< p >08069289001</ p >
< p >Noida, Uttar Pradesh (201305)</ p >
</ div >
< ul class = "footer__socials" >
< li >
< a href = "#" >
< i class = "uil uil-facebook-f" ></ i >
</ a >
</ li >
< li >
< a href = "#" >
< i class = "uil uil-instagram-alt" ></ i >
</ a >
</ li >
< li >
< a href = "#" >
< i class = "uil uil-twitter" ></ i >
</ a >
</ li >
< li >
< a href = "#" >
< i class = "uil uil-linkedin-alt" ></ i >
</ a >
</ li >
</ ul >
</ div >
</ div >
< div class = "footer__copyright" >
< small >
< strong style = "color: green;" >
GeeksforGeeks 2.0
</ strong >
© All Right Reserved
</ small >
</ div >
</ footer >
<!-- ============================End Footer=========================== -->
< script src =
</ script >
< script src = "./script.js" ></ script >
< script src = "./main.js" ></ script >
</ body >
</ html >
|
HTML
<!-- --------------------------- courses.html ------------------------- --> <!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< link rel = "shortcut icon" href =
type = "image/x-icon" >
< title >GeeksforGeeks 2.0</ title >
<!------------Iconscout CDN--------------------->
< link rel = "stylesheet" href =
< link rel = "shortcut icon" href =
type = "image/x-icon" >
< link rel = "stylesheet" href = "./style.css" >
<!-- --------------Google Fonts--------------------- -->
< link href =
"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel = "stylesheet" >
<!-- ----------------Swiper JS------------------------------ -->
< link rel = "stylesheet" href =
</ head >
< body >
< nav >
< div class = "container nav__container" >
< a href = "./index.html" >
< img src =
style = "max-width: 150px;" >
</ a >
< ul class = "nav__menu" >
< li >< a href = "./index.html" >Home</ a ></ li >
< li >< a href = "./about.html" >About</ a ></ li >
< li >< a href = "./courses.html" >Courses</ a ></ li >
< li >< a href = "./contact.html" >Contact</ a ></ li >
</ ul >
< button id = "open-menu-btn" >
< i class = "uil uil-bars" ></ i >
</ button >
< button id = "close-menu-btn" >
< i class = "uil uil-multiply" ></ i >
</ button >
</ div >
</ nav >
<!-- ======================End Navbar================== -->
< br >< br >
< section class = "courses" style = "margin-top: -2px;" >
< div class = "container courses__container" >
< article class = "course" >
< div class = "course__image" >
< img src =
alt = "" >
</ div >
< div class = "course__info" >
< h4 style = "text-align: justify;" >
DSA to Development: A Complete Guide
</ h4 >
< p style = "text-align: justify;" >
"GeeksforGeeks 2.0 offers a 90% refund if
you complete 90% of the course within 90 days."
</ p >
< a href =
class = "btn btn-primary" >
Explore
</ a >
</ div >
</ article >
< article class = "course" >
< div class = "course__image" >
< img src =
</ div >
< div class = "course__info" >
< h4 style = "text-align: justify;" >
Full Stack Development with React & Node JS - Live
</ h4 >
< p style = "text-align: justify;" >
"GeeksforGeeks 2.0 offers a 90% refund if
you complete 90% of the course within 90 days."
</ p >
< a href =
class = "btn btn-primary" >
Explore
</ a >
</ div >
</ article >
< article class = "course" >
< div class = "course__image" >
< img src =
</ div >
< div class = "course__info" >
< h4 style = "text-align: justify;" >
Tech Interview 101 - From DSA to System Design
</ h4 >
< p style = "text-align: justify;" >
"GeeksforGeeks 2.0 offers a 90% refund if you
complete 90% of the course within 90 days."
</ p >
< a href =
class = "btn btn-primary" >
Explore
</ a >
</ div >
</ article >
< article class = "course" >
< div class = "course__image" >
< img src =
</ div >
< div class = "course__info" >
< h4 style = "text-align: justify;" >
Data Structures & Algorithms in Python - Self Paced
</ h4 >
< p style = "text-align: justify;" >
"GeeksforGeeks 2.0 offers a 90% refund if you
complete 90% of the course within 90 days."
</ p >
< a href =
class = "btn btn-primary" >
Explore
</ a >
</ div >
</ article >
< article class = "course" >
< div class = "course__image" >
< img src =
</ div >
< div class = "course__info" >
< h4 style = "text-align: justify;" >
Complete Test Series for Product-Based Companies
</ h4 >
< p style = "text-align: justify;" >
"GeeksforGeeks 2.0 offers a 90% refund if you
complete 90% of the course within 90 days."
</ p >
< a href =
class = "btn btn-primary" >
Explore
</ a >
</ div >
</ article >
< article class = "course" >
< div class = "course__image" >
< img src =
</ div >
< div class = "course__info" >
< h4 style = "text-align: justify;" >
Master Java Programming - Complete Beginner to Advanced
</ h4 >
< p style = "text-align: justify;" >
"GeeksforGeeks 2.0 offers a 90% refund if you
complete 90% of the course within 90 days."
</ p >
< a href =
class = "btn btn-primary" >
Explore
</ a >
</ div >
</ article >
< article class = "course" >
< div class = "course__image" >
< img src =
</ div >
< div class = "course__info" >
< h4 style = "text-align: justify;" >
Complete Guide to Software Testing and Automation
</ h4 >
< p style = "text-align: justify;" >
"GeeksforGeeks 2.0 offers a 90% refund if you
complete 90% of the course within 90 days."
</ p >
< a href =
class = "btn btn-primary" >
Explore
</ a >
</ div >
</ article >
< article class = "course" >
< div class = "course__image" >
< img src =
</ div >
< div class = "course__info" >
< h4 style = "text-align: justify;" >
Complete Interview Preparation
</ h4 >
< p style = "text-align: justify;" >
"GeeksforGeeks 2.0 offers a 90% refund if you
complete 90% of the course within 90 days."
</ p >
< a href =
class = "btn btn-primary" >
Explore
</ a >
</ div >
</ article >
< article class = "course" >
< div class = "course__image" >
< img src =
</ div >
< div class = "course__info" >
< h4 style = "text-align: justify;" >
JAVA Backend Development - Live
</ h4 >
< p style = "text-align: justify;" >
"GeeksforGeeks 2.0 offers a 90% refund if you
complete 90% of the course within 90 days."
</ p >
< a href =
class = "btn btn-primary" >
Explore
</ a >
</ div >
</ article >
</ div >
</ section >
<!-- =================================Footer===================== -->
< footer >
< div class = "container footer__container" >
< div class = "footer__1" >
< a href = "./index.html" class = "footer__logo" >
< a href = "./index.html" >
< img src =
</ a >
</ a >
< p >
< i class = "uil uil-location-point" ></ i >
A-143, 9th Floor, Sovereign Corporate Tower,
Sector-136, Noida, Uttar Pradesh - 201305
</ p >
</ div >
< div class = "footer__2" >
< h4 >Explore</ h4 >
< ul class = "permalinks" >
< li >< a href = "./index.html" >Home</ a ></ li >
< li >< a href = "./about.html" >About</ a ></ li >
< li >< a href = "./courses.html" >Courses</ a ></ li >
< li >< a href = "./contact.html" >Contact</ a ></ li >
</ ul >
</ div >
< div class = "footer__3" >
< h4 >Legal</ h4 >
< ul class = "privacy" >
< li >< a href = "#" >Privacy Policy</ a ></ li >
< li >< a href = "#" >Terms and conditions</ a ></ li >
< li >< a href = "#" >Refund Policy</ a ></ li >
</ ul >
</ div >
< div class = "footer__4" >
< h4 >Contact Us</ h4 >
< div >
< p >08069289001</ p >
< p >Noida, Uttar Pradesh (201305)</ p >
</ div >
< ul class = "footer__socials" >
< li >
< a href = "#" >
< i class = "uil uil-facebook-f" ></ i >
</ a >
</ li >
< li >
< a href = "#" >
< i class = "uil uil-instagram-alt" ></ i >
</ a >
</ li >
< li >
< a href = "#" >
< i class = "uil uil-twitter" ></ i >
</ a >
</ li >
< li >
< a href = "#" >
< i class = "uil uil-linkedin-alt" ></ i >
</ a >
</ li >
</ ul >
</ div >
</ div >
< div class = "footer__copyright" >
< small >
< strong style = "color: green;" >
GeeksforGeeks 2.0
</ strong >
© All Right Reserved
</ small >
</ div >
</ footer >
<!-- ============================End Footer=========================== -->
< script src =
</ script >
< script src = "./script.js" ></ script >
</ body >
</ html >
|
HTML
<!-- ------------ contact.html------------ --> <!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< link rel = "shortcut icon" href =
type = "image/x-icon" >
< title >GeeksforGeeks 2.0</ title >
<!------------Iconscout CDN--------------------->
< link rel = "stylesheet" href =
< link rel = "shortcut icon" href =
type = "image/x-icon" >
< link rel = "stylesheet" href = "./style.css" >
< link rel = "stylesheet" href = "./contact.css" >
<!-- --------------Google Fonts--------------------- -->
< link rel = "preconnect" href =
< link rel = "preconnect" href =
< link href =
"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel = "stylesheet" >
<!-- ----------------Swiper JS------------------------------ -->
< link rel = "stylesheet" href =
</ head >
< body >
< nav >
< div class = "container nav__container" >
< a href = "./index.html" >
< img src =
style = "max-width: 150px;" >
</ a >
< ul class = "nav__menu" >
< li >< a href = "./index.html" >Home</ a ></ li >
< li >< a href = "./about.html" >About</ a ></ li >
< li >< a href = "./courses.html" >Courses</ a ></ li >
< li >< a href = "./contact.html" >Contact</ a ></ li >
</ ul >
< button id = "open-menu-btn" >
< i class = "uil uil-bars" ></ i >
</ button >
< button id = "close-menu-btn" >
< i class = "uil uil-multiply" ></ i >
</ button >
</ div >
</ nav >
<!-- ======================End Navbar================== -->
<!-- ==========================Contact Page======================== -->
< br >
< section class = "contact" >
< div class = "container contact__container" >
< aside class = "contact__aside" >
< div class = "aside__image" >
< img src =
</ div >
< h2 style = "color: gray;" >Contact Us</ h2 >
< p >
Contact us for any type of query. GeeksforGeeks 2.0
is always available to answer you.
</ p >
< ul class = "contact__details" >
< li >
< i class = "uil uil-phone-times" ></ i >
< h5 >08069289001</ h5 >
</ li >
< li >
< i class = "uil uil-envelope" ></ i >
< h5 >feedback@geeksforgeeks.org</ h5 >
</ li >
< li >
< i class = "uil uil-location-point" ></ i >
< h5 >Noida, Uttar Pradesh (201305)</ h5 >
</ li >
< li >
</ ul >
< ul class = "contact__socials" >
< li >
< a href = "" >
< i class = "uil uil-facebook-f" ></ i >
</ a >
</ li >
< li >
< a href = "" >
< i class = "uil uil-instagram" ></ i >
</ a >
</ li >
< li >
< a href = "" >
< i class = "uil uil-twitter" ></ i >
</ a >
</ li >
< li >
< a href = "" >
< i class = "uil uil-linkedin-alt" ></ i >
</ a >
</ li >
</ ul >
</ aside >
< form class = "contact__form" >
< div class = "form__name" >
< input type = "text" name = "First Name"
placeholder = "First Name" required>
< input type = "text" name = "Last Name"
placeholder = "Last Name" required>
</ div >
< input type = "email" name = "Email Address"
placeholder = "Your Email Address" required>
< textarea name = "Message" rows = "7"
placeholder = "Message" required>
</ textarea >
< button type = "submit" class = "btn btn-primary" >
Send Message
</ button >
</ form >
</ div >
</ section >
<!-- =====================End Contact Page=================================== -->
<!-- =================================Footer===================== -->
< footer >
< div class = "container footer__container" >
< div class = "footer__1" >
< a href = "./index.html" class = "footer__logo" >
< a href = "./index.html" >
< img src =
</ a >
</ a >
< p >
< i class = "uil uil-location-point" ></ i >
A-143, 9th Floor, Sovereign Corporate Tower,
Sector-136, Noida, Uttar Pradesh - 201305
</ p >
</ div >
< div class = "footer__2" >
< h4 >Explore</ h4 >
< ul class = "permalinks" >
< li >< a href = "./index.html" >Home</ a ></ li >
< li >< a href = "./about.html" >About</ a ></ li >
< li >< a href = "./courses.html" >Courses</ a ></ li >
< li >< a href = "./contact.html" >Contact</ a ></ li >
</ ul >
</ div >
< div class = "footer__3" >
< h4 >Legal</ h4 >
< ul class = "privacy" >
< li >< a href = "#" >Privacy Policy</ a ></ li >
< li >< a href = "#" >Terms and conditions</ a ></ li >
< li >< a href = "#" >Refund Policy</ a ></ li >
</ ul >
</ div >
< div class = "footer__4" >
< h4 >Contact Us</ h4 >
< div >
< p >08069289001</ p >
< p >Noida, Uttar Pradesh (201305)</ p >
</ div >
< ul class = "footer__socials" >
< li >
< a href = "#" >
< i class = "uil uil-facebook-f" ></ i >
</ a >
</ li >
< li >
< a href = "#" >
< i class = "uil uil-instagram-alt" ></ i >
</ a >
</ li >
< li >
< a href = "#" >
< i class = "uil uil-twitter" ></ i >
</ a >
</ li >
< li >
< a href = "#" >
< i class = "uil uil-linkedin-alt" ></ i >
</ a >
</ li >
</ ul >
</ div >
</ div >
< div class = "footer__copyright" >
< small >
< strong style = "color: green;" >
GeeksforGeeks 2.0
</ strong >
© All Right Reserved
</ small >
</ div >
</ footer >
<!-- ============================End Footer=========================== -->
< script src =
</ script >
< script src = "./script.js" ></ script >
</ body >
</ html >
|
HTML
<!-- --------blog html------------- --> <!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< link rel = "shortcut icon" href =
type = "image/x-icon" >
< title >GeeksforGeeks 2.0</ title >
<!-- ================ Box Icons ================ -->
< link href =
< link rel = "stylesheet" href = "./blog.css" >
< link href =
"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel = "stylesheet" >
</ head >
< body >
<!-- ===============Header=====================-->
< header >
<!-- =============Nav============ -->
< div class = "nav container" >
< img src =
id = "gfg" >
< a href = "./index.html" class = "login" >
home
</ a >
</ div >
</ header >
<!-- =========home============ -->
< section class = "home" id = "home" >
< div class = "home-text continer" >
< img src =
style = "width: 100%; height:330px" alt = "" >
< br >
< span class = "home-subtitle" >
Your source of great content
</ span >
</ div >
</ section >
<!-- ======Post Filter========== -->
< div class = "post-filter " >
< span class = "filter-item active-filter"
data-filter = 'all' >
All
</ span >
< span class = "filter-item" data-filter = "mobile" >
Development
</ span >
< span class = "filter-item" data-filter = "design" >
Language
</ span >
< span class = "filter-item" data-filter = "tech" >
Framework
</ span >
</ div >
<!-- =========Posts=========== -->
< section class = "post container" >
<!-- ========Post Box 1======== -->
< div class = "post-box mobile " >
< img src =
class = "post-img" >
< h2 class = "category" >Development</ h2 >
target = "_blank" class = "post-title" >
Web Developement Tutorial
</ a >
< p class = "post-decription" >
Web development refers to the creat-ing, building,
and maintaining of websites.It includes aspects such
as web design, web publishing, web-programming, and
database manage-ment.
</ p >
</ div >
<!-- ========Post Box 2======== -->
< div class = "post-box mobile" >
< img src =
class = "post-img" >
< h2 class = "category" >Development</ h2 >
target = "_blank" class = "post-title" >
HTML Tutorial
</ a >
< p class = "post-decription" >
This HTML Tutorial is a Complete Guide for Beginners
who want to learn HTML from basics. Here, we cover
everything from HTML fundamentals such as Basic HTML
Tags and their Attributes,
</ p >
</ div >
<!-- ========Post Box 3======== -->
< div class = "post-box mobile" >
< img src =
alt = "CSS-Tutorial" class = "post-img" >
< h2 class = "category" >Development</ h2 >
target = "_blank" class = "post-title" >
CSS Tutorial
</ a >
< p class = "post-decription" >
This CSS Tutorial is designed for both beginners and
experienced professionals. Here, you will learn CSS
from basic to advanced concepts, such as properties,
selectors, functions, media queries, and more.
</ p >
<!-- =========Profile========== -->
</ div >
</ section >
< section class = "post container" >
<!-- ========Post Box 4======== -->
< div class = "post-box mobile" >
< img src =
class = "post-img" >
< h2 class = "category" >Development</ h2 >
target = "_blank" class = "post-title" >
JavaScript Tutorial
</ a >
< p class = "post-decription" >
This JavaScript Tutorial is designed to help both
beginners and experienced professionals master the
fundamentals of JavaScript. This free tutorial covers
all JavaScript concepts.
</ p >
</ div >
<!-- ========Post Box 5======== -->
< div class = "post-box design" >
< img src =
class = "post-img" >
< h2 class = "category" >Language</ h2 >
target = "_blank" class = "post-title" >
Python Tutorial
</ a >
< p class = "post-decription" >
This Python Tutorial is very well suited for
beginners and also for experienced programmers
with other programming languages like C++ and Java.
</ p >
</ div >
<!-- ========Post Box 6======== -->
< div class = "post-box design" >
< img src =
class = "post-img" >
< h2 class = "category" >Language</ h2 >
target = "_blank" class = "post-title" >
Java Tutorial
</ a >
< p class = "post-decription" >
This Java Tutorial is designed for beginners
as well as experienced professionals. Whether
you’re looking to learn the basics of Java or
its advanced concepts, this free Java tutorial
is the perfect resource for you.
</ p >
</ div >
</ section >
< section class = "post container" >
<!-- ========Post Box 7======== -->
< div class = "post-box design" >
< img src =
class = "post-img" >
< h2 class = "category" >Language</ h2 >
target = "_blank" class = "post-title" >
C++ Tutorial
</ a >
< p class = "post-decription" >
C++ is the most used and most popular programming
language developed by Bjarne Stroustrup. C++ is a
high-level and object-oriented programming language.
</ p >
</ div >
<!-- ========Post Box 8======== -->
< div class = "post-box tech" >
< img src =
target = "_blank" class = "post-img" >
< h2 class = "category" >Framework</ h2 >
class = "post-title" >
Django Tutorial
</ a >
< p class = "post-decription" >
Django is a Python-based web framework that allows
you to quickly create efficient web applications.
It is also called batteries included framework because
Django provides built-in features for everything including
Django Admin Interface,
</ p >
</ div >
<!-- ========Post Box 9======== -->
< div class = "post-box tech" >
< img src =
class = "post-img" >
< h2 class = "category" >Framework</ h2 >
target = "_blank" class = "post-title" >
React Tutorial
</ a >
< p class = "post-decription" >
This free React tutorial is designed for people
who prefer to learn by doing. So if you are a
beginner or advanced React developer, this tutorial
will guide you through all the fundamentals to build
any React app.
</ p >
</ div >
</ section >
<!-- =========footer========= -->
< div class = "footer container" >
< p >
©
< strong style = "color: green;" >
GeeksforGeeks-2.0
</ strong >
Right Reserved
</ p >
< div class = "social" >
< a href = "#" >
< i class = 'bx bxl-facebook-circle' ></ i >
</ a >
< a href = "#" >
< i class = 'bx bxl-twitter' ></ i >
</ a >
< a href = "#" >
< i class = 'bx bxl-instagram-alt' ></ i >
</ a >
< a href = "#" >
< i class = 'bx bxl-linkedin-square' ></ i >
</ a >
</ div >
</ div >
<!-- =============JQuery Link========== -->
integrity = "sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
crossorigin = "anonymous" >
</ script >
<!-- =======================Link to Js=============== -->
< script src = "./script.js" ></ script >
< script >
// =======Filter js==============
$(document).ready(function () {
$('.filter-item').click(function () {
const value = $(this).attr("data-filter");
if (value == "all") {
$(".post-box").show("1000");
} else {
$(".post-box")
.not("." + value)
.hide("1000");
$(".post-box")
.filter("." + value)
.show("1000");
}
});
$(".filter-item").click(function () {
$(this).addClass("active-filter").
siblings().removeClass("active-filter");
});
});
const header = document.querySelector("header");
window.addEventListener("scroll", () => {
header.classList.
toggle("shadow", window.scrollY > 0);
});
</ script >
</ body >
</ html >
|
HTML
<!-- -------------------------- about.html ------------------ --> <!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< link rel = "shortcut icon" href =
type = "image/x-icon" >
< title >GeeksforGeeks 2.0</ title >
<!------------Iconscout CDN--------------------->
< link rel = "stylesheet" href =
< link rel = "stylesheet" href = "./style.css" >
< link rel = "stylesheet" href = "./about.css" >
<!-- --------------Google Fonts--------------------- -->
< link href =
"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel = "stylesheet" >
</ head >
< body >
< nav >
< div class = "container nav__container" >
< a href = "index.html" >
< img src =
style = "width: 150px;" >
</ a >
< ul class = "nav__menu" >
< li >< a href = "./index.html" >Home</ a ></ li >
< li >< a href = "./about.html" >About</ a ></ li >
< li >< a href = "./courses.html" >Courses</ a ></ li >
< li >< a href = "./contact.html" >Contact</ a ></ li >
</ ul >
< button id = "open-menu-btn" >
< i class = "uil uil-bars" ></ i >
</ button >
< button id = "close-menu-btn" >
< i class = "uil uil-multiply" ></ i >
</ button >
</ div >
</ nav >
<!-- ===================End Navbar====================== -->
< div class = "about__achievements" >
< div class = "container about__achievements-container" >
< div class = "about__achievements-left" >
< img src =
</ div >
< div class = "about__achievements-right" >
< h1 style = "color: rgb(114, 114, 114);" >
Achievements
</ h1 >
< p style = "text-align: justify;" >
GeeksforGeeks is a computer science portal founded
by Sandeep Jain in 2009. It started as a blog to share
computer science concepts and has grown into a comprehensive
platform for learning and practicing coding. It is based in
Noida, Uttar Pradesh, India. Industry: E-Learning, EdTech
Product, Services and Operations: - Provides a wide range of
articles on various topics related to computer science and
programming.
</ p >
< div class = "achievements__cards" >
< article class = "achievement_card" >
< span class = "achievement__icon" >
< i class = "uil uil-video" ></ i >
</ span >
< h2 >40+</ h2 >
< p >Courses</ p >
</ article >
< article class = "achievement_card" >
< span class = "achievement__icon" >
< i class = "uil uil-users-alt" ></ i >
</ span >
< h2 >50,000+</ h2 >
< p >Students</ p >
</ article >
< article class = "achievement_card" >
< span class = "achievement__icon" >
< i class = "uil uil-trophy" ></ i >
</ span >
< h2 >100+</ h2 >
< p >Job Opportunity</ p >
</ article >
</ div >
</ div >
</ div >
</ div >
< br >< br >
<!-- =================End Achievements======================= -->
< section class = "team" >
< h2 >GeeksforGeeks 2.0 Team</ h2 >
< div class = "container team__container" >
< article class = "team__member" >
< div class = "team__member-image" >
< img src =
</ div >
< div class = "team__member-info" >
< h4 >Sandeep Jain</ h4 >
< p >CEO @ GFG</ p >
</ div >
< div class = "team__member-socials" >
< a href = "#" target = "_blank" >
< i class = "uil uil-instagram" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-twitter-alt" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-linkedin-alt" ></ i >
</ a >
</ div >
</ article >
< article class = "team__member" >
< div class = "team__member-image" >
< img src =
</ div >
< div class = "team__member-info" >
< h4 >Chhaya Jain</ h4 >
< p >Director @ GFG</ p >
</ div >
< div class = "team__member-socials" >
< a href = "#" target = "_blank" >
< i class = "uil uil-instagram" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-twitter-alt" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-linkedin-alt" ></ i >
</ a >
</ div >
</ article >
< article class = "team__member" >
< div class = "team__member-image" >
< img src =
</ div >
< div class = "team__member-info" >
< h4 >Shikhar Goel</ h4 >
< p >CTO @ GFG</ p >
</ div >
< div class = "team__member-socials" >
< a href = "#" target = "_blank" >
< i class = "uil uil-instagram" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-twitter-alt" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-linkedin-alt" ></ i >
</ a >
</ div >
</ article >
< article class = "team__member" >
< div class = "team__member-image" >
< img src =
</ div >
< div class = "team__member-info" >
< h4 >Asihsh Jangra</ h4 >
< p >Mentor @ GFG</ p >
</ div >
< div class = "team__member-socials" >
< a href = "#" target = "_blank" >
< i class = "uil uil-instagram" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-twitter-alt" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-linkedin-alt" ></ i >
</ a >
</ div >
</ article >
< article class = "team__member" >
< div class = "team__member-image" >
< img src =
</ div >
< div class = "team__member-info" >
< h4 >Gaurav Raj</ h4 >
< p >Metor @ GFG</ p >
</ div >
< div class = "team__member-socials" >
< a href = "#" target = "_blank" >
< i class = "uil uil-instagram" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-twitter-alt" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-linkedin-alt" ></ i >
</ a >
</ div >
</ article >
< article class = "team__member" >
< div class = "team__member-image" >
< img src =
</ div >
< div class = "team__member-info" >
< h4 >Devashish Khare</ h4 >
< p >Mentor @ GFG</ p >
</ div >
< div class = "team__member-socials" >
< a href = "#" target = "_blank" >
< i class = "uil uil-instagram" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-twitter-alt" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-linkedin-alt" ></ i >
</ a >
</ div >
</ article >
< article class = "team__member" >
< div class = "team__member-image" >
< img src =
</ div >
< div class = "team__member-info" >
< h4 >Jay Dalsaniya</ h4 >
< p >Mentor @ GFG</ p >
</ div >
< div class = "team__member-socials" >
< a href = "#" target = "_blank" >
< i class = "uil uil-instagram" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-twitter-alt" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-linkedin-alt" ></ i >
</ a >
</ div >
</ article >
< article class = "team__member" >
< div class = "team__member-image" >
< img src =
</ div >
< div class = "team__member-info" >
< h4 >Karan Mashru
</ h4 >
< p >Mentor @ GFG</ p >
</ div >
< div class = "team__member-socials" >
< a href = "#" target = "_blank" >
< i class = "uil uil-instagram" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-twitter-alt" ></ i >
</ a >
< a href = "#" target = "_blank" >
< i class = "uil uil-linkedin-alt" ></ i >
</ a >
</ div >
</ article >
</ div >
</ section >
<!-- =======================End Achievements==================== -->
<!-- =================================Footer===================== -->
< footer >
< div class = "container footer__container" >
< div class = "footer__1" >
< a href = "./index.html" class = "footer__logo" >
< a href = "./index.html" >
< img src =
</ a >
</ a >
< p >
< i class = "uil uil-location-point" ></ i >
A-143, 9th Floor, Sovereign Corporate Tower,
Sector-136, Noida, Uttar Pradesh - 201305
</ p >
</ div >
< div class = "footer__2" >
< h4 >Explore</ h4 >
< ul class = "permalinks" >
< li >< a href = "./index.html" >Home</ a ></ li >
< li >< a href = "./about.html" >About</ a ></ li >
< li >< a href = "./courses.html" >Courses</ a ></ li >
< li >< a href = "./contact.html" >Contact</ a ></ li >
</ ul >
</ div >
< div class = "footer__3" >
< h4 >Legal</ h4 >
< ul class = "privacy" >
< li >
< a href = "#" >Privacy Policy</ a >
</ li >
< li >
< a href = "#" >Terms and conditions</ a >
</ li >
< li >
< a href = "#" >Refund Policy</ a >
</ li >
</ ul >
</ div >
< div class = "footer__4" >
< h4 >Contact Us</ h4 >
< div >
< p >08069289001</ p >
< p >Noida, Uttar Pradesh (201305)</ p >
</ div >
< ul class = "footer__socials" >
< li >
< a href = "#" >
< i class = "uil uil-facebook-f" ></ i >
</ a >
</ li >
< li >
< a href = "#" >
< i class = "uil uil-instagram-alt" ></ i >
</ a >
</ li >
< li >
< a href = "#" >
< i class = "uil uil-twitter" ></ i >
</ a >
</ li >
< li >
< a href = "#" >
< i class = "uil uil-linkedin-alt" ></ i >
</ a >
</ li >
</ ul >
</ div >
</ div >
< div class = "footer__copyright" >
< small >
< strong style = "color: green;" >
GeeksforGeeks 2.0
</ strong >
© All Right Reserved
</ small >
</ div >
</ footer >
<!-- ============================End Footer=========================== -->
< script src = "./script.js" ></ script >
</ body >
</ html >
|
HTML
<!-- ================= login.html============ --> <!DOCTYPE html> < html lang = "en" dir = "ltr" >
< head >
< meta charset = "utf-8" />
< title >
Login and Registration Form in HTML | GFG
</ title >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
< link rel = "stylesheet" href = "./login.css" >
</ head >
< body >
< div class = "wrapper" >
< div class = "title-text" >
< div class = "title login" >
< a href = "./index.html" class = "title login"
style = "text-decoration: none;" >
GeeksforGeeks
</ a >
</ div >
< div class = "title signup" >
< a href = "./index.html" class = "title login"
style = "text-decoration: none;" >
GeeksforGeeks
</ a >
</ div >
< br />< br />
</ div >
< div class = "form-container" >
< div class = "slide-controls" >
< input type = "radio" name = "slide" id = "login" checked />
< input type = "radio" name = "slide" id = "signup" />
< label for = "login" class = "slide login" >
Sign In
</ label >
< label for = "signup" class = "slide signup" >
Sign up
</ label >
< div class = "slider-tab" ></ div >
</ div >
< div class = "form-inner" >
< form action = "#" class = "login" >
< div class = "field" >
< label for = "" >Email Address</ label >
< input type = "text" placeholder = "" required />
</ div >
< br />
< div class = "field" >
< label >Password</ label >
< input type = "password" placeholder = "" required />
</ div >
< br />
< div class = "field btn" >
< input type = "submit" value = "Login" />
</ div >
< div class = "signup-link" >
Don't Have Account?
< a href = "" >Signup</ a >
</ div >
</ form >
< form action = "#" class = "signup" >
< div class = "field" >
< label for = "" >Full Name</ label >
< input type = "text" placeholder = "" required />
</ div >
< br />
< div class = "field" >
< label for = "" >Email Address</ label >
< input type = "email" placeholder = "" required />
</ div >
< br />
< div class = "field" >
< label for = "" >Password</ label >
< input type = "password" placeholder = "" required />
</ div >
< br />
< div class = "field btn" >
< input type = "submit" value = "Signup" />
</ div >
</ form >
</ div >
</ div >
</ div >
< script src = "./login.js" >
</ script >
</ body >
</ html >
|
CSS Files:
CSS
/* -------------------- style.css ---------------------- */ * { margin : 0 ;
padding : 0 ;
border : 0 ;
outline : 0 ;
text-decoration : none ;
list-style-type : none ;
box-sizing: border-box;
} :root { --color-primary: rgb ( 214 , 205 , 205 );
--color-success: #00bf8e ;
--color-warning: #f7c94b ;
--color-danger: rgb ( 19 , 102 , 19 );
--color-danger-varient: rgba( 247 , 88 , 66 , 0.4 );
--color-white: black ;
--color-light: rgba( 30 , 14 , 14 , 0.7 );
--color-black: #000 ;
--color-bg: white ;
--color-bg 1: rgb ( 241 , 227 , 227 );
--color-bg 2: white ;
--container-width-lg: 76% ;
--container-width-md: 90% ;
--container-width-sm: 94% ;
--transition: all 400 ms ease;
} body { font-family : "Montserrat" , sans-serif ;
line-height : 1.7 ;
color : var(--color- white );
background-color : var(--color-bg);
} .container { width : var(--container-width-lg);
margin : 0 auto ;
} section { padding : 6 rem 0 ;
} section h 2 {
text-align : center ;
margin-bottom : 4 rem;
} h 1 ,
h 2 ,
h 3 ,
h 4 ,
h 5 {
line-height : 1.2 ;
} h 1 {
font-size : 2.4 rem;
} h 2 {
font-size : 2 rem;
} h 3 {
font : 1.6 rem;
} h 4 {
font-size : 1.3 rem;
} a { color : var(--color- white );
} img { width : 100% ;
display : block ;
object-fit: cover;
} .btn { display : inline- block ;
background : white ;
color : green ;
padding : 0.7 rem 2 rem;
border : 1px solid green ;
font-weight : 500 ;
border-radius: 7px ;
transition: var(--transition);
} .btn:hover { background : green ;
color : white ;
border-color : green ;
} .btn-primary { background : transparent ;
color : green ;
} /* Navbar*/ nav { background : transparent ;
width : 100 vw;
height : 5 rem;
position : fixed ;
top : 0 ;
z-index : 11 ;
} /* change navbar styles on scroll */ .window- scroll {
background : var(--color-primary);
box-shadow: 0 1 rem 2 rem rgba( 0 , 0 , 0 , 0.2 );
} .nav__container { height : 100% ;
display : flex;
justify- content : space-between;
align-items: center ;
} nav button { display : none ;
} .nav__menu { display : flex;
align-items: center ;
gap: 4 rem;
} .nav__menu a { font-size : 1 rem;
font-weight : bold ;
transition: var(--transition);
} .nav__menu a:hover { color : green ;
} /* Header================ */ header { position : relative ;
top : 5 rem;
overflow : hidden ;
height : 70 vh;
margin-bottom : 5 rem;
} header h 1 {
color : rgb ( 63 , 60 , 60 );
} .header__container { display : grid;
grid-template-columns: 1 fr 1 fr;
align-items: center ;
gap: 5 rem;
height : 100% ;
} .header__left p { margin : 1 rem 0 2.4 rem;
} /* =Categories======= */ .categories { background : var(--color-bg 1 );
height : 32 rem;
} .categories h 1 {
line-height : 1 ;
margin-bottom : 3 rem;
color : rgb ( 93 , 87 , 87 );
} .categories__container { display : grid;
grid-template-columns: 40% 60% ;
} .categories__left { margin-right : 4 rem;
} .categories__left p { margin : 1 rem 0 3 rem;
} .categories__right { display : grid;
grid-template-columns: repeat ( 3 , 1 fr);
margin-top : -70px ;
gap: 1.2 rem;
} .category { background : var(--color-bg 2 );
padding : 2 rem;
border-radius: 2 rem;
transition: var(--transition);
border : 0.5px solid gray ;
} .category:hover { box-shadow: 0 3 rem 3 rem rgba( 0 , 0 , 0 , 0.3 );
z-index : 1 ;
} .category:nth-child( 2 ) .category__icon {
background : var(--color-danger);
} .category:nth-child( 3 ) .category__icon {
background : var(--color-success);
} .category:nth-child( 4 ) .category__icon {
background : var(--color-warning);
} .category:nth-child( 5 ) .category__icon {
background : var(--color-success);
} .category:nth-child( 6 ) .category__icon {
background : var(--color-bg 1 );
} .category__icon { background : var(--color-primary);
padding : 0.7 rem;
border-radius: 0.9 rem;
} .category h 5 {
margin : 2 rem 0 1 rem;
} .category p { font-size : 0.85 rem;
} /* ===Courses============== */ .courses { margin-top : 10 rem;
} .courses__container { display : grid;
grid-template-columns: repeat ( 3 , 1 fr);
gap: 2 rem;
} .course { background : var(--color-bg 1 );
box-shadow: 0 2 rem 2 rem rgba( 0 , 0 , 0 , 0.4 );
text-align : center ;
border : 1px solid transparent ;
transition: var(--transition);
} .course:hover { background : transparent ;
border-color : var(--color-primary);
} .course__info { padding : 2 rem;
} .course__info p { margin : 1.2 rem 0 2 rem;
font-size : 0.9 rem;
} /* FAQ */ .faqs { background : var(--color-bg 1 );
box-shadow: insert 0 0 3 rem rgba( 0 , 0 , 0 , 0.5 );
} .faqs__container { display : grid;
grid-template-columns: 1 fr 1 fr;
gap: 1 rem;
} .faq { padding : 2 rem;
display : flex;
align-items: center ;
gap: 1.0 rem;
height : fit-content;
background : rgb ( 251 , 250 , 250 );
cursor : pointer ;
} .faq h 4 {
font-size : 1 rem;
line-height : 2.2 ;
} .faq__icon { align-self: flex-start;
font-size : 1.2 rem;
} .faq p { margin-top : 0.8 rem;
display : none ;
} .faq.open p { display : block ;
} /* Testimonial */ .testimonials__container { overflow-x: hidden ;
position : relative ;
margin-bottom : 5 rem;
} .testimonial { padding-top : 2 rem;
} .avatar { width : 7 rem;
height : 7 rem;
border-radius: 50% ;
overflow : hidden ;
margin : 0 auto 0.5 rem;
border : 1 rem solid var(--color-bg);
} .testimonial__info { text-align : center ;
} .testimonial__body { background : var(--color-primary);
padding : 1.5 rem;
margin-top : 3 rem;
position : relative ;
} .testimonial__body::before { content : '' ;
display : block ;
background :
linear-gradient( 135 deg, transparent ,
var(--color-primary), var(--color-primary),
var(--color-primary));
width : 3 rem;
height : 3 rem;
left : 50% ;
top : -1.5 rem;
position : absolute ;
transform: rotate( 45 deg);
} /* =Footer=*/ footer { background : var(--color-bg 1 );
padding : 5 rem;
font-size : 0.9 rem;
} .footer__container { display : grid;
grid-template-columns: repeat ( 4 , 1 fr);
gap: 5 rem;
} .footer__container>div h 4 {
margin-bottom : 1.2 rem;
} .footer__ 1 p {
margin : 0 0 2 rem;
} footer ul li { margin-bottom : 0.7 rem;
} footer ul li a:hover { text-decoration : underline ;
} .footer__socials { display : flex;
gap: 1 rem;
font-size : 1.2 rem;
margin-top : 2 rem;
} .footer__copyright { text-align : center ;
margin-top : 4 rem;
padding : 1.2 rem 0 ;
border-top : 1px solid var(--color-bg 2 );
} /* Move Icon */ .header__right-image img { /* Set initial position */
position : relative ;
animation:
moveUpDown 2 s infinite
alternate ease-in-out;
} @keyframes moveUpDown { 0% {
transform: translateY( 0 );
/* Start position */
}
100% {
transform: translateY( 20px );
/* End position - adjust as needed */
}
} /* Move FAQ Feature */ .faq:hover { transform: scale( 1.05 );
box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 0.1 );
transition: transform 0.3 s ease, box-shadow 0.3 s ease;
} .faq { transition: transform 0.3 s ease, box-shadow 0.3 s ease;
cursor : pointer ;
} /* Media Queries (Tablets) */ @media screen and ( max-width : 1024px ) {
.container {
width : var(--container-width-md);
}
h 1 {
font-size : 2.2 rem;
}
h 2 {
font-size : 1.7 rem;
}
h 3 {
font-size : 1.4 rem;
}
h 4 {
font-size : 1.2 rem;
}
/* Navbar */
nav button {
display : inline- block ;
background : transparent ;
font-size : 1.8 rem;
color : var(--color- white );
cursor : pointer ;
}
nav button#close-menu-btn {
display : none ;
}
.nav__menu {
position : fixed ;
top : 5 rem;
right : 5% ;
height : fit-content;
width : 18 rem;
flex- direction : column;
gap: 0 ;
display : none ;
}
.nav__menu li {
width : 100% ;
height : 5.8 rem;
animation: animateNavItems 400 ms linear forwards;
transform-origin: top right ;
opacity: 0 ;
}
.nav__menu li:nth-child( 2 ) {
animation-delay: 200 ms;
}
.nav__menu li:nth-child( 3 ) {
animation-delay: 400 ms;
}
.nav__menu li:nth-child( 4 ) {
animation-delay: 600 ms;
}
@keyframes animateNavItems {
0% {
transform: rotateZ( -90 deg);
}
100% {
transform: rotateZ( 0 );
opacity: 1 ;
}
}
.nav__menu li a {
background : var(--color-primary);
box-shadow: -4 rem 6 rem 10 rem rgba( 0 , 0 , 0 , 0.6 );
width : 100% ;
height : 100% ;
display : grid;
place-items: center ;
}
.nav__menu li a:hover {
background : var(--color-bg 2 );
color : var(--color- white );
}
/* Header */
header {
height : 52 vh;
margin-bottom : 4 rem;
}
.header__container {
gap: 0 ;
padding-bottom : 3 rem;
}
/* Categories */
.categories {
height : auto ;
}
.categories__container {
grid-template-columns: 1 fr;
gap: 3 rem;
}
.categories__left {
margin-right : 0 ;
}
/* Course */
.courses {
margin-top : 0 ;
}
.courses__container {
grid-template-columns: 1 fr 1 fr;
}
/* FAQs */
.faqs__container {
grid-template-columns: 1 fr;
}
.faq {
padding : 1.5 rem;
}
/* Footer */
.footer__container {
grid-template-columns: 1 fr 1 fr;
}
} /* Media Query (Phone) */ @media screen and ( max-width : 600px ) {
.container {
width : var(--container-width-sm);
}
/* Navbar*/
.nav__menu {
right : 3% ;
}
/* Header=============== */
header {
height : 100 vh;
}
.header__container {
grid-template-columns: 1 fr;
text-align : center ;
margin-top : 0 rem;
}
.header__left p {
margin-bottom : 1.3 rem;
}
/* Category*/
.categories__right {
grid-template-columns: 1 fr 1 fr;
gap: 0.7 rem;
}
.category {
padding : 1 rem;
border-radius: 1 rem;
}
.category__icon {
margin-top : 4px ;
display : inline- block ;
}
/* Courses==================/ */
.courses__container {
grid-template-columns: 1 fr;
}
/* Testimonial=========== */
.testimonial__body {
padding : 1.2 rem;
}
/* Footer */
.footer__container {
grid-template-columns: 1 fr;
text-align : center ;
gap: 2 rem;
}
.footer__ 1 p {
margin : 1 rem auto ;
}
.footer__socials {
justify- content : center ;
}
} |
CSS
/* -------------------- contact.css ---------------------- */ .contact__container { background : var(--color-bg 1 );
padding : 4 rem;
display : grid;
grid-template-columns: 40% 60% ;
gap: 4 rem;
height : 30 rem;
margin : 7 rem auto ;
border-radius: 1 rem;
} /* ================Aside======================= */ .contact__aside { padding : 3 rem;
border-radius: 1 rem;
position : relative ;
bottom : 10 rem;
background : var(--color-bg 2 );
border : 1px solid black ;
} .aside__image { width : 12 rem;
margin-bottom : 2 rem;
} .contact__aside h 2 {
text-align : left ;
margin-bottom : 1 rem;
} .contact__aside p { font-size : 0.9 rem;
margin-bottom : 2 rem;
} .contact__details li { display : flex;
gap: 1 rem;
align-items: center ;
margin-bottom : 1 rem;
} .contact__details li { display : flex;
gap: 1 rem;
align-items: center ;
margin-bottom : 1 rem;
} .contact__socials { display : flex;
gap: 0.8 rem;
margin-top : 3 rem;
} .contact__socials a { background : var(--color-bg 1 );
padding : 0.9 rem;
border-radius: 50% ;
font-size : 1 rem;
transition: var(--transition);
} .contact__socials a:hover { background : transparent ;
} /* ==============Form============== */ .contact__form { display : flex;
flex- direction : column;
gap: 1.2 rem;
margin-right : 4 rem;
} .form__name { display : flex;
gap: 1.2 rem;
} .contact__form input[type= "text" ] {
width : 50% ;
} input, textarea { width : 100% ;
padding : 1 rem;
background : var(--color-bg);
color : var(--color- white );
font-weight : bold ;
font-size : 14px ;
} .contact__form .btn { width : max-content;
margin-top : 1 rem;
cursor : pointer ;
font-weight : bold ;
font-size : 15px ;
} /* ==================== Media Query (Tablets)============ */ @media screen and ( max-width : 1024px ) {
.contact {
padding-bottom : 0 ;
}
.contact__container {
gap: 1.5 rem;
margin-top : 3 rem;
height : auto ;
padding : 1.5 rem;
}
.contact__aside {
width : auto ;
padding : 1.5 rem;
bottom : 0 ;
}
.contact__form {
align-self: center ;
margin-right : 1.5 rem;
}
} /* ==================== Media Query (Phone)============ */ @media screen and ( max-width : 600px ) {
.contact__container {
grid-template-columns: 1 fr;
gap: 3 rem;
margin-top : 0 ;
padding : 0 ;
}
.contact__form {
margin : 0 1.5 rem 3 rem;
}
.form__name {
flex- direction : column;
}
.form__name input[type= "text" ] {
width : 100% ;
}
} |
CSS
/* -------------------- about.css ---------------------- */ /* =========================Achievements ================= */ .about__achievements { margin-top : 10 rem;
} .about__achievements-container { display : grid;
grid-template-columns: 40% 60% ;
gap: 5 rem;
} .about__achievements- right >p {
margin : 1.6 rem 0 2.5 rem;
} .achievements__cards { display : grid;
grid-template-columns: repeat ( 3 , 1 fr);
gap: 1.5 rem;
} .achievement_card { background : var(--color-bg 1 );
padding : 1.6 rem;
border-radius: 1 rem;
text-align : center ;
transition: var(--transition);
} .achievement_card:hover { background : var(--color-bg 2 );
box-shadow: 0 3 rem 3 rem rgba( 0 , 0 , 0 , 0.3 );
} .achievement__icon { background : var(--color-danger);
border-radius: 0.9 rem;
padding : 0.2 rem;
width : 55px ;
display : inline- block ;
margin-bottom : 2 rem;
font-size : 2 rem;
} .achievement_card:nth-child( 2 ) .achievement__icon {
background : var(--color-success);
} .achievement_card:nth-child( 3 ) .achievement__icon {
background : var(--color-primary);
} .achievement_card p { margin-top : 1 rem;
} /* ===========Achievement===================== */ .team { background : var(--color-bg 1 );
box-shadow: inset 0 0 3 rem rgba( 0 , 0 , 0 , 0.5 );
} .team__container { display : grid;
grid-template-columns: repeat ( 4 , 1 fr);
gap: 2 rem;
} .team__member { background : var(--color-bg 2 );
padding : 2 rem;
border : 1px solid transparent ;
transition: var(--transition);
position : relative ;
overflow : hidden ;
} .team__member:hover { background : transparent ;
border-color : var(--color-primary);
} .team__member-image img { filter: saturate( 0 );
} .team__member:hover img { filter: saturate( 1 );
} .team__member-info { text-align : center ;
margin-top : 1.4 rem;
} .team__member-info p { color : var(--color-light);
} .team__member-socials { position : absolute ;
top : 50% ;
transform: translateY( -50% );
right : -100% ;
display : flex;
flex- direction : column;
background : var(--color-primary);
border-radius: 1 rem 0 0 1 rem;
box-shadow: -2 rem 0 2 rem rgba( 0 , 0 , 0 , 0.3 );
transition: var(--transition);
} .team__member:hover .team__member-socials { right : 0 ;
} .team__member-socials a { padding : 1 rem;
} /* ================Move icon================= */ .about__achievements- left img {
position : relative ;
animation: moveUpDown 2 s infinite alternate ease-in-out;
} @keyframes moveUpDown { 0% {
transform: translateY( 0 );
/* Start position */
}
100% {
transform: translateY( 20px );
/* End position - adjust as needed */
}
} /* ====================Media Query (Tablet)=============== */ @media screen and ( max-width : 1024px ) {
.about__achievements {
margin-top : 2 rem;
}
.about__achievements-container {
grid-template-columns: 1 fr;
gap: 4 rem;
}
.about__achievements- left {
width : 80% ;
margin : 0 auto ;
}
.team__container {
grid-template-columns: repeat ( 3 , 1 fr);
gap: 1.5 rem;
}
.team__member {
padding : 1 rem;
}
} /* ===============Media Query (Phone)=============== */ @media screen and ( max-width : 600px ) {
.achievements__cards {
grid-template-columns: 1 fr 1 fr;
gap: 0.7 rem;
}
.team__container {
grid-template-columns: 1 fr 1 fr;
gap: 0.7 rem;
}
.team__member {
padding : 0 ;
}
.team__member p {
margin-bottom : 1.5 rem;
}
} |
CSS
/* blog.css */ #gfg { width : 15% ;
margin-top : -35px ;
} body { font-family : "Montserrat" , sans-serif ;
margin : 0 ;
padding : 0 ;
scroll-behavior: smooth;
scroll- padding-top : 2 rem;
box-sizing: border-box;
} /* =========Variables============= */ :root { --container- color : white ;
--second- color : green ;
--text- color : #172317 ;
--bg- color : rgb ( 250 , 243 , 243 );
} ::selection { color : var(--bg-color);
background : var(--second-color);
} a { text-decoration : none ;
} li { list-style : none ;
} img { width : 100% ;
} section { padding : 3 rem 0 2 rem;
} .container { max-width : 1068px ;
margin : auto ;
width : 100% ;
} /* ========header=======. */ header { position : fixed ;
top : 0 ;
left : 0 ;
width : 100% ;
height : 80px ;
z-index : 200 ;
} header.shadow { background : var(--bg-color);
box-shadow: 0 1px 4px gray ;
transition: 0.4 s;
} .nav { display : flex;
align-items: center ;
justify- content : space-between;
padding : 18px 0 ;
} .login { padding : 8px 14px ;
text-transform : uppercase ;
font-weight : 500 ;
border-radius: 4px ;
border : 2px solid green ;
background : transparent ;
color : green ;
margin-top : -3% ;
font-family : Arial , Helvetica , sans-serif ;
} .login:hover { background : green ;
color : white ;
transition: 0.3 s;
} .home { width : 100% ;
min-height : 440px ;
background : transparent ;
display : grid;
justify- content : center ;
align-items: center ;
} .home-text { color : rgb ( 149 , 141 , 141 );
text-align : center ;
} .home-title { font-size : 3.5 rem;
} .home-subtitle { font-size : 1 rem;
font-weight : 400 ;
} /* ====Post filter========/ */ .post-filter { display : flex;
justify- content : center ;
align-items: center ;
column-gap: 1.5 rem;
margin-top : 2 rem !important ;
} .filter-item { font-size : 0.9 rem;
font-weight : 500 ;
cursor : pointer ;
} .active-filter { background : var(--second-color);
color : var(--bg-color);
padding : 4px 10px ;
border-radius: 4px ;
} /* ==Posts====== */ .post { display : grid;
grid-template-columns:
repeat (auto-fit, minmax( 200px , auto ));
justify- content : center ;
gap: 1.5 rem;
} .post-box { background : var(--bg-color);
box-shadow: 0 1px 2px black ;
padding : 15px ;
border-radius: 0.5 rem;
} .post-img { width : 100% ;
height : 200px ;
object-fit: cover;
object- position : center ;
border-radius: 0.5 rem;
} .category { font-size : 0.9 rem;
font-weight : 500 ;
text-transform : uppercase ;
color : var(--second-color);
} .post-title { font-size : 1.2 rem;
font-weight : bold ;
color : var(--text-color);
/* ====To Remain Title In 2 Lines======= */
overflow : hidden ;
} .post-decription { line-height : 1.3 rem;
margin : 5px 0 10px ;
overflow : hidden ;
text-align : justify ;
font-size : 13px ;
} .footer { display : flex;
justify- content : space-between;
align-items: center ;
padding : 30px 0 ;
} .footer p { font-size : 0.938 rem;
} .social { display : flex;
align-items: center ;
column-gap: 1 rem;
} .social .bx { font-size : 1.4 rem;
color : var(--text-color);
} .social .bx:hover { color : var(--second-color);
transition: 0.3 s all linear;
} /* =====Past Content======== */ .post-header { width : 100% ;
height : 500px ;
background : var(--container-color);
} .post-container { max-width : 800px ;
margin : auto ;
width : 100% ;
} .header-content { display : flex;
flex- direction : column;
align-items: center ;
margin-top : 4 rem !important ;
} .back-home { color : var(--second-color);
font-size : 0.9 rem;
} .header-title { width : 90% ;
font-size : 2.6 rem;
color : var(--bg-color);
text-align : center ;
margin-bottom : 1 rem;
} .header-img { width : 100% ;
height : 420px ;
object-fit: cover;
object- position : center ;
} .post-content { margin-top : 10 rem !important ;
} .sub-heading { font-size : 1.2 rem;
} .post-text { font-size : 1 rem;
line-height : 1.7 rem;
margin : 1 rem 0 ;
text-align : justify ;
} /* ===Share==== */ .share { display : flex;
flex- direction : column;
align-items: center ;
row-gap: 1 rem;
} .share-title { font-size : 1.1 rem;
} /* =====Responsive===== */ @media ( max-width : 1060px ) {
.container {
margin : 0 auto ;
width : 95% ;
}
.home-text {
width : 100% ;
}
.login {
margin-top : 2% ;
}
#gfg {
width : 100px ;
margin-top : 1% ;
}
} @media ( max-width : 800px ) {
.nav {
padding : 14px 0 ;
}
.post-container {
margin : 0 auto ;
width : 95% ;
}
.login {
margin-top : 2% ;
}
#gfg {
width : 100px ;
margin-top : 1% ;
}
} @media( max-width : 768px ) {
.nav {
padding : 10px 0 ;
}
section {
padding : 2 rem 0 ;
}
.login {
margin-top : 2% ;
}
#gfg {
width : 100px ;
margin-top : 1% ;
}
.header-content {
margin-top : 3 rem !important ;
}
.home {
min-height : 380px ;
}
.home-title {
font-size : 3 rem;
}
.header-title {
font-size : 2 rem;
}
.header-img {
height : 370px ;
}
.post-header {
height : 435px ;
}
.post-content {
margin-top : 9 rem !important ;
}
} @media ( max-width : 570px ) {
.post-header {
height : 490px ;
}
.header-title {
width : 100% ;
}
.header-img {
height : 340px ;
}
.footer {
flex- direction : column;
row-gap: 1 rem;
padding : 20px 0 ;
text-align : center ;
}
.login {
margin-top : 2% ;
}
#gfg {
width : 100px ;
margin-top : 1% ;
}
} @media ( max-width : 396px ) {
.home-title {
font-size : 2 rem;
}
.home-subtitle {
font-size : 0.9 rem;
}
.home {
min-height : 300px ;
}
.post-box {
padding : 10px ;
}
.header-title {
font-size : 1.4 rem;
}
.login {
margin-top : 2% ;
}
#gfg {
width : 100px ;
margin-top : 1% ;
}
.header-img {
height : 240px ;
}
.post-header {
height : 335px ;
}
.post-content {
margin-top : 5 rem !important ;
}
.post-text {
font-size : 0.875 rem;
line-height : 1.5 rem;
margin : 10px 0 ;
}
} |
CSS
/* ============= login.css================ */ @import url (
* { margin : 0 ;
padding : 0 ;
box-sizing: border-box;
font-family : "Poppins" , sans-serif ;
} html, body { display : grid;
height : 100% ;
width : 100% ;
place-items: center ;
background-color : rgba( 244 , 233 , 233 , 0.5 );
} .wrapper { overflow : hidden ;
max-width : 350px ;
background : white ;
padding : 30px ;
border-radius: 5px ;
box-shadow: 0px 15px 20px rgba( 0 , 0 , 0 , 0.1 );
} .wrapper .title-text { display : flex;
width : 200% ;
} .wrapper .title { width : 50% ;
font-size : 30px ;
font-family :
"Times New Roman" , Times, serif ;
color : green ;
font-weight : 300 ;
text-align : center ;
transition: all 0.6 s;
} .wrapper .slide-controls { position : relative ;
display : flex;
border-radius: 5px ;
overflow : hidden ;
margin : 30px 0 10px 0 ;
justify- content : center ;
border : 1px solid black ;
} .slide-controls .slide { height : 100% ;
width : 100% ;
color : #fff ;
font-size : 18px ;
font-weight : 500 ;
text-align : center ;
line-height : 48px ;
cursor : pointer ;
z-index : 1 ;
transition: all 0.6 s ease;
} .slide-controls label.signup { color : #000 ;
} .slide-controls .slider-tab { position : absolute ;
height : 100% ;
width : 50% ;
left : 0 ;
z-index : 0 ;
border-radius: 4px ;
background : rgb ( 225 , 220 , 217 );
transition:
all 0.6 s cubic-bezier
( 0.68 , -0.55 , 0.265 , 1.55 );
} input[type= "radio" ] {
display : none ;
} #signup:checked~.slider-tab { left : 50% ;
} #signup:checked~label.signup { color : #fff ;
cursor : default ;
user-select: none ;
} #signup:checked~label.login { color : #000 ;
} #login:checked~label.signup { color : #000 ;
} #login:checked~label.login { cursor : default ;
user-select: none ;
} .wrapper .form-container { width : 100% ;
overflow : hidden ;
} .form-container .form-inner { display : flex;
width : 200% ;
} .form-container .form-inner form { width : 50% ;
transition:
all 0.6 s cubic-bezier
( 0.68 , -0.55 , 0.265 , 1.55 );
} .form-inner form .field { height : 50px ;
width : 100% ;
margin-top : 20px ;
} .form-inner form .field input { height : 100% ;
width : 100% ;
outline : none ;
border-radius: 10px ;
padding-left : 10px ;
border : 1px solid lightgrey;
border-bottom-width : 2px ;
transition: all 0.3 s ease;
} .form-inner form .field input:focus { border-color : green ;
} .form-inner form .field input::placeholder { color : #999 ;
transition: all 0.3 s ease;
} form .field input:focus::placeholder { color : #b3b3b3 ;
} .form-inner form .pass-link { margin-top : 5px ;
} .form-inner form .signup-link { text-align : center ;
margin-top : 30px ;
} form .btn input[type= "submit" ] {
height : 80% ;
z-index : 1 ;
position : relative ;
background : none ;
border : none ;
border : 1px solid green ;
padding-left : 0 ;
width : 40% ;
margin-left : 80px ;
border-radius: 4px ;
color : green ;
background-color : transparent ;
font-size : 18px ;
cursor : pointer ;
} form .btn:hover input[type= "submit" ] {
background-color : green ;
color : white ;
} |
JavaScript Files:
Javascript
// ================== login.js ============== const loginText = document.querySelector( ".title-text .login" );
const loginForm = document.querySelector( "form.login" );
const loginBtn = document.querySelector( "label.login" );
const signupBtn = document.querySelector( "label.signup" );
const signupLink = document.querySelector( "form .signup-link a" );
signupBtn.onclick = () => { loginForm.style.marginLeft = "-50%" ;
loginText.style.marginLeft = "-50%" ;
}; loginBtn.onclick = () => { loginForm.style.marginLeft = "0%" ;
loginText.style.marginLeft = "0%" ;
}; signupLink.onclick = () => { signupBtn.click();
return false ;
}; |
Javascript
// ================= script.js============== //change navbar styles on scroll window.addEventListener( 'scroll' , () => {
document.querySelector( 'nav' ).classList.toggle
( 'window-scroll' , window.scrollY > 0)
}) //show /hid faq answer const faqs = document.querySelectorAll( '.faq' );
faqs.forEach(faq => { faq.addEventListener( 'click' , () => {
faq.classList.toggle( 'open' );
//change icon
const icon = faq.querySelector( '.faq__icon i' );
if (icon.className === 'uil uil-plus' ) {
icon.className = 'uil uil-minus' ;
} else {
icon.className = 'uil uil-plus' ;
}
})
}); // Show / hide nav menu const menu = document.querySelector( ".nav__menu" );
const menuBtn = document.querySelector( "#open-menu-btn" );
const closeBtn = document.querySelector( "#close-menu-btn" );
menuBtn.addEventListener( 'click' , () => {
menu.style.display = "flex" ;
closeBtn.style.display = 'inline-block' ;
menuBtn.style.display = "none" ;
}); // Close nav menu const closeNav = () => { menu.style.display = "none" ;
closeBtn.style.display = 'none' ;
menuBtn.style.display = 'inline-block' ;
}; closeBtn.addEventListener( 'click' , closeNav);
// ============= Swiper ================= const swiper = new Swiper( ".mySwiper" , {
slidesPerView: 1,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination" ,
clickable: true ,
},
//when window width is >=600px
breakpoints: {
600: {
slidesPerView: 2,
}
}
}); |
Output: