New website header

Developer
Boaz
Size
9,167 Kb
Views
12,144
  1. New website header Previews
  2. New website header HTML Codes
  3. New website header CSS Codes
  4. New website header JS Codes

How do I make an new website header?

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

New website header Previews
IQ Test

New website header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>new website header</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Secular+One'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Alef'>
<link rel='stylesheet prefetch' href='https://www.aniboaz.co.il/Blog/wp-content/themes/tanx/style.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body style="" class="home"><div class="loader cp-spinner cp-round"></div><header>	<div class="bottom-overlay"></div>	<div id="primary" class="content-area home btm">
<!-- Header --><section class="cd-hero"><div class="splash homesplsh cd-hero-content wow bounceInDown">
<nav class="top-nav ">	<div class="row">	<div class="col-xs-6 ">	<a href="#" class="expand-top-menu"><i class="arrow_down"></i></a>	<div class="header-menu-container"><ul id="menu-nav" class="menu"><li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-83 active"><a title="about me" href="https://www.aniboaz.co.il/Blog/work/"><span class="glyphicon" alt="are you talking to me?" ></span>&nbsp;about me</a></li>
<li id="menu-item-80" class="menu-item menu-item-type-taxonomy menu-item-object-jetpack-portfolio-type menu-item-80"><a title="user experience" href="https://www.aniboaz.co.il/Blog/work/project-type/ux/">user experience</a></li>
<li id="menu-item-81" class="menu-item menu-item-type-taxonomy menu-item-object-jetpack-portfolio-type menu-item-81"><a title="web-design" href="https://www.aniboaz.co.il/Blog/work/project-type/web-design/">web-design</a></li>
<li id="menu-item-182" class="menu-item menu-item-type-taxonomy menu-item-object-jetpack-portfolio-type menu-item-182"><a title="Game design" href="https://www.aniboaz.co.il/Blog/work/project-type/game-design/">Game design</a></li>
<li id="menu-item-188" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-188"><a title="הבלוג של בעז" href="https://www.aniboaz.co.il/Blog/">הבלוג של בעז</a></li>
</ul></div>	</div>	<div class="col-xs-6 text-right">	<div class="searchform-holder">	<form role="search" method="get" id="searchform" class="searchform" action="https://www.aniboaz.co.il/Blog/work/">	<label class="screen-reader-text" for="s">Search for:</label>	<input type="text" placeholder="Search..." value="" autocomplete="off" value="" name="s" id="s" />	<a href="#" class="close-search"><i class="icon_close"></i></a>	</form>	<a href="#" class="search-toggle"><i class="icon_search"></i></a>
</div>	<a href="#" class="sidebar-toggle">	<span class="sidebar-icon"></span>	<span class="sidebar-icon"></span>	<span class="sidebar-icon"></span>	</a>	</div>	</div>
</nav>
<div class="container">	<!-- One -->	<section id="one"><h1><strong>I am <b style="color:Gold;">Boaz </b></strong><br><span class="typing">An Interactive designer</span></h1>	</section> <!-- Two -->	<section class="call-to-action">	<div class="row">	<div class="col-4 wow bounceInUp" data-wow-delay="1.2s">	<a href="https://www.aniboaz.co.il/Blog/work/project-type/web-design/" class="button big "><i class=" icon_laptop"></i> Web-design</a>	</div> <div class="col-4 wow bounceInUp" data-wow-delay="1.3s"> <a href="https://www.aniboaz.co.il/Blog/work/project-type/ux/" class="button big"><i class=" icon_flowchart"></i> Ux/Ui design</a>	</div> <div class="col-4 wow bounceInUp" data-wow-delay="1.4s"> <a href="https://www.aniboaz.co.il/Blog/work/project-type/game-design/" class="button big"><i class=" icon-ghost"></i> game art design</a>	</div> </div><br> </section><div class="float"> <svg class="shape--1 shape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="29px" height="51px">
<path fill-rule="evenodd" fill="rgb(255, 236, 87)" d="M17.094,26.998 L19.039,50.637 L2.156,40.890 L0.211,17.250 L11.906,24.002 L9.961,0.363 L26.844,10.110 L28.789,33.750 L17.094,26.998 Z"/>
</svg> <svg class="shape--2 shape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53px" height="31px">
<path fill-rule="evenodd" fill="rgb(166, 148, 250)" d="M0.967,14.759 L13.986,0.248 L37.519,3.219 L24.499,17.730 L0.967,14.759 ZM52.033,16.241 L39.014,30.752 L15.481,27.781 L28.501,13.270 L52.033,16.241 Z"/>
</svg> <svg class="shape--3 shape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53px" height="31px">
<path fill-rule="evenodd" fill="rgb(0, 0, 0)" d="M52.033,16.241 L39.014,30.752 L15.481,27.781 L24.678,17.530 L24.499,17.730 L0.967,14.759 L13.986,0.248 L37.519,3.219 L28.501,13.270 L52.033,16.241 Z"/>
</svg> <svg class="shape--4 shape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35px" height="51px">
<path fill-rule="evenodd" fill="rgb(39, 82, 255)" d="M34.800,16.017 L27.536,38.597 L18.422,26.703 L19.322,27.878 L12.058,50.458 L0.200,34.983 L7.464,12.403 L15.678,23.122 L22.942,0.542 L34.800,16.017 Z"/>
</svg> <svg class="shape--6 shape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="51px" height="35px">
<path fill-rule="evenodd" fill="rgb(42, 222, 115)" d="M0.648,11.595 L16.340,0.027 L38.781,7.709 L23.089,19.278 L0.648,11.595 ZM50.352,23.404 L34.660,34.973 L12.219,27.291 L27.911,15.722 L50.352,23.404 Z"/> </svg> </div>	<span class="scroll-btn wow fadeInUp">	<a href="#clients">	<span class="mouse"><span></span></span>	</a>	</span></div> </div> </section> <!-- .cd-hero -->
</header>
<main id="main" class="site-main cd-main-content sub-nav-hero mains" role="main">	<!-- Main s--> <section>	<div class="popup"></div></section> <section id="Advantages"><div class="container">	<h2> Main Advantages</h2>	<div class="row">	<article class="col-lg-3 col-md-6 wow fadeInUp ">	<img src="https://www.aniboaz.co.il/Blog/work/wp-content/uploads/sites/2/2016/12/icons-04.png" class="client align-center">	<!--<h2 class="icon fa-plug"></h2>--> <h1 class="align-center"><strong>Autodidact </strong></h1>	<p dir="ltr">As a very fast learner, I taught myself most of the programs and frameworks from a young age.I am keen on learning new things and I like to explore.</p>	<br>	</article>	<article class="col-lg-3 col-md-6 wow fadeInUp ">	<img src="https://www.aniboaz.co.il/Blog/work/wp-content/uploads/sites/2/2016/12/icons-02.png" class="client align-center"> <h1 class="align-center"><strong >Illustration </strong></h1>	<p dir="ltr"> I always loved to draw and illustrate, I started with comics and studied art and color theories. now I am a highly skilled artist.</p>	<br>	</article>	<article class="col-lg-3 col-md-6 wow fadeInUp ">	<img src="https://www.aniboaz.co.il/Blog/work/wp-content/uploads/sites/2/2016/12/icons-01.png" class="client align-center"> <h1 class="align-center"><strong >Animation </strong></h1>	<p> animation is more then just moving things around. after studying my B.F.A. in animation. I mastered several forms of animation including 2d and 3d.
</p>	</article>	<article class=" col-lg-3 col-md-6 wow fadeInUp ">	<img src="https://www.aniboaz.co.il/Blog/work/wp-content/uploads/sites/2/2016/12/icons-03.png" class="client align-center"> <h1 class="align-center"><strong >Team player</strong></h1>	<p>Meaning people basicly like me. As a brother of four, I obtained a great attitude to working in a close, highly energized, team-oriented environment. </p>	</article>	</div>	</div>
</section> <!--images --> <section class="main-section post-content">
<div class="container">
<div class="entry-content">
<div class="post-content">	<p>	<img width="1394" height="844" src="https://www.aniboaz.co.il/Blog/work/wp-content/uploads/sites/2/2015/06/miz003.jpg" class="attachment-original size-original wp-post-image" alt="" srcset="https://www.aniboaz.co.il/Blog/work/wp-content/uploads/sites/2/2015/06/miz003.jpg 1394w, https://www.aniboaz.co.il/Blog/work/wp-content/uploads/sites/2/2015/06/miz003-300x182.jpg 300w, https://www.aniboaz.co.il/Blog/work/wp-content/uploads/sites/2/2015/06/miz003-1224x741.jpg 1224w, https://www.aniboaz.co.il/Blog/work/wp-content/uploads/sites/2/2015/06/miz003-840x509.jpg 840w" sizes="(max-width: 1394px) 100vw, 1394px" /><p>redesign to Mizmor&#8217;s website.</p>
<p>More on the project </p>
<p></div></div></div></div> </body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

