forked from pranjay-poddar/Dev-Geeks
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'pranjay-poddar:main' into main
- Loading branch information
Showing
87 changed files
with
31,962 additions
and
0 deletions.
There are no files selected for viewing
Binary file added
BIN
+2.59 MB
Frontend-Projects/CSS-Headphones UI/28530-3-nike-shoes-transparent.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,20 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Document</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
| <body> | ||
| <div class="loader"> | ||
| <div class="face face1"> | ||
| <div class="circle"></div> | ||
| </div> | ||
| <div class="face face2"> | ||
| <div class="circle"></div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
Binary file not shown.
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,33 @@ | ||
|
|
||
| # Css-Headphones | ||
|
|
||
| This Project consists of a UI-UX design for a Card Holder for an E-commerce store containing the product details and even beutification element for the placard. | ||
|
|
||
|
|
||
| ## The Demo of working | ||
|
|
||
| This is how the programme looks like when done in function | ||
|
|
||
|  | ||
|
|
||
| ## Features | ||
|
|
||
| - Hover Techniques | ||
| - Use of Key Frames and Animation | ||
| - Could be used in E-Commerce sites for display of products | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| ## FAQ | ||
|
|
||
| #### Languages Used | ||
|
|
||
| Html, CSS | ||
|
|
||
| ## Authors | ||
|
|
||
| - [@Shivam Jha](https://github.com/shivam-jha2712) | ||
|
|
||
|
|
Binary file added
BIN
+217 KB
Frontend-Projects/CSS-Headphones UI/Red-Nike-shoes-premium-vector-PNG.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,39 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Boat</title> | ||
| <link rel="stylesheet" href="shoestyle.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="container"> | ||
| <div class="card"> | ||
| <div class="imgBx"><img src="Boat red phones.png" /></div> | ||
| <div class="contentBx"> | ||
| <h2>Headphones</h2> | ||
|
|
||
| <div class="size"> | ||
| <h3>model :</h3> | ||
| <span>1</span> | ||
| <span>2</span> | ||
| <span>3</span> | ||
| <span>4</span> | ||
| </div> | ||
| <div class="color"> | ||
| <h3>Color :</h3> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </div> | ||
| <a href="#">Buy Now</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |
Large diffs are not rendered by default.
Oops, something went wrong.
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,184 @@ | ||
| @import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,900&display=swap"); | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: "Poppins", sans-serif; | ||
| } | ||
| body { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| min-height: 100vh; | ||
| background: #131313; | ||
| } | ||
| .container { | ||
| position: relative; | ||
| } | ||
| .container .card { | ||
| position: relative; | ||
| width: 320px; | ||
| height: 450px; | ||
| background: #232323; | ||
| border-radius: 20px; | ||
| overflow: hidden; | ||
| } | ||
| .container .card:before { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background: #a32222; | ||
| clip-path: circle(150px at 80% 20%); | ||
| transition: 0.5s ease-in-out; | ||
| } | ||
| .container .card:hover:before { | ||
| clip-path: circle(300px at 80% -20%); | ||
| } | ||
| .container .card:after { | ||
| content: "boAt"; | ||
| position: absolute; | ||
| top: 30%; | ||
| left: -20%; | ||
| font-size: 12em; | ||
| font-weight: 800; | ||
| font-style: oblique; | ||
| color: rgba(255, 255, 255, 0.04); | ||
| } | ||
| .container .card .imgBx { | ||
| position: absolute; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| z-index: 10000; | ||
| width: 100%; | ||
| height: 220px; | ||
| transition: 0.5s; | ||
| } | ||
| .container .card:hover .imgBx { | ||
| top: 0%; | ||
| transform: translateY(0%); | ||
| } | ||
| .container .card .imgBx img { | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%) rotate(-30deg); | ||
| width: 260px; | ||
| } | ||
| .container .card .contentBx { | ||
| position: absolute; | ||
| bottom: 0; | ||
| width: 100%; | ||
| height: 100px; | ||
| text-align: center; | ||
| transition: 1s; | ||
| z-index: 10; | ||
| } | ||
| .container .card:hover .contentBx { | ||
| height: 210px; | ||
| } | ||
| .container .card .contentBx h2 { | ||
| position: relative; | ||
| font-weight: 600; | ||
| letter-spacing: 1px; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .size { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding: 8px 20px; | ||
| transition: 0.5s; | ||
| opacity: 0; | ||
| visibility: hidden; | ||
| } | ||
| .color { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding: 8px 20px; | ||
| transition: 0.5s; | ||
| opacity: 0; | ||
| visibility: hidden; | ||
| } | ||
| .size { | ||
| visibility: visible; | ||
| transition-delay: 0.6s; | ||
| } | ||
| .color { | ||
| visibility: visible; | ||
| transition-delay: 0.5s; | ||
| } | ||
| .size h3 { | ||
| color: #fff; | ||
| font-weight: 300; | ||
| font-size: 14px; | ||
| text-transform: uppercase; | ||
| letter-spacing: 2px; | ||
| margin-right: 10px; | ||
| } | ||
| .color h3 { | ||
| color: #fff; | ||
| font-weight: 300; | ||
| font-size: 14px; | ||
| text-transform: uppercase; | ||
| letter-spacing: 2px; | ||
| margin-right: 10px; | ||
| } | ||
| .size span { | ||
| width: 26px; | ||
| height: 26px; | ||
| text-align: center; | ||
| line-height: 26px; | ||
| font-size: 14px; | ||
| display: inline-block; | ||
|
|
||
| color: #111; | ||
| background: #fff; | ||
| margin: 0 5px; | ||
| transition: 0.5s; | ||
| } | ||
| .size span:hover { | ||
| background: #c02822; | ||
| } | ||
| .color span { | ||
| width: 20px; | ||
| height: 20px; | ||
| background: rgb(223, 53, 41); | ||
| border-radius: 50%; | ||
| margin: 0 5px; | ||
| cursor: pointer; | ||
| } | ||
| .color span:nth-child(2) { | ||
| background: rgb(180, 22, 22); | ||
| } | ||
| .color span:nth-child(3) { | ||
| background: rgb(255, 255, 255); | ||
| } | ||
| .color span:nth-child(4) { | ||
| background: rgb(2, 2, 2); | ||
| } | ||
| .contentBx a { | ||
| display: inline-block; | ||
| padding: 10px 20px; | ||
| background: #fff; | ||
| border-radius: 4px; | ||
| margin-top: 10px; | ||
| text-decoration: none; | ||
| font-weight: 600; | ||
| color: #111; | ||
| opacity: 0; | ||
| transform: translate(50px); | ||
| transition: 0.5s; | ||
| } | ||
| .container .card:hover .contentBx a { | ||
| opacity: 1; | ||
| transform: translateY(0px); | ||
| transition-delay: 0.75s; | ||
| } | ||
| .card:hover .size, | ||
| .card:hover .color { | ||
| opacity: 1; | ||
| } |
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,85 @@ | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| background: #060606; | ||
| } | ||
| .loader { | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| width: 200px; | ||
| height: 200px; | ||
| box-sizing: border-box; | ||
| background: #000; | ||
| } | ||
| .loader .face { | ||
| position: absolute; | ||
| border: 2px solid #121212; | ||
| } | ||
| .loader .face.face1 { | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background: #090909; | ||
| box-shadow: 0 0 10px rgba(0, 0, 0, 1); | ||
| border-radius: 50%; | ||
| border-left: 2px solid #ffff00; | ||
| border-top: 2px solid #ffff00; | ||
| animation: animate 3s linear infinite; | ||
| } | ||
| .loader .face.face2 { | ||
| top: 30px; | ||
| left: 30px; | ||
| right: 30px; | ||
| bottom: 30px; | ||
| background: #090909; | ||
| box-shadow: 0 0 10px rgba(0, 0, 0, 1); | ||
| border-radius: 50%; | ||
| border-right: 2px solid #03a9f4; | ||
| border-bottom: 2px solid #03a9f4; | ||
| animation: animate 3s linear reverse infinite; | ||
| } | ||
| .loader .face .circle { | ||
| position: absolute; | ||
| top: calc(50% - 1px); | ||
| left: 50%; | ||
| width: 50%; | ||
| height: 2px; | ||
| transform-origin: left; | ||
| } | ||
| .loader .face.face1 .circle { | ||
| transform: rotate(-45deg); | ||
| } | ||
| .loader .face.face2 .circle { | ||
| transform: rotate(-45deg); | ||
| } | ||
| .loader .face .circle:before { | ||
| content: ""; | ||
| position: absolute; | ||
| width: 10px; | ||
| height: 10px; | ||
| border-radius: 50%; | ||
| background: #fff; | ||
| top: -4px; | ||
| right: -6px; | ||
| } | ||
| .loader .face.face1 .circle:before { | ||
| background: #ff0; | ||
| box-shadow: 0 0 20px #ff0, 0 0 40px #ff0, 0 0 60px #ff0, 0 0 80px #ff0, | ||
| 0 0 100px #ff0, 0 0 5px rgba(255, 255, 0, 0.1); | ||
| } | ||
| .loader .face.face2 .circle:before { | ||
| background: #03a9f4; | ||
| box-shadow: 0 0 20px #03a9f4, 0 0 40px #03a9f4, 0 0 60px #03a9f4, | ||
| 0 0 80px #03a9f4, 0 0 100px #03a9f4, 0 0 5px rgba(3, 169, 244, 0.1); | ||
| } | ||
| @keyframes animate { | ||
| 0% { | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| transform: rotate(360deg); | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.