A Pen by Bianca O. Uche on CodePen.
Created
February 12, 2022 09:28
-
-
Save Erudite885/f225bee4c300d3b10025ff89e64d5cd6 to your computer and use it in GitHub Desktop.
NFT Preview Card Component
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
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> | |
| <title>Frontend Mentor | NFT preview card component</title> | |
| </head> | |
| <body> | |
| <div class="card"> | |
| <div class="img_container"> | |
| <div class="img-section"> <img class="img-section" src="https://oneofthedevs.github.io/codepen-hosted-images/NFT_card_preview_component/images/image-equilibrium.jpg" alt="NFT image"> | |
| <div class="overlay"></div> | |
| <div class= "view_overlay"> <svg width="48" height="48" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h48v48H0z"/><path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z" fill="#FFF" fill-rule="nonzero"/></g></svg></div> | |
| </div> | |
| </div> | |
| <div class="main"> | |
| <header class="header_text">Equilibrium #3429</header> | |
| <p class="para"> Our Equilibrium collection promotes balance and calm.</p> | |
| <div class="section_div"> | |
| <div class="section_div-child_one"> | |
| <img src="https://oneofthedevs.github.io/codepen-hosted-images/NFT_card_preview_component/images/icon-ethereum.svg" alt="ETH symbol"><p class="eth_color "> 0.041 ETH</p> | |
| </div> | |
| <div class="section_div-child_two"> | |
| <img src="https://oneofthedevs.github.io/codepen-hosted-images/NFT_card_preview_component/images/icon-clock.svg" alt="clock img"> | |
| <p class="">3 days left</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="profile_link"> | |
| <img class="creator-img" src="https://oneofthedevs.github.io/codepen-hosted-images/NFT_card_preview_component/images/image-avatar.png" alt="" /> | |
| <p class="creator-tag">Creation of <span>Jules Wyvern</span></p> | |
| </div> | |
| </div> | |
| <footer class="attribution"> | |
| Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. | |
| Coded by <a href="#">Bianca Uche</a>. | |
| </footer> | |
| </body> |
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
| @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=PT+Sans&display=swap"); | |
| :root{ | |
| --color-softBlue: hsl(215, 51%, 70%); | |
| --color-cyan: hsl(178, 100%, 50%); | |
| --color-darkBlue1: hsl(217, 54%, 11%); // (main BG) | |
| --color-darkBlue2: hsl(216, 50%, 16%); // (card BG) | |
| --color-darkBlue3: hsl(215, 32%, 27%); // (line) | |
| --color-white: hsl(0, 0%, 100%); | |
| } | |
| * { | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| font-family: "Outfit", sans-serif; | |
| font-size:18x; | |
| } | |
| body{ | |
| width:100vw; | |
| height:100vh; | |
| position: relative; | |
| display: flex; | |
| flex-direction:column; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: var(--color-darkBlue1); | |
| font-family: "Outfit", sans-serif; | |
| } | |
| .card{ | |
| width: 320px; | |
| max-width:375px; | |
| min-width:320px; | |
| padding: 1rem; | |
| margin: auto; | |
| display:flex; | |
| flex-direction:column; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 0.8rem; | |
| background-color: /* */ hsl(216, 50%, 16%); | |
| box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5); | |
| } | |
| img_container { | |
| position: relative; | |
| margin: auto; | |
| width: 100%; | |
| } | |
| .img-section{ | |
| position:relative; | |
| width:100%; | |
| border-radius:10px; | |
| margin-bottom:1rem; | |
| cursor:pointer; | |
| } | |
| .overlay { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 288px; | |
| width: 288px; | |
| opacity: 0; | |
| background-color:/* */ hsl(178, 100%, 50%); | |
| border-radius: 10px; | |
| } | |
| .view_overlay { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| text-align: center; | |
| display: none; | |
| } | |
| .img_container:hover .overlay { | |
| opacity: 0.5; | |
| cursor: pointer; | |
| } | |
| .img_container:hover .overlay + .view_overlay { | |
| display: block; | |
| } | |
| .header_text{ | |
| color: hsl(0, 0%, 100%); | |
| margin-bottom:0.8rem; | |
| font-weight:400; | |
| } | |
| .header_text:active, .header_text:hover { | |
| color: hsl(178, 100%, 50%); | |
| cursor:pointer; | |
| } | |
| p { | |
| color: hsl(215, 51%, 70%); | |
| } | |
| .eth_color{ | |
| color: hsl(178, 100%, 50%); | |
| font-weight: 600; | |
| align-item:center; | |
| } | |
| .section_div{ | |
| display: flex; | |
| flex-direction:row; | |
| justify-content: space-between; | |
| margin-bottom:1rem; | |
| } | |
| .section_div-child_one, .section_div-child_two { | |
| display:flex; | |
| flex-direction:row; | |
| justify-content:center; | |
| align-items: center; | |
| } | |
| .para { | |
| margin-bottom: 1rem; | |
| } | |
| .profile_link { | |
| /*margin-top: 1.5rem;*/ | |
| padding-top: 1rem; | |
| /* margin-right:3rem; | |
| margin-bottom: 1.8rem;*/ | |
| border-top: 1px solid hsl(215, 32%, 27%); | |
| display:flex; | |
| /* flex-direction:row;*/ | |
| /* flex-wrap:nowrap;*/ | |
| /* justify-content: center;*/ | |
| align-items: center; | |
| } | |
| .creator-tag { | |
| font-weight: 300; | |
| } | |
| .profile_link span { | |
| color: white; | |
| text-decoration:none; | |
| } | |
| .profile_link span:active, .profile_link span:hover { | |
| cursor:pointer; | |
| color: hsl(178, 100%, 50%); | |
| } | |
| .creator-img { | |
| border: 1px solid white; | |
| border-radius: 50%; | |
| width: 2rem; | |
| height: auto; | |
| margin-right: 1rem; | |
| } | |
| .attribution { | |
| margin-top:1rem; | |
| font-size: 11px; | |
| text-align: center; | |
| } | |
| .attribution a { | |
| color: hsl(228, 45%, 44%); | |
| text-decoration: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment