Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
style.css 7.79 KiB
Newer Older
  • Learn to ignore specific revisions
  • peter_rabbit's avatar
    peter_rabbit committed
    body {
    
    peter_rabbit's avatar
    peter_rabbit committed
      font-family: Arial, Helvetica, sans-serif;
    
    peter_rabbit's avatar
    peter_rabbit committed
      margin: 0;
    
    peter_rabbit's avatar
    peter_rabbit committed
    }
    
    peter_rabbit's avatar
    peter_rabbit committed
    body * {
    
    peter_rabbit's avatar
    peter_rabbit committed
      box-sizing: border-box;
    
      color: #35393c;
    
    peter_rabbit's avatar
    peter_rabbit committed
      image-rendering: pixelated;
      image-rendering: -moz-crisp-edges;
      image-rendering: crisp-edges;
    
    peter_rabbit's avatar
    peter_rabbit committed
    }
    
    body ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    
    main {
    
    peter_rabbit's avatar
    peter_rabbit committed
      background: url("../assets/images/wallpaper_binary_white.png");
      background-size: 60%;
    
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
    }
    main header {
      width: 100%;
    }
    main header nav ul {
      display: flex;
      padding: 0;
      margin: 0;
      list-style-type: none;
    }
    
    peter_rabbit's avatar
    peter_rabbit committed
    main header nav ul li {
      position: relative;
    }
    
    main header nav ul li a {
      display: flex;
    
    peter_rabbit's avatar
    peter_rabbit committed
      align-items: center;
      height: 100%;
    
      padding: 10px 20px;
    
    peter_rabbit's avatar
    peter_rabbit committed
      color: #96a5ae;
      font-weight: 800;
    
      text-decoration: none;
    }
    
    peter_rabbit's avatar
    peter_rabbit committed
    main header nav ul li a img {
      width: 40px;
    }
    
    peter_rabbit's avatar
    peter_rabbit committed
    main header nav ul li .submenu {
      visibility: hidden;
    
    peter_rabbit's avatar
    peter_rabbit committed
      overflow: hidden;
    
    peter_rabbit's avatar
    peter_rabbit committed
      position: absolute;
      height: auto;
      max-height: 0;
    
      transition: max-height 0.6s;
    
    peter_rabbit's avatar
    peter_rabbit committed
      top: 100%;
      left: 50%;
      flex-direction: column;
    
    peter_rabbit's avatar
    peter_rabbit committed
      background-color: white;
    
    peter_rabbit's avatar
    peter_rabbit committed
      white-space: nowrap;
    }
    
    main header nav ul li.active a {
    
    peter_rabbit's avatar
    peter_rabbit committed
      color: #3c4144;
      border-bottom: 1px solid;
    
    main header nav ul li:hover a {
    
    peter_rabbit's avatar
    peter_rabbit committed
      color: #3c4144;
    
    peter_rabbit's avatar
    peter_rabbit committed
    main header nav ul li:hover .submenu {
      visibility: unset;
      max-height: 1000px;
    }
    
    peter_rabbit's avatar
    peter_rabbit committed
    main header nav ul li:hover .submenu a {
    
    peter_rabbit's avatar
    peter_rabbit committed
      color: #96a5ae;
      border: none;
    
    peter_rabbit's avatar
    peter_rabbit committed
    }
    main header nav ul li:hover .submenu li:hover a {
    
    peter_rabbit's avatar
    peter_rabbit committed
      color: #3c4144;
    
    peter_rabbit's avatar
    peter_rabbit committed
    }
    
    main #page-container {
      background-color: white;
      width: 1200px;
      max-width: 100%;
      flex: 1;
    }
    main #page-container #education-page h1 {
      margin: 15px 40px 0;
      font-size: 25px;
    }
    main #page-container #education-page .edu-philo {
      margin: 15px 40px 15px 100px;
      max-width: 800px;
      font-style: italic;
    }
    main #page-container #education-page .title-banner {
      display: flex;
      justify-content: flex-end;
      flex-direction: column;
      height: 300px;
    
      background-image: url("../../../assets/images/game_studio_banner.png");
    
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 0% 90%;
    }
    main #page-container #education-page .title-banner h2 {
      color: white;
      font-size: 2.5em;
      margin: 40px;
    
      text-shadow: 0 0 6px #000;
    
    }
    main #page-container #education-page .section-contents {
      margin: 20px 40px 60px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 20px;
    
    peter_rabbit's avatar
    peter_rabbit committed
      height: auto;
    
    peter_rabbit's avatar
    peter_rabbit committed
    main #page-container #education-page .section-contents .full-row {
    
      grid-column: 1/span 2;
    }
    main #page-container #education-page .section-contents .practical-infos {
      grid-column: 2;
      grid-row: 2;
      display: flex;
      flex-direction: column;
      gap: 40px;
    
    peter_rabbit's avatar
    peter_rabbit committed
      background-color: #eef4f8;
      padding: 30px;
    
    }
    main #page-container #education-page .section-contents .practical-infos .info-item {
      display: flex;
      flex-direction: column;
      background-color: white;
      padding: 20px;
    }
    main #page-container #education-page .section-contents .practical-infos .info-item strong {
      margin-bottom: 10px;
    }
    main #page-container #education-page .section-contents .practical-infos .info-item span,
    main #page-container #education-page .section-contents .practical-infos .info-item a {
      font-size: 14px;
      text-decoration: none;
    }
    main #page-container #education-page .section-contents ul.learning-themes {
      grid-column: 1;
      grid-row: 2;
      display: flex;
    
      gap: 20px 30px;
    
      flex-wrap: wrap;
    }
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme {
    
      width: 250px;
      height: 140px;
    
      position: relative;
    
      box-shadow: 3px 3px 5px 1px #0001;
    
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.crea2d {
    
      background: url("../../../assets/images/learning_theme_2d.png") no-repeat;
    
      background-size: cover;
    
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.sound {
    
      background: url("../../../assets/images/learning_theme_sound.png") no-repeat;
    
      background-size: cover;
    
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.coding {
    
      background: url("../../../assets/images/learning_theme_code.jpg") no-repeat;
    
      background-size: cover;
    
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.math {
      background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
      background-size: cover;
    
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.linux {
      background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
      background-size: cover;
    }
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.team {
      background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
      background-size: cover;
    }
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.conception {
      background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
      background-size: cover;
    }
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.write {
    
    peter_rabbit's avatar
    peter_rabbit committed
      background: url("../../../assets/images/learning_theme_write.png") no-repeat;
    
      background-size: cover;
    }
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.web {
      background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
      background-size: cover;
    }
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.general-pc {
      background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
      background-size: cover;
    }
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .title {
    
      color: #3c4144;
      font-size: 1.1em;
    
      display: block;
    }
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .details {
      background-color: #fffd;
      position: absolute;
      top: 40px;
      left: 40px;
      width: 300px;
      height: auto;
      max-height: 0;
      visibility: hidden;
      z-index: 1;
      transition: max-height 0.6s;
      padding: 20px;
      box-shadow: 0 2px 12px 6px #0001;
      overflow: hidden;
    
      display: flex;
      flex-direction: column;
    
      gap: 10px;
    }
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .details .comment {
      font-style: italic;
    }
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .details ul {
      list-style-type: disc;
      font-size: 14px;
      margin-left: 10px;
    }
    main #page-container #education-page .section-contents ul.learning-themes li.learning-theme:hover .details {
      max-height: 1000px;
      visibility: visible;
    
    }
    main #page-container #education-page .section-contents .infos-inscriptions {
      display: flex;
      gap: 40px;
    
    peter_rabbit's avatar
    peter_rabbit committed
      background-color: #eef4f8;
      padding: 30px;
    
    }
    main #page-container #education-page .section-contents .infos-inscriptions .groups,
    main #page-container #education-page .section-contents .infos-inscriptions .pricing {
    
    peter_rabbit's avatar
    peter_rabbit committed
      background-color: white;
    
      padding: 20px;
      display: flex;
      flex-direction: column;
    }
    
    peter_rabbit's avatar
    peter_rabbit committed
    main #page-container #education-page .section-contents .infos-inscriptions .groups h3,
    main #page-container #education-page .section-contents .infos-inscriptions .pricing h3 {
    
    peter_rabbit's avatar
    peter_rabbit committed
      margin: 0;
    
    peter_rabbit's avatar
    peter_rabbit committed
    }
    main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
    main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
      border: 1px solid #dde;
      border-collapse: collapse;
    }
    main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table td,
    main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table td {
      border: 1px solid #dde;
      padding: 10px 20px;
    
    }
    main footer {
      width: 100%;
    
    peter_rabbit's avatar
    peter_rabbit committed
      background-color: #fff1;
      padding: 20px;
    
    peter_rabbit's avatar
    peter_rabbit committed
    
    /*# sourceMappingURL=style.css.map */