Как делать нерегулярные секции с div?

Я должен делать секции в Вебе с divs, они должны быть нерегулярными, (я присоединяю изображение примера---> нужно иметь в в счете, что сверху идут изображения и тексты, лучше видеть изображение, что присоединенный код, что я думаю, что его слишком много...). Я протестировал делать это с transform и собирая divs на других с z-index, но прибывает точка, которая смещает все, и responsive дает много проблем, кроме того есть секции с пониженным в звании фоном, и также он предпочел бы избегать помещать это с img фона...: кто-то знает лучшее решение? Тысячи спасибо за продвинутый помощью.

introducir la descripción de la imagen aquí

Настоящий код:

/*  versión estilos escritorio

font-family: 'Poppins', sans-serif;

Fondo:
#000000 rgb(0,0,0)
Tonos azules:
#9CCFD9 rgb(156,207,217)
#214364  rgb(33,67,100)

Las particulas del codigo que sean: #214364  rgb(33,67,100)

*/

body{
    background-color: #000000;
    color:#fff; 
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    /*overflow-x: hidden;*/
    
}
html,body{

    display: block;
    width: 100%;
    height: 100%;
   
   }



/*empieza el menú*/



nav{
    
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
      
}
.logo img{
    width: 75%;
}
.btn_buytokens{
    background: linear-gradient(to right, rgb(156,207,217) 0%, rgba(2,20,54,1) 100%);
    border-radius: 18px;
    text-align: center;
    height: 8%;
    
}

.btn_buytokens a{
    padding: 10px;
    color:#fff;
    text-decoration: none;
    font-weight: 700;
    display: block;
}
.menumovil{
    display: none;
}
.menu_desktop{
    
    width: 60%;  
}
.menu_desktop ul{
    list-style: none;
    padding:0;
    margin:0;
    display:flex;
    justify-content: space-between;
    
}

.menu_desktop ul li a{
    text-decoration: none;
    color:#fff;
    font-size: 1em; 
}
.negrita{
    font-weight: bold;
}

/* media querys version movil menu */
@media (min-width: 300px) and (max-width: 768px) {
    nav{
        width: 100%;
        height: auto;
        justify-content: space-between;
        align-items: flex-start;
        

         
    }
    
    .menumovil{
        display: inline-block;
         
        
    }
    .menumovil>i{
        color: white;
        font-size: 1.5em;
    } 
    .menu_desktop{
        
       display:none;  /*cambia con un click*/
       width: 60%;
    }
    .menu{
        display:flex;
        flex-direction: column;
        justify-content: end;
        align-items: flex-end;
        background-color: #000000; 

    }
    
    .menu_desktop ul{
        
        justify-content: end;
        
    }
    
    .menu_desktop ul li a{
        
        font-size: 0.5em; 
    }
    .negrita{
        font-weight: bold;
    }
    
    .btn_buytokens{  
        width: 40%;
        height:auto;
        margin-right:30%; 
        
        
    }
    .btn_buytokens a{
        font-size: 0.6em;
        padding: 5px;
        
    }
    .logo img{
        width: 52%;
    }
}


/*termina el menú*/

/*------------------------home---------------------------------*/
/*empieza mundo*/
.canvas2{
    
    position: absolute;
    width: 100%;
    height: auto; 
 }
 #canvasOne2{
    position: relative;
    z-index: -10000;
 }

 .canvas{
   position: absolute;
   width: 100%;
   height: auto; 
}
#canvasOne{
   position: relative;
   z-index: -10000;
}
.mundoUno{
    display: block;
}
.mundoDos{
    display: none;
}

@media (min-width: 300px) and (max-width: 768px) {
    .mundoUno{
        display: none;
    }
    .mundoDos{
        display: block;
    }

    
}

/*termina mundo*/

.sectionhome{
    display: flex;
    width: 100%;
}
.izqd{
    position: relative;
    right: 180px;
    width: 40%;
    height: auto;  
}


