Start Page

HTML
<div class="fluid-container"> <div class="d-flex justify-content-center"> <div class="card" id="search"> <div class="card-block"> <div class="d-flex justify-content-center"> <div class="google__logo"></div> <!-- remove target="_blank" if you don't want to open your search in a new tab --> <form method="get" action="https://www.google.com/search" class="form-search" target="_blank"> <div class="input-group" id="GoogleSearch"> <input type="text" name="q" placeholder="Search the web"class="form-control input-lg" autocomplete="off"> <span class="input-group-btn"> <button class="btn btn-secondary" type="submit"></button> </span> </div> </form> </div> </div> </div> </div> <div class="sites"> <!-- Remove the second set of span tags to show the name, remove the first to hide the icon --> <!-- I've opted to not include popovers to make this as minimal as possible but if you want to add your own, check out Baloon.css https://github.com/kazzkiq/balloon.css or simply add title tags to your sites --> <a class="site" href="https://google.com" id="Google"><span></span><span>Google</span></a> <a class="site" href="https://facebook.com" id="Facebook"><span></span><span>Facebook</span></a> <a class="site" href="https://github.com" id="GitHub"><span></span><span>GitHub</span></a> <a class="site" href="https://youtube.com" id="YouTube"><span></span><span>YouTube</span></a> <a class="site" href="https://reddit.com" id="Reddit"><span></span><span>Reddit</span></a> <a class="site" href="https://wikipedia.org" id="Wikipedia"><span></span><span>Wikipedia</span></a> <a class="site" href="https://instagram.com" id="Instagram"><span></span><span>Instagram</span></a> <a class="site" href="https://imgur.com" id="Imgur"><span></span><span>Imgur</span></a> <a class="site" href="https://amazon.com" id="Amazon"><span></span><span>Amazon</span></a> <a class="site" href="https://jsfiddle.net" id="jsFiddle"><span></span><span>jsFiddle</span></a> <a class="site" href="https://codepen.io" id="Codepen"><span></span><span>Codepen</span></a> <a class="site" href="https://codepad.co" id="Codepad"><span></span><span>Codepad</span></a> </div> </div> <div style="position:absolute;bottom:10px;left:47%;"><a class="github-button" href="https://github.com/derekbtw/start-page" data-style="mega" aria-label="Star derekbtw/start-page on GitHub">Star</a></div>
SCSS
$blue: #4584EE; $blue2: lighten($blue, 4%); $gray: #D7D7D7; $gray2: #F5F5F5; $white: #FEFEFE; $boxshadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.2); //settings $background: $gray2; $search-background: white; $fontfamily: 'Roboto', sans-serif; body { padding-top: 48px; font-family: $fontfamily; background: $background; } a { color: $blue; } .google__logo { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAAoCAMAAAAlmk//AAAAflBMVEUAAAA0qFNChfRChfRChfRChfRChfTsUDFChfRChfTqQzXqQzVChfTqQzXqQzXqQzVChfTqQzX7vAXqQzVChfT7vAX7vAX7vAXqQzX7vAX7vAVChfTqQzVChfTqQzX7vAXqQzX7vAXqQzX7vAXqQzU0qFNChfTqQzX7vAU0qFPmKNI6AAAAJnRSTlMAv78ef0XwF5zPYO9gQpm/b97wf9+dZtrPvkczM65vJa5/UTMlOmbv7OIAAALNSURBVFjD7ZbbcqMwDIZVwGDOISEkIZDzkvT9X3Aty1hO2exeZNiZzvS/gbq2P/+SLAI/el9CxoOSJ/fwnn4pwUtl9WDlvYf6+Pz8gBfytRnWYibQviYnQRBIQmazgPwQ9w5881c/DHIeR2gidPKSyXlylCHHB1dzgChwAuYEsSEP/gNI/t3Q4VTdq9Mh4pFmvXksd+eje9froZYCVNUKF5Sc0ntV5EAKVYZeYi7VnZQmQLpuHqTleYy9N94+rF0GdePagk75FDmPleGR7qyEOMuH1Zo43FOeQHlql26nIF6BgznOKpM8KfHlov5/RM6mads1ks72ckgh5DMoSmntBdeu/gHCOQcAY61Sz7U10irk8ki1FPtjVTFohTEDFO5yo73rSehCBHVqxglIhbYUoZ+xJtR7owzxJQxcUGoi1hUpWjLWJ9dVxV3qQ3VAuukDtrQ5SVnagT9ww/IdUEdZpaDfSww71cooXrLQLuwQToezArXjyA7dCbcDxwzKEbRKdcEWN9p00oEILqD8I+jogB4aJGzgXZDRNoncG9tPulJN+bSzdL4a19EGQyfceIQTUJF/bXbSHYjp25fY20PvB7jqoiMd6T3kohVOjiKMmdtPbF16Nnr7WFcsXYWU5kYV1Si2hauJHLmTnKTYrbqTWmDsFEXEKUFTmdpcZP1gkkaxq3B2vsUwmJpeNugHOTuT4iEYOxGDcm0J67XATdgTiz+D0faOqLLSWY3A3FjVUjf6cbWnDL34awsqdMWVW/3obLg8pnAYkUQiDpFIxCGSkRs6IqGIwxL96KYXwEoqmrqyeW03pqXaEUGn7PXtYxDk5fNaZokgEIbC6pLVoQNXx+bctM/3IQtUgv3Jl+12WSU5Y96V75T3HuaSH9S1IfX4CZ1B3LKlPxaFhDnEbSQMFoGubx/m0z4crDKYUfzjJBQws4T0Yq9f+PCjb63fxmmAhQtfgbgAAAAASUVORK5CYII=) no-repeat 5px 3px; width: 130px; height: 40px; display: inline-block; } .card-block { padding: 1rem; background: $search-background; } #search { box-shadow: $boxshadow; border-color: transparent; margin-bottom: 2rem; } form { display: inline; margin: 0; } #GoogleSearch { input { border-radius: 0; border-color: $gray; width: 475px; background: $search-background; &:focus { border-color: $blue; } } button { color: white; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABGUlEQVQoFXWSsU4CQRCGOYwJgeY64gsY3oOSUBMfwwegMCZQmthQ2NJR0FDT2NlQU9jYWICERCUKyPr9ZIcct7eTfJnZf/6ZvctdqeTDOdeEOexBsYUXuDZPYcZwBxYrilf48sIfuRMb1I0K3dTKmjh34QB6mnq2d6wR9aiKdtBEQH86dp0bB30a2voRNLxArwq6fZH3lBEuYJ1v2DlJkg31HqqmWdbwDsL38Q5uVO8SPr10ShqeQQ1T96SeFyN/nJ7LnBhqgD6H3msAFZnIV/AMCn2JNBj2xhua9nNoicwWvxQTWEIvtqCeMX1Tv8MQUngDi0HhgpjI1K1N+vwY8xbqDPVzCx4KjTGR4V5mwSHmi+oM34O+zs8/o2lHs8MgV+EAAAAASUVORK5CYII=) no-repeat 50% 50% $blue; border-color: $blue; border-radius: 0 2px 2px 0; width: 60px; cursor: pointer; &:hover { background-color: $blue2; } } } .sites { display: flex; flex-flow: row wrap; align-content: space-between; justify-content: center; } .site { font-size: 1.3rem; background: white; border-radius: 4px; width: 188px; height: 120px; margin: 1rem; line-height: 120px; text-align: center; box-shadow: $boxshadow !important; color: $blue; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; span { font-family: FontAwesome; padding-right: 5px; font-size: 50px; } span:nth-child(2) { display: none; } img { mix-blend-mode: multiply; //filter: grayscale(1); } &:nth-child(3n) { page-break-after: always; } &:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.15) 0%, transparent 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } &:hover, &:focus, &:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); text-decoration: none; color: $blue; } &:hover:before, &:focus:before, &:active:before { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } // Site customizations // Font awesome unicode: // http://fontawesome.io/cheatsheet/ #Google { background: $blue; color: white; span:after { content: '\f1a0'; } } #Facebook { background: #3B5999; color: white; span:after { content: '\f230'; } } #YouTube { background: #E62117; color: white; span:after { content: '\f167'; } } #GitHub { background: #111; color: white; span:after { content: '\f09b'; } } #Wikipedia { background: white; color: black; span:after { content: '\f266'; } } #Reddit { background: #F4400B; color: white; span:after { content: '\f281'; } } #Instagram { // from http://codepen.io/katydecorah/pen/PNLePj color: white; background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%); span:after { content: '\f16d'; } } #Imgur { background: #2B2B2B; color: #1BB76E; span:after { content: '\f111'; } } #Amazon { background: #0B0C07; color: #F99A05; span:after { content: '\f270'; } } #Codepen { background: black; color: white; span:after { content: '\f1cb'; } } #jsFiddle { background: #3FA1F5; color: white; span:after { content: '\f1cc'; } } #Codepad { background: #F35E5C; color: white; span:after { content: ''; background: url('https://codepad.co/img/loader-logo.svg') no-repeat; filter: invert(1) brightness(2); width: 50px; height: 50px; top: 45px; right: 68px; position: absolute; } }
JAVASCRIPT
// Optional: This just makes all the links open in a new tab var links = document.links; for (var i = 0; i < links.length; i++) { links[i].target = "_blank"; }
Expand for more options Login