A Pen by Janis Skarnelis on CodePen.
Prince Youlou PrinceYoulou
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
| <div class="detailBox"> | |
| <div class="titleBox"> | |
| <label>Comment Box</label> | |
| <button type="button" class="close" aria-hidden="true">×</button> | |
| </div> | |
| <div class="commentBox"> | |
| <p class="taskDescription">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> | |
| </div> | |
| <div class="actionBox"> |
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
| <h1>Responsive Masonry Grid</h1> | |
| <p>A pure CSS-only responsive masonry.</p> | |
| <div class="masonry"> | |
| <div class="item"> | |
| 1 | |
| <img src="http://www.pixeden.com/media/k2/galleries/468/001-business-card-clip-brand-mock-up-vol-20-psd.jpg"> | |
| </div> | |
| <div class="item"> | |
| 2 | |
| <img src="http://www.graphicsfuel.com/wp-content/uploads/2015/11/branding-mockup-psd.jpg"> |
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
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Horizontal scroller</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <main> | |
| <header> |
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
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> | |
| <h1 class="text-center" alt="Simple">Simple Pure CSS Star Rating Widget Bootstrap 4</h1> | |
| <div class="container"> | |
| <div class="starrating risingstar d-flex justify-content-center flex-row-reverse"> | |
| <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="5 star">5</label> | |
| <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="4 star">4</label> | |
| <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="3 star">3</label> | |
| <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="2 star">2</label> |
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
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <nav class="navbar navbar-inverse"> | |
| <div class="container-fluid"> | |
| <div class="navbar-header"> | |
| <!--menu hamburger solo per mobile--> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | |
| <span class="icon-bar"></span> |
PrinceYoulou
/ font-awesome-colored-brand-and-social-icons.markdown
Last active
March 23, 2019 12:07
Font Awesome Colored - Brand And Social Icons
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
| <header class="mdc-top-app-bar mdc-top-app-bar--fixed" data-mdc-auto-init="MDCTopAppBar"> | |
| <div class="mdc-top-app-bar__row"> | |
| <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> | |
| <span class="mdc-top-app-bar__title logo">Material Bottom Navigation</span> | |
| </section> | |
| </div> | |
| </header> | |
| <div class="mdc-top-app-bar-fixed-adjust demo-container demo-container-1"> | |
| <div class="demo-card demo-card-1"> | |
| <div class="mdc-bottom-navigation"> |