Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- This site is a redesign to 
 http://magnumopuscrossfit.ro/ -->
<body>
  
<!--  Top bar - Rezerva  -->
  <div class="rezerva">
    <p class="rezerva-text">Prima sedinta gratuit!</p>
    <button class="rezerva-btn">Rezerva</button>
  </div>
  
<!--  Top bar - Rezerva  --> 
<!--  Nav-Bar  -->
  
  <div class="header">
    <img class="logo" src="https://scontent.fsbz1-2.fna.fbcdn.net/v/t1.0-9/59729307_2423630604538724_1598421926596837376_n.jpg?_nc_cat=105&_nc_ht=scontent.fsbz1-2.fna&oh=0d027d70eebb0b241f67b58fd1327b04&oe=5D754548" alt="">
    <img class="hide-desk"src="https://cdn3.iconfinder.com/data/icons/mini-icon-set-general-office/91/General_-_Office_30-512.png" id="ham">
    <ul class="navbar" id="nav">
      <li><button class="nav-btn" id="exit">&times;</button></li>
      <li><a href="#">Acasa</a></li>
      <li><a href="#">Servicii</a></li>
      <li><a href="#">Abonamente</a></li>
      <li><a href="#">Echipa</a></li>
      <li><a href="#">Evenimente</a></li>
      <li><a href="#">Orar si Programari</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  
<!--  Nav-Bar  -->
<!--  Banner  -->
  
  <div class="banner">
    <h2>MAGNUM OPUS <span class="opus">CROSSFIT</span></h2>
    <h1>MAGNUM OPUS este un centru de Fitness Functional
cu o abordare holistică asupra sănătății umane.</h1>
  </div>
  
<!--  Banner  -->  
<!--  Cards section  -->
<div class="grid">
  <div class="card">
     <img src="https://images.pexels.com/photos/949134/pexels-photo-949134.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
    <div class="title">
      <strong>Ce este Crossfit?</strong><br>
      <a href="https://www.youtube.com/watch?v=bUoBqWrSfZE" target="_blank"><button>Vezi Video</button></a>
    </div>
  
  </div>
  
  <div class="card">
    <img src="https://images.pexels.com/photos/2261485/pexels-photo-2261485.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
    <div class="title">
      <strong>Group Training</strong><br>
      <button data-modal-target="#modal-G">Afla detalii</button>
<!--     Modual - Sesiuni Private     -->
        <!--     Modual - Sesiuni Private     -->
        <!--     Modual - Sesiuni Private     -->
        <div class="modal" id="modal-G">
    <div class="modal-header">
      <div class="title">Group Training</div>
      <button data-close-button class="close-btn">&times;</button>
    </div>
    <div class="modal-body">
      <p>Clase si servicii de group, de intensitati si cu specific diferit, coordonate si supervizate de 1-3 instructori pasionati si cu experienta in domeniu. Participarea se face pe baza de programare.</p>
      <div>
        <ul>
          <li><strong>Personal Training</strong></li>
          <li><strong>Kinetoterapie</strong></li>
          <li><strong>Corectare Posturala</strong></li>
          <li><strong>Preparare Fizica Specifica</strong></li>
          <li><strong>Consultatii Nutritionale si Dietoterapie</strong></li>
          <li><strong>Analiza Compozitiei Corporale</strong></li>
          <li><strong>Masaj de Relaxare, Terapeutic, Anticelulitic si Reflexoterapie.</strong></li>
        </ul>
      </div>

    </div>
  </div>
