Ana içeriğe atla

FORZA HORİZON MENÜ

HTML
.background
.container
   .container--logo
      img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/9abd53b9-dc42-459a-b094-14d064efb37e%20(1).png")
   .container--navigation
      .item--link.hint lb
      .item--link.active home
      .item--link horizon life
         .item--notification 6
      .item--link team adventure
      .item--link creative hub
      .item--link cars
         .item--notification 2
      .item--link rivals
      .item--link clubs
      .item--link marketplace
      .item--link.hint rb
   .container--top-menu
      .container--card-spot.size-1
         .container--card.border
            .item--card-image(style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/Screen%20Shot%202019-01-03%20at%208.30.53%20PM.png)") 
            .container--card--text
               .item--notification 2
               .item--icon #[i.fa.fa-check-circle-o]
               .item--card-title #[.text car mastery]
               .item--card-sub #[.text 2/16 perks purchased]
      .container--card-spot.size-2
         .container--card.border
            .item--card-image(style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/Screen%20Shot%202019-01-03%20at%208.55.20%20PM.png)") 
            .container--card--text.dark
               .item--card-title.dark #[.text go to festival]
               .item--card-sub.dark #[.text Buy, upgrade, and customise cars]
      .container--card-spot.size-1
         .container--card.border
            .item--card-image(style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/Screen%20Shot%202019-01-03%20at%208.57.38%20PM.png)") 
            .container--card--text
               .item--icon #[i.fa.fa-car]
               .item--card-title #[.text my cars]
               .item--card-sub #[.text 17 cars owned]
   .container--bottom-menu
      .container--card-spot.size-1
         .container--card
            .item--card-image.med-height(style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/Screen%20Shot%202019-01-03%20at%209.40.36%20PM.png)") 
            .container--card--text
               .item--card-title #[.text level 5]
               .item--card-sub #[.text Explorer]
      .container--card-spot.size-2
         .container--card.border
            .item--card-image(style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/843809.jpg)") 
            .container--card--text.dark
               .item--card-title.dark #[.text 2016 aston martin]
               .item--card-sub.dark #[.text Vulcan]
      .container--card-spot.size-1
         .container--card.size-1
            .item--card-image.med-height.colorize(style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/Screen%20Shot%202019-01-03%20at%209.46.59%20PM.png)") 
            .container--card--text
               .item--card-title #[.text level 2]
               .item--card-sub #[.text Road Racing Series]
      .container--card-spot.size-1
         .container--card-mini
            .container--card-mini--content
               .container--card-mini--image
                  .item--card-icon(style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/Screen%20Shot%202019-01-03%20at%209.39.19%20PM.png)") 
               .container--card-mini--text
                  .item--card-sub #[.text Tune Car]
         .container--card-mini
            .container--card-mini--content
               .container--card-mini--image
                  .item--card-icon(style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/Screen%20Shot%202019-01-03%20at%209.39.48%20PM.png)") 
               .container--card-mini--text
                  .item--card-sub #[.text Auction Alerts]
               
CSS


$sizeLg: 14px;
$sizeMd: 12px;
$sizeSm: 10px;
$sizeXs: 6px;

$whitespace: 1em;
$border-radius: 5px;

$color-secondary: #777;
$color-primary: #0AB193;
$color-light: #FFF;
$color-highlight: linear-gradient(to right, #F75F21, #F00A4C);

$overlay: rgba(0, 0, 0, 0.25);
$box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.75);

html, body{
   padding:0px;
   margin:0px;
   background:#191a1d;
   font-family: 'Roboto', sans-serif;
   color:#FFF;
   height:100%;
}

body {
   display: flex;
   font-size: $sizeLg;
   padding: 1em;
   transition: all 0.2s;
}

// lazy scaling
@for $i from 1 through 15 {
   @media (max-width: 1500px - ($i * 100px)) {
      body {
         font-size: 15px - ($i * 1px)
      }
   }
}

.background {
   background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/forza-background2.png);
   background-position: center;
   background-size: cover;
   filter: blur(3px);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

// reset
body * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   display: block;
   background: none;
}

.container {
   position: relative;
   width:100%;
   margin: auto;
   ccbackground: rgba(255, 255, 255, 0.1);
   min-height: 200px;
   
   &--logo {
      text-align: center;
      margin-bottom: $whitespace * 4;
      img {
         max-width: 30em;
         margin: auto;
      }
   }
   &--navigation {
      display: flex;
      margin: auto;
      max-width: 65em;
      border-radius: $border-radius;
   }
   
   &--top-menu {
      display: flex;
      max-width: 75em;
      margin: auto;
      margin-top: $whitespace;
   }
   
   &--bottom-menu {
      display: flex;
      max-width: 62.5em;
      margin: auto;
   }
   
   &--card-spot {
      opacity: 0;
      animation: flyIn 0.75s forwards;
      @for $i from 1 through 100 {
         &:nth-of-type(#{$i}) {
            animation-delay: random(100) * 0.01s;  
         }
      }
      
      &.size {
         &-1 { flex: 1; }
         &-2{ flex: 2 }
      }
      
      &:hover {
         z-index: 100;
      }
      
   }
   
   &--card {
      border-radius: $border-radius;
      text-align: center;
      margin: $whitespace/5;
      background: #FFF;
      position: relative;
      align-items: flex-start;
      
      &--text {
         padding: $whitespace 0;
         background: #FFF;
         border-radius: 0 0 $border-radius $border-radius;
         &.dark {
            background: #000;
         }
      }
      
      
      &.border {
         border: 0.15em solid #FFF;
      }
   }

   &--card-mini {
      height: 6em;
      margin: $whitespace/5;
      margin-bottom: $whitespace/2.5;
      
      &--content {
         border-radius: $border-radius;
         padding: $whitespace;
         background: #FFF;
         display: flex;
         z-index: 1000;
         position: relative;
      }
      
      &--image {
         flex: 1;
      }
      
      &--text {
         margin-left: $whitespace;
         flex: 2;
         display: flex;
      }
   }
   
   &--card-mini, &--card {
      position: relative;
      
      * {
         z-index: 1;
         position: relative;
      }
      
      &:after {
         content: '';
         position: absolute;
         top: -0.5em;
         bottom: -0.5em;
         left: -0.5em;
         right: -0.5em;
         background: $color-highlight;
         z-index: 0;
         border-radius: $border-radius;
         box-shadow: $box-shadow;
         opacity: 0;
         transition: all 0.2s;
      }
      
      &:hover {
         z-index: 10000;
         cursor: pointer;
         
         &:after {
            opacity: 1;
         }
      }
   }
}

