Jump to content
Sign in to follow this  
AnDrEy.

Ajutor creare header

Recommended Posts

 

Spoiler

<div class="headerbg">
    <div id="da-slider" class="da-slider" style="background-position: 150% 0%;">
        <div class="da-slide da-slide-toleft">
            <h2>Welcome to FragBite Romania</h2>
            <p>FragBite Romania is a community which focuses on the social aspect of gaming.We always valued the joy of playing games with others and overcoming challenges together over sitting behind a pc toiling away.We want to have fun and achieve success in today’s "Gaming" world</p>
            <div class="da-img"><img style="height: 256px;" src="http://fragbite.ro/forum/public/style_images/hgk/1.png" alt="image01"></div>
        </div>
        <div class="da-slide da-slide-toleft">
            <h2>JOIN OUR BRAND NEW CSGO SERVER</h2>
            <p>Be the first one to experience the competitive feeling on our brand new CSGO server. We are currently searching for dedicated staff members and dedicated players but most importantly, we just want you to have fun and compete with each other</p>
            <div class="da-img"><img style="height: 256px;" src="http://fragbite.ro/forum/public/style_images/hgk/2.png" alt="image01"></div>
        </div>
        <div class="da-slide da-slide-toleft">
            <h2>JOIN OUR BRAND NEW TF2 SERVER</h2>
            <p>Be the first one to have fun on our brand new
                <br> Team Fortress 2 server. We are currently searching for dedicated staff members and dedicated players but most importantly, we just want you to have fun.</p>
            <div class="da-img"><img style="height: 256px;" src="http://fragbite.ro/forum/public/style_images/hgk/3.png" alt="image01"></div>
        </div>
        <div class="da-slide da-slide-fromright da-slide-current">
            <h2>Coming Soon - SA:MP SERVERS</h2>
            <p>Be the first one to have fun on our brand new
                <br> SA:MP server. We are currently searching for dedicated staff members and dedicated players but most importantly, we just want you to have fun.</p>
            <div class="da-img"><img style="height: 236px;" src="http://fragbite.ro/forum/public/style_images/hgk/4.png" alt="image01"></div>
        </div>
        <nav class="da-arrows hoverbut">
            <span class="da-arrows-prev"><div class="borderio" style="height: 115px;width: 20px;position: absolute;border-left: 2px solid #202226;border-top: 2px solid #202226;top: 10px;left: 18px;"></div><i class="ion-chevron-left" aria-hidden="true" style="font-size: 17px;border-radius: 50%;top: 133px;position: absolute;height: 30px;width: 30px;left: 1px;text-align: center;line-height: 30px;border: 2px solid #202226;"></i><div class="borderio" style="height: 115px;width: 20px;position: absolute;border-left: 2px solid #202226;border-bottom: 2px solid #202226;top: 175px;left: 18px;"></div>
            </span>
            <span class="da-arrows-next"><div class="borderio" style="height: 115px;width: 20px;position: absolute;border-right: 2px solid #202226;border-top: 2px solid #202226;top: 10px;"></div><i class="ion-chevron-right" aria-hidden="true" style="font-size: 17px;border-radius: 50%;top: 133px;position: absolute;height: 30px;width: 30px;left: 5px;text-align: center;line-height: 30px;border: 2px solid #202226;"></i><div class="borderio" style="height: 115px;width: 20px;position: absolute;border-right: 2px solid #202226;border-bottom: 2px solid #202226;top: 175px;"></div>
            </span>
        </nav>
        <nav class="da-dots"><span class=""></span><span class=""></span><span class=""></span><span class="da-dots-current"></span></nav>
    </div>
</div>

Spoiler

.headerbg {
	height: 300px;
	width: 96%;
	position: relative;
	top: -239px;
	background: #202226;
	margin: 0 auto 8px;
}

.hidden-scrollbar {
	color: #FFF;
	overflow: hidden;
	text-align: justify;
}

.hidden-scrollbar .inner {
	height: 200px;
	overflow: auto;
	padding-right: 300px;
	margin: 0 -320px 0 0;
}

.hidden-scrollbar .inner2 {
	height: 920px;
	overflow: auto;
	padding-right: 300px;
	margin: 0 -320px 0 0;
}

.da-slide {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	font-family: BebasNeueRegular, 'Arial Narrow', Arial, sans-serif;
	text-align: left;
}

.da-slide h2,
.da-slide p,
.da-slide .da-link,
.da-slide .da-img {
	position: absolute;
	opacity: 0;
	left: 110%;
}

.da-slide .da-img {
	text-align: center;
	width: 30%;
	height: 256px;
	line-height: 320px;
	left: 110%;
}

