Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luzefiru/modern-design-landing-page
A landing page for a mockup company: Modern Design, a brand, web, and graphic design company.
https://github.com/luzefiru/modern-design-landing-page
Last synced: 4 days ago
JSON representation
A landing page for a mockup company: Modern Design, a brand, web, and graphic design company.
- Host: GitHub
- URL: https://github.com/luzefiru/modern-design-landing-page
- Owner: Luzefiru
- Created: 2023-03-06T08:41:45.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-07T12:23:28.000Z (almost 2 years ago)
- Last Synced: 2024-11-09T20:12:54.346Z (2 months ago)
- Language: CSS
- Size: 260 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# modern-design-landing-page
A landing page for a mockup company: Modern Design, a brand, web, and graphic design company.
## Navbar with Vanilla HTML/CSS
```HTML
```
```CSS
.dropdown {
position: relative;
}
.dropdown__contents {
display: none; /* changes to flex when you hover on dropdown div */
position: absolute; /* set the parent dropdown menu div as position: relative; */
background-color: var(--surface);
flex-direction: column;
}
.dropdown:hover .dropdown__contents {
display: flex;
}
```
```CSS
.dropdown-icon {
width: 1.5rem;
height: 1.5rem;
background: url(../res/menu-right.svg) no-repeat;
position: relative;
top: 0.5px;
}
.dropdown:hover .dropdown-icon {
background: url(../res/menu-down.svg) no-repeat;
top: 0;
}
```
## My Favorite Miscellaneous Code Snippets
1. My Favorite Navbar Settings
```CSS
nav {
height: 76px; /* 64px works too */
background-color: var(--surface);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 3rem;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
```
2. This Clips Top `box-shadow`
```CSS
.dropdown__contents {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
clip-path: inset(0px -10px -10px -10px);
/* clips anything starting from the top, but allows 10px on all other sides */
}
```
3. This Creates a Small Indicator For Navbar Links
```CSS
.selected::after {
position: absolute;
content: '';
width: 12ch;
height: 2px;
border-bottom: 5px var(--primary) solid;
border-radius: 24px 24px 0 0;
bottom: 0;
}
```