A card profile
This file contains hidden or 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 is the markup. you can change the details (your own name, your own avatar etc.) but don’t change the basic structure! --> | |
| <aside class="profile-card"> | |
| <div class="mask-shadow"></div> | |
| <header> | |
| <!-- here’s the avatar --> | |
| <a href="https://tutsplus.com"> | |
| <img src="https://en.gravatar.com/userimage/42992842/b8e8ff24d6f1cb84bbe5c839903086bb.png?size=200"> | |
| </a> |
A Pen by Carlita Centeno on CodePen.
This file contains hidden or 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
| <div class="form-structor"> | |
| <div class="signup"> | |
| <h2 class="form-title" id="signup"><span>or</span>Sign up</h2> | |
| <div class="form-holder"> | |
| <input type="text" class="input" placeholder="Name" /> | |
| <input type="email" class="input" placeholder="Email" /> | |
| <input type="password" class="input" placeholder="Password" /> | |
| </div> | |
| <button class="submit-btn">Sign up</button> | |
| </div> |
This file contains hidden or 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> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Mukta:wght@300;400;600;700;800&family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet"> | |
| <!-- Code by Angela Delise | |
| https://codepen.io/angeladelise/full/LYREErG --> | |
| </head> | |
| <body> |
A chatgpt demo
A Pen by tangyuxiaobao on CodePen.
This file contains hidden or 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
| <div class="layout has-sidebar fixed-sidebar fixed-header"> | |
| <aside id="sidebar" class="sidebar break-point-sm has-bg-image"> | |
| <a id="btn-collapse" class="sidebar-collapser"><i class="ri-arrow-left-s-line"></i></a> | |
| <div class="image-wrapper"> | |
| <img src="assets/images/sidebar-bg.jpg" alt="sidebar background" /> | |
| </div> | |
| <div class="sidebar-layout"> | |
| <div class="sidebar-header"> | |
| <div class="pro-sidebar-logo"> | |
| <div>P</div> |
This file contains hidden or 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
| <div class="layout has-sidebar fixed-sidebar fixed-header"> | |
| <aside id="sidebar" class="sidebar break-point-sm has-bg-image"> | |
| <a id="btn-collapse" class="sidebar-collapser"><i class="ri-arrow-left-s-line"></i></a> | |
| <div class="image-wrapper"> | |
| <img src="assets/images/sidebar-bg.jpg" alt="sidebar background" /> | |
| </div> | |
| <div class="sidebar-layout"> | |
| <div class="sidebar-header"> | |
| <div class="pro-sidebar-logo"> | |
| <div>P</div> |
NewerOlder