news-homepage
所属分类:前端开发
开发工具:CSS
文件大小:3412KB
下载次数:0
上传日期:2022-11-03 12:29:44
上 传 者:
sh-1993
说明: 这是我对Frontend Mentor上新闻主页(Figma设计到代码)的解决方案。
(This is my solution to the News Homepage (Figma design to Code) on Frontend Mentor.)
文件列表:
LICENSE (35149, 2022-11-03)
design (0, 2022-11-03)
design\active-states.jpg (113444, 2022-11-03)
design\desktop-design.jpg (112467, 2022-11-03)
design\desktop-preview.jpg (92103, 2022-11-03)
design\mobile-design.jpg (89202, 2022-11-03)
design\mobile-menu.jpg (16322, 2022-11-03)
images (0, 2022-11-03)
images\burger-menu.svg (30917, 2022-11-03)
images\favicon-32x32.png (1063, 2022-11-03)
images\icon-menu-close.svg (232, 2022-11-03)
images\icon-menu.svg (184, 2022-11-03)
images\image-gaming-growth.jpg (5494, 2022-11-03)
images\image-retro-pcs.jpg (12173, 2022-11-03)
images\image-top-laptops.jpg (8504, 2022-11-03)
images\image-web-3-desktop.jpg (90289, 2022-11-03)
images\image-web-3-mobile.jpg (56144, 2022-11-03)
images\logo.svg (2008, 2022-11-03)
index.html (5489, 2022-11-03)
screenshot (0, 2022-11-03)
screenshot\screenshot-desktop.png (1808915, 2022-11-03)
screenshot\screenshot-mobile.png (1172696, 2022-11-03)
style-guide.md (513, 2022-11-03)
style.css (7195, 2022-11-03)
style.min.css (4882, 2022-11-03)
# 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)
- [Useful resources](#useful-resources)
- [Author](#author)
### Screenshot
![](./screenshot/screenshot-desktop.png)
### Links
- Solution URL: [Frontend Mentor Solution](https://www.frontendmentor.io/solutions/news-homepage-vanilla-css-sHSnXlmlvh)
- Live Site URL: [Live Site at Vercel](https://news-homepage-ten.vercel.app/)
## My process
### Built with
- Semantic HTML5 markup
- Flexbox
- Grid
- Responsive Design
- CSS Animations
- Media queries
### What I learned
This challenge was amazing to sharp my 'grid-template-area' skills and work with complex grid layouts.
### Useful resources
- [Grid Areas by THE Net Ninja](https://www.youtube.com/watch?v=tPosqmwIx0w) - An amazing tutorial to learn how to work and build grid structures with grid template areas.
- [Grid Areas by Kevin Powell](https://www.example.com) - A complete and in depth guide about GRID and grid-template-areas.
## Author
- Github - [correlucas](https://github.com/correlucas/)
- Frontend Mentor - [@correlucas](https://www.frontendmentor.io/profile/correlucas)
近期下载者:
相关文件:
收藏者: