Flexy Google Homepage
How do I make an flexy google homepage?
Working on a flexbox reset whilst watching Chrome Dev Summit.. I needed a simple page layout to benchmark against, this felt apt. Responsive down to 320px. No media queries. Minified/Autoprefixed CSS (2.8kb including reset) and HTML (780b). 3 Image Requests (~16kb). One SVG (1kb). Total page weight ~20kb. Only tested in chrome.. What is a flexy google homepage? How do you make a flexy google homepage? This script and codes were developed by Lukejacksonn on 30 November 2022, Wednesday.
Flexy Google Homepage - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexy Google Homepage</title> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
Responsive down to 320px. No media queries. Minified/Autoprefixed CSS (2.8kb including reset) and HTML (780b). 3 Image Requests (~16kb). One SVG (1kb). Total page weight ~20kb. Only tested in chrome.
-->
<c-> <x-> <a href="">Luke</a> <a href="">Gmail</a> <a href="">Images</a> <i-><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45808/Screen_Shot_2015-11-18_at_21.33.28.png" alt="" /></i-> <i-><img class='avatar' src="https://lh6.googleusercontent.com/-PK7BNLt1ABw/AAAAAAAAAAI/AAAAAAAAAAA/MbNmiYybavc/s32-c-mo/photo.jpg" alt="" /></i-> </x-> <y-> <i-> <img class='logo' src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" /> </i-> <i-> <input class='search' type="text" /> <img class='speech-icon' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC" alt="" /> </i-> <x-> <button>Google Serch</button> <button>I'm Feeling Lucky</button> </x-> </y-> <x-> <a href="">Advertising</a> <a href="">Business</a> <a href="">About</a> <a href="">Terms</a> <a href="">Settings</a> </x->
</c-> <script src="js/index.js"></script>
</body>
</html>
Flexy Google Homepage - Script Codes CSS Codes
/*
-- flexy.scss
-- by Luke Jackson 2015
--
-- Work in progress !!
--
-- Built on top of Eric Meyer's reset.css
-- Intended as a minimal, mostly structural library
-- Relies on flexbox and viewport units
*/
@font-face { font-family: "MacSystem"; src: local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI");
}
* { box-sizing: border-box;
}
html { font-family: "Roboto", "MacSystem", sans-serif; font-size: calc(1vmin + 9px);
}
body { position: relative; min-width: 320px; width: 100vw; min-height: 320px; height: 100vh;
}
body > * { width: 100% !important; max-width: 100%; margin: auto;
}
c-,
x-,
xx-,
y- { display: -webkit-box; display: -ms-flexbox; display: flex;
}
c-,
y- { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
c- { min-height: 100vh;
}
c- > *:only-child { margin: auto;
}
x- { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
x- > :not(:first-child) { margin-left: 1rem;
}
y- > :not(:first-child) { margin-top: 1rem;
}
xx- { max-width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 1rem 0 0 1rem;
}
xx- > * { margin: 0 1rem 1rem 0;
}
i- { list-style: none; min-width: 1rem; min-height: 1rem; overflow: hidden;
}
[compact] { padding: 0;
}
[compact] > :not(:first-child) { margin: 0;
}
img { display: block; max-width: 100%;
}
p,
h1,
h2,
h3,
span { display: block; line-height: 138%;
}
h1 { font-size: 2rem;
}
h2 { font-size: 1.62rem;
}
h3 { font-size: 1.38rem;
}
p { font-size: 1rem; max-width: 70ex; min-width: 30ex;
}
span { font-size: 0.62rem; max-width: 70ex;
}
label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
input[type='text'], button,
input[type='number'],
input[type='password'] { display: block; font-size: 1rem; padding: 1rem; border: 1px solid rgba(0, 0, 0, 0.2); outline: none;
}
/*
-- Flexy Google
-- by Luke Jackson 2015
--
-- The first test for a new reset I have been working on
-- A responsive version of the google.com homepage
*/
c- > :nth-child(1) { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 1rem;
}
c- > :nth-child(1) > :first-child { text-decoration: underline;
}
c- > :nth-child(1) > :last-child { border-radius: 50%;
}
c- > :nth-child(1) > :nth-child(4) { background: #666; margin: 0 1rem 0 2rem;
}
c- > :nth-child(2) { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
c- > :nth-child(2) > :nth-child(2) { position: relative; width: 90%; max-width: 600px;
}
c- > :nth-child(3) { background: #f2f2f2; border-top: #e4e4e4; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1rem;
}
c- > :nth-child(3) :nth-child(4) { margin-left: auto;
}
.logo { width: 100%; max-width: 450px; padding: 0 4rem 1rem;
}
input.search { padding: 10px; width: 100%;
}
input.search:focus { border-color: #4285F4;
}
.speech-icon { position: absolute; top: 50%; right: 8px; width: 24px; -webkit-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer;
}
button { background: #f2f2f2; color: #757575; border: 1px solid #f2f2f2;
}
button:hover { border-color: #c6c6c6; background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1); color: #212121; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
a { color: #666; text-decoration: none;
}
a:hover { text-decoration: underline;
}
Flexy Google Homepage - Script Codes JS Codes
/*
// Structure Definition
<c-> <x-> <i-></i-> <i-></i-> <i-></i-> <i-></i-> <i-></i-> <i-></i-> </x-> <y-> <i-></i-> <i-></i-> <i-></i-> </y-> <x-> <i-></i-> <i-></i-> <i-></i-> <i-></i-> <i-></i-> <i-></i-> <i-></i-> </x->
</c->-->
// Content Definition
<a href="">Luke</a>
<a href="">Gmail</a>
<a href="">Images</a>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45808/Screen_Shot_2015-11-18_at_21.33.28.png" alt="" />
<img class='avatar' src="https://lh6.googleusercontent.com/-PK7BNLt1ABw/AAAAAAAAAAI/AAAAAAAAAAA/MbNmiYybavc/s32-c-mo/photo.jpg" alt="" />
<img class='logo' src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
<input class='search' type="text" />
<img class='speech-icon' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC" alt="" />
<button>Google Serch</button>
<button>I'm Feeling Lucky</button>
<a href="">Advertising</a>
<a href="">Business</a>
<a href="">About</a>
<a href="">Terms</a>
<a href="">Settings</a>
*/
Developer | Lukejacksonn |
Username | lukejacksonn |
Uploaded | November 30, 2022 |
Rating | 3 |
Size | 7,212 Kb |
Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Flex Gallery | 2,659 Kb |
Complex Flexbox Layouts | 4,892 Kb |
Actuate.js | 2,804 Kb |
Flexbox Masonry | 6,547 Kb |
Flexbox Email Template | 2,994 Kb |
Perspective Generator | 4,313 Kb |
Greedy Navigation | 3,844 Kb |
Favorite Heart | 2,921 Kb |
GreedyNav Update | 3,007 Kb |
Hero Flex-list | 5,064 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
Loading animation | Codeams | 2,408 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Simple content swap | Snografx | 1,859 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Fullscreen audio play button | 72 | 2,148 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Table border-collapse property | Maxds | 1,672 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!