<!--     Modual - Despre Sesiuni Private     -->
        <!--     Modual - Sesiuni Private     -->
        <!--     Modual - Sesiuni Private     -->
    </div> 
  
  </div>
  
   <div class="card">
     <img src="https://images.pexels.com/photos/414029/pexels-photo-414029.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
    <div class="title">
      <strong>Sesiuni Private</strong><br>
      <button data-modal-target="#modal-S" >Afla detalii</button>
      <!--     Modual - Sesiuni Private     -->
        <!--     Modual - Sesiuni Private     -->
        <!--     Modual - Sesiuni Private     -->
        <div class="modal" id="modal-S">
    <div class="modal-header">
      <div class="title">Sesiuni Private</div>
      <button data-close-button class="close-btn">&times;</button>
    </div>
    <div class="modal-body">
      <p>Servicii individuale pentru adresarea specifica a anumitor teluri sau probleme de sanatate.</p>
      <div>
        <ul>
          <li><strong>Free Intro Class</strong></li>
          <li><strong>CrossFit Foundations</strong></li>
          <li><strong>CrossFit</strong></li>
          <li><strong>CrossFit Strong</strong></li>
          <li><strong>CrossFit Team WOD</strong></li>
          <li><strong>Weightlifting Barbell Club</strong></li>
          <li><strong>Boot Camp</strong></li>
          <li><strong>Fizio Fit</strong></li>
          <li><strong>Active Recovery</strong></li>
          <li><strong>Gymnastics</strong></li>
          <li><strong>Endurance</strong></li>
          <li><strong>Yoga & Pilates</strong></li>
          <li><strong>Fit Legends</strong></li>
          <li><strong>Scutece si Gantere</strong></li>
          <li><strong>Fit Kids</strong></li>
          <li><strong>Karate initere si performanta</strong></li>
          <li><strong>Open Gym.</strong></li>
        </ul>
      </div>

    </div>
  </div>
<!--     Modual - Despre Sesiuni Private     -->
        <!--     Modual - Sesiuni Private     -->
        <!--     Modual - Sesiuni Private     -->
    </div>
      
  </div>
</div>
  
<!--  Cards section  --> 
<!--  About Section  -->

  <div class="about-container">
    
     <div class="magnum-opus">
      <div class="text">
      <div class="title-content">
        <h3>Despre Magnum Opus</h3>
      </div>
      <div class="content">
        <strong>MAGNUM OPUS</strong> este un centru de Fitness Functional cu o abordare holistică asupra sănătății umane, unde încercăm să creăm o experiență unică pentru persoane de toate vârstele, cu diferite abilități fizice și nivele de fitness, pe care dorim să îi dezvoltăm și să îi educăm în a deveni cât mai functionali din punct de vedere fizic, emotional și mental, pentru a atinge o viață cât mai activă, îndelungată și de calitate.
      </div>
      <button data-modal-target="#modal-1" class="btn">See more</button>
<!--     Modual - Despre Magnum Opus     -->
        <!--     Modual - Despre Magnum Opus     -->
        <!--     Modual - Despre Magnum Opus     -->
        <div class="modal" id="modal-1">
    <div class="modal-header">
      <div class="title">MAGNUM OPUS CROSSFIT</div>
      <button data-close-button class="close-btn">&times;</button>
    </div>
    <div class="modal-body">
      <strong class="slogan">“Become your masterpiece”</strong><br>
<p><strong>MAGNUM OPUS</strong> este un centru de Fitness Functional cu o abordare holistică asupra sănătății umane, unde încercăm să creăm o experiență unică pentru persoane de toate vârstele, cu diferite abilități fizice și nivele de fitness, pe care dorim să îi dezvoltăm și să îi educăm în a deveni cât mai functionali din punct de vedere fizic, emotional și mental, pentru a atinge o viață cât mai activă, îndelungată și de calitate.<br></p>

<p><strong>FITNESS FUNCTIONAL. NUTRITIE. MENTAL.</strong> Sunt cele trei valente ale abordarii noastra asupra sanatatii umane, noi considerand ca aceste aspecte sunt dependente una fata de alta, si in nici una din ariile mentionate nu se poate inregistra progres, atata timp cat una din ele este ignorata.<br></p>

<p>Astfel, incercam sa ne antrenam si sa ne educam clientii conform filozofiei noastre pentru a-si atinge potențialul maxim, deoarece ceea ce ne deosebește față de alte săli de fitness “tradițional” este abordarea și filozofia holistică asupra sănătății umane.<br></p>

<p>Având acumulată o experiență de peste 15 ani în învățarea și experimentarea metodelor cele mai eficiente în a aduce oamenii în “formă”, am învățat exact ce funcționează în ceea ce privește motivarea precum și prevenirea accidentărilor, astfel încât clienții noștri să rămână în formă o viață întreagă.<br></p>

