Hover effect using pseudo elements
A Pen by Daniel Gonzalez on CodePen.
Ashar20
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
| <button class="btn btn--stripe">Button</button> | |
| <a href="#" class="btn btn--stripe">Link</a> | |
| <button class="btn btn--stripe btn--radius">Aggressive Radius</button> | |
| <button class="btn btn--stripe btn--large">Large Button</button> |
Ashar20
/ bruteforce-hacking-simulator.markdown
Created
January 21, 2021 14:10
Bruteforce Hacking Simulator
Visual rapresentaion of bruteforce hacking (letter per letter), as seen in Hollywood.
A Pen by Marco Fugaro on CodePen.
Ashar20
/ beautiful-navigation-hover-effects.markdown
Created
January 21, 2021 13:01
Beautiful navigation hover effects
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
| <h1 class="text-light">Pure CSS Animated Gradient Background</h1> | |
| <div class="btn-group mt-2 mb-4" role="group" aria-label="actionButtons"> | |
| <a href="https://codepen-api-export-production.s3.us-west-2.amazonaws.com/zip/PEN/pyBNzX/1578778289271/pure-css-gradient-background-animation.zip" class="d-block btn btn-outline-light" download><i class="fas fa-file-download mr-2"></i>Download Source</a> | |
| <a href="https://manuelpinto.in" target="_blank" class="d-block btn btn-outline-light">Visit my Website<i class="fas fa-external-link-square-alt ml-2"></i></a> | |
| </div> | |
| <h6 class="text-light small font-weight-bold"><i class="fas fa-code"></i> with <i class="fas fa-heart"></i> by Manuel Pinto</h6> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" integrity="sha256-qM7QTJSlvtPSxVRjVWNM2OfTAz/3k5ovHOKmKXuYMO4=" crossorigin="anonymous"></script> |
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
| <header> | |
| <div class="container"> | |
| <h1 class="logo"></h1> | |
| <nav> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Pricing</a></li> | |
| <li><a href="#">Contact</a></li> |
Ashar20
/ index.html
Created
January 17, 2021 17:38
Instagram Profile Layout with CSS Grid & Flexbox
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
| <header> | |
| <div class="container"> | |
| <div class="profile"> | |
| <div class="profile-image"> | |
| <img src="https://images.unsplash.com/photo-1513721032312-6a18a42c8763?w=152&h=152&fit=crop&crop=faces" alt=""> |
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 id="wrapper"> | |
| <article class="card" role="article"> | |
| <a href="#"> | |
| <div class="card-text"> | |
| <div class="card-meta">Architecture</div> | |
| <h2 class="card-title">A Photographer’s Weekend House By General Design</h2> | |
| </div> | |
| <img class="card-image" src="http://www.ignant.de/wp-content/uploads/2016/02/Frederiksvej-Kindergarten_07_credit-Rasmus-Hjortsh%C3%B8j-COAST-Studio.jpg" /> | |
| </a> | |
| </article> |
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
| <body id="page-top" class="index" data-pinterest-extension-installed="cr1.3.4"> | |
| <!-- Navigation --> | |
| <nav class="navbar navbar-default navbar-fixed-top navbar-shrink"> | |
| <div class="container"> | |
| <!-- Brand and toggle get grouped for better mobile display --> | |
| <div class="navbar-header page-scroll"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> |