/* empieza bloque de texto y boton*/
.derch{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 60%;
    position: relative;
    margin-bottom: 10%;
    
}
.sett>h1{
    font-size: 3rem;
}
.botondisco{
    
    border: 1px solid #fff;
    border-radius: 40px;
    text-align: center;
    width: 15%;
    
}
.botondisco>a{
    padding: 10px;
    color:#fff;
    text-decoration: none;
    font-weight: 700;
    display: block;
    font-size: 1rem;
}
/* media querys version tablet menu */
@media (min-width: 300px) and (max-width: 768px){
    .sectionhome{
        flex-direction: column;
    }

    .derch{
        margin-top: -88%;
        width: 100%;
        height: auto;
        left: 10%;
       
    }
        
    .izqd{ 
        right: 30%;
        z-index: 9999;
        top: 110px;
        width: 100%;  
        height: auto;  
    }
    .izqd>img{
        width: 350px;
        height: 350px;
    }
    .sett{
      width: 100%;
      height: auto;
    }
    .sett>h1{
        font-size: 1.5em;
    }

    .botondisco{
        text-align: center;
        width: 35%;
        height: auto; 
        padding: 0; 
        margin-right: 25%;  
    }
    .botondisco>a{
        font-size: 0.7rem; 
    }
    
}

/* termina bloque de texto y boton*/

/*empieza reloj cuenta atras*/

.totalreloj{
    
    border-radius: 50px;
    display: flex;
    margin: 0;
    padding: 0;
    width: 40%;
    height: auto;
    flex-direction: column;
}

@media (min-width: 300px) and (max-width: 768px){
    .totalreloj{
        display:flex;
        margin-top: 48%;
        margin-right: 20%;
        width: 80%;
        height: auto;
    }
}
.head{
    position: relative;
    top:35%;
    z-index: -10000; 
}
.head>h1{
    font-size: 3rem;
    color: #9CCFD9;
    text-align: center;  
}
.relojco{
    color: #fff;
       
}
.relojco>ul{
    position: relative;
    border: 2px solid #9CCFD9;
    border-radius: 40px;
}
.lireloj{
    display: inline-block;
    font-size: 1em;
    list-style-type: none;
    padding: 2em;
}
  
.lireloj>span {
    display: block;
    font-size: 3em; 
}

@media (min-width: 300px) and (max-width: 768px){
    /* el recuadro azul es liss*/
    .liss{ 
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;   
    }
    .head{
        top:95%;
        z-index: -10000;
    }
    .head>h1{
        font-size: 2rem;
        position: relative;
        top: 80px; 
        text-align: center; 
    }
    
    .lireloj{
        
        font-size: 1em;
        font-weight: bold;
        padding: 1em;
          
    }
      
    .lireloj>span {
        
        font-size: 1em;
        text-align: center;
    }
}
/*termina reloj cuenta atras*/

/* empieza home2*/
.home2{
    display: flex; 
   }
.homeDos{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    
}
.textogrande{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 3%;
}
.bki{
    font-size: 35em; 
    color: #3d4955;    
}
.about{
    
    margin-left: 2.5%;
    margin-bottom: -49%;
    font-size: 6em;
    z-index: -9999;
    color: #3d4955; 
}
.textoprf{
    
    width: 35%;
    z-index: 9999;
    margin-top: -58%;
    margin-left: 43%;
    
}
.descargas{
   
    padding-bottom: 3%;
    display: flex;
    z-index: 9999;
    width: 100%;
    justify-content: space-around;
    margin-left: -10%;
    
}
.desrgaUno>a{
    color: #fff;
    
    text-decoration: none; 
}
.fa-cloud-download-alt{
    color: #9CCFD9;
}
.desrgaDos>a{
    color: #fff;
    text-decoration: none; 
}
.fa-play{
    font-size: 0.5em;
    margin-left: 2px;
}
.tnDos{
   height: fit-content;
   z-index: 9999;
}

.imagtok1{
    width: 80%;
    margin-top: 37%;
    margin-left: -50%;     
}

.imagtok2{
    width: 15%;
    margin-left: -5%;
    transform: rotate(4deg);
} 

.rallla{
    width: 102%;
    height: 300px;
    z-index: -9999;
    margin-top: -40%;
    margin-left: -1%;
    border-top: 60px solid black;
    background-color: black;
    transform: rotate(175deg);

}
.espacio{
    height: 851px;
}
/* termina home2*/

/*----------termina home------------------*/

/* Empieza benefits  */