New website header - Script Codes CSS Codes

.home-logo { margin-bottom: 0; display: none
}
html { overflow-y: scroll; box-sizing: border-box
}
*,
:before,
:after { box-sizing: border-box
}
body,
button,
input,
select,
textarea { font-family: 'Alef', sans-serif; font-weight: 400; line-height: 1.6; color: #1f1f1f
}
h1,
h2,
h3,
h4,
h5,
h6 { font-family: 'Secular One', 'Open Sans', sans-serif; clear: both; letter-spacing: normal!important; margin-bottom: 16px
}
h1 { font-size: 4em; line-height: 1.09091
}
h2 { font-size: 3em; line-height: 1.1333333333
}
h3 { font-size: 2em; line-height: 1.2142857142
}
h4 { font-size: 1.5em; line-height: 1.3076923076
}
h5 { line-height: 1.4166666666
}
h6 { font-size: 23px; line-height: 1.4782608695
}
p { margin-bottom: 24px
}
dfn,
cite,
em,
i { font-style: italic
}
blockquote { margin: 0 1.5em
}
pre { font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 1.5rem; line-height: 1.6; overflow: auto; max-width: 100%; margin-bottom: 1.6em; background: #eee; padding: 1.6em
}
code,
kbd,
tt,
var { font-family: Alef, monospace; font-size: 1.5rem
}
abbr,
acronym { cursor: help; border-bottom: 1px dotted #666
}
mark,
ins { text-decoration: none; background: #fff9c0
}
sup,
sub { font-size: 75%; line-height: 0; position: relative; height: 0; vertical-align: baseline
}
sup { bottom: 1ex
}
sub { top: .5ex
}
small { font-size: 75%
}
big { font-size: 125%
}
hr { height: 1px; margin-bottom: 1.5em; border: 0; background-color: #ccc
}
img { max-width: 100%; height: auto
}
section#blog { direction: rtl; background-color: #545a96; height: 360px; padding-bottom: 2em
}
section#blog .work-item:first-child { background: transparent; padding: 30px 2px; color: gold; width: 120px
}
section#blog figure { margin: 0; min-height: 385px; min-width: 200px; margin-bottom: 30px; position: relative; -webkit-box-shadow: 10px 27px 78px -15px rgba(0, 0, 0, 0.57); -moz-box-shadow: 10px 27px 78px -15px rgba(0, 0, 0, 0.57); box-shadow: 10px 27px 78px -15px rgba(0, 0, 0, 0.57)
}
.onhover { position: relative; background: #fff; margin-bottom: 50px; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11); -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; top: 2px
}
.onhover:hover,
.onhover:focus,
.jetpack-portfolio-shortcode .portfolio-entry:hover,
.jetpack-portfolio-shortcode .portfolio-entry:focus { text-decoration: none; -webkit-box-shadow: 0px 14px 25px -2px rgba(0, 0, 0, 0.14); -moz-box-shadow: 0px 14px 25px -2px rgba(0, 0, 0, 0.14); box-shadow: 0px 14px 25px -2px rgba(0, 0, 0, 0.14); top: -2px
}
.jetpack-portfolio-shortcode .portfolio-entry,
ul,
ol { margin: 0 0 1.5em 3em
}
ul { list-style: disc
}
ol { list-style: decimal
}
li>ul,
li>ol { margin-bottom: 0; margin-left: 1.5em
}
dd { margin: 0 1.5em 1.5em
}
button,
input,
select,
textarea { transition: all 250ms ease; vertical-align: baseline; margin: 0
}
button:focus { outline: none
}
button,
input[type='button'],
input[type='reset'],
input[type='submit'],
input.wpcf7-form-control[type='submit'] { cursor: pointer; color: #FFF; border: 1px solid Orangered; background: Orangered; -webkit-appearance: button; padding: 5px 20px
}
button:hover,
button:focus,
button:active,
input[type='button']:hover,
input[type='button']:focus,
input[type='button']:active,
input[type='reset']:hover,
input[type='reset']:focus,
input[type='reset']:active,
input[type='submit']:hover,
input[type='submit']:focus,
input[type='submit']:active { background: #FFC107; border-color: #FFC107
}
.button.big { background-color: #894fff; color: white; font-size: 16px; margin-right: 4px; margin-bottom: 4px; font-size: 16px; font-weight: 400; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; white-space: nowrap; padding: 10px 20px; font-size: 14px; line-height: 1.42857; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11); -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11)
}
.button.big:hover { -webkit-box-shadow: 0px 14px 25px -2px rgba(137, 79, 255, 0.14); -moz-box-shadow: 0px 14px 25px -2px rgba(137, 79, 255, 0.14); box-shadow: 0px 14px 25px -2px rgba(137, 79, 255, 0.14); top: -2px
}
input[type='checkbox'],
input[type='radio'] { margin: 0 5px 0 0; padding: 0
}
input[type='search'] { -webkit-appearance: textfield
}
input[type='search']::-webkit-search-decoration { -webkit-appearance: none
}
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0
}
textarea { overflow: auto; width: 100%; vertical-align: top; border: 1px solid #ddd; background: none; padding: 10px
}
label { font-weight: 700; display: block; margin-bottom: 10px
}
label[class*='radio'],
label[class*='checkbox'] { font-size: .73em; font-weight: 400; margin-bottom: 0
}
.post-password-form label { display: block; margin-bottom: 0
}
.post-password-form input[type='password'] { margin: 10px 0
}
a { text-decoration: none; color: Orange
}
a:hover { -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out
}
a:hover,
a:focus,
a:active { color: Orangered
}
.nav-links { font-size: 1.3rem; font-family: 'Secular One'; clear: both; overflow: hidden; margin: 0
}
.nav-links img { width: 80px; height: 80px; display: inline-block; position: relative; bottom: -22px; opacity: 0.5; padding: 0px; border-radius: 50em
}
.nav-links a:hover img { bottom: -20px; opacity: 1
}
.nav-links .nav-previous { float: left; width: 50%
}
.nav-links .nav-next { float: right; width: 50%; text-align: right
}
.screen-reader-text { position: absolute!important; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus { font-size: 1.4rem; font-weight: 700; line-height: normal; z-index: 100000; top: 5px; left: 5px; display: block; clip: auto!important; width: auto; height: auto; text-decoration: none; color: #21759b; border-radius: 3px; background-color: #f1f1f1; box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6); padding: 15px 23px 14px
}
.alignleft { display: inline; float: left; margin-right: 1.5em
}
.alignright { display: inline; float: right; margin-left: 1.5em
}
.clear::after,
.clear::after,
.entry-content::after,
.entry-content::after,
.comment-content::after,
.comment-content::after,
.site-header::after,
.site-header::after,
.site-content::after,
.site-content::after,
.site-footer::after,
.site-footer::after { display: table; clear: both; content: ''
}
.site { position: relative; width: 100%
}
.container { max-width: 1020px; margin: 40px auto 60px; padding: 0 20px
}
div#primary { display: block; width: 100%; margin-right: 1.07527%
}
div#primary:last-child { margin-right: 0
}
.single .byline,
.group-blog .byline { display: inline
}
.page-content,
.entry-content,
.entry-summary { margin: 1.5em 0 0
}
span.meta-nav { font-family: monospace; font-size: 3em; color: black; top: 22px; padding: 5px
}
.entry-meta { font-size: 14px; color: #737678; margin: 0 auto; display: inline-block; letter-spacing: 1px; line-height: 2.5; border-top: 1px solid #ddd; padding-top: 12px; width: 100%
}
.portfolio-entry-meta .project-tags a,
.portfolio-entry-meta .project-types a,
.entry-meta a { font-size: 10px; padding: 2px 10px; line-height: 1.5; color: grey; border: 0px solid grey; background: gainsboro; margin: 0 4px 4px 0; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; display: -moz-inline-stack; display: inline-block
}
.entry-footer { font-size: 1.3rem
}
.page-links { clear: both; margin: 0 0 1.5em
}
.more-link { font-size: 1.2rem; display: block; width: 150px; text-align: center; text-transform: uppercase; margin: 1.5em 0 0 -.25em
}
.more-link a { color: #fff; background: #1c1c1c; padding: 8px 12px
}
.more-link a:hover { background: #999
}
footer#colophon { font-size: 0.5rem; font-weight: 300; display: block; clear: left; width: 100%; text-align: center; letter-spacing: 1px; color: ghostwhite; padding: 3em 0
}
.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley { margin-top: 0; margin-bottom: 0; border: none; padding: 0
}
.header-img img { display: block; width: 100%; height: auto
}
.wp-caption { max-width: 100%; margin-bottom: 1.5em
}
.wp-caption .wp-caption-text { margin: .8075em 0
}
.wp-caption-text { text-align: center
}
.gallery-item { display: inline-block; width: 100%; text-align: center; vertical-align: top; margin: 0
}
.gallery-columns-2 .gallery-item { max-width: 50%
}
.gallery-columns-3 .gallery-item { max-width: 33.33%
}
.gallery-columns-4 .gallery-item { max-width: 25%
}
.gallery-columns-5 .gallery-item { max-width: 20%
}
.gallery-columns-6 .gallery-item { max-width: 16.66%
}
.gallery-columns-7 .gallery-item { max-width: 14.28%
}
.gallery-columns-8 .gallery-item { max-width: 12.5%
}
.gallery-columns-9 .gallery-item { max-width: 11.11%
}
#masthead { position: relative; max-width: 56.25em; margin: 0 auto
}
.portfolio-filter { font-size: 1.4rem; overflow: hidden; text-transform: uppercase
}
.portfolio-filter ul { width: 100%; text-align: center; margin: 0 0 2em; padding: 0
}
.portfolio-filter ul li { display: inline-block; list-style-type: none; cursor: pointer; text-align: center; color: #999; background: #f0f0f0; margin: 0 1em 1em 0; padding: .2em .5em
}
.portfolio-filter ul li:first-child { margin-right: .8em
}
section#projects article,
.portfolio article { display: inline-block; width: 450px; height: inherit; padding: 0; margin: 0; max-height: 250px; overflow: hidden; background: black
}
section#projects h3,
section#projects .entry-meta { position: relative; color: white; bottom: 210px; z-index: 9; padding: 20px; opacity: 0; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out
}
section#projects article:hover h3,
section#projects article:hover .entry-meta { opacity: 1
}
.portfolio .type-jetpack-portfolio:hover,
section#projects article:hover img,
.nav-links img { -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; opacity: 0.6; background: #000
}
.work-item { overflow: visible; display: inline-block; background-color: white; margin: 0 1em 2em 0; padding: 30px
}
.card { box-shadow: 0 10px 30px rgba(0, 0, 0, .2)
}
.work-item h3 { font-size: 1.5em; margin: 0 0 .5em
}
.work-item p,
section#Advantages p { font-size: .8em; line-height: 1.5em; margin: 0 0 20px
}
.js .loaded #Side.btm,
.no-js #Side.btm { opacity: 1
}
#Side { background-color: #1f1815; background-attachment: scroll, fixed; background-image: url(https://www.aniboaz.co.il/new/images/grid.png), url(https://www.aniboaz.co.il/new/images/buzy.jpg); background-position: top left, top left; background-repeat: repeat, no-repeat; background-size: auto, auto 100%; color: rgba(255, 255, 255, 0.5); height: 100%; left: 0; position: fixed; text-align: left; top: 0; z-index: -2; width: 50%; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; transition: all .7s ease-in-out; padding: 4em 4em 0 0
}
.image.avatar img { box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); width: 6.25em; border-radius: 50%; margin: 0 0 1em
}
.minbutton:hover { opacity: 0.5
}
.minbutton { position: fixed; display: none; background: transparent; opacity: 0.2; -webkit-animation-name: bounceInRight; animation-name: bounceInRight; border: none; top: 120px; left: 42%; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out
}
.btm.minbutton { opacity: 0.2; -moz-transform: rotate(180deg); left: 0; -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg)
}
.col-3 { width: 23%
}
.col-4,
.col-3,
.col-6 { display: inline-block; vertical-align: middle
}
.splash { width: 100%; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 1; background-color: #444; overflow: hidden; padding: 8em 2em 4em
}
.splash.homesplsh { background-image: url(https://www.aniboaz.co.il/images/bgb2.png); background-position: 10% 250%; background-repeat: no-repeat; background-color: #ff9600; top: 0; -webkit-animation-delay: -4s; animation-delay: -4s
}
.splash p#breadcrumbs,
.splash p#breadcrumbs a { color: white; font-size: 12px
}
.loaded .splash.homesplsh,
.no-js .home .splash.homesplsh { background-position: 10% 100%; background-attachment: fixed; -webkit-transition: background-position 600ms ease-in-out; -o-transition: background-position 600ms ease-in-out; transition: background-position 600ms ease-in-out
}
.content-area .splash h1,
.no-js .splash h1,
.page .mains.btm .splash h1,
#main.loaded .mains.btm h1 > *,
#main.loaded .mains.btm h1 { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0)
}
.image.left,
.image.right { max-width: 40%
}
.image.right { float: right; margin: 0 0 1em 1.5em; top: 0.25em
}
.image { border-radius: 0.35em; border: 0; display: inline-block; position: relative
}
#main article { -webkit-transition: opacity 600ms, transform 600ms; -o-transition: opacity 600ms, transform 600ms; transition: opacity 600ms, transform 600ms
}
#main.loaded article,
.no-js #main article { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0)
}
@keyframes clockwise { from { transform: rotate(0deg) } to { transform: rotate(360deg) }
}
@keyframes anticlockwise { from { transform: rotate(0deg) } to { transform: rotate(-360deg) }
}
.anispin { animation: clockwise 6s linear infinite
}
.splash img { -webkit-animation: fall 200ms 1 ease-in-out; -moz-animation: fall 200ms 1 ease-in-out; -o-animation: fall 200ms 1 ease-in-out
}
@-webkit-keyframes fall { from { -webkit-transform: translateY(180px) } to { -webkit-transform: translateY(0px) }
}
@-moz-keyframes fall { from { -moz-transform: translateY(180px) } to { -moz-transform: translateY(0px) }
}
@-o-keyframes fall { from { -o-transform: translateY(180px) } to { -o-transform: translateY(0px) }
}
.homesplsh { background-color: #FFC107; min-height: 800px; color: #FFF; font-size: 20px
}
.mains>section { border-bottom: solid 2px #efefef; border: 0; margin: 0; padding: 4em 0 0
}
.mains>section:first-child { border-top: 0; margin-top: 0; padding-top: 0
}
.mains>section:nth-child(even) { background: #f7f7f7
}
.feed { height: 600px; overflow: auto; font-size: 16px
}
.splash.ux { display: block; background-color: #2980b9; background: url(https://www.aniboaz.co.il/new/images/graphy.png) repeat fixed center
}
.splash.game { background: url(https://www.aniboaz.co.il/new/images/pixels.png) repeat fixed center; background-color: #27ae60
}
.splash.animation { background: url(https://www.aniboaz.co.il/new/images/patternorange.png) repeat fixed center; background-color: orange
}
.splash.web { background: url(https://www.aniboaz.co.il/new/images/patternpurple.png) repeat fixed center; background-color: #8e44ad
}
.mains .navtabs { position: relative
}
.splash h1 strong { color: rgba(255, 255, 255, 0.8)
}
.splash { width: 100%; position: relative; top: -4em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 10; background-color: #444; overflow: hidden; padding: 8em 6em 4em
}
.splash h1 { display: inline-block; max-width: 600px; line-height: 1; color: rgba(255, 255, 255, 0.5)
}
.splash h1 sub { font-size: .2em
}
.splash img { bottom: 0; display: inline-block; float: right; -webkit-animation: fall 200ms 1 ease-in-out; -moz-animation: fall 200ms 1 ease-in-out; -o-animation: fall 200ms 1 ease-in-out; margin: 0 0 -4em
}
.single main { background: #FFF; z-index: 2; padding: 0 4em
}
.single .mains>section { margin-top: 2em; padding: 0
}
.single header { height: auto
}
#Advantages img { margin: auto; padding: 22px 50px 43px 15px
}
#Advantages h2.icon { background-color: orange; color: #FFF; line-height: 1; max-width: 25px; max-height: 45px; border-radius: 8em; margin: auto; padding: 22px 50px 43px 15px
}
#Advantages article h1 { font-size: 2em; color: black
}
to { transform: rotate(-360deg); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px)
}
.anispin { animation: clockwise 6s linear infinite
}
@-webkit-keyframes typing { from { width: 0 } to { width: 16.3em }
}
@-moz-keyframes typing { from { width: 0 } to { width: 16.3em }
}
@-webkit-keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: rgba(255, 255, 255, 0.5) }
}
@-moz-keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: rgba(255, 255, 255, 0.5) }
}
.typing { font-family: Alef; width: 24px; border-right: .1em solid white; overflow: hidden; white-space: nowrap
}
.loaded .typing { -webkit-animation: typing 17s steps(30, end), blink-caret 1s step-end infinite; -moz-animation: typing 17s steps(30, end), blink-caret 1s step-end infinite
}
.social-navigation a,
.work-item,
.jetpack-portfolio-shortcode .portfolio-entry-header { -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; transition: all .1s ease-in-out
}
.project-tags { overflow-wrap: break-word
} .float {
z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
.shape.shape--1 { top: 5%; left: 25%; height: 60px; width: 60px;
}
@-webkit-keyframes floating {	from {	-webkit-transform: translate(0, 0px);	}	65% {	-webkit-transform: translate(0, 10px);	}	to {	-webkit-transform: translate(0, -0px);	}
} @keyframes floating {	from {	-webkit-transform: translate(0, 0px);	}	65% {	-webkit-transform: translate(0, 10px);	}	to {	-webkit-transform: translate(0, -0px);	}
}
.shape { position: absolute; -webkit-animation: floating 4s infinite ease-in-out; animation: floating 4s infinite ease-in-out;
}
.shape.shape--2 { height: 75px; width: 75px; bottom: 3%; right: 25%;
-webkit-animation-delay: 1.5s;	animation-delay: 1.5s;	-webkit-animation-duration: 3s;	animation-duration: 3s;
}
.shape.shape--3 { height: 85px; width: 85px; top: 19%; left: 38%;
-webkit-animation-delay: .3s;	animation-delay: .3s;	-webkit-animation-duration: 4.4s;	animation-duration: 4.4s;
}
.shape.shape--4 { height: 85px; width: 85px; bottom: 70%; right: 5%;
-webkit-animation-delay: .5s;	animation-delay: .5s;	-webkit-animation-duration: 4.2s;	animation-duration: 4.2s;
}
.shape.shape--5 { height: 75px; width: 75px; top: 65%; right: 10%;
-webkit-animation-delay: .7s;	animation-delay: .7s;
}
.shape.shape--6 { height: 75px; width: 75px; bottom: 12%; left: 25%;
-webkit-animation-delay: 1s;	animation-delay: 1s;	-webkit-animation-duration: 3s;	animation-duration: 3s;
}
.shape.shape--7 { height: 75px; width: 75px; top: 10%; right: 15%;
-webkit-animation-delay: 1.2s;	animation-delay: 1.2s;	-webkit-animation-duration: 2.8s;	animation-duration: 2.8s;
}
.shape.shape--8 { height: 75px; width: 75px; top: 45%; left: 5%;
-webkit-animation-delay: 1.5s;	animation-delay: 1.5s;
}

New website header - Script Codes JS Codes

$(window).ready(function(){ $('body').css('opacity', '1'); $('body').addClass('loaded'); });
$(document).ready(function(){ //make images fullwidth on large screens
if ($(window).width() > 1020) { var bigimag = '.wp-post-image.size-original' var wid = $(window).width() var marg = (wid - 1020) / -2; $(bigimag).css('max-width', wid ); $(bigimag).css('margin-left', marg ); $(bigimag).css('width', wid );
}
else {
}
});
New website header - Script Codes
New website header - Script Codes
Home Page Home
Developer Boaz
Username Aniboaz
Uploaded December 16, 2022
Rating 3
Size 9,167 Kb
Views 12,144
Do you need developer help for New website header?

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
Online Tools
Kanban Board
New navbar
Digital assets
Online Tools 3.0
Online Tools 2.0
Gofen
A Pen by Boaz
Background patterns
SVG animations for portfolio
Create amazing SEO content 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!