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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...