.item {
   &--link {
      position: relative;
      padding: $whitespace/2 $whitespace;
      color: $color-secondary; 
      text-transform: uppercase;
      font-weight: 600;
      background: #FFF;
      margin-right: -1px; // weird
      flex-grow: 1;
      text-align: center;
      user-select: none;
      white-space: nowrap;
      text-overflow: ellipsis;
      min-width: 4em;
      transition: all 0.2s;
      
      &.hint {
         background: $color-secondary;
         color: #FFF;
         &:first-of-type {
            border-radius: $border-radius 0 0 $border-radius;
         }
         
         &:last-of-type {
            border-radius: 0 $border-radius $border-radius 0;
         }
      }
      
      &:hover:not(.hint), &.active {
         cursor: pointer;
         background: $color-highlight;
         color: #FFF;
      }
   }
   
   &--notification {
      position: absolute;
      background: $color-primary;
      color: #FFF;
      width: 1.5em;
      height: 1.5em;
      line-height: 1.5em;
      right: 0.5em;
      top: -1em;
      border-radius: 50%;
      box-shadow: $box-shadow;
   }
   
   &--icon {
      position: absolute;
      background: $color-primary;
      color: #FFF;
      width: 3em;
      height: 3em;
      line-height: 3.5em;
      left: 0.5em;
      top: -2em;
      border-radius: 50%;
      box-shadow: $box-shadow;
      
      i {
         font-size: 1.5em;
      }
   }
   
   &--card-image {
      min-height: 15em;
      background-size: cover;
      background-position: center;
      border-radius: 
         $border-radius 
         $border-radius 
         $border-radius/2
         $border-radius/2;
      
      &.med-height {
         min-height: 12em;
      }
   }
   
   &--card-icon {
      background-size: cover;
      background-position: center;
      height: 4em;
      filter: brightness(125%);
      
   }
   
   &--card-title {
      color: $color-primary;
      position: relative;
      
      .text {
         font-size: 1.6em;
         text-transform: uppercase;
         font-weight: 600;
      }
      
      &.dark {
         .text {
            color: #FFF;
         }
      }
   }
   
   &--card-sub {
      color: $color-secondary;
      font-weight: 900;
      margin: auto;
      .text {
         font-size: 1.15em;
      }
      
      &.dark {
         .text {
            color: $color-primary;
         }
      }
   }
}

@keyframes flyIn {
   0% {
      opacity: 0;
      transform: scale(0.85);
   }
   
   75% {
      opacity: 0.9;
      transform: scale(1);
   }
   
   100% {
      opacity: 1;
      transform: scale(1)
   }
}


Yorumlar

Yorum Gönder

POPULER YAYINLAR

C# OTOBÜS PROGRAMI.EXE

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace otobüs {     public partial class Form1 : Form    {         public Form1()        {            InitializeComponent();        }         private void button11_Click( object sender, EventArgs e)        {            listBox1.Items.Add( &9& );            listBox1.Items.Add(textBox3.Text);            listBox1.Items.Add(textBox2.Text);   ...
2 yorum
Devamı

JAVASCRİPT ÖRNEKLERİ 1

Bu sayfada 40’dan fazla çeşitli zorluk seviyesine göre hazırlanmış   JavaScript Örnekleri  ve  JavaScript Uygulamaları nı kapsamaktadır.  Basit, Döngülü, Şartlı ve Form uygulamalarını kapsayacak şekilde javascript  örnek uygulamalarını kopyalayıp kullanabilirsiniz. JavaScript Örneklerine geçmeden önce javascript dili hakkında kısaca bir bilgi vermek gerekir. Yada JavaScript dili, yapısı ve nesneleri ile ilgili derslere göz atmak içinde  JavaScript Dersleri  yazısını okuyabilirsiniz. JavaScript Nedir Başlangıçta  Brendan Eich  tarafından geliştirilmiş ve  ilk LiveScript olarak isimlendirilen programlama dili olan JavaScript, 1995 yılında yeniden adlandırılmıştır. JavaScript, bir web tasarımcısına kendi web sayfalarına kod ekleme olanağı veren, yorumlanmış bir istemci tarafı kodlama dili olmuştur.  JavaScript genellikle bir HTML  dosyasına yerleştirilir ve doğrudan web sayfasından çalışır. Saat ve tarihe basmak, bir takvim oluştu...
Yorum Gönder
Devamı