Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5
Decepticon Seekers - Renk Değiştiren Sayfalar
#1
www.deccal.org
www.deccal.org
www.deccal.org
www.deccal.org

Html:
PHP Kod:
<h1>Cyberizm Decepticon Seekers</h1>

<
h2>Cyberizm Theme</h2>

<
nav>
  <
ul>
    <
li><a href="#" data-palette="starscream">Starscream</a></li>
    <
li><a href="#" data-palette="thundercracker">Thundercracker</a></li>
    <
li><a href="#" data-palette="skywarp">Skywarp</a></li>
    <
li><a href="#" data-palette="ramjet">Ramjet</a></li>
    <
li><a href="#" data-palette="thrust">Thrust</a></li>
    <
li><a href="#" data-palette="dirge">Dirge</a></li>
  </
ul>
</
nav>

<
section>
  <!-- 
SVG Logo found herehttp://seeklogo.com/decepticon-g1-logo-229304.html -->
  
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="decepticon_logo" x="0px" y="0px" viewBox="0 0 309 309" enable-background="new 0 0 309 309" xml:space="preserve">
  <
polygon class="bg" points="155.2,192 193.5,143.5 215,14 172,63.5 138.5,63.5 91.5,14 116.5,143.5"/>
  <
polygon class="bg" points="0,0 43.5,59.5 96.5,77.5 103.5,112.5 51.8,100.5 51.8,105 103.5,123 108,149.5 54,135 56.5,140.5 118.5,160.5 153.5,202 188.5,160.5 252,143.5 252,138.5 201,152 203.5,125 256,109 256,104 203.5,116 211.5,80 264,62 309,3 292.5,138.5 154.5,301 15,136"/>
  <
polygon class="eyes" points="154.5,143.5 172,99.5 138.5,99.5"/>
  <
polygon class="bg" points="39,277 25,168 143,309"/>
  <
polygon class="bg" points="166,309 269,278.5 284,168"/>
  <
polygon class="eyes" points="129,243.5 138.5,211.5 86.5,188.5"/>
  <
polygon class="eyes" points="182.5,243.5 225,188.5 172,210.5"/>
  </
svg>

  <
p>
    <
