Jump to content

Ajutor creare header

AnDrEy.

By +AnDrEy.
in IP.Board 3.x

 Share

Recommended Posts

  • gadeas changed the title to Ajutor creare header

Andrei D. Community Regular

+Andrei D.

Posted
Posted

 

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;
}

 

 

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.