×
Ir ao conteúdo
  • Cadastre-se

CSS Como deixar minha página responsiva?


Posts recomendados

Não consigo deixar minha página html/css responsiva, alguém pode me ajudar?

 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="3D Easy - Desenhe simples.">
    <title>landingPage</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>


<body>
    <section class="main-section">
    <header class="cabecalho">
        <nav class="cabecalho-menu">
            <a class="cabecalho-menu-item1">Home</a>
            <a class="cabecalho-menu-item2">Sobre</a>
            <a class="cabecalho-menu-item3">Contato</a>
        </nav>

        <a href="https://www.figma.com/login?cont=/developers" target="_blank"><button class="botao-login">Login</button></a>
    </header>

    <main class="conteudo">
        <section class="conteudo-principal">
            <div class="conteudo-escrito">
                <h1 class="titulo1">3D Easy</h1>
                <h1 class="titulo2">Desenhe Simples.</h1>
            </div>
            
            <div class="paragrafo1">
                <p>Com 3D Easy, você não precisa mais desperdiçar inúmeros</p>
                <p>recursos caros e provisionar a compra de licenças de diversos</p> 
                <p>programas para seus desenhos industriais.</p><br>
                
                <p>Escolha o software, desenhe na nuvem e se quiser mande</p>
                <p>diretamente para impressão; seja ela 3D, Ploter ou de alta definição</p>
                <p>e receba pronto. Tudo em um só lugar!</p>
            </div>

              <div class="botões">
            
                 <div>  
                     <a href="https://github.com/fariaedu/3dprint" target="_blank"><button class="botao1">Assine já</button></a>
                 </div>

                 <div>
                   <a href="https://github.com/jvs4nt" target="_blank"><button class="botao2">Saiba mais</button></a>
                 </div>

              </div>

        </section>

    </main>
    </section>

    <section class="main-section2">
        <main>
            <section class="conteudo-principal2">
                <div class="conteudo-escrito2">
                    <h1>Simples, Rápido e Seguro.</h1>
                </div>

                <div class="paragrafo2">
                    <p>Um ambiente dedidado por cliente para desenhar e salvar tudo na nuvem de</p> 
                    <p>maneira simplificada e rapida pagamdo apelas pelas horas que utilizar e</p> 
                    <p>uma pequena taxa pela quantidade de desenhos armazenados em nosso</p> 
                    <p>ambiente seguro. Você pode tambem armazena-los em seu proprio</p> 
                    <p>ambiente ou ainda manda-los direto para impressão 3D Plotter ou de Alta</p> 
                    <p>definição e receber diretamente na sua empresa.</p>
                </div>
            </section>

            <section class="conteudo-adicional1">
                <div class="conteudo-escrito2">

                    <div>
                        <img src="img/Icon.svg">
                    </div>
                
                    <div class="plataforma-de-desenho-titulo">
                        <h2>Plataforma de desenho</h2>
                    </div>
    
                    <div class="plataforma-de-desenho-p">
                        <p>Lorem ipsum dolor sit amet, consectetur</p>
                        <p>adipisicing elit. Maxime labore rerum nisi</p> 
                        <p>cum eligendi, magni quibusdam doloremque</p>
                    </div>
                </div>

                <div class="conteudo-escrito3">

                    <div>
                        <img src="img/Icon.svg">
                    </div>

                    <div class="plataforma-de-impressao-titulo">
                        <h2>Plataforma de Impressão</h2>
                    </div>
    
                    <div class="plataforma-de-impressao-p">
                        <p>Lorem ipsum dolor sit amet, consectetur</p>
                        <p>adipisicing elit. Maxime labore rerum nisi</p> 
                        <p>cum eligendi, magni quibusdam doloremque</p>
                    </div>

                </div>
            </section>    

        </main>
        <div>
            <img class="imagem2" src="img/imagem2.svg">
        </div>
    </section>

    <section class="main-section3">
        <div>
            <img class="imagem3" src="img/imagem3.svg">
        </div>

        <main>
            <section class="conteudo-principal3">
                <div class="conteudo-escrito4">
                    <div class="desenhe-sem-se-preocupar">
                        <h2>Desenhe sem se preocupar</h2>
                    </div>

                    <div class="paragrafo3">
                        <p>Com o 3D easy você pode desenhar sem se preocupar em</p>
                        <p>provisionar grandes investimentos para comprar hardware que</p> 
                        <p>deprecia e se torna obsoleto rapidamente.</p>
                    </div>
                </div>
            </section>
        </main>
    </section>

    <section class="main-section4">
        <div>
            <img class="imagem4" src="img/imagem4.svg">
        </div>

        <main>
            <section class="conteudo-principal4">
                <div class="conteudo-escrito5">
                    <div class="pague-apenas">
                        <h2>Pague apenas pelo que usa</h2>
                    </div>

                    <div class="paragrafo4">
                        <p>Se você tiver uma alta demanda pontual, poderá escalar a</p>
                        <p>utilização, podendo ter varias pessoas desenhando ao mesmo</p> 
                        <p>tempo, diferente do que ocorre em um ambiente interno, onde</p>
                        <p>os recursos são compartilhados.</p>
                    </div>
                </div>
            </section>
        </main>

    </section>

    <section class="main-section5">
        <div>
            <img class="imagem5" src="img/imagem5.svg">
        </div>

        <main>
            <section class="conteudo-principal5">
                <div class="conteudo-escrito6">
                    <div class="acesse">
                        <h2>Acesse de qualquer lugar</h2>
                    </div>

                    <div class="paragrafo5">
                        <p>Você não pode levar sua Workstation para uma demonstração</p>
                        <p>em um cliente, mas você pode se conectar ao nosso ambiente</p> 
                        <p>e demonstrar seus desenhos com a mesma performance que</p>
                        <p>o projetista tem ao desenhar.</p><br><br>

                        <div>  
                            <a href="https://github.com/fariaedu/3dprint" target="_blank"><button class="botao3">Purchase now</button></a>
                        </div>
                    </div>
                </div>
            </section>
        </main>

    </section>

    <section class="main-section6">
        <main>
            <section class="main-pre-rodape">
                <div class="titulo-pre-rodape">
                    <h1>A Price To Suit Everyone</h1>
                </div>

                <div class="p-pre-rodape">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</p>
                    <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient</p> 
                    <p>montes, nascetur ridiculus</p><br>

                    <div class="dol">
                        <h1>$40</h1>
                    </div>
                    
                    <div class="ui">
                        <p>UI Design Kit</p><br><br><br>
                    </div>

                    <div class="ui2">
                        <p>See, one price, simple.</p><br>
                    </div>

                    <div>  
                        <a href="https://github.com/fariaedu/3dprint" target="_blank"><button class="botao4">Purchase now</button></a>
                    </div>
                </div>
            </section>
        </main>
    </section>


    <section class="footer">
        <div class="footer-itens">
            <div class="yourcompany">
                <p>@2020 Yourcompany</p>
            </div>

            <div class="landie">
                <h1>Landie</h1>
            </div>

            <div>
                <a href="https://github.com/fariaedu/3dprint" target="_blank"><button class="botao5">Purchase now</button></a>
            </div>

        </div>

          <br><br>
          <hr color="#CDD1D4"/>

            <div class="footer-menu">
                <nav class="footer-menu-itens">
                    <a class="footer-menu-item1">Home</a>
                    <a class="footer-menu-item2">About</a>
                    <a class="footer-menu-item3">Contact</a>
                </nav>

                <div class="social-media">

                    <a href="https://github.com/fariaedu/3dprint"><img src="face.svg" class="icon1"></a>
                    <a href="https://github.com/fariaedu/3dprint"><img src="in.svg" class="icon2"></a>
                    <a href="https://github.com/fariaedu/3dprint"><img src="tt.svg" class="icon3"></a>
                    <a href="https://github.com/fariaedu/3dprint"><img src="yt.svg" class="icon4"></a>
                    <a href="https://github.com/fariaedu/3dprint"><img src="ig.svg" class="icon5"></a>

                </div>
            </div>
            <br><br>


       

    </section>


    