<p><strong>MAGNUM OPUS CROSSFIT</strong> reprezinta apogeul acestor eforturi, si este incercarea noastra de a oferi o experienta deosebita procesului de fitness. MAGNUM OPUS se traduce din latina prin CAPODOPERA, aceasta fiind de altfel si misiunea noastra, de a face timpul petrecut de clientii nostri alaturi de noi, unic, memorabil, si cu un impact pozitiv in viata de zi cu zi.<br></p>

<p>Excelenta trebuie slefuita si aplicata ca si un automatism in fiecare zi, prin tot ceea ce intreprindem fata de noi insine, fata de felul in care abordam lucruile, fata de grija pentru sala, fata de clientii nostri vechi si noi deopotriva.<br></p>

<p>In sala noastra, antrenamentele durează aproximativ o oră, scopul acestora fiind nu doar a îmbunătăți performanțele fizice, ci și modul de viață. Astfel, împreună cu clienții noștri setăm țeluri personale, și împreună vom lucra spre a le atinge cât mai eficient și rapid, atingând toate aspectele necesare realizării lor, de la metodica de antrenament, stretching, abordarea mentală, nutriție și recuperarea după efort.<br></p>

<p>Misiunea noastră practica este sa cream un mediu în care, dacă facem lucrurile corect cu regularitate și consecvent, oamenii sunt recompensați cu rezultate deosebite. Un mediu în care sa ne susținem reciproc în a deveni mai buni pe parcursul călătoriei spre o viață mai bună, devenind mai toleranți unii cu alții, mai perseverenți în atingerea lucrurilor propuse, mai puternici în fața greutăților, mai bine informați și mai fericiți în ansamblu. Insa servite la superlativ.<br></p>

<p>Ordine, curatenie, disciplina, intentie, integritate, emotie, planificare, grija, respect, perseverenta. Sunt <strong>VALORILE</strong> dupa care ne ghidam actiunile in tot ceea ce facem si in tot ce intreprindem.<br></p>

<p>Suntem mereu mândri de clienții noștri care și-au atins scopurile propuse și au continuat să fie dedicați unui stil de viață mai echilibrat, mai sănătos și mai funcțional, însă niciodata nu trebuie să uităm că rezultatele nu sunt garantate. Rezultatele sunt câștigate prin muncă.</p>
    </div>
  </div>
<!--     Modual - Despre Magnum Opus     -->
        <!--     Modual - Despre Magnum Opus     -->
        <!--     Modual - Despre Magnum Opus     -->
    </div>
 </div>
   
    <div class="crossfit">
      <div class="text">
      <div class="title-content">
        <h3>Despre Crossfit</h3>
      </div>
      <div class="content">
        <strong>CrossFit</strong> este un stil de viata care include antrenamente sigure, simple si eficiente, precum si o abordare sanatoasa a nutritiei. Folosind metoda CrossFit, se pot atinge orice fel de teluri, de la imbunatatirea sanatatii in general, la slabit sau cresterea performantei sportive. Programul functioneaza pentru oricine, atat pentru persoane cu o viata preponderent sedentara, cat si pentru impatimitii sportului.
      </div>
      <button data-modal-target="#modal-2" class="btn">See more</button>
        <!--     Modual - Despre Crossfit     -->
        <!--     Modual - Despre Crossfit     -->
        <!--     Modual - Despre Crossfit     -->
        <div class="modal" id="modal-2">
    <div class="modal-header">
      <div class="title">DESPRE CROSSFIT</div>
      <button data-close-button class="close-btn">&times;</button>
    </div>
    <div class="modal-body">
<p>CrossFit este un stil de viata care include antrenamente sigure, simple si eficiente, precum si o abordare sanatoasa a nutritiei. Folosind metoda CrossFit, se pot atinge orice fel de teluri, de la imbunatatirea sanatatii in general, la slabit sau cresterea performantei sportive. Programul functioneaza pentru oricine, atat pentru persoane cu o viata preponderent sedentara, cat si pentru impatimitii sportului.<br></p>

