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
- Blog Card
- FAQ Accordion
- Four Card Feature
- Huddle Landing Page
- Intro Component with Sign-up Form
- NFT Preview Card
- Order Summary Component
- Ping Coming Soon
- Product Preview Card
- QR Code
- Rating Card Component
- Recipe Page
- Result Summary
- Single Price Grid Component
- Social Links Profile
- Social Proof Section
- Stats Preview Card
JUNIOR
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);
});