source code CSS#1

CSS#1

/* Base styles */

a strong {
    color: inherit;
  }
  
  hr {
    background: none;
    border: none;
    border-bottom: 1px solid #d8dee9;
  }
  
  img {
    height: auto;
    max-width: 100%;
  }
  
  pre {
    overflow: auto;
    white-space: pre-wrap;
  }
  
  footer {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 4em;
    text-align: center;
  }
  
  /* 01 Centering */
  
  header,
  main {
    margin: 0 auto;
    max-width: 50em;
  }
  
  /* 02 Font family */
  
  body {
    font-family: "Helvetica", "Arial", sans-serif;
  }
  
  /* 03 Spacing */
  
  body {
    line-height: 1.5;
    padding: 4em 1em;
  }
  
  h2 {
    margin-top: 1em;
    padding-top: 1em;
  }
  
  /* 04 Color and contrast */
  
  body {
    color: #555;
  }
  
  h1,
  h2,
  strong {
    color: #333;
  }
  
  /* 05 Balance */
  
  code,
  pre {
    background: #eee;
  }
  
  code {
    padding: 2px 4px;
    vertical-align: text-bottom;
  }
  
  pre {
    padding: 1em;
  }
  
  /* 06 Primary color */
  
  a {
    color: #e81c4f;
  }
  
  /* 07 Secondary colors */
  
  body {
    background: white;
    color: #566b78;
  }
  
  code,
  pre {
    background: #f5f7f9;
    border-bottom: 1px solid #d8dee9;
    color: #a7adba;
    -moz-font-smoothing: grayscale;
    -webkit-font-smoothing: initial;
  }
  
  pre {
    border-left: 2px solid #69c;
  }
  
  .selector {
    color: #ec5f67;
  }
  
  .keyword {
    color: #ab7967;
  }
  
  .unit {
    color: #fac863;
  }
  
  .attribute {
    color: #5fb3b3;
  }
  
  .number {
    color: #f99157;
  }
  
  .string {
    color: #c594c5;
  }
  
  /* 08 Custom font */
  
  body {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    -moz-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }
  
  h1,
  h2,
  strong {
    font-weight: 500;
  }
  
  /* 09 Images */
  
  body {
    margin: 0;
    padding: 0;
  }
  
  main {
    padding: 4em 1em;
  }
  
  header {
    background-color: #263d36;
    background-image: url("header.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    line-height: 1.2;
    max-width: none;
    padding: 10vw 2em;
    text-align: center;
  }
  
  #logo {
    display: inline-block;
    height: 120px;
    vertical-align: top;
    width: 120px;
  }
  
  header h1 {
    color: white;
    font-size: 2.5em;
    font-weight: 300;
  }
  
  header a {
    border: 1px solid #e81c4f;
    border-radius: 290486px;
    color: white;
    font-size: 0.6em;
    letter-spacing: 0.2em;
    padding: 1em 2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: none 200ms ease-out;
    transition-property: color, background;
  }
  
  header a:hover {
    background: #e81c4f;
    color: white;
  }
  
  /* Classes */
  
  .animate {
    animation-duration: 1s;
    animation-name: blink;
  }
  
  @keyframes blink {
    from {
      background-color: lightyellow;
    }
  
    to {
      background-color: transparent;
    }
  }
  
  html a.button {
    border: 1px solid #d8dee9;
    border-radius: 290486px;
    color: #b0bfc7;
    padding: 1em 1.5em;
    text-align: center;
    text-decoration: none;
    transition: none 200ms ease-out;
    transition-property: color, background;
  }
  
  .button:hover {
    background: #e81c4f;
    border-color: transparent;
    color: rgba(255, 255, 255, 0.5);
  }
  
  .button em {
    display: block;
    font-size: 0.6em;
    font-style: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  
  .button strong {
    color: #e81c4f;
    transition: color 200ms ease-out;
  }
  
  .button:hover strong {
    color: white !important;
  }
  
  .button.github strong {
    color: #333;
  }
  
  .button.github:hover {
    background: #333;
  }
  
  .button.facebook strong {
    color: #3b5998;
  }
  
  .button.facebook:hover {
    background: #3b5998;
  }
  
  .button.twitter strong {
    color: #55acee;
  }
  
  .button.twitter:hover {
    background: #55acee;
  }
  
  footer .button {
    font-size: 0.8em;
    padding: 1em 2em;
  }
  
  .buttons .button {
    display: block;
    margin-bottom: 1em;
  }
  
  /* Resources */
  
  .resources {
    margin: 1em 0;
    padding: 0;
  }
  
  .resource {
    align-items: center;
    border: 1px solid #d8dee9;
    border-radius: 5px;
    color: #566b78;
    cursor: pointer;
    display: flex;
    margin-top: 1em;
    padding: 1em 2em;
    text-decoration: none;
  }
  
  .resource:hover {
    border-color: #e81c4f;
  }
  
  .resource strong {
    color: #e81c4f;
  }
  
  .resource .resource-name {
    color: #333;
    display: block;
    font-size: 1.2em;
  }
  
  .resource-icon {
    box-sizing: border-box;
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    height: 120px;
    margin: 0;
    margin-right: 1em;
    padding: 0;
    text-align: center;
    width: 120px;
  }
  
  .resource-marksheet .resource-icon {
    padding: 5px;
  }
  
  .resource-bulma .resource-icon {
    padding: 10px;
  }
  
  .resource-css-reference .resource-icon {
    padding: 20px;
  }
  
  /* Responsiveness */
  
  @media (min-width: 600px) {
    .buttons {
      align-items: center;
      display: flex;
      justify-content: space-between;
      padding: 1em 0;
    }
  
    .buttons .button {
      flex-grow: 1;
      flex-shrink: 0;
      margin-bottom: 0;
      margin-right: 1em;
    }
  
    .buttons .button:last-child {
      margin-right: 0;
    }
  
    .resources {
      display: flex;
    }
  
    .resource {
      display: block;
      flex-basis: 0;
      flex-grow: 1;
      flex-shrink: 1;
      text-align: center;
    }
  
    .resource + .resource {
      margin-left: 1em;
    }
  
    .resource-icon {
      margin: 0 auto 1em;
    }
  }

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

#2 Front end CSS

CSS Syntax: Selector{ Phần tử 1: giá trị 1; Phần tử 2: giá trị 2 } Các thuộc tính định dạng cho text color font-family font-size font-style letter-spacing line-height text-decoration word-spacing Các thuộc tính định dạng chung ·          background ·          border ·          height ·          width ·          text-align Các thuộc tính điều khiển nội dung ·          padding ·          margin ·          float ·          clear Thủ thuật clearfix ·          display ·          position
Đọc thêm

Phỏng vấn Front-end

Các câu hỏi chung: Bạn đã học được gì trong ngày hôm qua/tuần này?? Điều gì về lập trình làm bạn hứng thú? Một thử thách về mặt kĩ thuật bạn đã trải qua gần đây là gì và bạn đã giải quyết nó như thế nào? Bạn cân nhắc những Giao diện người dùng (UI), Vấn đề bảo mật (Security), Hiệu suất (Performance), Khả năng tối ưu cho các bộ máy tìm kiếm (SEO), Khả năng bảo trì (Maintainability) hay Công nghệ (Technology) nào khi xây dựng một ứng dụng/trang web? Hãy nói về môi trường lập trình mà bạn muốn. Những hệ thống quản lý phiên bản (version control systems) nào mà bạn đã sử dụng và cảm thấy quen thuộc? Bạn có thể trình bày mạch làm việc (workflow) của bạn khi bạn tạo một trang web không? Nếu bạn có 5 stylesheet khác nhau, bạn sẽ tích hợp chúng vào trang như thế nào là tốt nhất? Bạn có thể trình bày sự khác nhau giữa progressive enhancement và graceful degradation không? Bạn sẽ tối ưu các tài nguyên (assets/resources) của một website như thế nào? Một trình duyệt sẽ tải bao nhiêu tài nguyên cùng...
Đọc thêm

Lộ trình trở thành một Java Web Developer

Hình ảnh
Lộ trình trở thành một Java Web Developer Java là một công nghệ rất nổi tiếng và phổ biến trong lĩnh vực CNTT và không lạ gì khi chúng ta thấy rất nhiều các ứng dụng lớn trong doanh nghiệp nhất là lĩnh vực liên quan tài chính hay hệ thống giao dịch lớn họ chọn Java làm nền tảng chính để phát triển ứng dụng. Với các hệ thống lớn cần độ ổn định cao và chịu tải tốt để đáp ứng nghiệp vụ kinh doanh thì Java là một trong những ứng viên nặng ký. Và hiển nhiên trở thành một Java Developer cũng giúp bạn có rất nhiều lợi thế trong nghề nghiệp của mình. Đối với ngành lập trình nói chung, hay công nghệ Java nói riêng thì khi bạn giỏi một công nghệ thôi là bạn đã rất nhiều cơ hội làm việc và xây dựng lộ trình nghề nghiệp của mình rồi. Vậy nên nếu bạn muốn trở thành một lập trình viên Java thực thụ bạn cần nắm được những kiến thức và kỹ năng sau để có thể có một sự nghiệp vững chắc cho mình. Bài viết này mình sẽ tư vấn cho các bạn các bước để trở thành một Java Web Developer, ngoài ra theo c...
Đọc thêm