A Pen by Boaz

Developer
Boaz
Size
10,180 Kb
Views
10,120
  1. A Pen by Boaz Previews
  2. A Pen by Boaz HTML Codes
  3. A Pen by Boaz CSS Codes
  4. A Pen by Boaz JS Codes

How do I make an a pen by boaz?

What is a a pen by boaz? How do you make a a pen by boaz? This script and codes were developed by Boaz on 16 December 2022, Friday.

A Pen by Boaz Previews
IQ Test

A Pen by Boaz - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Boaz</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- MOBILEmenu--------------> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/"> <div class="top-left"><a class="fa-bars" href="javascript:void(0)" title="Menu"><span>Menu</span></a><a class="fa-phone" href="tel:0546-464178" title="Phone me"><span>Phone me</span></a> <a class="fa-envelope" href="#" title="E-mail me"><span>Email me</span></a> </div> <!-- onClick=""toggle_visibility('foo' );-->
<!-- top --><div class="top"> <div class="rmm" id="foo"> <ul>	<li><a href="#Showreel">Showreel <img src="images/eye02.png"></img></a></li>	</ul> <ul>	<li><a href="#div-1" >Animation <img src="images/Animboaz.gif"></img></a></li>	</ul> <ul>	<li><a href="#div-2" >Broadcast <img src="images/broadcast.gif"></img></a></li>	</ul> <ul>	<li><a href="#div-3" >דפוס <img src="images/prnt022.png"></img></a></li>	</ul> <ul>	<li><a href="#div-5" >about <img src="images/prnt02.png"></img></a></li> </ul> <ul>	<li><a href="#div-6" >איור <img src="images/iyur.png"></img></a></li> </ul> <ul>	<li><a href="#div-4" >Web <img src="images/misc01.png"></img></a></li> </ul> </div><!--rmm --> <!--scrollmenu class="rmm"--><div class="rmm" id="scrollmenu"> <a class="fa-chevron-up" href="#top"><span>back</span></a> <a class="fa-envelope" href="#"><span>[email protected]</span></a> <!-- class="top-left"--> <ul> <li><a href="#Showreel">Showreel#1<img src="images/eye02.png"></img></a></li>	<li><a href="#div-1" >Animation<img src="images/Animboaz.gif"></img></a></li>	<li><a href="#div-2" >Broadcast<img src="images/broadcast.gif"></img></a></li>	<li><a href="#div-3" >דפוס <img src="images/prnt022.png"></img></a></li>	<li><a href="#div-5" >about <img src="images/prnt02.png"></img></a></li> <li><a href="#div-6" >איור <img src="images/iyur.png"></img></a></li>
<li><a href="#div-4">Web <img src="images/misc01.png"></img></a></li>	</ul> </div><!--rmm --> <!-- top END --></div>
<br>	<header class="vs-header" id="top"> <h1 class="animated bounceinTop"><b class="heb">בעז לדרר</b> \ Boaz Lederer<span class="animated bounceInRight">Animator/Designer/illustrator</span>
<span><a class="fa-envelope-o" href="#"> [email protected]</a></span><span>
A designer for your every need : מעצב לכל מטרה
</span> </h1>	<ul class="vs-nav"><!--navtop menu--> <li><a href="#Showreel">Showreel<br><img src="images/eye02.png"></img></a></li>	<li><a href="#div-1" >Animation<br><img src="images/Animboaz.gif" ></img></a></li>	<li><a href="#div-2" >Broadcast <br><img src="images/broadcast.gif"></img></a></li>	<li><a href="#div-3" >דפוס<br><img src="images/prnt022.png"></img></a></li> <li><a href="#div-6">איור<br><img src="images/iyur.png"></img></a></li>	<li><a href="#div-4" >Web <br><img src="images/misc01.png"></img></a></li> <li><a href="#div-5">about<br><img src="images/prnt02.png"></img></a></li>	</ul><br> <div class="covr"><hr></div> </header><!--header--> <section id="div-1"> <br><br><br><hr><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br><br><hr><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br><br><hr><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br>
<br><br><br><hr><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br>
</section> <section id="div-5">
<br><br><br><br><br><br> <br>
</section> <script src="js/index.js"></script>
</body>
</html>

A Pen by Boaz - Script Codes CSS Codes

