Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I have updated #738

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+219 −176
Open

I have updated #738

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
351 changes: 176 additions & 175 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,195 +1,196 @@
<!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" />
<link rel="shortcut icon" type="image/jpg" href="/images/clipboard.png" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Frontend Projects | Rajeev</title>
<link rel="icon" type="image/x-icon" href="01-Community-Card/images/favlogo.png">
</head>
<body>

<!-- Scroll-to-Top Button -->
<button class="scroll-up-btn">
<i class="arrow-up"></i>
</button>

<!-- Header with Navbar -->
<nav class="navbar">
<div class="logo">
<img src="logo.png" alt="Logo">
<a href="#">Frontend Mentor</a>

<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" />
<link rel="shortcut icon" type="image/jpg" href="/images/clipboard.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Frontend Projects | Rajeev</title>
<link rel="icon" type="image/x-icon" href="01-Community-Card/images/favlogo.png">
</head>

<body>

<!-- Scroll-to-Top Button -->
<button class="scroll-up-btn">
<i class="arrow-up"></i>
</button>

<!-- Header with Navbar -->
<nav class="navbar">
<div class="logo">
<img src="logo.png" alt="Logo">
<a href="#">Frontend Mentor</a>
</div>
<div class="navbar-function">
<div class="nav-elements">
<a href="#">Home</a>
<a href="#">Project</a>
<a href="#">Challenge</a>
</div>
<div class="navbar-function">
<div class="nav-elements">
<a href="#">Home</a>
<a href="#">Project</a>
<a href="#">Challenge</a>
</div>
<div class="nav-buttons">
<a href="signUp.html"><button class="btn-1">Sign Up</button></a>
<a href="login.html"><button class="btn-2">Login</button></a>
</div>
<div class="gitstatus">
<a href="https://github.com/beRajeevKumar/Frontend_Mentor">
<i class="fab fa-github"></i></a>
</div>
<div class="nav-buttons">
<a href="signUp.html"><button class="btn-1">Sign Up</button></a>
<a href="login.html"><button class="btn-2">Login</button></a>
</div>
<div class="menu-toggle">
<span></span>
<span></span>
<span></span>
<div class="gitstatus">
<a href="https://github.com/beRajeevKumar/Frontend_Mentor">
<i class="fab fa-github"></i></a>
</div>
</div>
<div class="menu-toggle">
<span></span>
<span></span>
<span></span>
</div>
</nav>



<!-- Main Content -->
<main>
<section>
<h2 id="Projects" class="">Projects</h2>
<ul id="list" class="list"></ul>
</section>

<!-- FAQs Section -->
<section class="faq-section">
<h2>FAQs</h2>
<div class="faq">
<button class="accordion">
Can I use these projects in my portfolio?
</button>
<div class="panel">
<p>
Definitely! Please do feel free to use whatever you build in your
portfolio. Frontend Mentor is an excellent platform for front-end
developers who want to improve their skills and build real-world
projects.
</p>
</div>
</div>

<div class="faq">
<button class="accordion">Can I take the challenges as a beginner?</button>
<div class="panel">
<p>
For sure! Our challenges have different levels of difficulty. We'd
recommend starting with the newbie ones. You might also want to
start with the HTML & CSS only challenges first. As you build up
your skills and confidence, you can take on more complex projects.
</p>
</div>
</div>
<!-- Main Content -->
<main>
<section>
<h2 id="Projects" class="">Projects</h2>
<ul id="list" class="list"></ul>
</section>
<!-- Load Feature -->

<div class="button-wrap">
<button id="load-more">Load More</button>
</div>

<div class="faq">
<button class="accordion">How do I start?</button>
<div class="panel">
<p>
To start a challenge, click the eye button on the challenge page.
This will take you to the Challenge, where you can go through the
design. We'd recommend starting with one of our newbie level
challenges. You can then work your way up from there.
</p>
</div>

<!-- FAQs Section -->
<section class="faq-section">
<h2>FAQs</h2>
<div class="faq">
<button class="accordion">
Can I use these projects in my portfolio?
</button>
<div class="panel">
<p>
Definitely! Please do feel free to use whatever you build in your
portfolio. Frontend Mentor is an excellent platform for front-end
developers who want to improve their skills and build real-world
projects.
</p>
</div>
</div>

<div class="faq">
<button class="accordion">Can I use libraries/frameworks on these projects?</button>
<div class="panel">
<p>
Yes! Our challenges provide professional designs but there are no
rules on what tools to use. So feel free to use anything you like
to build your projects.
</p>
</div>
<div class="faq">
<button class="accordion">Can I take the challenges as a beginner?</button>
<div class="panel">
<p>
For sure! Our challenges have different levels of difficulty. We'd
recommend starting with the newbie ones. You might also want to
start with the HTML & CSS only challenges first. As you build up
your skills and confidence, you can take on more complex projects.
</p>
</div>
</div>

