https://github.com/coder-abdo/front-end-mentor-news-challenge
https://github.com/coder-abdo/front-end-mentor-news-challenge
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/coder-abdo/front-end-mentor-news-challenge
- Owner: coder-abdo
- Created: 2024-06-24T20:19:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-24T20:32:24.000Z (about 1 year ago)
- Last Synced: 2025-01-14T11:58:20.051Z (6 months ago)
- Language: HTML
- Size: 1.63 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - News homepage solution
This is a solution to the [News homepage challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/news-homepage-H6SWTa1MFl). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
### Screenshot
### Links
- Solution URL: [Frontend mentor solution URL](https://www.frontendmentor.io/solutions/news-home-page-G92qLe5OZp)
- Live Site URL: [Github pages live site URL](https://coder-abdo.github.io/front-end-mentor-news-challenge/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- JS
### What I learned
```html
```
```css
.article-body {
flex-basis: 60%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
h3 {
color: var(--Soft-red);
font-size: 3rem;
font-weight: 800;
}
h4 {
color: var(--Very-dark-blue);
font-size: 1.8rem;
&:hover {
color: var(--Soft-red);
cursor: pointer;
}
}
p {
color: var(--Grayish-blue);
}
}
```
```js
menuButton.addEventListener("click", () => {
menu.classList.add("show");
overlay.classList.add("show");
});
closeButton.addEventListener("click", () => {
menu.classList.remove("show");
overlay.classList.remove("show");
});
```
### Continued development
I have continued development on this project. I'm currently working on the challenge's solution and am using it as a starting point for this project.
## Author
- Website - [my portfolio](https://abdelmonaem-portfolio.vercel.app/)
- Frontend Mentor - [@coder-abdo](https://www.frontendmentor.io/profile/coder-abdo)