github.com/uchennaokeke444/nomad@v0.11.8/website/components/learn-nomad/style.css (about)

     1  .g-learn-nomad {
     2    padding-top: 88px;
     3    padding-bottom: 88px;
     4    background-image: url(/img/nomad-panel-learn.svg);
     5    background-size: contain;
     6    background-position: bottom right;
     7    background-repeat: no-repeat;
     8  
     9    @media (max-width: 768px) {
    10      padding-top: 64px;
    11      padding-bottom: 64px;
    12    }
    13  
    14    & .learn-container {
    15      @media (max-width: 1200px) {
    16        display: flex;
    17        flex-wrap: wrap;
    18        justify-content: center;
    19      }
    20      & .mobile-button {
    21        @media (min-width: 1201px) {
    22          display: none;
    23        }
    24      }
    25    }
    26  
    27    & .column-container {
    28      display: flex;
    29      justify-content: space-between;
    30      margin: 0 36px;
    31  
    32      @media (max-width: 1200px) {
    33        margin: 0 -16px;
    34        flex-wrap: wrap;
    35      }
    36  
    37      & .column-content {
    38        & h2 {
    39          @media (max-width: 1200px) {
    40            margin: 0;
    41          }
    42        }
    43      }
    44  
    45      & .desktop-button {
    46        @media (max-width: 1200px) {
    47          display: none;
    48        }
    49      }
    50  
    51      & > div {
    52        display: flex;
    53        flex-wrap: wrap;
    54        align-items: center;
    55        margin: 0 16px;
    56        width: 33.333%;
    57        overflow: auto;
    58  
    59        @media (max-width: 1200px) {
    60          text-align: center;
    61          display: block;
    62          width: 100%;
    63          margin: 0;
    64          margin-bottom: 48px;
    65        }
    66      }
    67  
    68      & > a {
    69        margin: 0 16px;
    70        width: 33.333%;
    71        transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s;
    72  
    73        &:hover {
    74          box-shadow: 0px 16px 28px rgba(37, 38, 45, 0.12);
    75          transform: translateY(-4px);
    76        }
    77  
    78        @media (max-width: 1200px) {
    79          width: calc(50% - 32px);
    80          margin-bottom: 48px;
    81        }
    82  
    83        @media (max-width: 768px) {
    84          width: 100%;
    85  
    86          &:last-child {
    87            margin-bottom: 48px;
    88          }
    89        }
    90      }
    91  
    92      & > a {
    93        display: flex;
    94        cursor: pointer;
    95      }
    96  
    97      & > a .course {
    98        border: 1px solid var(--gray-6);
    99        display: flex;
   100        flex-direction: column;
   101        width: 100%;
   102  
   103        & > div {
   104          min-height: 200px;
   105          padding: 25px;
   106        }
   107  
   108        & .image {
   109          background: var(--gray-7);
   110          position: relative;
   111          display: flex;
   112          justify-content: center;
   113          align-items: center;
   114  
   115          & img {
   116            max-width: 80px;
   117            max-height: 80px;
   118          }
   119        }
   120  
   121        & h4 {
   122          color: var(--gray-2);
   123        }
   124  
   125        & .time {
   126          color: var(--gray-4);
   127          position: absolute;
   128          top: 10px;
   129          right: 10px;
   130        }
   131  
   132        & .content {
   133          text-align: center;
   134          background: #fff;
   135          @media (max-width: 768px) {
   136            display: flex;
   137            justify-content: center;
   138            align-items: center;
   139          }
   140  
   141          & h4 {
   142            margin: 24px 0px;
   143          }
   144        }
   145  
   146        & .content label {
   147          color: var(--nomad);
   148        }
   149      }
   150    }
   151  }