Neo minimal theme

Developer
Moncho Varela
Size
8,124 Kb
Views
52,624
  1. Neo minimal theme Previews
  2. Neo minimal theme HTML Codes
  3. Neo minimal theme CSS Codes
  4. Neo minimal theme JS Codes

How do I make an neo minimal theme?

Photos: unsplash.com Made with love. What is a neo minimal theme? How do you make a neo minimal theme? This script and codes were developed by Moncho Varela on 07 July 2022, Thursday.

Neo minimal theme Previews
IQ Test

Neo minimal theme - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Neo minimal theme</title> <meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <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> <div class="preloader"> <!-- preloader --> <div class="preloader-inner"> NEO </div>
</div>
<!-- page -->
<main class="wrapper hide fullscreen"> <!-- header --> <header class="head"> <div class="logo"> <a href="/" data-link="home">NEO</a> </div> <div class="bt-menu"> <span></span> <span></span> <span></span> </div> <div class="box-menu"> <ul class="menu"> <li><a href="/" data-link="home" class="active">Home</a></li> <li><a href="/" data-link="about">About</a></li> <li><a href="/" data-link="work">Work</a></li> <li><a href="/" data-link="contact">Contact</a></li> </ul> <ul class="social"> <li> <a href="#" target="_blank"><i class="fa fa-google"></i>+</a> </li> <li> <a href="#" target="_blank"><i class="fa fa-twitter"></i></a> </li> <li> <a href="#" target="_blank"><i class="fa fa-youtube"></i></a> </li> <li> <a href="#" target="_blank"><i class="fa fa-facebook"></i></a> </li> </ul> </div> </header> <!-- section --> <section class="page" 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"> <span>Dakota Roos</span> <span>Comments 0</span> <span>Likes 5</span> </div> <div class="box_description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, velit, sapiente dolorem explicabo eaque voluptate officia eos consequuntur asperiores incidunt nam saepe quod odit voluptatibus corporis? Cupiditate, corrupti laborum saepe. </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"> <span>Ales Krivec</span> <span>Comments 0</span> <span>Likes 5</span> </div> <div class="box_description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, velit, sapiente dolorem explicabo eaque voluptate officia eos consequuntur asperiores incidunt nam saepe quod odit voluptatibus corporis? Cupiditate, corrupti laborum saepe. </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"> <span>Sebastian Boguszewicz</span> <span>Comments 0</span> <span>Likes 5</span> </div> <div class="box_description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, velit, sapiente dolorem explicabo eaque voluptate officia eos consequuntur asperiores incidunt nam saepe quod odit voluptatibus corporis? Cupiditate, corrupti laborum saepe. </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"> <span>Casey Fyfe</span> <span>Comments 0</span> <span>Likes 5</span> </div> <div class="box_description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, velit, sapiente dolorem explicabo eaque voluptate officia eos consequuntur asperiores incidunt nam saepe quod odit voluptatibus corporis? Cupiditate, corrupti laborum saepe. </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"> <span>Casey Fyfe</span> <span>Comments 0</span> <span>Likes 5</span> </div> <div class="box_description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, velit, sapiente dolorem explicabo eaque voluptate officia eos consequuntur asperiores incidunt nam saepe quod odit voluptatibus corporis? Cupiditate, corrupti laborum saepe. </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"> <span>Ales Krivec</span> <span>Comments 0</span> <span>Likes 5</span> </div> <div class="box_description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, velit, sapiente dolorem explicabo eaque voluptate officia eos consequuntur asperiores incidunt nam saepe quod odit voluptatibus corporis? Cupiditate, corrupti laborum saepe. </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"> <span> Ali Inay</span> <span>Comments 0</span> <span>Likes 5</span> </div> <div class="box_description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, velit, sapiente dolorem explicabo eaque voluptate officia eos consequuntur asperiores incidunt nam saepe quod odit voluptatibus corporis? Cupiditate, corrupti laborum saepe. </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"> <span>Ales Krivec</span> <span>Comments 0</span> <span>Likes 5</span> </div> <div class="box_description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, velit, sapiente dolorem explicabo eaque voluptate officia eos consequuntur asperiores incidunt nam saepe quod odit voluptatibus corporis? Cupiditate, corrupti laborum saepe. </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"> <span>Kyle Richner</span> <span>Comments 0</span> <span>Likes 5</span> </div> <div class="box_description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, velit, sapiente dolorem explicabo eaque voluptate officia eos consequuntur asperiores incidunt nam saepe quod odit voluptatibus corporis? Cupiditate, corrupti laborum saepe. </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"> <span>Rula Sibai</span> <span>Comments 0</span> <span>Likes 5</span> </div> <div class="box_description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, velit, sapiente dolorem explicabo eaque voluptate officia eos consequuntur asperiores incidunt nam saepe quod odit voluptatibus corporis? Cupiditate, corrupti laborum saepe. </div> </div> </a> </div> <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"> <span>Dakota Roos</span> <span>Comments 0</span> <span>Likes 5</span> </div> <div class="box_description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, velit, sapiente dolorem explicabo eaque voluptate officia eos consequuntur asperiores incidunt nam saepe quod odit voluptatibus corporis? Cupiditate, corrupti laborum saepe. </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"> <span>Ales Krivec</span> <span>Comments 0</span> <span>Likes 5</span> </div> <div class="box_description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, velit, sapiente dolorem explicabo eaque voluptate officia eos consequuntur asperiores incidunt nam saepe quod odit voluptatibus corporis? Cupiditate, corrupti laborum saepe. </div> </div> </a> </div> </section> <section class="page" data-section="about"> <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> <span class="divider"></span> <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> </section> <section class="page" data-section="work"> Work here </section> <section class="page" data-section="contact"> <h2>Contact Me</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, ad, reprehenderit, quia id eum nobis consequuntur hic similique error sunt officia maxime. Dolorum, enim at veritatis obcaecati velit esse provident.</p> <div class="divider"></div> <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="checkbox" checked /> Are you a Robot ? </label> <label> <input type="submit" value="Send Email" /> </label> </form> </section>
</main> <!-- 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="" alt="Title here"> <p class="lightModal-desc"></p> </div> </div> <!-- / lightModal --> <script src="js/index.js"></script>
</body>
</html>