<p>Originar din Statele Unite, CrossFit are in prezent o comunitate deosebita in intreaga lume, cu un numar impresionant de peste 15000 de sali afiliate, in care, in fiecare zi, milioane de oameni sunt educati, incurajati, motivati si coordonati de specialisti acreditati spre a-si atinge telurile si a-si imbunatati viata.<br></p>

<p>Antrenamentele de CrossFit sunt bazate pe <strong>MISCARI FUNCTIONALE</strong>, ceea ce inseamna ca folosesc miscari sigure si eficiente, similare cu miscarile pe care le facem in viata de zi cu zi. De asemenea, se lucreaza <strong>MEREU VARIAT</strong>, modificand exercitiile in functie de specificul si nevoile fiecarui individ in parte, pentru ca acestia sa isi atinga mereu scopurile propuse, indiferent de nivelul de pregatire in care se afla. <strong>INTENSITATEA</strong> este un alt factor cheie in antrenamentele de CrossFit, acestea fiind structurate astfel incat, in limita sigurantei, sa solicite participantii sa isi imbunatateasca starea generala de fitness si pregatire, pe toate palierele de performanta fizica.<br></p>

<p><strong>NUTRITIA</strong> , este de asemenea deosebit de importanta in atingerea telurilor. Folosind un stil de viata echilibrat, bazat pe alimente complete, nutritive, care sa hraneasca eficient corpul, alaturi de antrenamentele fizice eficiente si intense, garanteaza o reteta infailibila a succesului.<br></p>

<p>“ Consuma carne si legume, nuci si seminte, fructe in moderatie, putine amidonoase si zero zahar.” Cam asa suna recomandarea lui Coach Glassman, fondatorul CrossFit.<br></p>

<strong class="slogan">Ce exercitii vei gasi la o clasa de CrossFit?</strong><br>      
      
<p>Exercitii cu greutatea corpului din <strong>GIMNASTICA</strong>, precum flotari, abdomen, genuflexiuni, fandari, tractiuni la bara, ridicari la inele, mers in maini, catarat pe funie, si nu numai.<br></p>

<p>Lucrul cu greutati, atat cu <strong>HALTERE</strong> (smuls, pus la piept, aruncat) precum si cu gantere, discuri sau kettlebell.<br></p>

<p>Exercitii <strong>IZOMETRICE</strong> (plank, statul la perete, etc) si exercitii<strong>PLYOMETRICE</strong> (genuflexiuni cu saritura, sarituri in lungime, sarituri pe cutie, etc)<br></p>

<p>Exercitii <strong>AEROBE</strong> precum alergatul, saritul corzii, jumping jacks, vaslitul sau bicicletele stationare.</p><br>

<strong class="slogan">Ce exercitii vei gasi la o clasa de CrossFit?</strong><br>      
      
<p>Oricine poate practica CrossFit, indiferent de nivelul de fitness, accidentari suferite in trecut, stare de sanatate sau limitari fizice. Asta datorita faptului ca miscarile si intensitatea exercitiilor (numarul de repetari, timpul alocat sau greutatile recomandate) pot fi ajustate si modificate in functie de nevoile fiecarui participant.<br></p>

<p>Astfel, pe masura ce avansezi, antrenamentele vor deveni mai solicitante, pastrand mereu intensitatea la nivelul la care, solicitarea sa provoace progres.</p>      
    </div>
  </div>
<!--     Modual - Despre Crossfit     -->
        <!--     Modual - Despre Crossfit     -->
        <!--     Modual - Despre Crossfit     -->
    </div>

 </div>
    
  </div>
  
<!--  About Section  -->    
<!--  Sedinta gratuita  -->
  
  <div class="gratuit">
    <div class="gratuit-text">
      <h4>Prima sedinta este gratuita</h4>
      <p>Programeaza-ti prima sedinta gratuita si incearca antrenamentele Magnum OPUS!</p>
    </div>
    <button class="rezerva-btn-2">Rezerva</button>
  </div>
  
<!--  Sedinta gratuita  -->  
<!--  Footer  -->
  
 <footer> 
  <div class="copy-right">
    <a href="">© 2019 Magnum Opus.</a><br>
    <a href="">Toate drepturile rezervate.</a>
  </div>
  <div class="cookies">
    <a href="">Politica Cookies</a><br>
    <a href="">Politica de Confidențialitate</a>
  </div>
  <div class="info">
    <a href="">Tell. 08722222222</a><br>
    <a href="">magnumopuscrossfit@gmail.com</a>
  </div>
  <div class="social">
   <img src="http://pluspng.com/img-png/facebook-logo-png-1722.png" alt="">
  </div>