strong>Seeker</strongwas a term originally coined by fans to describe the Decepticon Jets of the same modeeventually adopted by Hasbro and various comic continuitiesOnly StarscreamSkywarp and Thundercracker were named during Season 1 of the animated seriesRamjetThrust, and Dirge (introduced in Season 2essentially used the same mold as their Season 1 counterparts but with small modifications, and because of thisthey are also known as the "Coneheads". <a href="http://en.wikipedia.org/wiki/List_of_Decepticons#Decepticon_Jets.2FSeekers">[Source]</a>
  </
p>

  <
blockquote cite="http://tfwiki.net/wiki/Seeker_(body-type)">
    
The term Seeker refers to Decepticon jet troopers who share Starscream's body-type but with different colors or minor variations in wing and head shapes. This is most clearly and commonly known from Generation 1, but any franchise with a Starscream is almost inevitably going to feature a similar "family" of redecoed jet-formers.
  </blockquote>

  <p>
    In the Generation One cartoon there were large numbers of generic, unnamed Seekers in addition to the named characters. They came in a wide variety of colors, from extra duplicates of Starscream or one of the other named guys, to original and distinct looks all their own. They seem to have formed the bulk of the Decepticon forces on Cybertron, as well as among Megatron'
s initial troops on EarthThey gradually became less commonperhaps as a result of casualties... or the cartoon's production team becoming more careful, or more-likely having more "actual" Decepticons to work with as the toy line expanded. <a href="http://transformers.wikia.com/wiki/Seeker_(group)#And_all_the_rest">[Source]</a>
  </p>
</section>

<footer>
  <p>
    Transformers is owned and copyrighted by Hasbro, Inc.<br />
    Names and imagery used for fun and learning.
  </p>
</footer> 

Css:
PHP Kod:
/*
========= FONTS =========
*/
@import url(http://fonts.googleapis.com/css?family=Orbitron:700|Open+Sans:400italic,700italic,400,700);
/*
========= LAYOUT =========
*/
body {
  
font16px 'Open Sans'Helveticasans-serif;
  
padding2.5em;
  
min-width300px;
  -
moz-transitionall 0.3s;
  -
o-transitionall 0.3s;
  -
webkit-transitionall 0.3s;
  
transitionall 0.3s;
}

strong {
  
font-weightbold;
}

{
  
text-decorationnone;
  
displayinline-block;
  
padding0;
  -
moz-transitionall 0.3s;
  -
o-transitionall 0.3s;
  -
webkit-transitionall 0.3s;
  
transitionall 0.3s;
}
a:hover {
  
padding0 1em;
}

section {
  
padding-top1.5em;
  
clearboth;
}

h1 {
  
font-family"Orbitron"sans-serif;
  
font-size2em;
  
font-weightbold;
  
padding0.5em 0;
  
text-transformuppercase;
  
letter-spacing0.15em;
  -
moz-transitionall 0.3s;
  -
o-transitionall 0.3s;
  -
webkit-transitionall 0.3s;
  
transitionall 0.3s;
}

h2 {
  
font-family"Orbitron"sans-serif;
  
font-size1.5em;
  
font-weightbold;
  
padding0.5em 0;
  
letter-spacing0.1em;
  -
moz-transitionall 0.3s;
  -
o-transitionall 0.3s;
  -
webkit-transitionall 0.3s;
  
transitionall 0.3s;
}

{
  
font-size0.9em;
  
line-height1.5em;
  
margin-bottom0.75em;
  
text-alignjustify;
  -
moz-transitionall 0.3s;
  -
o-transitionall 0.3s;
  -
webkit-transitionall 0.3s;
  
transitionall 0.3s;
}
@
media screen and (min-width800px) {
  
{
    
font-size1em;
  }
}

blockquote {
  
clearboth;
  
margin1em 2em;
  
padding2em;
  
font-size1em;
  
cursorpointer;
  
text-alignjustify;
  -
moz-transitionall 0.3s;
  -
o-transitionall 0.3s;
  -
webkit-transitionall 0.3s;
  
transitionall 0.3s;
}
@
media screen and (min-width800px) {
  
blockquote {
    
font-size1.25em;
  }
}

footer {
  
margin4em 0;
  
font-size0.75em;
}
footer p {
  
text-aligncenter;
}

/*
========= NAVIGATION =========
*/
nav {
  
font-size0.8em;
}
nav ul li {
  
floatnone;
}
@
media screen and (min-width800px) {
  
nav ul li {
    
floatleft;
  }
}
nav ul li a {
  
displayblock;
  
padding0.5em 2em;
  
text-decorationnone;
  -
moz-transitionall 0.3s;
  -
o-transitionall 0.3s;
  -
webkit-transitionall 0.3s;
  
transitionall 0.3s;
}
nav ul li a:hover {
  
padding0.5em 2em;
}

/*
========= SVG LOGO STYLES =========
*/
#decepticon_logo {
  
floatleft;
  
width50px;
  
height50px;
  
margin-right10px;
  
margin-bottom5px;
}
@
media screen and (min-width800px) {
  
#decepticon_logo {
    
width100px;
    
height100px;
    
margin-right25px;
    
margin-bottom15px;
  }
}
#decepticon_logo .bg, #decepticon_logo .eyes {
  
-moz-transitionall 0.3s;
  -
o-transitionall 0.3s;
  -
webkit-transitionall 0.3s;
  
transitionall 0.3s;
}

/*
========= MAP OUT THE PALETTES =========
*/
/*
========= LOOP THROUGH THE PALETTES TO ADD COLORS =========
*/
body.starscream {
  
background-color#e3dddf;
  
color#060c0c;
}
body.starscream h1 {
  
color#a32800;
}
body.starscream h2 {
  
color#060c0c;
}
body.starscream #decepticon_logo .bg {
  
fill#060c0c;
}
body.starscream #decepticon_logo .eyes {
  
