Tolep Coy tolepcoy

FullView Js Example Landing Page

Create full-screen pages fast and simple - A simple and easy to use a library that creates fullscreen scrolling websites FullView.js is a simple, light-weighted and easy to use JavaScript library to create full-screen scrolling websites.

Its enables the visitor to navigate through pages with a smooth full-screen scroll effect. Supports keyboard, mouse wheel on desktop, and swipe up/down/left/right events on touch device.

Also comes with a side navigation dots, containing anchor links that allow the visitor to scroll the page to a specific content section.

A Pen by TolepCoy on CodePen.

App Panels

This is a quick CSS3 version of an app style 3D panel effect seen in some native mobile apps.

A Pen by Alan Crissey on CodePen.

License.

Bottom Icon-Based Navigation Menu

Take from my YouTube video: https://youtu.be/uHL6aeWUEQQ

In this video tutorial I'll be showing you how to create a bottom, icon-based navigation bar using HTML and CSS. This style of navigation is very popular on mobile apps or websites.

A Pen by Dom on CodePen.

License.

CSS Big Mac

A tribute to the Hamburger Menu (made famous by Facebook's mobile app) and one kick ass sandwich, the Big Mac.

A Pen by Josh Bader on CodePen.

License.

	.app
	.no-int
	nav
	button(tabindex="0",data-home)
	.btn-cnt(tabindex="-1")
	svg(class="icon",xmlns="http://www.w3.org/2000/svg",viewBox="0 0 32 32",x="0px",y="0px")
	g
	polygon(points="16,2 2,12 2,30 30,30 30,12 16,2")

	span="Home"

	.app
	.no-int
	nav
	button(tabindex="0",data-home)
	.btn-cnt(tabindex="-1")
	svg(class="icon",xmlns="http://www.w3.org/2000/svg",viewBox="0 0 32 32",x="0px",y="0px")
	g
	polygon(points="16,2 2,12 2,30 30,30 30,12 16,2")

	span="Home"

	<div class="content">
	<form action="">
	<h2>Login</h2>
	<div class="input-box">
	<input type="text" placeholder="Username" required />
	<i class="ri-user-fill"></i>
	</div>
	<div class="input-box">
	<input type="password" id="password" placeholder="Password" required autocomplete="new-password" />
	<i class="ri-eye-off-fill toggle-password" id="togglePassword"></i>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>MobileShop - Your Pocket Store</title>
	<style>
	:root {
	--primary-color: #4a90e2;
	--secondary-color: #f39c12;

	<div class="swipegory">
	<nav>
	<ul>
	<li><a href="#item1">About</a></li>
	<li><a href="#item2">Featured</a></li>
	<li><a href="#item3">Recent</a></li>
	<li><a href="#item4">Popular</a></li>
	<li><a href="#item5">Lorem</a></li>
	<li><a href="#item6">Ipsum</a></li>
	<li><a href="#item7">Dolor</a></li>

	<div class="container">
	<div class="phone">
	<nav class="navigation">
	<ul class="navigation__list">

	<li class="navigation__item">
	<a class="navigation__link active" href="#home">
	<i class="navigation__icon" data-feather="home"></i>
	<span class="navigation__text">HOME</span>
	</a>