Google Keep navigation bar clone built with tailwindcss
A Pen by Mesut Koca on CodePen.
lesssummer
/ appsScript_ListFilesFolders_ver.2.js
Created
August 9, 2019 02:10
— forked from mesgarpour/appsScript_ListFilesFolders_ver.2.js
[Google Apps Script] List all files & folders in a Google Drive folder, & write into a speadsheet
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
| /* | |
| * Copyright 2017 Mohsen Mesgarpour | |
| * | |
| * Licensed under the Apache License, Version 2.0 (the "License"); | |
| * you may not use this file except in compliance with the License. | |
| * You may obtain a copy of the License at | |
| * | |
| * http://www.apache.org/licenses/LICENSE-2.0 | |
| * | |
| * Unless required by applicable law or agreed to in writing, software |
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="bg-grey-light font-sans"> | |
| <div class="bg-white"> | |
| <div class="container mx-auto flex flex-col lg:flex-row items-center py-4"> | |
| <nav class="w-full lg:w-2/5"> | |
| <a href="#" class="text-grey-darker text-sm mr-4 font-semibold pb-6 border-b-2 border-solid border-transparent no-underline hover:text-teal hover:border-teal hover:no-underline"><i class="fa fa-home fa-lg"></i> Home</a> | |
| <a href="#" class="text-grey-darker text-sm mr-4 font-semibold pb-6 border-b-2 border-solid border-transparent no-underline hover:text-teal hover:border-teal hover:no-underline"><i class="fa fa-bolt fa-lg"></i> Moments</a> | |
| <a href="#" class="text-grey-darker text-sm mr-4 font-semibold pb-6 border-b-2 border-solid border-transparent no-underline hover:text-teal hover:border-teal hover:no-underline"><i class="fa fa-bell fa-lg"></i> Notifications</a> | |
| <a href="#" class="text-grey-darker text-sm mr-4 font-semibold pb-6 border-b-2 border-solid bord |
lesssummer
/ google-keep-navigation-clone-interactive-example.markdown
Created
February 11, 2019 01:10
Google Keep Navigation Clone (Interactive Example)
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="navbar-container"> | |
| <div class="center-content-1040px"> | |
| <nav class="navbar navbar-expand navbar-dark"> | |
| <a class="navbar-brand" href="/">U</a> | |
| <ul class="navbar-nav"> | |
| <li class="nav-item"><a class="nav-link" href='https://www.medium.com'>MEDIUM</a></li> | |
| <li class="nav-item"><a class="nav-link" href='https://www.github.com'>GITHUB</a></li> | |
| <li class="nav-item"><a class="nav-link" href='#'>ABOUT</a></li> |
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="display-1" style="text-align: center; color: #039be5">Material Design Typography</h1> | |
| <div style="display: table; margin: 0 auto"> | |
| <div style="display: table-cell; min-width: 170px; padding-right: 2.4rem"> | |
| <h3 class="subhead-2" style="">Use this classes:</h3> | |
| <!-- | |
| <div class="display-4">.display-4</div> | |
| <div class="display-3">.display-3</div> | |
| <div class="display-2">.display-2</div> | |
| --> | |
| <div class="display-1">.display-1</div> |
lesssummer
/ grid-concept-for-my-website.markdown
Created
January 31, 2019 06:47
Grid concept for my website
This is just a concept for my website (www.zhongapp.com), showing how to show messages and statuses from the users.
lesssummer
/ header-as-many-as-will-fit-some-tall-footer.markdown
Created
January 31, 2019 03:22
Header, as many as will fit, some tall, footer
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="grid-container"> | |
| <div class="menu-icon"> | |
| <i class="fas fa-bars header__menu"></i> | |
| </div> | |
| <header class="header"> | |
| <div class="header__search">Search...</div> | |
| <div class="header__avatar">Your face</div> | |
| </header> |
lesssummer
/ editorial-design-to-css-grid-summary.markdown
Created
January 30, 2019 07:49
Editorial design to CSS Grid. Summary
To illustrate (and celebrate) the approach between editorial design and web design, we have set out to design with CSS Grid some pages of number 3 of the 99U Quarterly Magazine, a very interesting publication for the creative community.
Read the full article here
A Pen by Ricardo Prieto 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
| <aside> | |
| <h1 class='title'>Gmail</h1> | |
| <button class='button-silver mail-compose'>Compose</button> | |
| <div class='tabs'> | |
| <input type='radio' name='tabs' id='chat-toggle' checked> | |
| <label for='chat-toggle'> | |
| <button class='button-large button-grey'><i class="fa fa-comment"></i></button> | |
| </label> | |
| <input type='radio' name='tabs' id='gadgets-toggle'> |
NewerOlder