.benefits{
    
    display: flex;
    text-align: center;
    width: 100%;
    z-index: 9999;
    margin-top:-10%;
    background: rgba(163,237,255,1);
    background: -moz-linear-gradient(top, rgba(163,237,255,1) 0%, rgba(0,32,92,1) 100%);
    background: -webkit-linear-gradient(top, rgba(163,237,255,1) 0%, rgba(0,32,92,1) 100%);
    background: -o-linear-gradient(top, rgba(163,237,255,1) 0%, rgba(0,32,92,1) 100%);
    background: -ms-linear-gradient(top, rgba(163,237,255,1) 0%, rgba(0,32,92,1) 100%);
    background: linear-gradient(to bottom, rgba(163,237,255,1) 0%, rgba(0,32,92,1) 100%);

}
.tobUno{
   
    display: flex;
    flex-direction: column;
    width: 50%;
    z-index: 9999;
    margin-left: 10%;
    margin-top: 20%;
    
}
.tobUno>h2{
    font-weight: 200;
    letter-spacing: 2px;
    font-size: 3em;
    color: #214364;
    margin-bottom:-11.5%;
    z-index: 9999;
}
.tobUno>h1{
    letter-spacing: 12px;
    font-size: 4em;
}
.tobUno>img{
    width: 30%;
    z-index: 9999;
    align-self: center;
    margin-top:-9%;
}
.textotb{
    margin-right: 13%;
    margin-top: -6%;
    
}
.tobDos{
    
    display: flex;
    flex-direction: column;
    width: 50%;
    margin-top:7%;
    margin-left: -15%;
}
.tobDos>h2{
    font-weight: 200;
    letter-spacing: 2px;
    font-size: 7rem;
    color: #214364;
    margin-bottom:-23%;
    z-index: 9999;
}
.tobDos>h1{
    letter-spacing: 12px;
    font-size: 8rem;   
}
.tobDos>img{
    width: 40%;
    align-self: center;
    margin-top:-10%;
}
.textoof{
    margin-right: 1%;
    margin-top: -33%;
}
.tobTres{
    text-align: end;
    z-index: 9999;
    margin-right: -108%;
    margin-top:9%;
    -webkit-transform: rotate(-90deg);  
      -moz-transform: rotate(-90deg);  
      -ms-transform: rotate(-90deg);  
      -o-transform: rotate(-90deg);  
      transform: rotate(-90deg); 
}
.tobTres>h2{
    font-size: 10rem;
    color: #9CCFD9;
}
/* Termina benefits  */
.barra{
    border-top: 5px solid white;
    width: 110%;
    margin-left: -5%;
    margin-top:-30%;
    height: 300px;
    transform: rotate(10deg);
    z-index: 9999;
    background-color: black;
    z-index: -9999;
}
/* empieza how it  */
.howit{
    width: 100%;
   
    z-index: 9999;
}
.texhowit{
    z-index: 9999;
}
.tken1hima{
    width: 20%;
} 
.imatken2h{
    width: 20%;
}



/* Termina how it  */



    
    
    
    
    
    
    def1



    


Set yourself apart
from the rest

PRE-ICO PUBLIC

  • Days
  • Hours
  • Seconds

About


BKI

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis ratione vitae molestias doloribus temporibus? Corporis commodi architecto nisi nulla impedit maiores facilis officiis? Recusandae quibusdam, ad numquam aut vel voluptates! Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga cum tempora ratione quam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores vel quisquam in fugit? Hic molestias, fugiat asperiores, architecto eos veniam, esse veritatis magnam quasi qui voluptas! Laudantium dignissimos iure cupiditate.






















termina home 2 -->




traditional

BANKING

Lorem ipsum dolor dolor
sit amet consectetur dolor
adipisicing elit. dolor
Lorem ipsum dolor dolor
sit amet consectetur dolor
adipisicing elit. dolor

our

FUND

Lorem ipsum dolor
sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Neque voluptatibus dolorum magni
provident dignissimos illo itaque mollitia
optio et, recusandae asperiores impedit
est nesciunt cumque fugit corrupti

benefits

how it's works

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto voluptates aperiam odio laboriosam ipsa provident tenetur esse

8
задан 25.06.2019, 20:34
0 ответов