Create and edit an HTML5 table without the use of a library. Uses HTML5's contenteditable and minimal JavaScript.
Steven TrueSlu
TrueSlu
/ full-width-mobile-nav-dropdown.markdown
Created
September 14, 2018 03:27
Full width mobile nav dropdown
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 id="header"> | |
| <div class="vert-text"> | |
| <div class="p-img"> | |
| <img src="https://res.cloudinary.com/pashagord/image/upload/v1468545314/Portfolio/logos/codepen_logo.png"/> | |
| </div> | |
| <h1 id="typer-size"> | |
| <!-- TEXTS --> | |
| <span id="typed"></span> |
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 id="header"> | |
| <div class="vert-text"> | |
| <div class="p-img"> | |
| <img src="https://res.cloudinary.com/pashagord/image/upload/v1468545314/Portfolio/logos/codepen_logo.png"/> | |
| </div> | |
| <h1 id="typer-size"> | |
| <!-- TEXTS --> | |
| <span id="typed"></span> | |
| <div id="typed-strings"> |
TrueSlu
/ dailyui-003-landing-page-with-parallax-bg.markdown
Created
September 3, 2018 04:47
DailyUi 003 - Landing Page with Parallax bg
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
| <a href="#" class="icon-button twitter"><i class="icon-twitter"></i><span></span></a> | |
| <a href="#" class="icon-button facebook"><i class="icon-facebook"></i><span></span></a> | |
| <a href="#" class="icon-button google-plus"><i class="icon-google-plus"></i><span></span></a> | |
| <a href="#" class="icon-button youtube"><i class="fa fa-youtube"></i><span></span></a> | |
| <a href="#" class="icon-button pinterest"><i class="fa fa-pinterest"></i><span></span></a> |
TrueSlu
/ daily-ui-003-landing-page.markdown
Last active
August 17, 2019 17:54
Daily UI | #003 - Landing Page
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
| .brand | |
| %a{:href => 'https://www.jamiecoulter.co.uk',:target => '_blank'} | |
| %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/logo.png'} | |
| .login | |
| .login_title | |
| %span Login to your account | |
| .login_fields | |
| .login_fields__user | |
| .icon | |
| %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/user_icon_copy.png'} |
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 class="align"> | |
| <div class="grid"> | |
| <form action="https://httpbin.org/post" method="POST" class="form login"> | |
| <div class="form__field"> | |
| <label for="login__username"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use></svg><span class="hidden">Username</span></label> | |
| <input id="login__username" type="text" name="username" class="form__input" placeholder="Username" required> | |
| </div> |