</footer>
  
<!--  Footer  -->
<!--  Overlay  -->
  <div id="overlay"></div>
<!--  Overlay  -->  
  
</body>

            
          
!
            
              *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: montserrat , sans-serif;
  list-style: none;
  text-decoration: none;
}
:root {
  --green: #1EAA0A;
}
body {
  max-width: 1920px;
  margin: auto;
}

/* Top bar - Rezerva */

.rezerva {
  width: 100%;
  height: 100px;
  background-color: var(--green);
  display:flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 40px;
}
.rezerva-text {
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 600;
  color: white;
  margin-left: 10px;
}
.rezerva-btn {
  font-size: 20px;
  padding: 10px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  background-color: rgba(255,255,255,.7);
  margin-left: 20px;
  color: #222;
}
.rezerva-btn:hover {
  color: var(--green);
  background-color: #222;
}

/* Top bar - Rezerva */
/* The nav-bar */
.hide-desk {
  display: none;
}
.nav-btn {
  display: none;
}
.header {
  top: 0;
  position: sticky;
  width: 100%;
  height: 100px;
  background-color: #e6e6e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .logo {
  width: 100px;
  height: 100px;
  margin-left: 40px;
}
.navbar {
  display: flex;
  margin-right: 30px;
}
.navbar li {
  margin: 10px;
}
.navbar a {
  color: #222;
  font-weight: bold;
  font-size: 1.3rem;
}
.navbar a:hover {
  color: var(--green);  
}

/* The nav-bar */
/* Banner */

.banner {
  width: 100%;
  height: calc(100vh - 200px);
  background-image: url('https://images.pexels.com/photos/1552252/pexels-photo-1552252.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-text: center;
  text-align: center;
}
.banner h2 {
  font-size: 3.5rem;
  text-shadow: 2px 2px 10px rgba(0,0,0,.8);
}
.banner h1 {
  font-size: 1.3rem;
  text-shadow: 2px 2px 10px rgba(0,0,0,.8);
}
.opus {
  color: var(--green);
}

/* Banner */
/* The Cards */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 
    minmax(19rem, 1fr));
  padding: 20px;
  background-color: #222;
  grid-gap: 10px;
}
.card img {
  width: 100%;
  margin-bottom: 30px;
}
.card {
  background-color: #ddd;

}
.card:nth-child(even) {
  background-color: white;
}
.card strong {
  font-size: 1.8rem;
  padding: 15px;
  color: #222;

}
.card button {
  margin: 15px 15px 30px ;
  padding: 10px 30px;
  font-weight: bold;
  background: #222;
  color: var(--green);
  border: none;
  border-radius: 3px;  
}

.card button:hover {
  background-color: var(--green);
  color: #222;
}

/* The Cards */
/* Despre Magnum Opus */
.about-container {
  background-color: #222;
  padding: 60px 30px;
}

h3 {
  font-size: 2.2rem;
  color: var(--green);
}
.content {
  font-size: 1.2rem;
  color: white;
}
.title-content {
  border-bottom: 1px solid green;
  padding-bottom: 5px;
  margin-bottom: 10px;
}
.btn {
  color: white;
  margin: 20px 0;
  padding: 7px 30px;
  font-size: 20px;
  border-radius: 50px;
  background-color: green;
  border: none;
}
.btn:hover {
  background-color: white;
  color: green;
}
.crossfit {
  margin-top: 50px;
}

/* Despre Magnum Opus */
/* Sectiunea-Grtuit */