</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Sarala:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
  }

  .main-section{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: url(Path.svg)no-repeat;
    background-size: cover;
    background-position: center;
    background-position-y: 0;
  }

  .cabecalho {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 20.3%;
    gap: 70%;
    padding: 20px;
}

.cabecalho-menu {
    font-family: 'Lato', sans-serif;
    display: flex;
    margin-left: -10.5%;
    gap: 90px;
    font-size: 13px;
    color: RGB(118, 130, 182);
    transition: 0.3s;
}

.cabecalho-menu-item1{
    font-family: 'Lato', sans-serif;
    display: flex;
    margin-left: -12%;
    gap: 90px;
    font-size: 13px;
    color: RGB(118, 130, 182);
    transition: 0.3s;
}

.cabecalho-menu-item2{
    font-family: 'Lato', sans-serif;
    display: flex;
    margin-left: -12%;
    gap: 90px;
    font-size: 13px;
    color: RGB(118, 130, 182);
    transition: 0.3s;
}

.cabecalho-menu-item3{
    font-family: 'Lato', sans-serif;
    display: flex;
    margin-left: -12%;
    gap: 90px;
    font-size: 13px;
    color: RGB(118, 130, 182);
    transition: 0.3s;
}

.cabecalho-menu-item1:hover {
  color:black;
  font-size: 14px;
  cursor: pointer;
}