/*////////////////////*/	#Showreel{	width:85%;	height:auto;	padding:1em;	margin:0 auto;	position: relative;	z-index:3;	}	#Showreel .banner {	background-color:#5C97BE;	}
#Showreel .banner::after { border-top:1em solid #5C97BE;/* same as container colour */}	.vs-header .vs-nav li:nth-child(1) a{background-color: #5C97BE;}	.vs-header .vs-nav li:nth-child(2) a{background-color: #FF4B4E;}	.vs-header .vs-nav li:nth-child(3) a{background-color: #F7BE39;}	.vs-header .vs-nav li:nth-child(4) a{background-color: #00708C;}	.vs-header .vs-nav li:nth-child(5) a{background-color: #94A4A5;}	.vs-header .vs-nav li:nth-child(6) a{background-color: #B561D1;}	.vs-header .vs-nav li:nth-child(7) a{background-color: white;}	#scrollmenu li:nth-child(1) a{background-color: #5C97BE;}	#scrollmenu li:nth-child(2) a{background-color: #FF4B4E;}	#scrollmenu li:nth-child(3) a{background-color: #F7BE39;}	#scrollmenu li:nth-child(4) a{background-color: #00708C;}	#scrollmenu li:nth-child(5) a{background-color: white;}	#scrollmenu li:nth-child(6) a{background-color: #94A4A5;}	#scrollmenu li:nth-child(7) a{background-color: #B561D1;}	#div-1 .slick-prev:before,#div-1 .slick-next:before{color:#FF4B4E;}	#div-3 .slick-prev:before,#div-3 .slick-next:before{color:#00708C;}	header .fa-envelope-o,	#div-5 .footer .fa-envelope-o{background-color:white;line-height: 1.4;
text-align: center;	font-size: 1em;	font-weight: 200;	text-decoration:underline; margin-top:2px; padding: 5px 10px; border-radius: 2px; display: inline-block; color: Black;	text-shadow:none;-webkit-font-smoothing: antialiased;}
/*1///////////////////////////////////////////-Anim--//////////////////#00708C////////////////////////*/
#div-1 .banner {	background-color:#FF4B4E;	}
#div-1 .banner::after { border-top:1em solid #FF4B4E;/* same as container colour */}
#div-1 {background-color: #383B38;}
#div-1 h1 {font-size:6em;padding: 10px;	font-color: #f83E38;	color: #f83E38;	font-weight:800;
}#div-1 h1, #div-1 h2{font-family:'Varela Round', 'Amatic SC', 'Alef Hebrew', cursive;}	/*background-image: url(../images/port/wk07.jpg);*/
#div-1 .respchoice img{max-width:600px;
}
#div-1 li a{ text-align:justify;
background-color: #AB3C3C;
z-index:6;
-webkit-box-shadow: 0px 6px 0px #FF4B4E;
-goog-ms-box-shadow: 0px 6px 0px #FF4B4E;
box-shadow: 0px 6px 0px #FF4B4E;
-webkit-transition: all .3s ease-in-out;	-moz-transition: all .3s ease-in-out;	-o-transition: all .3s ease-in-out;	-ms-transition: all .3s ease-in-out;	transition: all .3s ease-in-out;
}
#div-1 li a:hover{
background-color: #FF4B4E;
box-shadow: 0 6px #AB3C3C;
-webkit-box-shadow: 0px 4px 0px ;
-goog-ms-box-shadow: 0px 4px 0px ;
box-shadow: 0px 4px 0px ;
}
#div-1 .col,
#div-1 .bganim {
display:block;
background-color: #282B28;color: #282B28;
padding: 1em;
margin-top:-4.2em;
z-index:6;
border-bottom:solid 0px #e7b222;
}
#div-1 .heb{	font-family: 'Varela Round', 'Ptil';
font-weight:500;}
#div-1 .smallvid .video-container{	left:20%;	padding-bottom:540px;	margin-bottom:0;margin-top:-3.8em;
}
#div-1 .video-container iframe,
#div-1 .video-container object,
#div-1 .video-container embed { max-width: 960px;
max-height:540px;	}
#div-1 p{	text-indent:0.2em;
font-color:#e1ddcf;
color: #e1ddcf;
margin: 0 0 0 0.4em;
}
#div-1 h2{	font-size:4.5em;
left:5%;
color:#FF4B4E;
margin-left:20%;margin-right:20%;
text-shadow: 0px 2px 2px black;
}
#div-1 .icon {	font-size:0.1em;
font-color:#ed4e6e;
color:#ed4e6e;
}
#storyboard img{	max-height:720px;	width:auto;	}
#div-1 .video-container iframe,
#div-1 img{	border-right:1px;	border-bottom:1px;
}
#div-1 figcaption {	line-height: 1.3em;font-size:1em;font-weight:800;	font-family: 'Amatic SC';	text-align:center;	position:absolute;	top:20px; left:30%;	display:inline-block;	background-color: rgba(56,59,56,0.6);	padding-top:1em;	width:auto;	padding:0;	text-shadow: 2px 2px 0px black;	}	#div-1 figcaption h2,	#div-1 figcaption h3 {	font-family: 'Amatic SC';	text-align:center;color:#ed4e6e;margin:60px;/*margin-top:1em;*/	font-size:4em;	}	#div-1 figcaption li a{	bottom:8px;	margin-top:-3.8em;	}
/*------------------------------------------------------------------------------------2-BRoadcast--------------------------------*/
#div-2 h1 {	/*background-image: url(../images/port/openertimeline_00341bg.jpg);*/	}
#div-2 .banner {	background-color:#F7BE39;	}
#div-2 .banner::after { border-top:1em solid #F7BE39;/* same as container colour */}
#div-2 .col{	background: #383B42;	color:#E1DDCF;	padding:1em;	}
#div-2 h2 {	shadow-color:#383B38;
right:100px;
display:inline-block;
color: white;
background-color:#383B38;
border-right:30px solid #F7BE39;
padding:0 1.2em 0 200px;
text-shadow:0px 0px 2.5px white;	}
#div-2 iframe,
#div-2 .grid figure,
#div-2 .col img{	padding: 2px;	margin:0;/*
border:solid 0.8em #383B38;*/
border-radius:12px;
}
#div-2 iframe{	border-radius:12px;	}/*#e7b222*/
#div-2 {	background-image: url(../images/.png);	background-color: #76808a;	text-color:#E1DDCF; }
#div-2 h1 {	color:#F7BE39;	font-weight:300;	text-shadow:1px 1px 0 black;/*#BADDFF	;#383B42*/	}	#div-2 span,	#div-2 .grid figcaption span {	color:#FF4B4E;	}
#div-2 .grid figcaption{	background-color:#383B38;	position:absolute;	left:0px;border-radius: 0 0 12px 12px;	}	#div-2 .grid figcaption a,	#div-2 li a{	text-decoration:none;	border:1px solid #F7BE39;	background-color:black;	color:#F7BE39;}	#div-2 .grid figcaption a:hover,	#div-2 li a:hover{	background-color:#F7BE39;	color:black;}
/*=================================================================================================3-PRINT------------------*/
/*Newprintidea*/
.prntcontainer,
.rightext { width:100%; max-width:850px; position:absolute; display:block; min-height:200px; padding-bottom:2em; }
.prntcontainer img{ width:40%; display:block; position: absolute;
top: 50%;
left: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.prntcontainer img:hover{
top: 20%;
}
.prntcontainer{
position:relative; width:100%; height:2Em;
overflow: hidden;
min-height:310px;
max-height:550px;
left:10%; }
.prntcontainer #img02 {z-index: 2;
left:25%;
}
.prntcontainer #img01 {z-index: 1;
-webkit-transform: rotate(10deg) translateX(2%);
-goog-ms-ransform: rotate(10deg) translateX(2%);
transform: rotate(10deg) translateX(2%) ;left:30%;
}
.prntcontainer #img03 { z-index: 0;
-webkit-transform: rotate(-10deg) translateX(15%);
-goog-ms-transform: rotate(-10deg) translateX(15%);
transform: rotate(-10deg) translateX(15%);
}
.rightext{
right:0;
color:black;
padding:50px; margin:20px;
}
.project { display:inline-box; padding:0; margin:0 0 1em 0; width:90%;
position:relative; border-bottom:2px solid #00708C; /*background: #fff;*/
}
/*NDnewprint*/ .prntcontainer a { color: #00708C; text-decoration: none; } #div-3 .banner {	background-color:#00708C;	}
#div-3 .banner::after { border-top:1em solid #00708C;/* same as container colour */}
#div-3{background-color:white;}
#div-3 h1 {	/*background-image: url(../images/port/poster-Boaz-led.jpg);*/
}
#div-3 .vs-content img,
#div-3 .grid f img{
-webkit-box-shadow: 10px -10px 10px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 10px -10px 10px #333333;
box-shadow: 10px -10px 10px rgba(0, 0, 0, .1);
padding: 0;
}
#div-3 p,
#div-3 .grid figcaption span{	color: #00708C;	display: inline-block;
border-left: 3px solid #00708C;
padding:20px 10px 10px 10px;
margin: 3px 0px;
}
#div-3 .vs-content .cd{	border-radius: 500px;	}
#div-3 .vs-content .col{	-webkit-column-width: 30%;	-moz-column-width: 30%;	column-width: 30%;	-webkit-column-count: 3;	-moz-column-count: 3;	column-count: 3;	-webkit-column-gap: -14px ;	-moz-column-gap: -14px ;	column-gap: -14px;	padding:0 ;	/*border: 3px solid red; */	}
#div-3 p,
#div-3 h2{	margin: 0 2em 1em 2em;	padding: 2px;	line-height: 24px;	max-width:800px;	z-index:6;
}
#div-3 .vs-content img	{	-webkit-transition: all 0.4s; transition: all 0.4s;	-webkit-transform: all 0.4s;	transform: all 0.4s; transform-style: preserve-3d;	}
/*----tooltips--	#div-3 .prntcontainer img:hover p{*/
/*================================================================= WEB*/
#div-4 {
background-position:top;
background-repeat:no-repeat;
background-color:white; /* #FF4B4E; goodred */
}
#div-4 .banner {	background-color:#B561D1;	}
#div-4 .banner::after { border-top:1em solid #B561D1;/* same as container colour */}
#div-4 h1{/*background-image: url(../images/port/DBL4Wmockup.jpg);*/
color:#B561D1;
text-shadow:2px 2px 0px black;
}
#div-4 .jcarousel-wrapper{	display:inline-block;}
#div-4 h2{	font-weight:200;
left:0;
width:50%;
background-color:#B561D1;
color:white;
text-shadow:none;
text-align:center;
padding: 1em;
}
#div-4 li a img {-webkit-transition: all 0.4s; transition: all 0.4s;	-webkit-transform: all 0.4s;	transform: all 0.4s;	}
#div-4 li a{ background-color:transparent;
border: 2px solid #383b42;
color:grey;padding:1.1em;border-radius:0;
}
#div-4 li a:hover{ background-color:#B561D1;
border: 0px solid #383b42;
color:white;
}
#div-4 h2 img{position:absolute;	left:100%;	top:0;	width:300px;	height:250px;	display:block;	padding:1.5em;	background-color:#DDD;	float:top;	}
#div-4 .col{background-color:white;	padding:5px;	}
#div-4 .col img
{
padding: 0;display:block;
width:300px;
border: 0px solid white;
background: none;
}
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^hamarmoret^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.hamarmoret1{font-family:'hamarmorRegular';line-height:0.6;overflow:visible;color:#800;	font-size:6em;}
.hamarmoret2{font-family:'hamarmorRegular';line-height:0.5;overflow:visible;color:#222;	font-size:5em;}
.hamarmoret3{font-family:'hamarmorRegular';line-height:0.4;overflow:visible;color:#3333;	font-size:4em;}
.hamarmoret4{font-family:'hamarmorRegular';line-height:0.3;overflow:visible;color:#4444;	font-size:3em;}
.hamarmoret5{font-family:'hamarmorRegular';line-height:0.3;overflow:visible;color:#8888;	font-size:2em;}
.hamarmoret6{font-family:'hamarmorRegular';line-height:0.2;overflow:visible;color:#9999;	font-size:1em;}
/*========================================= ===== ==== == =div-5 Who = == ==== ===== ==========*/
#div-5 .banner {	background-color:white;	}
#div-5 .banner::after { border-top:1em solid white;/* same as container colour */}
#div-5 li a{ background-color:transparent; color: #fff;	}
#div-5 h1 {background-image: url(../images/buzy.jpg);/*!*/	right:0px;	text-align:center;	color:white;	text-shadow: 4px 3px 0 #dddddd,9px 8px 0 rgba(0, 0, 0, 0.15);	/*color:#444;*/
}
#div-5, #div-5 h2.fa-trophy{
background-color: #76808a;
overflow:hidden;
color: #383B42;-webkit-font-smoothing: antialiased;
}
#div-5 .fa:before{ font-family: 'FontAwesome';-webkit-font-smoothing: antialiased;
}
#div-5 #bio{padding: 2em; color:#EEE; min-width:250px;
background-image:url(../images/bgt.png);
background-color:rgba(56, 59, 56, 0);
}
#div-5 span{	vertical-align:16px;	}
#div-5 h2 {	color:#EEE;text-shadow:8px 0 8px rgba(0, 0, 0, 0.15);padding-left: 10%;	}
#div-5 .spec h2{font-size: 1.5em;}
#div-5 .col,
#div-5 #stats,
#div-5 h2.fa-trophy{padding: 0 5% 0 5%;
background-color: #76808a;
min-height:inherit;
padding: 2em;
margin:12px;
}#div-5 #stats{float:right;}
#div-5 p .spec{width: 25%;display:inline-block;max-height:120px;position:absolute;top:60px;left:300px;}
#div-5 p .spec::before{	content: "";	background-image:url(../images/logos/gmail-icon.png);	display:block;	background-size:32px;	width:32px;height:32px;position:absolute;top:60px;left:300px;
}
#div-5 ul{	height:auto;display: inline-block;padding:1em;
}
#div-5 li img{	width:40px;height:auto;	overflow:visible;	display: inline-block;	bottom: 0px;	-webkit-transition: all 0.4s; transition: all 0.4s;	-webkit-transform: all 0.4s;	transform: all 0.4s;	}
#div-5 li{display: inline-block;	}
#div-5 .col li img:hover{	z-index:5;	width:50px;	bottom: 10px;
}	#div-5 .col ul:hover{	background-color: #383B42;	color:#EEE;	}
#div-5 a{	margin:-12px;	padding: -2px;	line-height:1.5em;
text-decoration:none;
color: #baddff;text-shadow: 1px 1px 3px black;
}
#div-5 a:hover{	line-height:1.5em;
text-shadow: 1px 1px 3px grey;
}
#div-5 .col li a{	line-height:1em;
text-decoration:none;
text-align: center;
display:inline;	margin:0;	padding:0;	background:none;	-webkit-font-smoothing: antialiased;	text-shadow: 1px 1px 3px grey;
shadow: 1px 1px 3px grey;	}
#div-5 i{	display:inline-block;	position: relative;	bottom:15px;	left:-7px;	margin-top:0px;	z-index:2; width: 16px; height: 16px; text-align: center; background: #00708C; color: #fff; text-decoration: none; text-shadow: 0 0 1px #000; font: 10px/10px Arial, sans-serif; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;	-webkit-font-smoothing: antialiased;	}
#div-5 .footer{background-color: #383B42;height:220px;padding:0.2em;width:100%;overflow:visible;margin:0px;	}
#div-5 .footer h2{font-size:18px;	font-weight:300;padding-bottom:10px;margin:0;
}	#div-5 #social {position:relative;	left:5%;width:90px;	}	#div-5 .footer li a {width:48px;Display:inline-block;padding:0px;margin-left:4px;margin-top:4px;	height:48px;}	#div-5 .footer a img{padding-top:0;border:0px solid white;margin-left:4px;}	#div-5 #social a img{	background-color:grey; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;	-webkit-transition: all 0.4s; transition: all 0.4s;	-webkit-transform: all 0.4s;	transform: all 0.4s;	}	#div-5 #social a img:hover{	background-color:white;border:1px solid white;	}	/*contactme*/#div-5 .footer .spec{position:absolute;bottom:0px;	right:5%;width:180px;padding:0;color:white;	min-height:220px}
/*===============================================================================iyur---*/
#div-6 .banner {	background-color:#94A4A5;	}
#div-6 .banner::after { border-top:1em solid #94A4A5;/* same as container colour */}
#div-6 { /*background-image: url(../images/texture1.png);*/
color:#eadecc;
background-repeat:repeat;
}
#div-6 li a{ background-color: #94A4A5;}
#div-6 img{padding: 0;
}
#div-6 li img a{ background-color: #FF4B4E; margin:0; padding:0px; color: black;	position:relative;	border:1 solid #94A4A5;	max-width:100%;
}
#div-6 li a:hover{	background: black; color: white;	}
#div-6 ul{padding:0;}
#div-6 h1 { /*background-image: url(../images/port/boaz%20sketch007b.jpg);*/ text-align:center; font-weight:300;	color: black;	text-shadow:none;	position:relative;	}
#div-6 .iyur{
max-width:75%;
display:inline-block;
height:200px;
padding-bottom:2em;
}#div-6 .iyur div{display:inline-block;max-height:300px;}
#div-6 .iyur img{width:300px;max-height:300px;}
/*
#div-6 .thumb {	display:inline-block;	margin: 0 4px;	color: #383b42;	text-align: justify;	line-height: 1.4;	-webkit-column-width: auto;	-moz-column-width: auto;	column-width: auto;	-webkit-column-count: 2;	-moz-column-count: 2;	column-count: 2;	-webkit-column-gap: 0.21%;	-moz-column-gap: 0.21%;	column-gap: 0.21%;	min-height: 400px;	padding:0 ;	white-space:normal;
}
#div-6 .col{	margin:2px;	padding:0px;	padding-bottom:2em;	white-space:nowrap;	min-height:inherit;	max-height:900px;	-webkit-column-gap: 0px ;	-moz-column-gap: 0px ;	column-gap: 0px;	padding:0 ;
/*ENDdiv6yur//////*/
*, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/*.vs-wrapper,
.no-touch .vs-container {	overflow-x: hidden;
}*/
/*headerpic*/
.vs-header {	background-image:url(../images/port/Pnui0036.png);	background-position:right;	background-repeat:no-repeat;	background-size: auto 100%;	z-index: 200;	margin: 0 auto;	padding: 0;	width: 90%;	text-align: center;	-webkit-backface-visibility: hidden;
}
html, body, .vs-container {	position: absolute;	width: 100%;overflow-x: hidden;
}
.vs-header img	{	-webkit-transition: all 0.5s;	transition: all 0.5s;
}
header .heb {	right:50%;	font-family: 'Ptil';	padding:0;	margin:0;	white-space:nowrap;	}
header h1 {	left:20%;	font-family: 'Amatic SC', cursive;	color: #FF4B4E;	margin: 0 auto 0.5em auto;	padding:150px 0 25px 0.8em;	font-weight: 700;	font-size: 6em;	line-height: 0.9;	-webkit-backface-visibility: hidden;	text-shadow: 1px 1px 0px #666666;	}
header span { font-family: 'Alef';	display: block;	padding: 0 0 0.6em 0.1em;	font-size: 0.2em;	font-weight: 400;	color: #383b42;
}
body { font-family: 'Alef', Arial, sans-serif;	color: #fff;	background: #e1ddcf;	margin:0px;	}
/*--*/
.vs-nav,
.top-left,
.top {	position:absolute;	display: inline-block;	margin: 0 auto;	padding: 0;	list-style: none;	left: -2PX;	width: 100%;
}
.top .rmm,
.top .top-left{	position:relative;
top:0px;
}
.vs-nav li,
.top .rmm, .top-left .rmm,
.top .top-left{	display: inline-block;	margin-bottom: 5px;	text-align: center;	text-decoration: none;
}
.top-left .rmm
.top .rmm{	padding:0px;	}
#foo,
#scrollmenu{	z-index:100;display:none;}
.top .rmm img {	width:30px;	}	.rmm li{position:relative;padding-left:0;padding-right:0;display:inline;	}
.rmm li a{	overflow:hidden;	position: relative;	width:auto; color:black;	max-height: 80px;	display:inline-table;	margin: 0px 4px 0px 4px;	padding: 2px 10px 4px 10px;	}
.rmm li a{top:-5px;padding-bottom:10px;z-index:100;}
.rmm li a:hover{top:5px;padding-bottom:20px;	border-bottom:3px solid;line-height:inherit;text-shadow:0 1px black;	}	/* Top Navigation Style */
.top-left, .top{ background-color:transparent; /*rgba(56,59,56,0.8);*/	background-image:url(../images/bgt.png);	border-bottom:1px solid #333333;	}
.top-left, .top{	z-index:100;	position:fixed;	top:0px;	}
.rmm ul{	overflow:visible;max-height:10px;height:10px;	margin:0;	padding:0;	border-bottom:1px solid #fffff;	}
.top-left a,.top a {	color: #baddff;	text-decoration: none;	padding:5px;	letter-spacing: 0.1em;	display: inline-block;	z-index:105;	}
.top a:hover {	color: #fff;	background-color:#00708C;	border-bottom:solid 2px white; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%##################NAV bitches########################%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
.vs-nav {	display: block;	margin: 0 auto;	padding: 0;	list-style: none;
}
.vs-nav li{	line-height: 50px;	display: inline-block;	margin-bottom: 20px;	text-align: center;	text-decoration: none;
}
.vs-header .covr{	display:block;	background-color: #E1DDCF; position:absolute; top:480px;	left:0;	height:160px;	width:200%; z-index:3;	-webkit-box-shadow:rgba(0,0,0,0.2) 0px -12px 10px;
-goog-ms-box-shadow:rgba(0,0,0,0.2) 0px -12px 10px;
box-shadow:rgba(0,0,0,0.2) 0px -10px 10px;
}
/*--------Anim menu nav------*/
.vs-header .vs-nav li a {	position: relative;	width:auto;	height: 60px;	bottom: 40px;	display: INLINE-block;	margin: 0 0.1em 0.1em;	padding: 10px 0.21em 0.21em;	border-top: 1px solid #383b42;	color: black;	background-color: #e3dec7;	text-decoration: none;	letter-spacing: 2px;	font-weight: 400;	font-size: 1.2em;	-webkit-transition: all .3s ease-in-out;	-moz-transition: all .3s ease-in-out;	-o-transition: all .3s ease-in-out;	-ms-transition: all .3s ease-in-out;	transition: all .3s ease-in-out;	-webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 0 10px 10px #333333;
box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
text-shadow: 0px 0px 0 #383ff2;
}
.vs-header .vs-nav li a:hover{	height: 200px; margin-bottom:0;bottom: 120px/*!important*/;	padding-bottom: 0;	color: #fff;	text-shadow: 1px 1px 0px black;
}
/*div {
-webkit-transition: all .6s ease-in-out;	-moz-transition: all .6s ease-in-out;	-o-transition: all .6s ease-in-out;	-ms-transition: all .6s ease-in-out;	transition: all .6s ease-in-out;	}*/	/* BGS///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/	/*bg bank	#a6d2a1;#FF4B4E;#cab7e5;;#837883;#76808a#2e3e5e;*/
/*////////////////////////////////////////////////////////// inner content /////////////////////////////////////////////////////////*/
.vs-content {	border-top: 0px solid;	border-color:#383b42;	position: relative;	margin: 5px;	text-align: left;	font-size: 1em;
}
.vs-content h1 {	margin:0;	padding: 1em;	overflow:visible;	position: relative;	Top:-5px;
width:100%;
height:20%;	font-weight: 700;	max-height:120px;	z-index:0;	font-size: 3em;	background-size:100% auto;	background-position:center;/*!*/	background-repeat:no-repeat;/*!*/	text-shadow: 0px 0px 0px #666666;
}
/*/////////////H!splash////////////////////////////////////////////////*/
.splash h1{background-position:center;}
.vs-content h2 {	position: relative;	margin: 30px 0 40px;	color: #383b42;	font-weight: 700;	font-size: 2em;
}
.vs-content .col {	margin:auto;	/*margin: 0 10%;*/	color: #383b42;	text-align: justify;	line-height: 1.4;	-webkit-column-width: 30%;	-moz-column-width: 30%;	column-width: 30%;	-webkit-column-count: 3;	-moz-column-count: 3;	column-count: 3;	-webkit-column-gap: 0.21%;	-moz-column-gap: 0.21%;	column-gap: 0.21%;	min-height:270px;/*!!*/	max-width:1200px;
}
/*img fixer 3col*/
.col img{
max-width:320px;
max-height:230px;
}
.vs-content .thumb {	display:inline-block;	margin: 0 4px;	color: #383b42;	text-align: justify;	line-height: 1.4;	-webkit-column-width: 50%;	-moz-column-width: 50%;	column-width: 50%;	-webkit-column-count: 2;	-moz-column-count: 2;	column-count: 2;	-webkit-column-gap: 0.21%;	-moz-column-gap: 0.21%;	column-gap: 0.21%;	min-height: 400px;	white-space:normal;
}
.vs-content p {	margin: 0 0.5em 20px 0;	padding: 0;	font-size: 1.1em; }
.vs-content .heb {	text-align:right;	direction:Rtl;	}
.vs-content li {	list-style: none;	position:relative;	}
.vs-content li a{
line-height: 1.4;
text-align: center;	font-size: 1em;	font-weight: 200;	text-decoration:none; margin-top:2px; padding: 5px 10px; border-radius: 2px; display: inline-block; background-color: #00708C; color: #fff;	}
.vs-content li a:hover{
background: #ed4e6e;
color: #ffffff;
background-color: #383b42; }
.vs-content hr{	height: 2px;	color: #383b42;	background-color:#383b42;	border:hidden;	}
.vs-content .thumb {	-webkit-row-width: 50%;	-moz-row-width: 50%;	row-width: 50%;	-webkit-row-count: 2;	-moz-row-count: 2;	row-count: 2;	}
.vs-nav li img {	max-width: 4em;	max-width: 4em;	overflow:hidden;	}	a:active{
background-color: Black;
color:Black;
box-shadow: 0 6px Black;
-webkit-box-shadow: 0px 0px 8px white;
-goog-ms-box-shadow: 0px 0px 8px white;
box-shadow: 0px 0px 8px white;
} /* Banners */ .banner { background-color: gold; max-width: 100px; height:120px; min-width: 100px; padding: 0px; margin: 0em auto; position: absolute; right:3em; z-index:1; display:block; top:-10px; overflow:visible; }
.vs-content .banner img { max-width:91px; display:inline-block; z-index:2; margin-bottom:40px; padding-top:15px; padding-left:5px; border-bottom:hidden; } /* makes the down point on .container */ .banner::after { content: ""; position: absolute; top:120px; right: -1px; width: 0; height: 0; border-left: 51px solid transparent; border-right: 51px solid transparent; border-top: 29px solid gold;/* same as container colour */ z-index:1; } /*RESPONSIVE*/
/*///////////// Media queries ////////////////////////////////////*/
/*------------- MOBILE ONLY mENU ---------------*/
.fa-bars, .top-left .fa-phone , .top-left .fa-envelope, .top-left fa-chevron-up{	display:inline-block;	overflow:hidden;	border: 1px solid #BADDFF;
line-height: 1em;
font-size:20px;font-weight:100;
padding:10px;
min-width:38px;width:30%;
height: 38px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;vertical-align: -15%;
margin-left:3px;
-webkit-font-smoothing: antialiased;}
.fa-bars{font-size:25px;}
.top-left span{display:inline-block;MARGIN: 0 5px;line-height: 1.2em;	font-size:10px;min-width:10px;width:20px;vertical-align:-12px;position:relative;Left:-2px;top:-12px	}
.top-left{visiblity:hidden;display:none;height:50px;}#foo{display:none;}
/* RESPONSIVE VIDEO ----------------------------------------------------*/
.vs-content .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {	display:block; position: absolute; top: 0; left: 0; width: 100%; height: 90%;
}
/* RESPONSIVE IMG ----------------------------------------------------*/
.vs-content img {
position: inherit; padding-bottom: 0; padding-top: 30px; height: 0; overflow: hidden; width: 100%; height: auto; max-width: 1280px;
}
@media only screen
and (min-width : 1224px){	#foo{display:none;}	.jcarousel-wrapper {	max-width:800px;}	}
@media screen and (max-width: 72.875em) {	#foo{display:none;top:40px;}	.top{z-index:99;	}
.rmm li{	width:90%;}	.rmm li a {letter-spacing:0;}	.vs-header .vs-nav li:hover {	margin-bottom:0;	padding-bottom: 0;	height: 60px;
}.vs-header .vs-nav li a{	font-size: 1em;	position:relative;	bottom:-2em;}	.vs-header .vs-nav li {	bottom: 50px;	height: auto;	margin-bottom:0;	padding-bottom: 0;
}	.vs-header .vs-nav img{	width: 2em;	}
vs-content .thumb {	min-height: 25%;-webkit-column-width: 25%;	-moz-column-width: 25%;	column-width: 25%;
}	.vs-header,	.vs-wrapper {	font-size: 80%;	}	.vs-content h2 {	font-size: 1.8em;	}	.vs-nav li a {	width: 160px;	}
#div-1 .col,#div-2 .col,#div-3 .col,#div-4 .col,#div-5 .col,
#div-6 .col {	-webkit-column-width: 50%;	-moz-column-width: 50%;	column-width: 50%;	-webkit-column-count: 2;	-moz-column-count: 2;	column-count: 2;	}	#div-1 h1 {	left:auto;font-size:5em;	padding-bottom:0;}	#div-5 h1 {	left:auto;	padding-bottom:0;	}	#div-5 ul {padding:1px; line-height:1;}	#lbImage {max-width:100%; max-height:100%;background-size:100%;} /* Banners */ .banner {max-width: 100px; height:80px; min-width: 60px; } .banner img { max-width:50px; } /* makes the down point on .container */ .banner::after { content: ""; top:80px; left:0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 26px solid;/* same as container colour */ }	#div-6 .iyur div{max-height:220px;}
#div-6 .iyur div img{max-width:220px;max-height:220px;}
}
@media screen and (max-width: 46em) {	h1{	background-size: 120px auto;	}
.top-left {visibility:visible;display:inline-block;}	#scrollmenu { visibility:hidden;}	.covr ,	.vs-header .vs-nav img ,	.vs-header .vs-nav{visibility:hidden;}	.vs-header{	z-index:1;	position:relative;	top:50px;	width:100%;	}	.top, .top-left{	font-weight:400;	}	.vs-header h1 ,	.vs-header span	{	padding:10px;	margin:0;	width:80%;
text-align:left;	}
.vs-header h1{ font-size:60px;}	/*RMMopenclose*/
#foo {	display:block;
background-image:url(../images/bgt.png);	background-color: rgba(56,59,56,0.8);	border-bottom:1px solid #00374F;	-webkit-column-width:100%;	-moz-column-width: 100%;	column-width: 100%;	-webkit-column-count: 1;	-moz-column-count: 1;	column-count: 1;	-webkit-column-gap: 0 ;	-moz-column-gap: 0 ;	column-gap: 0;	/*!*/}	.top .rmm img {	width:25px;	}
.rmm ul{margin:0px; padding: 0px;
column-width: 100%;max-height:41px;height:41px;border-bottom:1px solid black;}
.rmm li a{display:list-item;max-height:40px;top:0px;list-style: none;	z-index:999;margin:0px;line-height:2;padding-top: 0px;	}
.rmm li a:hover{border:0px;
background-color:transparent;
top:0px;
padding-top: 0px;	}	/*end menushit*/
.top-left, .top{height:40px;	width:100%;	line-height: 30px;}
.codrops-icon span {display: none;}
vs-content .thumb {	-webkit-column-width: 25%;	-moz-column-width: 25%;	column-width: 25%;	-webkit-column-count: 4;	-moz-column-count: 4;	column-count: 4;	-webkit-column-gap: 0.21%;	-moz-column-gap: 0.21%;	column-gap: 0.21%;	height: auto;	white-space:normal;	max-height: 400px; }	.vs-container > header h1 {	right:60px;	}
#div-1 h1 {font-size:100px;	margin-left: 0;	padding-bottom:1px;	}	.vs-content h2 {	margin: 0 0 1em;	}	.vs-wrapper {	font-size: 80%;	}
#lbImage {max-width:100%; max-height:100%;background-size:100%;}
#div-1 .col,#div-2 .col,#div-3 .col,#div-4 .col,#div-5 .col,
#div-6 .col {	-webkit-column-width:100%;	-moz-column-width: 100%;	column-width: 100%;	-webkit-column-count: 1;	-moz-column-count: 1;	column-count: 1;	-webkit-column-gap: 0 ;	-moz-column-gap: 0 ;	column-gap: 0;}	#div-1 .smallvid .video-container{	left:1px;	max-height:320px;	}	#div-3 .vs-content .prntwrapper	{	height:auto;	padding:0px;	margin: 0px;}	#div-3 .vs-content .prntdesc { /*border: solid 3px black;*/	width: 100%;	}	#div-3 .vs-content .printhree{	border: solid 3px green;	top: 0px;	left: 0;	width: 100%;}	#div-5 h1 {	right:0;	color: white;	background-image:none;}
.container{
min-height:210px;}	#div-5 .col, #div-5 #stats, #div-5 #bio{display:block;}	#div-5 #stats { float:none;}	#div-6 .iyur{
max-width:300px;
height:200px;
}
#div-6 .iyur div{display:inline-block;max-height:120px;}
#div-6 .iyur div img{max-width:120px;max-height:120px;}
.banner { right:1px;} /* Banners */ .banner {max-width: 80px; height:80px; min-width: 60px; } .banner img { max-width:50px; } /* makes the down point on .container */ .banner::after { content: ""; top:80px; left:0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-top: 26px solid;/* same as container colour */ }
.rmm ul:nth-child(1){background-color: #5C97BE;}
.rmm ul:nth-child(2){background-color: #FF4B4E;}
.rmm ul:nth-child(3){background-color: #F7BE39;}
.rmm ul:nth-child(4){background-color:#00708C;}
.rmm ul:nth-child(5){background-color: white ;}
.rmm ul:nth-child(6){background-color:#94A4A5;}
.rmm ul:nth-child(7){background-color: #B561D1;}
#lbImage {	max width:300px;
}

A Pen by Boaz - Script Codes JS Codes

(function($) { $(document).ready(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 350) { $('#scrollmenu').slideDown(250); } else { $('#scrollmenu').slideUp(500); } }); });
})(jQuery);
$(document).ready(function(){ $(".fa-bars").click(function(){ $("#foo").slideToggle(200) }); $("#foo li a").click(function(){ $("#foo").slideToggle(200) });
});
$('h1').scroll(function() { var x = $(this).scrollTop(); $(this).css('background-position', '0% ' + parseInt(-x / 10) + 'px');
});
$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } });
});
A Pen by Boaz - Script Codes
A Pen by Boaz - Script Codes
Home Page Home
Developer Boaz
Username Aniboaz
Uploaded December 16, 2022
Rating 3
Size 10,180 Kb
Views 10,120
Do you need developer help for A Pen by Boaz?

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!

Boaz (Aniboaz) Script Codes
Name
SVG animations for portfolio
Kanban Board
New navbar
Online Tools
Background patterns
Online Tools 2.0
Digital assets
New website header
Online Tools 3.0
Gofen
Create amazing love letters 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!