.gratuit {
  background-color: #ddd;
  min-height: 400px;
  width: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.gratuit-text h4 {
  font-size: 3.5rem;
  color: #111;
}
.gratuit-text p {
  font-size: 1.5rem;
}
.rezerva-btn-2 {
  padding: 10px 50px;
  margin: 20px;
  font-size: 20px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  background-color: var(--green);
  color: #222;
}
.rezerva-btn-2:hover {
  background-color: #222;
  color: var(--green);
}

/* Sectiunea-Grtuit */
/* footer */

footer {
  width:100%;
  background-color: #222;
  min-height: 300px;
  display: flex;
  justify-content: space-around;
  align-items: center; 
  padding: 10px;
}
footer a {
  color: #ddd;
  
}
footer img {
  width: 200px;
}

/* footer */

/* Modal - Depre Magnum Opus */
/* Modal - Depre Magnum Opus */

.modal {
  transition: 200ms ease-in-out;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  height: 80%;
  width: 70%;
  background-color: white;
  z-index: 10;
  overflow: auto;
}
.modal-header {
  font-size: 30px;
  padding: 20px 25px;
  display: flex;
  justify-content: space-between;
  background-color: green;  
}
.modal-header .close-btn {
  cursor: pointer;
  outline: none;
  border: none;
  background: none;
  font-size: 2rem;
  font-weight: bold;
  color: white;
}
.modal-body {
  padding: 10px 15px;
  font-size: 18px;
}
.modal-body p {
  margin-bottom: 20px;
}
.modal-body .slogan {
  font-size: 24px;
  margin-bottom: 20px;
}
.title {
  color: white;
  font-weight: bold;
}

#overlay {
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,.8);
  pointer-events: none;
  transition: 200ms ease-in-out;
}  

#overlay.active {
  opacity: 1;
  pointer-events: all;
}
.modal.active {
  transform: translate(-50%, -50%) scale(1);
}

#modal-G p{
  color: #222;
  font-size: 18px;
}
#modal-G strong {
  font-size: 23px;
  margin-bottom: 20px;
}
#modal-G li {
  margin: 10px 5px;
}
#modal-G .title {
  padding-top: 28px;
}
#modal-S p{
  color: #222;
  font-size: 18px;
}
#modal-S strong {
  font-size: 23px;
  margin-bottom: 20px;
}
#modal-S li {
  margin: 10px 5px;
}
#modal-S .title {
  padding-top: 28px;
}

/* Modal - Depre Magnum Opus */
/* Modal - Depre Magnum Opus */

@media (max-width: 1130px) {
.nav-btn {
  display: inherit;
  margin-left: 30px;
  font-size: 40px;
  background: none;
  border: none;
  color: white;
  margin-top: 10px;
}
  .navbar {
    position: fixed;
    flex-direction: column;
    align-items: flex-start;
    background-color: rgba(34,34,34,.9);
    width: 80%;
    top: 0;
    bottom: 0;
    right: 0;
    margin-right: 0;
    overflow: auto;
    display: none;
  }
  .navbar a {
  font-size: 1.3rem;
  color: white;
  margin-left: 30px;  
}
  .navbar.activ{
    display: inherit;
  }
  .hide-desk {
   display: inherit;
   width: 80px;
   height: 80px;
   margin-right: 40px;
  }

  .header {
    height: 80px;
  }
  .header .logo {
    width: 80px;
    height: 80px;
  }
  .banner {
  height: calc(100vh - 180px);
  }
}

@media (max-width: 750px) {
  footer {
    flex-direction: column;
  }
  footer a {
    margin: 20px;
  }
}
            
          
!
            
              const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

openModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
    e.preventDefault();
  })
})

overlay.addEventListener('click', () => {
  const modals = document.querySelectorAll('.modal.active')
  modals.forEach(modal => {
    closeModal(modal)
    e.preventDefault();
  })
})

closeModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = button.closest('.modal')
    closeModal(modal)
    e.preventDefault();
  })
})

function openModal(modal) {
  if (modal == null) return
  modal.classList.add('active')
  overlay.classList.add('active')
}

function closeModal(modal) {
  if (modal == null) return
  modal.classList.remove('active')
  overlay.classList.remove('active')
}


const menu = document.getElementById('ham')
const nav = document.getElementById('nav')
const exit = document.getElementById('exit')

menu.addEventListener('click', function(e) {
  nav.classList.add('activ')
  e.preventDefault();
});

exit.addEventListener('click', function(e) {
  nav.classList.remove('activ')
  e.preventDefault();
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console