fill#e3dddf;
}
body.starscream blockquote {
  
background-image: -moz-linear-gradient(#a32800, #701b00);
  
background-image: -webkit-linear-gradient(#a32800, #701b00);
  
background-imagelinear-gradient(#a32800, #701b00);
  
color#e3dddf;
}
body.starscream nav ul li a {
  
background-color#2772cd;
  
color#e3dddf;
}
body.starscream nav ul li a:hover {
  
background-color#cfa52d;
  
color#060c0c;
}
body.starscream nav ul li a.active {
  -
moz-box-shadowinset 5px 0px 0px #a32800;
  
-webkit-box-shadowinset 5px 0px 0px #a32800;
  
box-shadowinset 5px 0px 0px #a32800;
}
@
media screen and (min-width800px) {
  
body.starscream nav ul li a.active {
    -
moz-box-shadowinset 0px 3px 0px #a32800;
    
-webkit-box-shadowinset 0px 3px 0px #a32800;
    
box-shadowinset 0px 3px 0px #a32800;
  
}
}
body.starscream a {
  
color#a32800;
}
body.starscream a:hover {
  
background-color#cfa52d;
}

body.thundercracker {
  
background-color#4575b7;
  
color#101221;
}
body.thundercracker h1 {
  
color#e3dddf;
}
body.thundercracker h2 {
  
color#101221;
}
body.thundercracker #decepticon_logo .bg {
  
fill#101221;
}
body.thundercracker #decepticon_logo .eyes {
  
fill#4575b7;
}
body.thundercracker blockquote {
  
background-image: -moz-linear-gradient(#e3dddf, #ccc1c5);
  
background-image: -webkit-linear-gradient(#e3dddf, #ccc1c5);
  
background-imagelinear-gradient(#e3dddf, #ccc1c5);
  
color#4575b7;
}
body.thundercracker nav ul li a {
  
background-color#a9030f;
  
color#e3dddf;
}
body.thundercracker nav ul li a:hover {
  
background-color#ff9429;
  
color#101221;
}
body.thundercracker nav ul li a.active {
  -
moz-box-shadowinset 5px 0px 0px #e3dddf;
  
-webkit-box-shadowinset 5px 0px 0px #e3dddf;
  
box-shadowinset 5px 0px 0px #e3dddf;
}
@
media screen and (min-width800px) {
  
body.thundercracker nav ul li a.active {
    -
moz-box-shadowinset 0px 3px 0px #e3dddf;
    
-webkit-box-shadowinset 0px 3px 0px #e3dddf;
    
box-shadowinset 0px 3px 0px #e3dddf;
  
}
}
body.thundercracker a {
  
color#e3dddf;
}
body.thundercracker a:hover {
  
background-color#a9030f;
}

body.skywarp {
  
background-color#222433;
  
color#cec5bc;
}
body.skywarp h1 {
  
color#7f75aa;
}
body.skywarp h2 {
  
color#cec5bc;
}
body.skywarp #decepticon_logo .bg {
  
fill#cec5bc;
}
body.skywarp #decepticon_logo .eyes {
  
fill#222433;
}
body.skywarp blockquote {
  
background-image: -moz-linear-gradient(#7f75aa, #655a92);
  
background-image: -webkit-linear-gradient(#7f75aa, #655a92);
  
background-imagelinear-gradient(#7f75aa, #655a92);
  
color#222433;
}
body.skywarp nav ul li a {
  
background-color#cec5bc;
  
color#222433;
}
body.skywarp nav ul li a:hover {
  
background-color#f19c1d;
  
color#222433;
}
body.skywarp nav ul li a.active {
  -
moz-box-shadowinset 5px 0px 0px #7f75aa;
  
-webkit-box-shadowinset 5px 0px 0px #7f75aa;
  
box-shadowinset 5px 0px 0px #7f75aa;
}
@
media screen and (min-width800px) {
  
body.skywarp nav ul li a.active {
    -
moz-box-shadowinset 0px 3px 0px #7f75aa;
    
-webkit-box-shadowinset 0px 3px 0px #7f75aa;
    
box-shadowinset 0px 3px 0px #7f75aa;
  
}
}
body.skywarp a {
  
color#f19c1d;
}
body.skywarp a:hover {
  
background-color#7f75aa;
}

body.ramjet {
  
background-color#ffeaec;
  
color#45393d;
}
body.ramjet h1 {
  
color#45393d;
}
body.ramjet h2 {
  
color#45393d;
}
body.ramjet #decepticon_logo .bg {
  
fill#45393d;
}
body.ramjet #decepticon_logo .eyes {
  
fill#ffeaec;
}
body.ramjet blockquote {
  
background-image: -moz-linear-gradient(#45393d, #292224);
  
background-image: -webkit-linear-gradient(#45393d, #292224);
  
background-imagelinear-gradient(#45393d, #292224);
  
color#ffeaec;
}
body.ramjet nav ul li a {
  
background-color#dc4335;
  
color#ffeaec;
}
body.ramjet nav ul li a:hover {
  
background-color#f9e872;
  
color#45393d;
}
body.ramjet nav ul li a.active {
  -
moz-box-shadowinset 5px 0px 0px #45393d;
  
-webkit-box-shadowinset 5px 0px 0px #45393d;
  
box-shadowinset 5px 0px 0px #45393d;
}
@
media screen and (min-width800px) {
  
body.ramjet nav ul li a.active {
    -
moz-box-shadowinset 0px 3px 0px #45393d;
    
-webkit-box-shadowinset 0px 3px 0px #45393d;
    
box-shadowinset 0px 3px 0px #45393d;
  
}
}
body.ramjet a {
  
color#dc4335;
}
body.ramjet a:hover {
  
background-color#f9e872;
}

body.thrust {
  
background-color#7e2401;
  
color#ffe0ff;
}
body.thrust h1 {
  
color#060c0c;
}
body.thrust h2 {
  
color#ffe0ff;
}
body.thrust #decepticon_logo .bg {
  
fill#ffe0ff;
}
body.thrust #decepticon_logo .eyes {
  
fill#7e2401;
}
body.thrust blockquote {
  
background-image: -moz-linear-gradient(#ffe0ff, #ffadff);
  
background-image: -webkit-linear-gradient(#ffe0ff, #ffadff);
  
background-imagelinear-gradient(#ffe0ff, #ffadff);
  
color#8e4e9c;
}
body.thrust nav ul li a {
  
background-color#ffe0ff;
  
color#060c0c;
}
body.thrust nav ul li a:hover {
  
background-color#f9e872;
  
color#060c0c;
}
body.thrust nav ul li a.active {
  -
moz-box-shadowinset 5px 0px 0px #060c0c;
  
-webkit-box-shadowinset 5px 0px 0px #060c0c;
  
box-shadowinset 5px 0px 0px #060c0c;
}
@
media screen and (min-width800px) {
  
body.thrust nav ul li a.active {
    -
moz-box-shadowinset 0px 3px 0px #060c0c;
    
-webkit-box-shadowinset 0px 3px 0px #060c0c;
    
box-shadowinset 0px 3px 0px #060c0c;
  
}
}
body.thrust a {
  
color#f9e872;
}
body.thrust a:hover {
  
background-color#8e4e9c;
}

body.dirge {
  
background-color#021f83;
  
color#f3f1f4;
}
body.dirge h1 {
  
color#f4b71e;
}
body.dirge h2 {
  
color#f3f1f4;
}
body.dirge #decepticon_logo .bg {
  
fill#f3f1f4;
}
body.dirge #decepticon_logo .eyes {
  
fill#021f83;
}
body.dirge blockquote {
  
background-image: -moz-linear-gradient(#392735, #1b1219);
  
background-image: -webkit-linear-gradient(#392735, #1b1219);
  
background-imagelinear-gradient(#392735, #1b1219);
  
color#f4b71e;
}
body.dirge nav ul li a {
  
background-color#392735;
  
color#f3f1f4;
}
body.dirge nav ul li a:hover {
  
background-color#dc4335;
  
color#f3f1f4;
}
body.dirge nav ul li a.active {
  -
moz-box-shadowinset 5px 0px 0px #f4b71e;
  
-webkit-box-shadowinset 5px 0px 0px #f4b71e;
  
box-shadowinset 5px 0px 0px #f4b71e;
}
@
media screen and (min-width800px) {
  
body.dirge nav ul li a.active {
    -
moz-box-shadowinset 0px 3px 0px #f4b71e;
    
-webkit-box-shadowinset 0px 3px 0px #f4b71e;
    
box-shadowinset 0px 3px 0px #f4b71e;
  
}
}
body.dirge a {
  
color#f4b71e;
}
body.dirge a:hover {
  
background-color#392735;


Js:
PHP Kod:
$(document).ready(function(){
  
paletteSwap.init();
  $(
'blockquote').on('click', function(){
    
window.open($(this).attr('cite'));
  });
});

/*
=========================
paletteSwap
-Handles the swapping of classes of each color palette
=========================
*/
var paletteSwap = {
  
lastPalette null,
  
  
//-- initial setup: nav link JS and default style (1st option in nav)
  
init : function(){
    $(
'nav ul li a').on('click'paletteSwap.click);
    var 
defaultPalette = $('nav ul li a:first-of-type').attr('data-palette');
    
this.swap(defaultPalette);
  },
  
  
//-- navigation click event: fire palette swap
  
click : function(e){
    
e.preventDefault();
    
paletteSwap.swap($(e.currentTarget).attr('data-palette'));
  },
    
  
//-- palette swap logic: add class to new palette class to the body and remove old palette class
  
swap : function(palette){
    $(
'body').removeClass(this.lastPalette);
    $(
'body').addClass(palette);
    $(
'nav ul li a').removeClass('active');
    $(
'a[data-palette="'+palette+'"]').addClass('active');
    
this.lastPalette palette;
  }
  
}; 
İnsɑnlɑr değişmez değişen tek şey şɑrtlɑr ve çıkɑrlɑr...
Beğenenler:
#2
Eyvallah Baskan
Beğenenler:

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Html Renk Kodları Stallk3r 0 256 15-04-2015, Saat: 18:41
Son Yorum: Stallk3r
Anahtar Kelimeler

Decepticon Seekers - Renk Değiştiren Sayfalar indir, Decepticon Seekers - Renk Değiştiren Sayfalar Videosu, Decepticon Seekers - Renk Değiştiren Sayfalar Online izle, Decepticon Seekers - Renk Değiştiren Sayfalar Bedava indir, Decepticon Seekers - Renk Değiştiren Sayfalar Yükle, Decepticon Seekers - Renk Değiştiren Sayfalar Hakkında, Decepticon Seekers - Renk Değiştiren Sayfalar Nedir, Decepticon Seekers - Renk Değiştiren Sayfalar Free indir, Decepticon Seekers - Renk Değiştiren Sayfalar Oyunu, Decepticon Seekers - Renk Değiştiren Sayfalar Download


1 Ziyaretçi