Welcome to my repository where I tackle challenges from Frontend Mentor. Frontend Mentor provides real-world coding challenges that help developers improve their coding skills by building realistic projects.
This repository is a collection of my solutions to various Frontend Mentor challenges. Each challenge is an opportunity to practice and refine my web development skills including HTML, CSS, JavaScript, and various frameworks and libraries.
NEWBIE
- 3 Column Preview Card
- Article Preview Component
- Base Apparel coming soon
- Blog Card
- Equalizer Landing page
- FAQ Accordion
- Four Card Feature
- Huddle Landing Page
- Intro Component with Sign-up Form
- Interactive Rating Component
- NFT Preview Card
- Order Summary Component
- Ping Coming Soon
- Product Preview Card
- Profile Card component
- QR Code
- Recipe Page
- Result Summary
- Single Price Grid Component
- Skilled E-Learning landing page
- Social Links Profile
- Social Proof Section
- Stats Preview Card
- Workit Landing page
JUNIOR
- Advice Generator
- Age Calculator
- Bento Grid
- Blogr Landing Page
- Crowd Funding product page
- Contact Form
- Coding bootcamp testimonial
- Clipboard Landing Page
- Expense Chart
- Fylo Data Storage Component
- Fylo Dark them Landing Page
- Github User Search
- Huddle Landing Page With curved
- Huddle Landing Page With Feature blocks
- Loopstudio Landing page
- Insure Landing Page
- Interactive Card Details
- Interactive Pricing Component
- Intro Section with Dropdown Menue
- Mortgage repayment calculator
- Newsletter Subscription
- News Homepage
- Notification Page
- Pricing Component with Toggle
- Product List with cart
- Project Tracking Intro
- Skilled Elearning Landing page
- Sunnyside agency landing page
- Testimonials Grid Section
- Time Tracking Dashboard
- Tip Calculator
INTERMEDIATE
Below is a list of Frontend Mentor challenges I have completed.
Feel free to fork this repository and submit pull requests to contribute to these challenges. You can also open issues to discuss potential improvements or any bugs you find.
If you have any questions, feel free to contact me.
Copy this and Get my message
<h1 class="info">Mahmood Hashemi <br> Mobile and Web Developer</h1>
<div class="container"><h1 id="message">Happy Coding!</h1></div> .info{
position: fixed;
color: rgb(255, 255, 255);
font-family: sans-serif;
letter-spacing: 5px;
bottom: 20%;
line-height: 2;
opacity: 0.4;
text-align: center;
}
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #282c34;
color: #61dafb;
font-family: Arial, sans-serif;
background-image:
}
.container {
text-align: center;
animation: fadeIn 5s ease-in-out infinite;
}
@keyframes fadeIn {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}document.addEventListener('DOMContentLoaded', function() {
const message = document.getElementById('message');
let opacity = 0;
let direction = 1;
setInterval(() => {
if (opacity >= 1) direction = -1;
else if (opacity <= 0) direction = 1;
opacity += direction * 0.01;
message.style.opacity = opacity;
}, 50);
});