https://github.com/binhnhu1409/fs13_css_sass
https://github.com/binhnhu1409/fs13_css_sass
css dark-theme flex-layout grid-layout hover-effects html scss theme
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/binhnhu1409/fs13_css_sass
- Owner: binhnhu1409
- Created: 2022-12-04T14:57:32.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-07T16:40:02.000Z (over 3 years ago)
- Last Synced: 2025-03-24T04:33:11.330Z (about 1 year ago)
- Topics: css, dark-theme, flex-layout, grid-layout, hover-effects, html, scss, theme
- Language: SCSS
- Homepage: fs-13-css-sass.vercel.app
- Size: 6.35 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :computer: A landing page - dark theme :computer:
In this project, I was trying to imitate a similar landing webpage as in this [link](https://maido-dark.fueko.net/).
Visit my work [here](https://fs-13-css-sass.vercel.app/)
## Tasks haven been done (max 4)
1. Floating the HTML elements using Flexbox and Grid system
2. Implementing basic animations as shown in the [webpage](https://maido-dark.fueko.net/) (hover effect,
active link styles, typing effect).
3. Implement codes using Vercel.
4. Using SCSS (made use of variables, @mixin, @extend)
## Tech stacks
- CSS/SCSS (made use of grid and flexbox layout as well as transition and animation)
- HTML
## Project structure
```
.
│ package.json
│ README.md
└───src
│ index.html
├───assets (contain images)
├───compiled
│ style.css
│ style.css.map
└───styles
│ style.scss
│
├───abstract
│ _mixins.scss
│ _variables.scss
│
├───base
│ _animation.scss
│ _typography.scss
│
└───layout
_articles.scss
_footer.scss
_header.scss
_old_posts.scss
_pinned_posts.scss
_subscribe.scss
```