Tiled Design Using CSS Grid // Interface as Navigation // Mobile // LWD
- Tiled Design Using CSS Grid // Interface as Navigation // Mobile // LWD Previews
- Tiled Design Using CSS Grid // Interface as Navigation // Mobile // LWD HTML Codes
- Tiled Design Using CSS Grid // Interface as Navigation // Mobile // LWD CSS Codes
- Tiled Design Using CSS Grid // Interface as Navigation // Mobile // LWD JS Codes
How do I make an tiled design using css grid // interface as navigation // mobile // lwd?
This is an example of interface as navigation. There is a specific navigation but almost all of the tiles do something. This pen also includes the ability to toggle full screen (top right corner), giving the site a more app-like experience. . What is a tiled design using css grid // interface as navigation // mobile // lwd? How do you make a tiled design using css grid // interface as navigation // mobile // lwd? This script and codes were developed by Brian Haferkamp on 28 September 2022, Wednesday.
Tiled Design Using CSS Grid // Interface as Navigation // Mobile // LWD Previews
Tiled Design Using CSS Grid // Interface as Navigation // Mobile // LWD - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tiled Design Using CSS Grid // Interface as Navigation // Mobile // LWD</title>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Pragati+Narrow|Roboto" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="page-wrapper"> <div class="toolbar"> </div> <div class="grid-wrapper"> <div class="grid-item"> <div class="grid-item-inner"> <h3 class="tile-heading">Lorem ipsum dolor</h3> </div> </div> <div class="grid-item logo"><a href="#"> <p class="icon-logo"><i class="zmdi zmdi-apple"></i></p></a></div> <div class="grid-item"><a href="#"> <p class="icon-shop"><i class="zmdi zmdi-shopping-basket"></i></p></a></div> <div class="grid-item article-link" data-tab="article-1"> <div class="grid-item-inner"> <h3 class="tile-heading">Lorem ipsum dolor</h3> <p class="tile-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum exercitationem tenetur accusamus suscipit neque ea necessitatibus nostrum earum commodi id </p><a class="go-link" href="#"> <p class="icon-go"><i class="zmdi zmdi-arrow-right"></i></p></a> </div> </div> <div class="grid-item"><a href="#"> <p class="icon-menu"><i class="zmdi zmdi-menu"></i></p></a></div> <div class="grid-item article-link" data-tab="article-2"> <div class="grid-item-inner"> <p class="tile-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> </div> </div> <div class="grid-item"></div> <div class="grid-item"><a class="fullscreen grid-item-inner" href="#"> <p class="icon-fullscreen"><i class="zmdi zmdi-arrow-right-top"></i></p> <p class="icon-exit-fullscreen hide"><i class="zmdi zmdi-arrow-left-bottom"></i></p></a></div> </div> <nav class="nav hide"> <div class="nav-inner"><a href="#"> <p class="icon-menu-close"><i class="zmdi zmdi-close"></i></p></a> <ul> <li class="icon-apple"><i class="zmdi zmdi-apple"></i></li><a href="#" data-tab="shop"> <li>Shop</li></a><a href="#"> <li>Link 2</li></a><a href="#"> <li>Link 3</li></a> </ul> </div> </nav> <section class="page hide" id="shop"> <div class="page-inner"> <header> <h2>Shop</h2> </header> <section class="shop-wrapper"> <div class="shop-item"><img src="https://placehold.it/800x1200"/> <p class="shop-item-price">$13.99</p> <h4 class="shop-item-header">Lorem ipsum dolor</h4> <p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p> <button class="shop-item-button">Purchase</button> </div> <div class="shop-item"><img src="https://placehold.it/800x1200"/> <p class="shop-item-price">$9.99</p> <h4 class="shop-item-header">Lorem ipsum dolor</h4> <p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p> <button class="shop-item-button">Purchase</button> </div> <div class="shop-item"><img src="https://placehold.it/800x1200"/> <p class="shop-item-price">$20.99</p> <h4 class="shop-item-header">Lorem ipsum dolor</h4> <p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p> <button class="shop-item-button">Purchase</button> </div> <div class="shop-item"><img src="https://placehold.it/800x1200"/> <p class="shop-item-price">$2.99</p> <h4 class="shop-item-header">Lorem ipsum dolor</h4> <p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p> <button class="shop-item-button">Purchase</button> </div> <div class="shop-item"><img src="https://placehold.it/800x1200"/> <p class="shop-item-price">$99.99</p> <h4 class="shop-item-header">Lorem ipsum dolor</h4> <p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p> <button class="shop-item-button">Purchase</button> </div> <div class="shop-item"><img src="https://placehold.it/800x1200"/> <p class="shop-item-price">$139.99</p> <h4 class="shop-item-header">Lorem ipsum dolor</h4> <p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p> <button class="shop-item-button">Purchase</button> </div> </section> </div> </section> <section class="page hide" id="about"> <div class="page-inner"> <header> <h2>About</h2> </header> <article> <p class="page-intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non quam, asperiores in sapiente labore, harum quis quidem quo ratione illo magnam illum eum corporis, ipsam sunt numquam iste unde earum. Excepturi repellendus dignissimos accusamus, nobis harum reprehenderit tempora placeat similique ipsam minima nisi labore magni id, cum voluptatem praesentium, reiciendis.</p> </article> <section class="accordion"> <details role="group"> <summary class="accordion-heading">Contact Info</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p> </details> <details role="group"> <summary class="accordion-heading">Apple and the Environment</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p> </details> <details role="group"> <summary class="accordion-heading">Newsroom</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p> </details> <details role="group"> <summary class="accordion-heading">Supplier Responsibility</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p> </details> <details role="group"> <summary class="accordion-heading">Apple Job Creation</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p> </details> </section> </div> </section> <article class="page hide" id="article-1"> <header><img class="featured-image" src="https://unsplash.it/1500?image=1068"/></header> <div class="page-inner"> <h2 class="featured-headline">Lorem ipsum dolor sit amet, consectetur adipisicing elit sunt optio</h2> <article class="featured-article"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?</p> <div class="featured-image-strip"> <div class="featured-image-strip-inner"><img src="https://unsplash.it/1500?image=479"/><img src="https://unsplash.it/1500?image=447"/><img src="https://unsplash.it/1500?image=434"/></div> <p class="direction-arrows"><i class="zmdi zmdi-swap"></i></p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p> </article> </div> </article> <article class="page hide" id="article-2"> <header><img class="featured-image" src="https://unsplash.it/1500?image=1027"/></header> <div class="page-inner"> <h2 class="featured-headline">Lorem ipsum dolor sit amet, consectetur adipisicing elit sunt optio</h2> <article class="featured-article"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?</p> <div class="featured-image-strip"> <div class="featured-image-strip-inner"><img src="https://unsplash.it/1500?image=424"/><img src="https://unsplash.it/1500?image=407"/><img src="https://unsplash.it/1500?image=375"/><img src="https://unsplash.it/1500?image=365"/><img src="https://unsplash.it/1500?image=257"/></div> <p class="direction-arrows"><i class="zmdi zmdi-swap"></i></p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p> </article> </div> </article><a class="page-close" href="#"> <p class="icon-page-close hide"><i class="zmdi zmdi-close"></i></p></a>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Tiled Design Using CSS Grid // Interface as Navigation // Mobile // LWD - Script Codes CSS Codes
@charset "UTF-8";
body { margin: 0; font-family: "Pragati Narrow", sans-serif;
}
.page-wrapper { max-width: 425px; margin: auto; position: relative;
}
.grid-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); -ms-grid-rows: (100px)[4] 1fr; grid-template-rows: repeat(4, 100px) 1fr; -ms-flex-line-pack: stretch; align-content: stretch; height: 90vh;
}
.grid-item { position: relative; background-color: red; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.grid-item p { margin: 0;
}
.grid-item:nth-child(1) { -ms-grid-column-span: 3; -ms-grid-column: 2; grid-column: 2/span 3; -ms-grid-row: 1; grid-row: 1; background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(https://unsplash.it/1500?image=479); background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(https://unsplash.it/1500?image=479); background-color: blue; background-size: cover; background-position: center center; background-repeat: no-repeat; text-align: right;
}
.grid-item:nth-child(5) { background-color: black;
}
.grid-item:nth-child(2) { background-color: black; color: white;
}
.grid-item:nth-child(3) { background-color: rgba(0, 0, 255, 0.7); color: white;
}
.grid-item:nth-child(4) { -ms-grid-column-span: 4; -ms-grid-column: 1; grid-column: 1/span 4; -ms-grid-row-span: 2; -ms-grid-row: 2; grid-row: 2/span 2; background-color: orange; background-image: -webkit-linear-gradient(rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0.3)), url(https://unsplash.it/1500?image=1068); background-image: linear-gradient(rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0.3)), url(https://unsplash.it/1500?image=1068); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 1rem;
}
.grid-item:nth-child(6) { -ms-grid-column-span: 2; -ms-grid-column: 1; grid-column: 1/span 2; -ms-grid-row-span: all; -ms-grid-row: 4; grid-row: 4/span all; background-color: pink; background-image: url(https://unsplash.it/1500?image=1027); background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 1rem;
}
.grid-item:nth-child(7) { -ms-grid-column-span: 2; -ms-grid-column: 3; grid-column: 3/span 2; grid-row: 4/-1; background-color: pink; background-image: url(https://unsplash.it/1500?image=580); background-size: cover; background-position: center; background-repeat: no-repeat;
}
.grid-item:nth-child(8) { background-color: rgba(255, 255, 255, 0.3); -ms-grid-column-span: 1; -ms-grid-column: 4; grid-column: 4/span 1; -ms-grid-row: 1; grid-row: 1; height: 40px; width: 40px; justify-self: end;
}
.icon-menu,
.icon-shop { font-size: 1.5rem; padding: 0.5rem 0.5rem 0 0.5rem; color: white;
}
.icon-shop { font-size: 1.2rem;
}
.icon-logo { font-size: 1.4rem; color: white;
}
.go-link { position: absolute; right: 1rem; bottom: 1rem; width: 1.5rem; border: 1px solid white; text-align: center; color: white;
}
.tile-heading { font-weight: 400; font-size: 1.2rem; margin: 0; line-height: 1; margin-bottom: 0.5rem;
}
.tile-text { font-size: 0.9rem; line-height: 1;
}
.nav { position: fixed; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: black; color: white; width: 100vw; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 425px;
}
.nav ul { list-style: none; padding: 0;
}
.nav ul a { font-size: 1.5rem; text-decoration: none; color: white;
}
.nav ul li { padding: 1rem 0;
}
.nav ul .icon-apple { text-align: center; font-size: 3rem;
}
.icon-menu-close { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 2rem; color: white; z-index: 100;
}
.hide { display: none;
}
.page { position: fixed; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100vw; height: 100vh; overflow-y: auto; background: white; max-width: 425px;
}
.page img { width: 100%;
}
.page-inner { padding: 1rem; margin-bottom: 3rem;
}
.page-intro { line-height: 1.2;
}
.shop-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem;
}
.shop-item { margin-bottom: 2rem;
}
.shop-item img { width: 100%;
}
.shop-item-header { margin: 0;
}
.shop-item-price { font-size: 1.5rem;
}
.shop-item-summary { line-height: 1.2; margin: 0.5rem 0 2rem;
}
.shop-item-button { border: 1px solid black; background-color: transparent; padding: 0.7rem 1rem; width: 100%;
}
.accordion-heading { font-size: 1.2rem;
}
details[open] summary::before { -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
details[open] summary { outline: 1px solid #ccc;
}
summary { display: block; outline: none; padding: 0 0.3rem;
}
summary::-webkit-details-marker { display: none;
}
summary:before { display: inline-block; content: "›"; margin-right: 0.5rem; font-weight: bold; font-size: 1.2rem;
}
.fade-in { -webkit-animation: fadeIn 300ms ease; animation: fadeIn 300ms ease; opacity: 1;
}
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
.featured-headline { line-height: 1.2;
}
.featured-article { line-height: 1.3;
}
.featured-image-strip { margin: 2rem 0 0;
}
.featured-image-strip-inner { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; overflow-x: auto;
}
.featured-image-strip-inner img { height: 100%;
}
.direction-arrows { text-align: right; margin: 0; font-size: 1.5rem; color: #ccc;
}
.icon-page-close { position: absolute; top: 1rem; right: 1rem; margin: 0; font-size: 1.5rem; width: auto; color: black; z-index: 100;
}
.bottom-dock { position: fixed; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 2rem; margin: 0; z-index: 100;
}
.fullscreen { color: black;
}
.fullscreen p { margin: 0;
}
Tiled Design Using CSS Grid // Interface as Navigation // Mobile // LWD - Script Codes JS Codes
// Launch fullscreen
function launchIntoFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.msRequestFullscreen) { element.msRequestFullscreen(); }
}
$('.icon-fullscreen').on('click', function () { $(this).addClass('hide'); launchIntoFullscreen(document.documentElement); $('.icon-exit-fullscreen').removeClass('hide'); $('.grid-wrapper').css({ 'height' : '100vh' });
});
// Exit fullscreen
function exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
}
$('.icon-exit-fullscreen').on('click', function () { $(this).addClass('hide'); exitFullscreen(document.documentElement); $('.icon-fullscreen').removeClass('hide'); $('.grid-wrapper').css({ 'height' : '90vh' });
});
$('.icon-menu').on('click', function () { $('.nav').removeClass('hide').addClass('fade-in'); $('.icon-page-close').removeClass('hide');
});
$('.icon-menu-close').on('click', function() { $('.nav').addClass('hide').removeClass('fade-in'); $('.icon-page-close').addClass('hide');
});
$('.icon-shop').on('click', function () { $('#shop').removeClass('hide').addClass('fade-in'); $('.icon-page-close').removeClass('hide');
});
$('.logo').on('click', function() { $('#about').removeClass('hide').addClass('fade-in'); $('.icon-page-close').removeClass('hide');
});
$('.icon-page-close').on('click', function () { $('.page, .icon-page-close').addClass('hide');
});
// menu links
$('.nav a').on('click', function () { var tabID = $(this).attr('data-tab'); $('.icon-page-close, #' + tabID).removeClass('hide'); $('.nav').addClass('hide');
});
// article links
$('.article-link').on('click', function () { var tabID = $(this).attr('data-tab'); $('.icon-page-close, #' + tabID).removeClass('hide').addClass('fade-in');
});
| Developer | Brian Haferkamp |
| Username | brianhaferkamp |
| Uploaded | September 28, 2022 |
| Rating | 4.5 |
| Size | 8,918 Kb |
| Views | 22,264 |
Do you need developer help for Tiled Design Using CSS Grid // Interface as Navigation // Mobile // LWD?
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!
Brian Haferkamp (brianhaferkamp) Script Codes
| Name | Size |
| Travel Blog Design with Sticky Nav and Sidebar | 8,383 Kb |
| RADIOLOGY | 2,751 Kb |
| 2-Up Magazine Layout | 8,250 Kb |
| Creating a CSS Flexbox Grid | 2,022 Kb |
| Brutal, Bro | 6,575 Kb |
| Gradient Transitions Between Sections | 3,329 Kb |
| Brutalism Web Design School | 7,231 Kb |
| System Fonts Can Be Beautiful | 7,239 Kb |
| Emoji-Driven Survey | 5,710 Kb |
| Full-Width Hero with Image Using Flexbox | 2,459 Kb |
Create amazing video scripts with AI!
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!
Similar Scripts & Codes
| Name | Username | Size |
| Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
| Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
| TestTube CSS | EZPK | 2,710 Kb |
| Pure CSS Tooltips | Mobius1 | 2,271 Kb |
| ASCII triangle image overlay | Mitchdot | 2,200 Kb |
| Practice using Wixel | Emnk | 3,057 Kb |
| React Markdown Previewer | C0d0er | 3,190 Kb |
| Simple Weather App | Cmwebby | 0 Kb |
| Main page display | BarryKe | 4,562 Kb |
| Parallax scrolling scene | Iharosi | 2,485 Kb |
Do you want hide your ip address?
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!