.cabecalho-menu-item2:hover {
  color:black;
  font-size: 14px;
  cursor: pointer;
}

.cabecalho-menu-item3:hover {
  color:black;
  font-size: 14px;
  cursor: pointer;
}

.conteudo {
    margin-bottom: 48px;
    
  }

  .conteudo-principal {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin-top: 230px;
    margin-left: 200px;
    gap: 10px;
  }

  .conteudo-principal2 {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin-top: 230px;
    margin-left: 200px;
    gap: 10px;
  }


  .conteudo-escrito {
    font-family: 'Lato', sans-serif;
    font-size: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: RGB(71, 80, 121);
  }

  .conteudo-escrito2 {
    font-family: 'Lato', sans-serif;
    font-size: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: RGB(71, 80, 121);
  }

  .conteudo-escrito3 {
    font-family: 'Lato', sans-serif;
    font-size: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: RGB(71, 80, 121);
    margin-left: 50px;
  }



  .paragrafo1 {
    font-family: 'Sarala', sans-serif;
    color: RGB(154, 168, 230);
    font-size: 20px;
  }

  .paragrafo2 {
    font-family: 'Sarala', sans-serif;
    color: RGB(154, 168, 230);
    font-size: 20px;
  }
 

  .botões {
      display: flex;
      flex-direction: row;
      margin-top: 1%;
      gap: 30px;
  }

  .botao1 {
    font-family: 'Sarala', sans-serif;
    border: none;
    background-color: #111B47;
    transition: 0.3s;
    width: 180px;
    height: 30px;
    border-radius: 2px;
    font-size: 12px;
    color: #ffffff;
    
  }

  .botao1:hover {
    background-color:rgba(7, 21, 65, 0.74);
    margin: 1px;
    cursor: pointer;
  }

  .botao2 {
    font-family: 'Sarala', sans-serif;
    border-width: 2px;
    border-color: #111B47;
    background-color: rgba(55, 47, 161, 0);
    transition: 0.3s;
    width: 180px;
    height: 30px;
    border-radius: 2px;
    font-size: 12px;
    color: #111B47;
    
  }

  .botao2:hover {
    background-color:RGB(226, 226, 226);
    margin: 1px;
    cursor: pointer;
  }

  .botao-login {
    font-family: 'Sarala', sans-serif;
    border: none;
    background-color: #111B47;
    box-shadow: 4px 5px 4px rgba(0, 0, 0, 0.25);
    transition: 0.3s;
    width: 140px;
    height: 25px;
    border-radius: 2px;
    font-size: 12px;
    color: #ffffff;
  }

  .botao-login:hover {
    background-color:rgba(7, 21, 65, 0.74);
    cursor: pointer;
  }

  .conteudo-adicional1{
    display: flex;
    flex-direction: row;
    align-items: left;
    margin-top: 50px;
    margin-left: 200px;
  }

  .plataforma-de-desenho-titulo{
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: RGB(71, 80, 121);

  }

  .plataforma-de-desenho-p{
    font-family: 'Sarala', sans-serif;
    font-size: 16px;
    
  }

  .plataforma-de-impressao-titulo{
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: RGB(71, 80, 121);

  }

  .plataforma-de-impressao-p{
    font-family: 'Sarala', sans-serif;
    font-size: 16px;
    
  }

  .main-section2{
    position: relative;
    width: 100%;
    min-height: 85vh;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .imagem2{
    margin-top: 200px;
    margin-left: 200px;
  }

  .main-section3{
    position: relative;
    width: 100%;
    min-height: 70vh;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .conteudo-principal3 {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin-top: 270px;
    margin-left: 200px;
    gap: 10px;
  }

  .desenhe-sem-se-preocupar{
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: RGB(71, 80, 121);
  }


  .paragrafo3 {
    font-family: 'Sarala', sans-serif;
    color: RGB(154, 168, 230);
    font-size: 20px;
  }

  .conteudo-escrito4 {
    font-family: 'Lato', sans-serif;
    font-size: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: RGB(71, 80, 121);
  }

  .imagem3{
    margin-top: 200px;
    margin-left: 200px;
  }

  .main-section4{
    position: relative;
    width: 100%;
    min-height: 70vh;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .conteudo-principal4 {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin-top: 270px;
    margin-left: 200px;
    gap: 10px;
  }

  .pague-apenas{
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: RGB(71, 80, 121);
  }

  .paragrafo4{
    font-family: 'Sarala', sans-serif;
    color: RGB(154, 168, 230);
    font-size: 20px;
  }

  .conteudo-escrito5 {
    font-family: 'Lato', sans-serif;
    font-size: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: RGB(71, 80, 121);
  }

  .imagem4{
    margin-top: 200px;
    margin-left: 200px;
  }

  .main-section5{
    position: relative;
    width: 100%;
    min-height: 70vh;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .conteudo-principal5 {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin-top: 200px;
    margin-left: 200px;
    gap: 10px;
  }

  .acesse{
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: RGB(71, 80, 121);
  }

  .paragrafo5{
    font-family: 'Sarala', sans-serif;
    color: RGB(154, 168, 230);
    font-size: 20px;
  }

  .conteudo-escrito6 {
    font-family: 'Lato', sans-serif;
    font-size: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: RGB(71, 80, 121);
  }

  .imagem5{
    margin-top: 200px;
    margin-left: 200px;
  }

  .botao3 {
    font-family: 'Sarala', sans-serif;
    border: none;
    background-color: #111B47;
    transition: 0.3s;
    width: 180px;
    height: 30px;
    border-radius: 2px;
    font-size: 12px;
    color: #ffffff;
    
  }

  .botao3:hover {
    background-color:rgba(7, 21, 65, 0.74);
    margin: 1px;
    cursor: pointer;
  }

  .main-section6{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: url(Rectangle.svg)no-repeat;
    background-size: cover;
    background-position: top;
  }
  
  .main-pre-rodape{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 250px;
    gap: 20px;
  }

  .titulo-pre-rodape{
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    color: RGB(71, 80, 121);
  }

  .p-pre-rodape{
    text-align: center;
    font-family: 'Sarala', sans-serif;
    color: RGB(154, 168, 230);
    font-size: 20px;
  }

  .dol{
    font-family: 'Lato', sans-serif;
    font-size: 60px;
    display: flex;
    flex-direction: column;
    color: #111B47;
  }

  .ui{
    margin-top: 20px;
    color:#111B47;

  }

  .ui2{
    font-size: 18px;
    color: rgba(93, 105, 112, 1);
  }

  .botao4 {
    font-family: 'Lato', sans-serif;
    border: none;
    background-color: #111B47;
    transition: 0.3s;
    width: 180px;
    height: 30px;
    border-radius: 2px;
    font-size: 12px;
    color: #ffffff;
    
  }

  .botao4:hover {
    background-color:rgba(7, 21, 65, 0.74);
    margin: 1px;
    cursor: pointer;
  }

  .footer{
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #E7ECFF;
    background-size: cover;
    background-position: top;
  }

  .footer-itens{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin-top: 50px;
    
  }

  .yourcompany{
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    color: #939EA4;

  }

  .landie{
    font-family: 'Sarala', sans-serif;
    color: rgba(55, 68, 126, 1);
    font-size: 23px;
  }

  .footer-menu{
    margin-top: 10px;
    padding-top: 30px;
    display: flex;
    flex-direction: row;
    margin-left: 20.1%;

  }


  .footer-menu-itens{
    margin-left: -9.5%;
    font-family: 'Sarala', sans-serif;
    display: flex;
    gap: 40px;
    font-size: 16px;
    color: RGB(118, 130, 182);
    transition: 0.5s;
  }

  .footer-menu-item1:hover{
    cursor: pointer;
    color:rgba(7, 21, 65, 0.74);
    
  }

  .footer-menu-item2:hover{
    cursor: pointer;
    color:rgba(7, 21, 65, 0.74);
    
  }

  .footer-menu-item3:hover{
    cursor: pointer;
    color:rgba(7, 21, 65, 0.74);
    
  }

  .icon1{
    transition: 0.3s;
  }

  .icon2{
    transition: 0.3s;
  }

  .icon3{
    transition: 0.3s;
  }

  .icon4{
    transition: 0.3s;
  }

  .icon5{
    transition: 0.3s;
  }
  
  .icon1:hover{
    filter: invert(1);
  }

  .icon2:hover{
    filter: invert(1);
  }

  .icon3:hover{
    filter: invert(1);
  }

  .icon4:hover{
    filter: invert(1);
  }

  .icon5:hover{
    filter: invert(1);
  }


  .social-media{
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-left: 68%;
  }

  .botao5 {
    font-family: 'Lato', sans-serif;
    border: none;
    background-color: #111B47;
    transition: 0.3s;
    width: 180px;
    height: 30px;
    border-radius: 2px;
    font-size: 12px;
    color: #ffffff;
    
  }

  .botao5:hover {
    background-color:rgba(7, 21, 65, 0.74);
    margin: 1px;
    cursor: pointer;
  }


  @media screen and (max-width: 768px) {
    section {
      width: 100%;
      padding: 0;
    }
  }



  

 

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Como se tornar um desenvolvedor full-stack

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!