Как делать нерегулярные секции с 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  */
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Poppins:200,400,700" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <title>def1</title>
</head>

<body>
    <nav >
        
        <div class="logo">
            <img src="img/logo_menu.svg" alt="">
        </div>
        <div class="btn_buytokens">
            <a href="#"> buy tokens <i class="fas fa-caret-down"> </i></a>
        </div>
        <div class="menumovil">
            <i class="fas fa-bars"></i>
        </div>
        <div class="menu_desktop">
            <ul class="menu">
                <li><a href="#">ABOUT US</a></li>
                <li><a href="#">ROADMAP</a></li>
                <li><a href="#">TEAM</a></li>
                <li><a href="#">TOKENOMICS</a></li>
                <li><a href="#">F.A.Q</a></li>
                <li><a class="negrita" href="#">CONTACT</a></li>
            </ul>
        </div>

    </nav>

<!-- empieza mundo escritorio -->
<section class="mundoUno">
    <div style="text-align:center">
        
        
        <div class="canvas">
            <canvas id="canvasOne"  width="1900" height="820" ></canvas>

        </div>
    
    </div> 
</section>

<section class="mundoDos">

    <div style="text-align:center">

        <div class="canvas2">
            <canvas id="canvasOne2" width="550" height="550" ></canvas>
        </div>
               
    </div>
             

</section>
<!-- termina mundo escritorio-->


<!-- empieza contenido -->

    <section class="sectionhome" >
        <!-- empieza vector de la izquierda -->
        <div class="izqd">
            <img src="img/vector_01.svg" alt="">
        </div>
        <!-- empieza bloque de contenido de la derecha -->
        <div class="derch">

            <div class="sett" >
                <h1>Set yourself apart  <br> from the rest</h1>
            </div>
            <div class="botondisco"> 
                <a href="#">discover more <i class="fas fa-caret-down"></i>
                </a>
            </div>
            
<!-- termina bloque de contenido de la derecha -->

<!-- empieza reloj cuenta atras -->
            
            <div class="totalreloj">
                   
                <div class="relojco">
                        <div class="head"><h1>PRE-ICO PUBLIC</h1></div>
                    <ul class="liss">  
                        <li class="lireloj"><span id="days"></span>Days</li>
                        <li class="lireloj"><span id="hours"></span>Hours</li>
                        <li class="lireloj"><span id="seconds"></span>Seconds</li>
                    </ul>
                </div>
            </div>
            
<!-- termina reloj cuenta atras -->
        </div>

    </section>
    
     <!-- empieza home 2 -->
     <section class="home2">
        <div>
             <img class="imagtok1" src="img/Token blanco 20 opacidad.svg" alt="">
        </div>
        <div class="homeDos">
            
            <div class="textogrande">
                <h2 class="about">About </h2> <br>  
                    <h2 class="bki">BKI</h2> 
                
                <p class="textoprf">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.
                </p>
            </div>
    
            <div class="descargas">
    
                <div class="desrgaUno">
                    <a href=""><i class="fas fa-cloud-download-alt"></i> WhitePaper</a>  
                </div>
                <div class="desrgaDos">
                    <a href=""><i class="fas fa-cloud-download-alt"></i> OnePaper</a> 
                    
                </div>
    
            </div>
    
            <div class="btn_buytokens tnDos">
                <a href="#"> buy tokens <i class="fas fa-play"></i> </i></a>
            </div>
           
    
        </div>
            <div>
                
            </div>
    
        </section>
        
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <div class="rallla"><img class="imagtok2" src="img/Token blanco 100 opacidad.svg" alt=""></div>
        termina home 2 -->

        <!-- empieza benefits -->
    <section class="benefits">
            <div class="espacio"></div>

        <div class="tobUno">
            <br><br><br><br>
            <h2>traditional</h2>
            <h1>BANKING</h1>
            <img src="img/Traditional banking.svg" alt="">
            <div class="textotb">
                <p>Lorem ipsum dolor dolor  <br> sit amet consectetur dolor
                <br> adipisicing elit. dolor <br>Lorem ipsum dolor dolor <br>sit amet consectetur dolor 
                <br>adipisicing elit. dolor <br>
                </p>
            </div>
            
        </div>

        <div class="tobDos">
            <h2>our</h2>
            <h1>FUND</h1>
            <img src="img/Our fund.svg" alt="">
            <div class="textoof textosto">
                <p>Lorem ipsum dolor <br> sit amet consectetur adipisicing elit. <br>
                Lorem ipsum dolor sit amet consectetur <br> adipisicing elit. Lorem ipsum dolor sit amet <br> consectetur adipisicing elit. <br> Neque voluptatibus dolorum magni <br> provident dignissimos  illo itaque mollitia <br> optio et,  recusandae asperiores impedit <br> est nesciunt  cumque fugit corrupti  <br> </p>
            </div>

            <div class="tobTres">
                <h2>benefits</h2>
            </div>
        </div>
    </section>
    <div class="rayDos"></div>
    <!-- termina benefits-->
    <div class="barra"></div>
    <!-- empieza how it -->
    <section class="howit">
        
        <div class="tken1h">
            <div class="texhowit">
                <h1>how it's works</h1>
            </div>
            <div class="tken1hima">
                <img src="img/Recurso 1.svg" alt="">
            </div>
            <div class="tken1hima">
                <img src="img/Flecha.svg" alt="">
            </div>
        </div>
        <div class="tken2h">
            <div class="textken2h">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto voluptates aperiam odio laboriosam ipsa provident tenetur esse </p>
            </div>
            <div class="imatken2h">
                <img src="img/Recurso 2.svg" alt="">
            </div>
        </div>
    </section>

    <!-- termina how it -->
    <footer></footer>

    <script src="js/script.js"></script>
    <script src="js/script1.js"></script>
    <script src="js/modernizr-custom.js"></script>

</body>
</html>
8
задан 25.06.2019, 20:34
0 ответов