Neo minimal theme - Script Codes CSS Codes

/* = Typhografy
------------------------------------------------------------*/
*{ box-sizing:border-box;
}
html,body{ position:relative; height:100%;
}
html{	height: 100%;
}
/* Simple fxv*/
body{ -webkit-transform:scale(1); transform:scale(1); -webkit-animation:slide 1s ease; animation:slide 1s ease;
}
@-webkit-keyframes slide{ 0%{ -webkit-transform:scale(0.2); transform:scale(0.2); }
}
@keyframes slide{ 0%{ -webkit-transform:scale(0.2); transform:scale(0.2); }
}
body{ font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-size:13px; line-height:1.6em; background:white; overflow:hidden; height: 100%; font-size:15px; color: #000; line-height: 180%;
}
.scroll{ overflow:auto;
}
a{	color: #777;	text-decoration: none;	-webkit-transition: all .25s ease-out;	transition: all .25s ease-out;
}
li{	list-style:none;
}
/* FONTS */
h2{	margin-bottom: 20px;	font-size: 35px;
}
h3{	margin-bottom: 20px;	font-size: 22px;
}
h4{	margin-bottom: 0;	font-size: 18px;
}
p{	margin-bottom: 20px;
}
/* boxes
------------------------------------------------------------*/
.half{ display:block; width:calc(100% / 2); float:left;
}
/* Preloader
------------------------------------------------------------*/
.preloader{ position:absolute; top:0; left:0; width:100%; height:100%; background:black; color:white;
}
.preloader-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 150px; height: 150px; background: white; color: black; text-align: center; margin: auto; font-size: 50px; line-height: 140px; -webkit-transition:all 1s ease; transition: all 1s ease; visibility: visible; opacity: 1;
}
/* header
------------------------------------------------------------*/
.head{ clear:both; overflow:hidden; display:block; min-height:80px; line-height:70px; background:white; border-bottom:1px solid #eee;
}
.logo a{	position: absolute;	top: 20px;	left: 20px;	z-index: 900; display:block; width:70px; height:70px; background:black; color:white; text-align:center; font-size:20px; text-decoration:none; border:1px solid black; -webkit-transition:background 0.5s ease; transition:background 0.5s ease;
}
.logo a:hover{ background:white; color:black; -webkit-transition:background 0.5s ease; transition:background 0.5s ease;
}
/* Menu
------------------------------------------------------------*/
.bt-menu {	position: absolute;	top: 20px;	right: 20px;	width: 29px;	height: 29px;	pointer-events: auto;	cursor: pointer;	z-index: 905;
}
.bt-menu.close span {	background: #333;
}
.bt-menu span {	display: block;	position: absolute;	left: 0;	width: 29px;	height: 5px;	background: #000;
}
.bt-menu span:nth-child(1) {	top: 0;
}
.bt-menu span:nth-child(2) {	top: 10px;
}
.bt-menu span:nth-child(3) {	top: 20px;
}
/* Anime Span 1 */
.bt-menu span:nth-child(1) {	-webkit-animation: animeBt1Out .6s forwards;	animation: animeBt1Out .6s forwards;
}
@-webkit-keyframes animeBt1Out {	0% { -webkit-transform: translateY(10px); transform: translateY(10px); left: -10px; -webkit-transform: matrix(0, 1, -1, 0, 0, 10); transform: matrix(0, 1, -1, 0, 0, 10); }	33% { -webkit-transform: translateY(10px); transform: translateY(10px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, 10); transform: matrix(0, 1, -1, 0, 0, 10); }	66% { -webkit-transform: translateY(10px); transform: translateY(10px); left: 0px; }	100% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }
}
@keyframes animeBt1Out {	0% { -webkit-transform: translateY(10px); transform: translateY(10px); left: -10px; -webkit-transform: matrix(0, 1, -1, 0, 0, 10); transform: matrix(0, 1, -1, 0, 0, 10); }	33% { -webkit-transform: translateY(10px); transform: translateY(10px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, 10); transform: matrix(0, 1, -1, 0, 0, 10); }	66% { -webkit-transform: translateY(10px); transform: translateY(10px); left: 0px; }	100% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }
}
.bt-menu.play:hover span:nth-child(1) {	-webkit-animation: animeBt1Hover .6s forwards;	animation: animeBt1Hover .6s forwards;
}
@-webkit-keyframes animeBt1Hover {	0% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }	33% { -webkit-transform: translateY(10px); transform: translateY(10px); left: 0px; }	66% { -webkit-transform: translateY(10px); transform: translateY(10px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, 10); transform: matrix(0, 1, -1, 0, 0, 10); }	100% { -webkit-transform: translateY(10px); transform: translateY(10px); left: -10px; -webkit-transform: matrix(0, 1, -1, 0, 0, 10); transform: matrix(0, 1, -1, 0, 0, 10); }
}
@keyframes animeBt1Hover {	0% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }	33% { -webkit-transform: translateY(10px); transform: translateY(10px); left: 0px; }	66% { -webkit-transform: translateY(10px); transform: translateY(10px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, 10); transform: matrix(0, 1, -1, 0, 0, 10); }	100% { -webkit-transform: translateY(10px); transform: translateY(10px); left: -10px; -webkit-transform: matrix(0, 1, -1, 0, 0, 10); transform: matrix(0, 1, -1, 0, 0, 10); }
}
/* Anime Span 2 */
.bt-menu span:nth-child(2) {	-webkit-animation: animeBt2Out .6s forwards;	animation: animeBt2Out .6s forwards;
}
@-webkit-keyframes animeBt2Out {	0% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, 0); transform: matrix(0, 1, -1, 0, 0, 0); }	33% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, 0); transform: matrix(0, 1, -1, 0, 0, 0); }	66% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }	100% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }
}
@keyframes animeBt2Out {	0% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, 0); transform: matrix(0, 1, -1, 0, 0, 0); }	33% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, 0); transform: matrix(0, 1, -1, 0, 0, 0); }	66% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }	100% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }
}
.bt-menu.play:hover span:nth-child(2) {	-webkit-animation: animeBt2Hover .6s forwards;	animation: animeBt2Hover .6s forwards;
}
@-webkit-keyframes animeBt2Hover {	0% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }	33% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }	66% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, 0); transform: matrix(0, 1, -1, 0, 0, 0); }	100% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, 0); transform: matrix(0, 1, -1, 0, 0, 0); }
}
@keyframes animeBt2Hover {	0% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }	33% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }	66% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, 0); transform: matrix(0, 1, -1, 0, 0, 0); }	100% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, 0); transform: matrix(0, 1, -1, 0, 0, 0); }
}
/* Anime Span 3 */
.bt-menu span:nth-child(3) {	-webkit-animation: animeBt3Out .6s forwards;	animation: animeBt3Out .6s forwards;
}
@-webkit-keyframes animeBt3Out {	0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); left: 10px; -webkit-transform: matrix(0, 1, -1, 0, 0, -10); transform: matrix(0, 1, -1, 0, 0, -10); }	33% { -webkit-transform: translateY(-10px); transform: translateY(-10px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, -10); transform: matrix(0, 1, -1, 0, 0, -10); }	66% { -webkit-transform: translateY(-10px); transform: translateY(-10px); left: 0px; }	100% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }
}
@keyframes animeBt3Out {	0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); left: 10px; -webkit-transform: matrix(0, 1, -1, 0, 0, -10); transform: matrix(0, 1, -1, 0, 0, -10); }	33% { -webkit-transform: translateY(-10px); transform: translateY(-10px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, -10); transform: matrix(0, 1, -1, 0, 0, -10); }	66% { -webkit-transform: translateY(-10px); transform: translateY(-10px); left: 0px; }	100% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }
}
.bt-menu.play:hover span:nth-child(3) {	-webkit-animation: animeBt3Hover .6s forwards;	animation: animeBt3Hover .6s forwards;
}
@-webkit-keyframes animeBt3Hover {	0% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }	33% { -webkit-transform: translateY(-10px); transform: translateY(-10px); left: 0px; }	66% { -webkit-transform: translateY(-10px); transform: translateY(-10px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, -10); transform: matrix(0, 1, -1, 0, 0, -10); }	100% { -webkit-transform: translateY(-10px); transform: translateY(-10px); left: 10px; -webkit-transform: matrix(0, 1, -1, 0, 0, -10); transform: matrix(0, 1, -1, 0, 0, -10); }
}
@keyframes animeBt3Hover {	0% { -webkit-transform: translateY(0px); transform: translateY(0px); left: 0px; }	33% { -webkit-transform: translateY(-10px); transform: translateY(-10px); left: 0px; }	66% { -webkit-transform: translateY(-10px); transform: translateY(-10px); left: 0px; -webkit-transform: matrix(0, 1, -1, 0, 0, -10); transform: matrix(0, 1, -1, 0, 0, -10); }	100% { -webkit-transform: translateY(-10px); transform: translateY(-10px); left: 10px; -webkit-transform: matrix(0, 1, -1, 0, 0, -10); transform: matrix(0, 1, -1, 0, 0, -10); }
}
.bt-menu.close {	border: transparent;
}
.bt-menu.close span {	-webkit-animation:none; animation:none;	-webkit-transition:all .25s ease-out;	transition: all .25s ease-out;
}
.bt-menu.close span:nth-child(1) {	-webkit-transform: rotate(45deg) translate(7.5px, 7.5px); transform: rotate(45deg) translate(7.5px, 7.5px);
}
.bt-menu.close span:nth-child(2) {	display: none;
}
.bt-menu.close span:nth-child(3) {	-webkit-transform: rotate(135deg) translate(-6.5px, 6.5px); transform: rotate(135deg) translate(-6.5px, 6.5px);
}
.bt-menu.close:hover span {	background-color: #777;
}
.box-menu{	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;	background: rgba(0,0,0,0);	visibility: hidden;	opacity: 0;	z-index: 901;	-webkit-transition:all 1s cubic-bezier(0.7, 0.01, 0.3, 1);	transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.box-menu.show{	visibility: visible;	opacity: 1;	background: rgba(255,255,255,0.9);
}
.box-menu .menu{	position: absolute;	top: 50%;	right: 70px;	margin-top: -126px;
}
.box-menu .menu li{	margin-bottom: 0;	text-align: right;	font-size: 38px;	line-height: normal;
}
.box-menu .menu li:last-child{	margin-bottom: 0;
}
.box-menu .menu li a,
.box-menu .menu li span{	color: #333;	cursor: pointer;	-webkit-transition:all .25s ease-out;	transition: all .25s ease-out;
}
.box-menu .menu li.active a,
.box-menu .menu li a:hover,
.box-menu .menu li span:hover{	color: #777;
}
.box-menu .menu li.active a{ background:#eee;
}
.box-menu .social{	position: absolute;	bottom: 50px;	left: 70px;
}
.box-menu .social li{	float: left;	margin: 0 7px 7px 0;	overflow: hidden;
}
.box-menu .social li a{ position: relative; display: block; width: 36px; height: 36px; border: 2px solid #333; border-radius: 100%; color: #333; overflow: hidden; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; margin: 0; padding: 0; font-size: 15px; text-align: center; line-height: 34px;
}
.box-menu .social li a:hover {	color: #777;	border-color: #777;
}
/* Page
------------------------------------------------------------*/
.page{ display:none; opacity:0;
}
/* Wrapper
------------------------------------------------------------*/
.wrapper{ display:block; background: #FDFDFD; height: auto; padding: 1em; position: relative; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; padding-bottom:3em; clear:both;
}
/* Footer
------------------------------------------------------------*/
.footer{	width: 100%;	padding: 0 70px;	font-size: 18px;	overflow: hidden;	z-index: 900;	box-sizing: border-box;
}
.footer-left{	position: relative;	float: left;	font-weight: bold;
}
.footer-left.style2{	position: static;
}
.footer-left a{	display: inline-block;	color: #19A598;
}
.footer-left a:before{	content: '';	display: inline-block;	width: 45px;	height: 3px;	margin-right: 5px;	background-color: #19A598;
}
.footer-left .box{	padding-top: 40px;	line-height: normal;
}
.footer .menu{	float: right;
}
.footer .menu li{	position: relative;	float: left;	padding-right: 10px;	margin-right: 10px;
}
.footer .menu li:after{	content: '';	position: absolute;	top: 5px;	right: 0;	width: 1px;	height: 16px;	background-color: #19A598;
}
.footer .menu li:last-child{	margin-right: 0;	padding-right: 0;
}
.footer .menu li:last-child:after{	display: none;
}
.footer .menu li a:hover{	text-decoration: underline;
}
/* Iframe
----------------------------------------------------------*/
.iframe{	position: absolute;	width: 100%;	height: 100%;	top: 0;	left: 0;	overflow: hidden;	opacity: 0;	z-index: 0;	-webkit-transition: all 1s ease-in-out;	transition: all 1s ease-in-out;
}
.iframe.show{	opacity:1;
}
/* Box vide
----------------------------------------------------------*/
.box-video{	position: absolute;	width: 100%;	height: 100%;	top: 0;	left: 0;	overflow: hidden;	z-index: 1;
}
.box-video video{	min-width: 100%;	min-height: 100%;
}
/* Full Screen
----------------------------------------------------------*/
.fullscreen{	width: 100%;	height: 100%;
}
.fullscreen .footer{	position: absolute;	bottom: 50px;	left: 0;
}
/* Figure
----------------------------------------------------------*/
figure {	position: relative;	overflow: hidden;
}
figure img{	float: left;	width: 100%;	height: auto;
}
/* Video
----------------------------------------------------------*/
.video-container {	position: relative;	height: 0;	padding-bottom: 56.25%;	padding-top: 30px;	overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;
}
/* buttons
----------------------------------------------------------*/
.button{	display: inline-block;	height: 45px;	padding: 0 50px;	line-height: 45px;	border: 1px solid #19A598;	background-color:transparent;	text-align: center;	color: #19A598;	font-size: 17px;	font-family: 'MuseoSans_Fat';	cursor: pointer;	-webkit-transition: all .25s ease-out;	transition: all .25s ease-out;
}
.button.bt-large{	height: 58px;	line-height: 58px;
}
.button:hover{	opacity: 0.75;
}
/* Lightmodal
------------------------------------------------------------*/
.lightModal { position: fixed; top: 0; height: 100%; background: rgba(255, 255, 255, 0.88); opacity: 0; visibility: hidden; -webkit-transition:all .8s ease; transition: all .8s ease; z-index: 1024; color:#777;
}
.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: #333
}
.lightModal .lightModal-inner .lightModal-close { position: absolute; top: .2em; right: .2em; border: none; font-size: 3em; line-height: 1; font-family: serif; background: rgba(0, 0, 0, 0); color: #333;
}
.lightModal .lightModal-inner .lightModal-close:hover { color: #777
}
.lightModal .lightModal-inner .lightModal-image { display: block; margin: 0 auto; width: 100%; max-height: 95%
}
/* Utils
------------------------------------------------------------*/
.divider{ display:block; width:100%; margin:1em auto; border-bottom: 1px solid #eee; -webkit-animation: width; animation: width;
}
@-webkit-keyframes width{ 0%{ width:0; }
}
@keyframes width{ 0%{ width:0; }
}
.show{ visibility:visible; opacity:1; -webkit-transition:all 1s ease; transition: all 1s ease;
}
.hide{ visibility:hidden; opacity:0; -webkit-transition:all 1s ease; transition: all 1s ease;
}
.show-section { display: table; opacity: 1; -webkit-animation: fade 1s 1 ease; animation: fade 1s 1 ease
}
iframe{	border: none;
}
.clear{	clear: both;
}
.hide{	display: none;
}
.thin{	font-family: 'MuseoSans_Thin';
}
.bold{	font-family: 'MuseoSans_Fat';	font-weight: normal;
}
.x-bold{	font-family: 'MuseoSans_xFat';	font-weight: normal;
}
.fs-17{	font-size: 17px;
}
.head-title-medium{	font-size: 17px;	font-family: 'MuseoSans_Fat';
}
.color-default{	color: #000;
}
.color-red{	color: #19A598;
}
.font-small{	font-size: 12px;
}
.through{	text-decoration:line-through;
}
.uppercase{	text-transform: uppercase;
}
.underline{	text-decoration: underline;
}
.italic{	font-style: italic;
}
.font-size-large{	font-size:17px;
}
.text-right{	text-align: right;
}
.pointer{	cursor: pointer;
}
.left{	float: left;
}
.right{	float: right;
}
.texts-together h3,
.texts-together p{	margin-bottom: 5px;
}
.display-table{	display: table;
}
.align-bottom{	display: table-cell;	vertical-align: bottom;
}
/* Home Gallery
------------------------------------------------------------*/
.box { display: block; width: calc(100% / 3 - 0.5em); height: auto; float: left; position: relative; overflow: hidden; margin:0.25em;
}
.box .media { width: 100%; vertical-align: middle
}
.box .caption { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; background: #000; background: rgba(0, 0, 0, 0.2); opacity: 0; -webkit-transition:all 0.5s ease; transition:all 0.5s ease;
}
.box a:hover .caption { opacity: 1; -webkit-transition:all 0.5s ease; transition:all 0.5s ease;
}
.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
}
.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
}
.box .caption .box_description{ display:none;
}
.box .caption span { position: relative; display: block; max-width:60%; padding: 0.5em; z-index: 77; background: black; border-bottom: 1px solid rgb(22, 22, 22); color: white; font-size: 12px; font-weight: 300; text-align: center; margin: auto; box-shadow: 0 6px 6px -6px black; opacity:1;
}
.box .caption:hover span { -webkit-animation: slideDown 0.5s 1 ease; animation: slideDown 0.5s 1 ease;
}
.box .caption:hover span + span{ -webkit-animation: slideDown 1s 1 ease; animation: slideDown 1s 1 ease;
}
.box .caption:hover span + span + span{ -webkit-animation: slideDown 1.5s 1 ease; animation: slideDown 1.5s 1 ease;
}
@-webkit-keyframes slideDown{ 0%{ opacity:0; }
}
@keyframes slideDown{ 0%{ opacity:0; }
}
/* About
------------------------------------------------------------*/
/* Contact
------------------------------------------------------------*/
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:none; border-bottom: 1px solid #000; -webkit-transition:all 0.5s ease; transition:all 0.5s ease;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form textarea:focus{ outline-color:blue; -webkit-transition:all 0.5s ease; transition:all 0.5s ease;
}
form textarea { min-height: 8em; width: 100%; resize:none;
}
form input[type="submit"] { display: block; padding: 0.5em 1em; background: #FFF; border: 1px solid #000; color: #000; min-width: 5em; text-transform: uppercase; -webkit-transition:border 0.5s ease, color 1s ease; transition: border 0.5s ease, color 1s ease;
}
form input[type="submit"]:hover { background: #000; color: #fff; -webkit-transition:border 0.5s ease, color 1s ease; transition: border 0.5s ease, color 1s ease;
}
/* = Media queries
------------------------------------------------------------*/
@media screen and (max-width:1366px) { .wrapper .box { display: block; width: calc(100% / 5 - 0.5em); margin:0.25em; }
}
@media screen and (min-width: 1200px){ .wrapper .box { display: block; width: calc(100% / 4 - 0.5em); margin:0.25em; }
}
@media screen and (max-width:1024px) { .wrapper .box { display: block; width: calc(100% / 3 - 0.5em); margin:0.25em; }
}
@media screen and (min-width: 980px){ .wrapper .box { display: block; width: calc(100% / 3 - 0.5em); margin:0.25em; }
}
@media screen and (max-width: 768px){ .wrapper .box { display: block; width: calc(100% / 2 - 0.5em); margin:0.25em; }
}
@media screen and (max-width: 640px){ .wrapper .box { display: block; width: calc(100% / 1 - 0.5em); margin:0.25em; } form,input[type="submit"], input[type="text"]{ width: 100%; text-align:left } .half:first-child{ width:30%; } .half:last-child{ width:70%; }
}

