retroguvenlik-sources/_site/assets/css/header.css

Retro Güvenlik Landing Pages tasarımı için kullanılan dosyaları içerir.

@import 'https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&subset=latin-ext';
@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible; }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible; }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown; }

* {
  font: 'Montserrat',sans-serif; }

html {
  -webkit-font-smoothing: subpixel-antialiased; }

section.header {
  height: 100vh;
  width: 100%;
  background: url("../img/cover-image.jpg") top center;
  background-size: cover; }
  section.header .logo {
    margin: 30px 50px;
    height: 71px;
    width: 233px;
    background: url("../img/logo.png") center center no-repeat; }
    section.header .logo a {
      text-indent: -9999px; }
  section.header nav.web-only {
    margin: 55px auto; }
    section.header nav.web-only ul {
      float: right; }
      section.header nav.web-only ul li {
        list-style: none;
        display: inline-block;
        margin: 0 15px; }
        section.header nav.web-only ul li a {
          font: 300 14px 'Montserrat',sans-serif;
          color: #cccccc; }
          section.header nav.web-only ul li a:hover {
            text-decoration: none;
            color: white; }
  section.header section.promo {
    margin: 0 auto;
    position: relative;
    top: 50px; }
  section.header h3 {
    font: 100 48px 'Montserrat',sans-serif;
    color: #FFFFFF;
    margin-top: 7.5px; }
  section.header h5 {
    font: 400 14px 'Montserrat',sans-serif;
    letter-spacing: 2.5px;
    color: #319BF5;
    margin-bottom: 20px; }
  section.header button.explore-items {
    border: none;
    background-color: inherit;
    margin: 20px 0; }
    section.header button.explore-items a {
      font: 400 13px 'Montserrat',sans-serif;
      border-radius: 12px;
      padding: 17px 42px;
      background-color: #319BF5;
      display: inline-block;
      color: #FFFFFF;
      transition: all 0.4s ease-out; }
      section.header button.explore-items a:hover {
        text-decoration: none;
        background-color: #0967b7; }
  section.header button.retro-bayi {
    border: none;
    background-color: inherit;
    float: right;
    position: relative;
    top: 15vh;
    left: 3em; }
    section.header button.retro-bayi a {
      font: 400 13px 'Montserrat',sans-serif;
      border-radius: 22px;
      padding: 17px 72px;
      background-color: #319BF5;
      display: inline-block;
      color: #FFFFFF;
      -moz-transition: background 400ms ease-out;
      -o-transition: background 400ms ease-out;
      -webkit-transition: background 400ms ease-out;
      transition: background 400ms ease-out; }
      section.header button.retro-bayi a:hover {
        background-color: #0967b7;
        text-decoration: none; }
      section.header button.retro-bayi a::after {
        content: '';
        background: url("../img/right-arrow.png");
        height: 22px;
        width: 37px;
        zoom: 0.6;
        margin: -2px 10px;
        display: inline-block; }
  section.header section.header-ust {
    height: 44px;
    width: 100%;
    background-color: #000000;
    -webkit-font-smoothing: antialiased; }
    section.header section.header-ust ul {
      float: left; }
      section.header section.header-ust ul li {
        float: left;
        margin: 12px;
        list-style: none; }
        section.header section.header-ust ul li a {
          font: 14px 'Montserrat',sans-serif;
          color: #FFFFFF;
          opacity: .35; }
          section.header section.header-ust ul li a:hover {
            text-decoration: none;
            opacity: 1; }