-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9 from dropways/development
New card UI added
- Loading branch information
Showing
9 changed files
with
700 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| **Card UI - 04** | ||
| ========= | ||
|
|
||
| ### [Demo](https://dropways.github.io/card-ui/cards/card-04) | ||
|
|
||
| [](https://dropways.github.io/card-ui/cards/card-04/) | ||
|
|
||
| ## Note | ||
| **For Dropdown and other javascript action we used** | ||
|
|
||
| [](https://alpinejs.dev/) | ||
|
|
||
| **Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".** |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| .card{ | ||
| background: #ffffff; | ||
| border-radius: 20px; | ||
| max-width: 360px; | ||
| width: 100%; | ||
| margin: 0 auto; | ||
| } | ||
| .card__header{ | ||
| padding: 24px; | ||
| } | ||
| .card__footer{ | ||
| padding: 24px; | ||
| color: #000000; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| } | ||
| .card__body ul{ | ||
| display: grid; | ||
| grid-template-columns: repeat(2, 1fr); | ||
| grid-template-rows: repeat(2, 1fr); | ||
| grid-column-gap: 5px; | ||
| grid-row-gap: 5px; | ||
| } | ||
| .card__body ul li{ | ||
| position: relative; | ||
| padding-bottom: 100%; | ||
| } | ||
| .card__body ul img{ | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| left: 0; | ||
| top: 0; | ||
| object-fit: cover; | ||
| } | ||
|
|
||
| /* User Info Style */ | ||
| .user-info{ | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .user-info .avatar{ | ||
| width: 60px; | ||
| flex-shrink: 0; | ||
| margin-right: 12px; | ||
| } | ||
| .user-info .avatar .img-box{ | ||
| width: 60px; | ||
| height: 60px; | ||
| border-radius: 100%; | ||
| } | ||
| .user-info .avatar img{ | ||
| width: 100%; | ||
| height: 100%; | ||
| border-radius: 100%; | ||
| object-fit: cover; | ||
| } | ||
| .user-info .name{ | ||
| width: 100%; | ||
| font-size: 15px; | ||
| color: #78858F; | ||
| font-weight: 500; | ||
| } | ||
| .user-info .name span{ | ||
| display: block; | ||
| color: #000000; | ||
| font-size: 20px; | ||
| } | ||
| .user-info .user-dd{ | ||
| flex-shrink: 0; | ||
| margin-left: 12px; | ||
| } | ||
|
|
||
|
|
||
| /* Dropdown Style Start */ | ||
| .dd{ | ||
| position: relative; | ||
| } | ||
| .dd__btn{ | ||
| border: 0; | ||
| background: transparent; | ||
| width: 42px; | ||
| height: 42px; | ||
| font-size: 24px; | ||
| line-height: 1; | ||
| color: #000000; | ||
| cursor: pointer; | ||
| } | ||
| .dd__menu{ | ||
| position: absolute; | ||
| top: 100%; | ||
| right: 0; | ||
| background: #010101; | ||
| border-radius: 8px; | ||
| padding: 8px 0; | ||
| z-index: 12; | ||
| } | ||
| .dd__item{ | ||
| display: flex; | ||
| align-items: center; | ||
| width: 100%; | ||
| font-size: 14px; | ||
| line-height: 24px; | ||
| font-weight: 500; | ||
| color: #eaeaea; | ||
| padding: 8px 24px; | ||
| transition: all .3s ease-in-out; | ||
| } | ||
| .dd__item__icon{ | ||
| flex-shrink: 0; | ||
| font-size: 24px; | ||
| line-height: 1; | ||
| margin-right: 16px; | ||
| } | ||
| .dd__item:hover{ | ||
| color: #FF3C78; | ||
| } | ||
|
|
||
| /* Card Button Style */ | ||
| .card__btn{ | ||
| display: inline-block; | ||
| cursor: pointer; | ||
| font-size: 14px; | ||
| line-height: 20px; | ||
| font-weight: 500; | ||
| text-transform: uppercase; | ||
| padding: 8px 15px; | ||
| background: #2D2B46; | ||
| color: #ffffff; | ||
| border: 0; | ||
| border-radius: 4px; | ||
| } | ||
| .card__btn:hover{ | ||
| color: #ffffff; | ||
| } | ||
|
|
||
| .card__price{ | ||
| font-size: 20px; | ||
| color: #000000; | ||
| font-weight: 700; | ||
| } |
Oops, something went wrong.