<div class="faq">
<button class="accordion">Is it free?</button>
<div class="panel">
<p>
The majority of our challenges are free, yes. It will say on each
challenge whether they are free or premium, so it's easy to tell
the difference.
</p>
</div>
<div class="faq">
<button class="accordion">How do I start?</button>
<div class="panel">
<p>
To start a challenge, click the eye button on the challenge page.
This will take you to the Challenge, where you can go through the
design. We'd recommend starting with one of our newbie level
challenges. You can then work your way up from there.
</p>
</div>
</section>
</main>

<!-- Footer -->
<footer class="footer">
<div class="footer-section">
<h1>Contact Us</h1>
<ul class="footer-list">
<li>
<a href="mailto:[email protected]">[email protected]</a>
</li>
<li>2nd Floor, Bandra West, Mumbai, Maharashtra 400050, India</li>
<li><a href="tel:+91xxxxxxxx2020">+91 xxxxxx2020</a></li>
<li class="border-list"></li>
<li class="socials">
<a href="https://www.linkedin.com/in/berajeevkumar/" id="linkedin" target="_blank">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="https://github.com/beRajeevKumar/Frontend_Mentor" id="github" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://x.com/be_rajeevkumar" id="twitter" target="_blank">
<i class="fa-brands fa-x-twitter"></i>
</a>
<a href="https://www.instagram.com/your_instagram" id="instagram" target="_blank">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
</ul>
</div>

<div class="footer-section">
<h1>Quick Links</h1>
<ul class="footer-list">
<li><a href="about.html">About Us</a></li>
<li><a href="/terms-conditions">Terms & Conditions</a></li>
<li><a href="/return-policy">Return Policy</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<div class="faq">
<button class="accordion">Can I use libraries/frameworks on these projects?</button>
<div class="panel">
<p>
Yes! Our challenges provide professional designs but there are no
rules on what tools to use. So feel free to use anything you like
to build your projects.
</p>
</div>
</div>

<div class="footer-section">
<h1>Subscribe to Newsletter</h1>
<ul class="footer-list">
<li>
Get the latest updates, exclusive offers, and industry insights
delivered straight to your inbox.
</li>
<li class="sub">
<input type="text" placeholder="Enter your email" />
<button class="btn-sub">Subscribe</button>
</li>
</ul>
<div class="faq">
<button class="accordion">Is it free?</button>
<div class="panel">
<p>
The majority of our challenges are free, yes. It will say on each
challenge whether they are free or premium, so it's easy to tell
the difference.
</p>
</div>
</div>
</footer>
</section>
</main>

<!-- Footer -->
<footer class="footer">
<div class="footer-section">
<h1>Contact Us</h1>
<ul class="footer-list">
<li>
<a href="mailto:[email protected]">[email protected]</a>
</li>
<li>2nd Floor, Bandra West, Mumbai, Maharashtra 400050, India</li>
<li><a href="tel:+91xxxxxxxx2020">+91 xxxxxx2020</a></li>
<li class="border-list"></li>
<li class="socials">
<a href="https://www.linkedin.com/in/berajeevkumar/" id="linkedin" target="_blank">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="https://github.com/beRajeevKumar/Frontend_Mentor" id="github" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://x.com/be_rajeevkumar" id="twitter" target="_blank">
<i class="fa-brands fa-x-twitter"></i>
</a>
<a href="https://www.instagram.com/your_instagram" id="instagram" target="_blank">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
</ul>
</div>

<div class="footer-section">
<h1>Quick Links</h1>
<ul class="footer-list">
<li><a href="about.html">About Us</a></li>
<li><a href="/terms-conditions">Terms & Conditions</a></li>
<li><a href="/return-policy">Return Policy</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

<div class="footer-section">
<h1>Subscribe to Newsletter</h1>
<ul class="footer-list">
<li>
Get the latest updates, exclusive offers, and industry insights
delivered straight to your inbox.
</li>
<li class="sub">
<input type="text" placeholder="Enter your email" />
<button class="btn-sub">Subscribe</button>
</li>
</ul>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="index.js"></script>
<script src="script.js"></script>
</body>

<script src="script.js"></script>
</body>
</html>
</html>
15 changes: 15 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const tl = gsap.timeline()
tl.from(".logo", {
y: -30,
delay: 1,
duration: 1,
opacity: 0
})
tl.from("div a", {
y: -30,
delay: 1,
duration: 1,
opacity: 0,
stagger: 1
})

1 change: 0 additions & 1 deletion script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
"use strict";

// Correct projects numbering (Removed duplicate "23" key)
const projects = [
{ name: "01-Community-Card", tags: ["HTML", "CSS"] },
{ name: "02-qr-code-component", tags: ["HTML", "CSS", "JavaScript"] },
Expand Down
Loading
Loading