.da-slider {
	width: 100%;
	min-width: 520px;
	height: 300px;
	position: relative;
	overflow: hidden;
	background: transparent url(/public/style_css/images/waves.gif) repeat 0 0;
	-webkit-transition: background-position 1.4s ease-in-out .3s;
	-moz-transition: background-position 1.4s ease-in-out .3s;
	-o-transition: background-position 1.4s ease-in-out .3s;
	-ms-transition: background-position 1.4s ease-in-out .3s;
	transition: background-position 1.4s ease-in-out .3s;
}

.da-slide-current {
	z-index: 1000;
}

.da-slider-fb .da-slide {
	left: 100%;
}

.da-slider-fb .da-slide.da-slide-current {
	left: 0;
}

.da-slide h2 {
	color: #39f;
	font-size: 30px;
	width: 50%;
	top: 60px;
	white-space: nowrap;
	z-index: 10;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	font-family: Economica, Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
}

.da-slide p {
	width: 45%;
	top: 105px;
	font-size: 19px;
	line-height: 26px;
	height: 130px;
	overflow: hidden;
	font-weight: 400;
	font-family: Calibri;
	letter-spacing: 1px;
}

.da-slide .da-link {
	top: 270px;
	border-radius: 30px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	border: 8px solid rgba(255, 255, 255, 0.8);
	font-size: 18px;
	line-height: 30px;
	width: 80px;
	text-align: center;
	background: rgba(255, 255, 255, 0.2);
	padding: 2px 20px 0;
}

.da-slide .da-link:hover {
	background: rgba(255, 255, 255, 0.3);
}

.da-dots {
	width: 100%;
	position: absolute;
	text-align: center;
	left: 0;
	display: none;
	bottom: 20px;
	z-index: 2000;
	-moz-user-select: none;
	-webkit-user-select: none;
}

.da-dots span {
	display: inline-block;
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #e4b42d;
	cursor: pointer;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 1px rgba(255, 255, 255, 0.1);
	margin: 3px;
}

