One page theme
How do I make an one page theme?
What is a one page theme? How do you make a one page theme? This script and codes were developed by Moncho Varela on 07 July 2022, Thursday.
One page theme - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>One page theme</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="header"> <div class="logo"> <a href="javascript:void(0);">LOGO HERE</a> </div> <a href="#" class="toggle_menu"> <i class="fa fa-navicon"></i> </a> <nav class="menu"> <ul> <li><a href="#" data-link="home">Home</a></li> <li><a href="#" data-link="about">About</a></li> <li><a href="#" data-link="contact">Contact</a></li> </ul> </nav> <div class="footer clearfix"> <ul class="social clearfix"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-youtube"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> </ul> <div class="right"> <p>Copyright © 2014.</p> </div> </div>
</header>
<section class="wrapper clearfix" data-section="home"> <div class="box"> <a class="lightCustom" href="https://ununsplash.imgix.net/uploads/1412100990864810490bc/0c412568?fit=crop&fm=jpg&h=700&q=75&w=1050"> <img src="https://ununsplash.imgix.net/uploads/1412100990864810490bc/0c412568?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/> <div class="caption"> <div class="box_title"> <h3>Dakota Roos</h3> </div> </div> </a> </div> <div class="box"> <a class="lightCustom" href="https://ununsplash.imgix.net/reserve/ZF75d1lhQ0SyLWYEGOqO_21_forest_mountains.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050"> <img src="https://ununsplash.imgix.net/reserve/ZF75d1lhQ0SyLWYEGOqO_21_forest_mountains.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/> <div class="caption"> <div class="box_title"> <h3>Ales Krivec</h3> </div> </div> </a> </div> <div class="box"> <a class="lightCustom" href="https://ununsplash.imgix.net/photo-1416949929422-a1d9c8fe84af?fit=crop&fm=jpg&h=700&q=75&w=1050"> <img src="https://ununsplash.imgix.net/photo-1416949929422-a1d9c8fe84af?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/> <div class="caption"> <div class="box_title"> <h3>Sebastian Boguszewicz</h3> </div> </div> </a> </div> <div class="box"> <a class="lightCustom" href="https://unsplash.imgix.net/photo-1416512149338-1723408867e9?fit=crop&fm=jpg&h=725&q=75&w=1050"> <img src="https://unsplash.imgix.net/photo-1416512149338-1723408867e9?fit=crop&fm=jpg&h=725&q=75&w=1050" class="media" alt=""/> <div class="caption"> <div class="box_title"> <h3>Casey Fyfe</h3> </div> </div> </a> </div> <div class="box"> <a class="lightCustom" href="https://unsplash.imgix.net/photo-1416512107527-34cebecbac33?fit=crop&fm=jpg&h=725&q=75&w=1050"> <img src="https://unsplash.imgix.net/photo-1416512107527-34cebecbac33?fit=crop&fm=jpg&h=725&q=75&w=1050" class="media" alt=""/> <div class="caption"> <div class="box_title"> <h3>Casey Fyfe</h3> </div> </div> </a> </div> <div class="box"> <a class="lightCustom" href="https://ununsplash.imgix.net/photo-1415639636295-61ae91a98b39?fit=crop&fm=jpg&h=725&q=75&w=1050"> <img src="https://ununsplash.imgix.net/photo-1415639636295-61ae91a98b39?fit=crop&fm=jpg&h=725&q=75&w=1050" class="media" alt=""/> <div class="caption"> <div class="box_title"> <h3>Ales Krivec</h3> </div> </div> </a> </div> <div class="box"> <a class="lightCustom" href="https://unsplash.imgix.net/photo-1414541944151-2f3ec1cfd87d?fit=crop&fm=jpg&h=700&q=75&w=1050"> <img src="https://unsplash.imgix.net/photo-1414541944151-2f3ec1cfd87d?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/> <div class="caption"> <div class="box_title"> <h3> Ali Inay</h3> </div> </div> </a> </div> <div class="box"> <a class="lightCustom" href="https://ununsplash.imgix.net/reserve/ZF75d1lhQ0SyLWYEGOqO_21_forest_mountains.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050"> <img src="https://ununsplash.imgix.net/reserve/ZF75d1lhQ0SyLWYEGOqO_21_forest_mountains.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/> <div class="caption"> <div class="box_title"> <h3>Ales Krivec</h3> </div> </div> </a> </div> <div class="box"> <a class="lightCustom" href="https://ununsplash.imgix.net/reserve/oY3ayprWQlewtG7N4OXl_DSC_5225-2.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050"> <img src="https://ununsplash.imgix.net/reserve/oY3ayprWQlewtG7N4OXl_DSC_5225-2.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/> <div class="caption"> <div class="box_title"> <h3>Kyle Richner</h3> </div> </div> </a> </div> <div class="box"> <a class="lightCustom" href="https://ununsplash.imgix.net/photo-1414788020357-3690cfdab669?fit=crop&fm=jpg&h=700&q=75&w=1050"> <img src="https://ununsplash.imgix.net/photo-1414788020357-3690cfdab669?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/> <div class="caption"> <div class="box_title"> <h3>Rula Sibai</h3> </div> </div> </a> </div>
</section>
<section class="wrapper clearfix" data-section="about"> <div class="inner"> <div class="inner_thumb"> <img src="https://ununsplash.imgix.net/reserve/ZF75d1lhQ0SyLWYEGOqO_21_forest_mountains.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/> </div> <div class="inner_text"> <h2>ABOUT ME.</h2> <p class="lead">Hello. My name is Moncho Varela . I'm a web designer, web developer, illustrator & musician. I live in Spain, La Coruña, the best place of the World.</p> <p>I'm extremely passionate about the web, design, illustration, animation, typography, web standards, user experience & photography. I've got tons of experience designing logos, icons & mascots for businesses & producing unique online brand experiences. I've been designing websites since 5 years old.</p> <p>I like to <a href="https://twitter.com/nakome">tweet</a> a lot about stuff, so <a href="http://twitter.com/intent/user?screen_name=nakome">follow me</a> on Twitter if you can put up with my ramblings. </p> </div> </div>
</section>
<section class="wrapper clearfix" data-section="contact"> <div class="inner"> <div class="inner_thumb"> <img src="https://unsplash.imgix.net/photo-1414541944151-2f3ec1cfd87d?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/> </div> <div class="inner_text"> <form action=""> <label> Name <input type="text" placeholder="Your name" /> </label> <label> Email <input type="email" placeholder="Your email" required /> </label> <label> Menssage <textarea placeholder="Your message"></textarea> </label> <label> <input type="submit" value="Send" /> </label> </form> </div> </div>
</section> <!-- lightModal --> <div class="lightModal"> <div class="lightModal-inner"> <button class="lightModal-close" role="button">×</button> <h3 class="lightModal-title"></h3> <img class="lightModal-image" src="http://placehold.it/350x150" alt="Title here"> </div> </div> <!-- / lightModal --> <script src="js/index.js"></script>
</body>
</html>
One page theme - Script Codes CSS Codes
*,
:after,
:before { box-sizing: border-box
}
.clearfix:after,
.clearfix:before { content: " "; display: table
}
.clearfix:after { clear: both
}
body,
html { position: relative; height: 100%; font-size: 62.5%; -webkit-tap-highlight-color: transparent
}
body { margin: 0; padding: 0; background: #fff; font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #555
}
.caption,
a { -webkit-transition: all .5s linear; transition: all .5s linear
}
a { color: #000; text-decoration: none
}
a:focus,
a:hover { color: #555; text-decoration: underline
}
a:focus { outline: 5px; outline-offset: -2px
}
hr { margin-top: 21px; margin-bottom: 21px; border: 0; border-top: 1px solid #eee
}
nav ul { margin: 0; padding: 0
}
.lightModal { position: fixed; top: 0; height: 100%; background: #f2f2f2; opacity: 0; visibility: hidden; -webkit-transition: all .8s ease; transition: all .8s ease; z-index: 1024
}
.lightModal .lightModal-inner { display: block; width: 75%; height: 75%; margin: 0 auto; padding: 0
}
.lightModal .lightModal-inner .lightModal-title { font-family: sans-serif; font-weight: 300; color: #777
}
.lightModal .lightModal-inner .lightModal-close { position: absolute; top: .2em; right: .2em; border: none; font-size: 3em; line-height: 1; font-family: serif; background: #F2F2F2; color: #000
}
.lightModal .lightModal-inner .lightModal-close:hover { color: #f55
}
.lightModal .lightModal-inner .lightModal-image { display: block; margin: 0 auto; width: 100%; max-height: 95%
}
.wrapper { width: 100%; height: 100%; padding-left: 250px; position: relative; z-index: 55; background: #f2f2f2; clear: both; display: none
}
.wrapper .box { display: block; width: calc(100% / 3); height: auto; float: left; position: relative; overflow: hidden
}
.wrapper .box .media { width: 100%; vertical-align: middle
}
.wrapper .box .caption { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; background: #f7f7f7; background: rgba(247, 247, 247, .6); opacity: 0
}
.wrapper .box a:hover .caption { opacity: 1
}
.wrapper .box a img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease
}
.wrapper .box a:hover img { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease
}
.box .caption .box_title { display: block; width: 100%; position: absolute; text-align: center; top: 50%; margin-top: -50px
}
.wrapper .box .caption h3 { position: relative; display: inline-block; max-width: 90%; padding: .8em .5em; z-index: 77; color: #191919; font-size: 1.3em; border: .4em solid #1D1D1D
}
.preloader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background: #f2f2f2; visibility: hidden; opacity: 0; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 99999999999999
}
.preloader_inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 4em; height: 2em; line-height: 2em; text-align: center; font-size: 1.2em; font-family: monospace; font-weight: 300; color: #333
}
.inner { background: #FFF; border: 1px solid #E7E7E7; margin: 1em; padding: 0; display: block;
}
.inner .inner_thumb { position: relative; overflow: hidden; max-height: 200px;
}
.inner .inner_thumb img{ width:100%; display:block
}
.inner .inner_text { padding: 1em;
}
form { width: calc(100% / 2); margin: 0;
}
form label { display: block; margin: 1em auto;
}
form input[type="text"],
form input[type="email"],
form textarea { display: block; width: 90%; padding: 0.5em; border: 1px solid #E8E8E8;
}
form textarea { min-height: 8em; width: 100%;
}
form input[type="submit"] { display: block; padding: 0.5em 0.2em; background: #FFF; border: 1px solid #1C1C1C; color: #1B1B1B; min-width: 5em; text-transform: uppercase;
}
form input[type="submit"]:hover { border-color: #F00; color: #F00; -webkit-transition: border 0.5s ease, color 1s ease; transition: border 0.5s ease, color 1s ease;
}
@media (min-width: 1000px) { .header { display: block; position: fixed; top: 0; left: 0; width: 250px; min-height: 100%; padding: 0 0 0 50px; background: #fff; float: left; overflow: hidden; z-index: 9999 } .header .logo { margin-top: 50px; width: 100% } .header .logo a { height: 100px; display: block; text-align: center; line-height: 100px; color: #333 } .header nav ul { margin: 60px 0 0; padding: 0; display: block; overflow: hidden; list-style: none } .header nav ul li { display: block; margin-bottom: 30px } .header nav ul li a.active, .header nav ul li a:hover { color: #969595 } .header .footer { position: absolute; bottom: 1em } .header ul.social { list-style: none; margin: 0 0 5px; padding: 0 } .header ul.social li { display: inline-block; position: relative; margin: 0 .5em .5em 0 } .header ul.social li a { display: inline-block; padding: .1em .5em; border: 1px solid #000; color: #000 } .header ul.social li a:hover { border-color: #f55; color: #f55 } .toggle_menu { display: none } .lightModal,.preloader_inner { left: 250px; width: calc(100% - 250px) }
}
@media (max-width: 1023px) { .header { display: block; width: 100%; min-height: 100px; padding: 0; position: relative } .header .logo { width: calc(100% /2); min-height: 100px; line-height: 100px } .header .logo a { display: block; width: 100%; margin: 0; padding: 0; height: auto; text-align: center; color: #333 } .header .footer { display: none } .header .toggle_menu { margin: 0; display: block; padding: 1em; position: absolute; top: 2em; right: 3em; background: #F2F2F2; color: #A8A8A8 } .header .toggle_menu:hover { background: #1B1B1B } .header nav ul { list-style: none; display: none; margin-top: 35px; position: relative } .header nav ul li a { display: block; width: 100%; padding: 30px 0; text-align: center; color: #ADABAB; font-size: 1.2em; text-decoration: none; border-top: 1px solid #E5E5E5; background: #F4F4F4 } .header nav ul li a:active { background: #f7f5f5 } .toggle_menu { display: block } .wrapper .box { width: calc(100% / 2); max-height: 200px; } .wrapper { width: 100%; position: relative; padding-left: 0 } .lightModal { left: 0; width: 100% } .lightModal .lightModal-inner { margin: 10% auto }
}
@media (max-width: 550px) { form,form input,form label{ width:100%; } .lightModal .lightModal-inner { margin: 10% auto } .wrapper .box { width: 100% }
}
.show_menu { display: block!important; -webkit-transition: all .8s ease; transition: all .8s ease
}
.show { opacity: 1; visibility: visible; -webkit-transition: all .8s ease; transition: all .8s ease
}
.show-section { display: block; opacity: 1; -webkit-animation: fade 1s 1 ease; animation: fade 1s 1 ease
}
@-webkit-keyframes fade { 0% { opacity: 0 }
}
@keyframes fade { 0% { opacity: 0 }
}
One page theme - Script Codes JS Codes
/*====================================
* Vars
======================================*/
// links of pages
// data-link="foo" show data-section="foo"
var links = Array.prototype.slice.call( document.querySelectorAll('[data-link]')), sections = Array.prototype.slice.call( document.querySelectorAll('[data-section]'));
// menu vars
var menu = d('.menu').querySelector('ul'), menuBtn = d('.toggle_menu');
/*====================================
* window load
======================================*/
window.addEventListener('load',init,false);
/*====================================
* Short Selector
======================================*/
function d(el){ if(el) return document.querySelector(el);
}
/*====================================
* Init app
======================================*/
function init(){ // first time active home d('[data-section="home"]').classList.add('show-section'); d('[data-link="home"]').classList.add('active'); try{ loader(); navigation(); lightModal(); toggleSections(); }catch(e){ alert(e); }
}
/*====================================
* Toggle sections
======================================*/
function toggleSections(){ Array.prototype.forEach.call(links,function(o,i){ o.addEventListener('click',function(e){ var section = d('[data-section="'+this.getAttribute('data-link')+'"]'); e.preventDefault(); removeLinks(function(){ o.classList.add('active'); section.classList.add('show-section'); menu.classList.toggle('show_menu'); if(menu.classList.contains('show_menu')){ menuBtn.innerHTML = '<i class="fa fa-close"></i>'; }else{ menuBtn.innerHTML = '<i class="fa fa-navicon"></i>'; } }); }); });
}
/*===========================================
* Remove active and show-section classes
=============================================*/
function removeLinks(_success){ Array.prototype.forEach.call(links,function(o,i){ o.classList.remove('active');}); Array.prototype.forEach.call(sections,function(o,i){ o.classList.remove('show-section'); }); if(_success()) return _success();
}
/*====================================
* Menu
======================================*/
function navigation(){ menuBtn.addEventListener('click',function(){ menu.classList.toggle('show_menu'); if(menu.classList.contains('show_menu')){ menuBtn.innerHTML = '<i class="fa fa-close"></i>'; }else{ menuBtn.innerHTML = '<i class="fa fa-navicon"></i>'; } });
}
/*====================================
* Custom LightModal
======================================*/
function lightModal(){ var links = document.querySelectorAll('.lightCustom'), arrayOfLinks = Array.prototype.slice.call(links); Array.prototype.forEach.call(arrayOfLinks, function (obj, index) { obj.addEventListener('click', function (e) { e.preventDefault(); var title = obj.title ? obj.title : '...'; d('.lightModal').classList.add('show'); d('.lightModal-title').innerHTML = title; d('.lightModal-image').src = obj.href; d('.lightModal-image').alt = title; }); d('.lightModal-close').addEventListener('click', function (e) { e.preventDefault(); d('.lightModal').classList.remove('show'); d('.lightModal-title').innerHTML = ''; d('.lightModal-image').src = ''; d('.lightModal-image').alt = ''; }); });
}
/*====================================
* Loader
======================================*/
function loader(_success) { var obj = document.createElement('div'); obj.className = 'preloader'; var inner = document.createElement('div'); inner.className = 'preloader_inner'; d('.wrapper').appendChild(obj); obj.appendChild(inner); obj.classList.add('show'); var w = 0, t = setInterval(function() { w = w + 1; inner.textContent = w+'%'; if (w === 100){ obj.classList.remove('show'); clearInterval(t); w = 0; obj.remove(); if (_success){ return _success(); } } }, 20);
}
Developer | Moncho Varela |
Username | nakome |
Uploaded | July 07, 2022 |
Rating | 4.5 |
Size | 6,183 Kb |
Views | 42,504 |
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 |
Data uri converter | 4,979 Kb |
How to make spanish tortilla | 3,133 Kb |
A Pen by Moncho Varela | 7,581 Kb |
Responsive table with json data. | 4,802 Kb |
Get json with data attributes | 3,609 Kb |
Get color on click | 29,575 Kb |
Calendar with json events mobile concept | 4,022 Kb |
Very simple svg animation | 5,632 Kb |
Simply Redirect to | 1,989 Kb |
Css3 slide | 3,190 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 |
Flat UI - Checkbox FIX | ARS | 2,663 Kb |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
Glowing Pulse Form | Jackrugile | 2,542 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
700 Synapses Per Second | Silentkrange | 2,138 Kb |
Banner Ad | Raquellorenzana | 4,172 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 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!