One page theme

Developer
Moncho Varela
Size
6,183 Kb
Views
42,504
  1. One page theme Previews
  2. One page theme HTML Codes
  3. One page theme CSS Codes
  4. One page theme JS Codes

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 Previews
IQ Test

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 &amp; 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 &amp; photography. I've got tons of experience designing logos, icons &amp; mascots for businesses &amp; 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">&times;</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);
}
One page theme - Script Codes
One page theme - Script Codes
Home Page Home
Developer Moncho Varela
Username nakome
Uploaded July 07, 2022
Rating 4.5
Size 6,183 Kb
Views 42,504
Do you need developer help for One page theme?

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!

Moncho Varela (nakome) Script Codes
Name
Captcha Colors experiment
Css3 slide
Get json with data attributes
Background video
Responsive Gallery with Json data
Gallery with list style
Another Gallery
Simple Calendar with json events
Simply Redirect to
Another preloader, Airport panel.
Create amazing art & images 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!