.da-dots span.da-dots-current:after {
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	background: linear-gradient(top, rgba(255, 255, 255, 1) 0 47% 100%;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
}

.da-arrows {
	-moz-user-select: none;
	-webkit-user-select: none;
}

.da-arrows span {
	position: absolute;
	height: 300px;
	width: 40px;
	cursor: pointer;
	z-index: 2000;
	text-align: center;
	-webkit-transition: opacity .4s ease-in-out .2s;
	-moz-transition: opacity .4s ease-in-out .2s;
	-o-transition: opacity .4s ease-in-out .2s;
	-ms-transition: opacity .4s ease-in-out .2s;
	transition: opacity .4s ease-in-out .2s;
	background: #1C1E21;
	line-height: 320px;
}

.da-slider:hover .da-arrows span {
	opacity: 1;
}

.da-arrows span:after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	top: 5px;
	left: 5px;
	background: transparent url(http://fragbite.ro/forum/public/style_images/hgk/arrows.png) no-repeat middle left;
	border-radius: 50%;
}

.da-arrows span.da-arrows-next:after {
	background-position: top right;
}

.da-arrows span.da-arrows-next {
	right: 0;
}

.da-slide-fromright h2 {
	-webkit-animation: fromRightAnim1 .6s ease-in .8s both;
	-moz-animation: fromRightAnim1 .6s ease-in .8s both;
	-o-animation: fromRightAnim1 .6s ease-in .8s both;
	-ms-animation: fromRightAnim1 .6s ease-in .8s both;
	animation: fromRightAnim1 .6s ease-in .8s both;
}

.da-slide-fromright p {
	-webkit-animation: fromRightAnim2 .6s ease-in .8s both;
	-moz-animation: fromRightAnim2 .6s ease-in .8s both;
	-o-animation: fromRightAnim2 .6s ease-in .8s both;
	-ms-animation: fromRightAnim2 .6s ease-in .8s both;
	animation: fromRightAnim2 .6s ease-in .8s both;
}

.da-slide-fromright .da-link {
	-webkit-animation: fromRightAnim3 .4s ease-in 1.2s both;
	-moz-animation: fromRightAnim3 .4s ease-in 1.2s both;
	-o-animation: fromRightAnim3 .4s ease-in 1.2s both;
	-ms-animation: fromRightAnim3 .4s ease-in 1.2s both;
	animation: fromRightAnim3 .4s ease-in 1.2s both;
}

.da-slide-fromright .da-img {
	-webkit-animation: fromRightAnim4 .6s ease-in .8s both;
	-moz-animation: fromRightAnim4 .6s ease-in .8s both;
	-o-animation: fromRightAnim4 .6s ease-in .8s both;
	-ms-animation: fromRightAnim4 .6s ease-in .8s both;
	animation: fromRightAnim4 .6s ease-in .8s both;
}

100% {
	left: -50%;
	opacity: 0;
}

.da-slide-fromleft h2 {
	-webkit-animation: fromLeftAnim1 .6s ease-in .6s both;
	-moz-animation: fromLeftAnim1 .6s ease-in .6s both;
	-o-animation: fromLeftAnim1 .6s ease-in .6s both;
	-ms-animation: fromLeftAnim1 .6s ease-in .6s both;
	animation: fromLeftAnim1 .6s ease-in .6s both;
}

.da-slide-fromleft p {
	-webkit-animation: fromLeftAnim2 .6s ease-in .6s both;
	-moz-animation: fromLeftAnim2 .6s ease-in .6s both;
	-o-animation: fromLeftAnim2 .6s ease-in .6s both;
	-ms-animation: fromLeftAnim2 .6s ease-in .6s both;
	animation: fromLeftAnim2 .6s ease-in .6s both;
}

.da-slide-fromleft .da-link {
	-webkit-animation: fromLeftAnim3 .4s ease-in 1.2s both;
	-moz-animation: fromLeftAnim3 .4s ease-in 1.2s both;
	-o-animation: fromLeftAnim3 .4s ease-in 1.2s both;
	-ms-animation: fromLeftAnim3 .4s ease-in 1.2s both;
	animation: fromLeftAnim3 .4s ease-in 1.2s both;
}

.da-slide-fromleft .da-img {
	-webkit-animation: fromLeftAnim4 .6s ease-in .6s both;
	-moz-animation: fromLeftAnim4 .6s ease-in .6s both;
	-o-animation: fromLeftAnim4 .6s ease-in .6s both;
	-ms-animation: fromLeftAnim4 .6s ease-in .6s both;
	animation: fromLeftAnim4 .6s ease-in .6s both;
}

.da-slide-toright h2 {
	-webkit-animation: toRightAnim1 .6s ease-in .6s both;
	-moz-animation: toRightAnim1 .6s ease-in .6s both;
	-o-animation: toRightAnim1 .6s ease-in .6s both;
	-ms-animation: toRightAnim1 .6s ease-in .6s both;
	animation: toRightAnim1 .6s ease-in .6s both;
}

.da-slide-toright p {
	-webkit-animation: toRightAnim2 .6s ease-in .3s both;
	-moz-animation: toRightAnim2 .6s ease-in .3s both;
	-o-animation: toRightAnim2 .6s ease-in .3s both;
	-ms-animation: toRightAnim2 .6s ease-in .3s both;
	animation: toRightAnim2 .6s ease-in .3s both;
}

.da-slide-toright .da-link {
	-webkit-animation: toRightAnim3 .4s ease-in both;
	-moz-animation: toRightAnim3 .4s ease-in both;
	-o-animation: toRightAnim3 .4s ease-in both;
	-ms-animation: toRightAnim3 .4s ease-in both;
	animation: toRightAnim3 .4s ease-in both;
}

.da-slide-toright .da-img {
	-webkit-animation: toRightAnim4 .6s ease-in both;
	-moz-animation: toRightAnim4 .6s ease-in both;
	-o-animation: toRightAnim4 .6s ease-in both;
	-ms-animation: toRightAnim4 .6s ease-in both;
	animation: toRightAnim4 .6s ease-in both;
}

30% {
	left: 15%;
	opacity: 1;
}

.da-slide-toleft h2 {
	-webkit-animation: toLeftAnim1 .6s ease-in both;
	-moz-animation: toLeftAnim1 .6s ease-in both;
	-o-animation: toLeftAnim1 .6s ease-in both;
	-ms-animation: toLeftAnim1 .6s ease-in both;
	animation: toLeftAnim1 .6s ease-in both;
}

.da-slide-toleft p {
	-webkit-animation: toLeftAnim2 .6s ease-in .3s both;
	-moz-animation: toLeftAnim2 .6s ease-in .3s both;
	-o-animation: toLeftAnim2 .6s ease-in .3s both;
	-ms-animation: toLeftAnim2 .6s ease-in .3s both;
	animation: toLeftAnim2 .6s ease-in .3s both;
}

.da-slide-toleft .da-link {
	-webkit-animation: toLeftAnim3 .4s ease-in both;
	-moz-animation: toLeftAnim3 .4s ease-in both;
	-o-animation: toLeftAnim3 .4s ease-in both;
	-ms-animation: toLeftAnim3 .4s ease-in both;
	animation: toLeftAnim3 .4s ease-in both;
}

.da-slide-toleft .da-img {
	-webkit-animation: toLeftAnim4 .6s ease-in .6s both;
	-moz-animation: toLeftAnim4 .6s ease-in .6s both;
	-o-animation: toLeftAnim4 .6s ease-in .6s both;
	-ms-animation: toLeftAnim4 .6s ease-in .6s both;
	animation: toLeftAnim4 .6s ease-in .6s both;
}

40% {
	left: 70%;
	opacity: 1;
}

90% {
	left: 0;
	opacity: 0;
}

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×