Neo minimal theme - Script Codes JS Codes

var links = Array.prototype.slice.call(document.querySelectorAll('[data-link]')),
sections = Array.prototype.slice.call(document.querySelectorAll('[data-section]'));
var preloader = document.querySelector('.preloader');
var wrapper = document.querySelector('.wrapper');
var bt = document.querySelector('.bt-menu');
var boxMenu = document.querySelector('.box-menu');
var app = (function(){ 'use strict'; return { init: function(){ document.querySelector('[data-link="home"]').classList.add('active'); document.querySelector('[data-section="home"]').classList.add('show-section'); document.body.classList.add('scroll'); loader(); menu(); toggleSections(); lightModal(); } };
})();
window.addEventListener('load',app.init,false);
/* Menu
----------------------------------------------------------------------*/
function menu(){ bt.addEventListener('click',function(){ if(bt.classList.contains('close')){ bt.classList.remove('close'); boxMenu.classList.remove('show'); document.body.classList.add('scroll'); }else{ bt.classList.add('close'); boxMenu.classList.add('show'); document.body.classList.remove('scroll'); } });
}
/* preloader
----------------------------------------------------------------------*/
function loader(){ preloader.classList.add('hide'); var t = setTimeout(function(){ wrapper.classList.remove('hide'); clearInterval(t); },500);
}
/* Toggle sections
----------------------------------------------------------------------*/
function toggleSections(){ Array.prototype.forEach.call(links,function(o,i){ o.addEventListener('click',function(e){ var section = document.querySelector('[data-section="'+this.getAttribute('data-link')+'"]'); e.preventDefault(); removeLinks(function(){ o.classList.add('active'); section.classList.add('show-section'); // hide menu bt.classList.remove('close'); boxMenu.classList.remove('show'); document.body.classList.add('scroll'); }); }); });
}
/* 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();
}
/* 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.querySelector('.box_title span') ? obj.querySelector('.box_title span').innerHTML : '...'; var desc = obj.querySelector('.box_description') ? obj.querySelector('.box_description').innerHTML : desc = ''; document.querySelector('.lightModal').classList.add('show'); document.querySelector('.lightModal-title').innerHTML = title; document.querySelector('.lightModal-desc').innerHTML = desc; document.querySelector('.lightModal-image').src = obj.href; document.querySelector('.lightModal-image').alt = title; document.body.classList.remove('scroll'); }); document.querySelector('.lightModal-close').addEventListener('click', function (e) { e.preventDefault(); document.querySelector('.lightModal').classList.remove('show'); document.body.classList.add('scroll'); }); });
}
Neo minimal theme - Script Codes
Neo minimal theme - Script Codes
Home Page Home
Developer Moncho Varela
Username nakome
Uploaded July 07, 2022
Rating 4.5
Size 8,124 Kb
Views 52,624
Do you need developer help for Neo minimal 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
Youtube videos
Simple lightbox
Simply Redirect to
Captcha Colors experiment
SWEditor v0.2.0
Html demos with data uri
Welcome
Another webSQL
Another preloader, Airport panel.
Very simple svg animation
Create amazing blog posts 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!