dpc-website-modern-2023's Introduction

DPC Website 2023

Thank you so much for your support
This website is inspired by Dota 2 DPC Lima
It is responsive, they can code so they can learn

Fronted 🔥

HTML
Css
js

HTML Navbar

<nav class="nav-hero">
  <div class="container nav-container">
    <div class="logo">
      <h2 class="logo-name">DPC <span class="point">Lima </span></h2>
    </div>
    <div class="links">
      <a href="#" class="links">Inicio</a>
      <a href="#" class="links">Servicios</a>
      <a href="#" class="links">Proyectos</a>
      <a href="#" class="links">Clientes</a>
      <a href="#" class="links link--active">Contacto</a>
    </div>
  </div>
</nav>

Images

Css

:root{
    --gold3:#d60824;
    --gold1:#00c2f7;
    --gold4:#f6cd8f;
    --gold2:#00c2f7;
    --gray:#ffffff80;
    --gray2:#f7d9d990;
    --black1:#1a1b1f;
    --black2:#30353b;
    --shadow:#0 8px 8px;
    --color_shadow:#00000033;
}

Images

Responsive

@media screen and (max-width:900px){
    .mockup{
        width: 600px;
        height: auto;
    }
    .title{
        font-size: 50px;
    }
    .copy{
        font-size: 22px;
    }
    .cta{
        padding: 15px 22px;
    }
    .container-cards{
        justify-content: space-evenly;
    }
    .services .card{
        width: 45%;
    }
    .background{
        width: 52%;
    }
    .card{
        width: 42%;
    }
    .testimony-container{
        justify-content: space-evenly;
    }
    .testimony-card{
        width: 45%;
    }
    .check-item{
        width: 45%;
        margin-bottom: 35px;
    }
    .newsletter{
        width: 80%;
    }
    .downloand {
        width: 100%;
    }
    .download-app{
        justify-content: space-between;
    }
    .title-footer.letra{
        display: flex;
        justify-content: center;
    }
    .download-item{
        width: 45%;
    }
    .get-email{
        width: 100%;
        margin-bottom: 40px;
    }
    .socialmedia-icon{
        font-size: 18px;
    }
    .socialmedia-legend{
        font-size: 18px;
    }
}