Objektno Orijentisani Pub

Mislim da ovo ne moze ovako sa display block i inline-block, msm da mi ovde treba flexbox. Po redovima mogu da se eliminisu gapovi, ali po kolumnama tesko.
Ova slika je jako mala, jedino da stavim da je to background image. Ovako kao img tesko da moze da se nastima.
 
This game is easyyy (pewdiepie voice)!!
 

Prilozi

  • easy.JPG
    easy.JPG
    114,1 KB · Pregleda: 11
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            
        }
        .container{
            display: flex;           
            text-align: center;
            background-color: rgb(199, 129, 63); 
            margin: 0px;
            padding: 0px;   
            border: none; 
        }
        .text{
            font-size: 24px;
            color: rgb(228, 24, 17);
            position: absolute;
            top: 30%;
        }
        .picture{
            background-image: url(./baba.jfif);
            background-repeat: no-repeat;
            background-size: cover;
            box-sizing: content-box;           
            position: relative;           
            padding: 4px;
            flex-basis: 33%;           
            height: 300px;
        }
        .picture:hover{
            flex-basis: 40%;
            height: 400px;
        }
        nav {                       
            background-color: rgb(18, 32, 233);
            width: 100%;
        }
        li{
            padding: 10px;
            margin: 10px;
            display: inline-block;
            list-style-type: none;
            color: aliceblue;
            
        }
      
      
    </style>
</head>
<body>
    
    <div class="container">

        <div class="picture">
          
            <div class="text">
                <h1>SOME TEXT HERE!</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur sapiente saepe mollitia voluptate quidem itaque nam laborum architecto maxime eum, nisi facilis harum, nemo in earum ut eos consequuntur.</p>
            </div>
        </div>
        

        <div class="picture">           
            <div class="text">
                <h1>SOME TEXT HERE!</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur sapiente saepe mollitia voluptate quidem itaque nam laborum architecto maxime eum, nisi facilis harum, nemo in earum ut eos consequuntur.</p>
            </div>
        </div>

        <div class="picture">
            <div class="text">
                <h1>SOME TEXT HERE!</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur sapiente saepe mollitia voluptate quidem itaque nam laborum architecto maxime eum, nisi facilis harum, nemo in earum ut eos consequuntur.</p>
            </div>
            
        </div>

      
        
    </div> <!--End of first line-->
    <div class="container">
        <div class="picture">
            <div class="text">
                <h1>SOME TEXT HERE!</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur sapiente saepe mollitia voluptate quidem itaque nam laborum architecto maxime eum, nisi facilis harum, nemo in earum ut eos consequuntur.</p>
            </div>
            
        </div>
        <div class="picture">
            <div class="text">
                <h1>SOME TEXT HERE!</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur sapiente saepe mollitia voluptate quidem itaque nam laborum architecto maxime eum, nisi facilis harum, nemo in earum ut eos consequuntur.</p>
            </div>
            
        </div>
        <div class="picture">
            <div class="text">
                <h1>SOME TEXT HERE!</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur sapiente saepe mollitia voluptate quidem itaque nam laborum architecto maxime eum, nisi facilis harum, nemo in earum ut eos consequuntur.</p>
            </div>
            
        </div>

        

    </div><!--End of second line-->
    <div class="container">
        <div class="picture">
            <div class="text">
                <h1>SOME TEXT HERE!</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur sapiente saepe mollitia voluptate quidem itaque nam laborum architecto maxime eum, nisi facilis harum, nemo in earum ut eos consequuntur.</p>
            </div>
            
        </div>
        <div class="picture">
            <div class="text">
                <h1>SOME TEXT HERE!</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur sapiente saepe mollitia voluptate quidem itaque nam laborum architecto maxime eum, nisi facilis harum, nemo in earum ut eos consequuntur.</p>
            </div>
            
        </div>
        <div class="picture">
            <div class="text">
                <h1>SOME TEXT HERE!</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur sapiente saepe mollitia voluptate quidem itaque nam laborum architecto maxime eum, nisi facilis harum, nemo in earum ut eos consequuntur.</p>
            </div>
            
        </div>

        

    </div><!--End of tird line-->
    <nav>
        <li>HOME</li>
        <li>PRODUCTS</li>
        <li>DOCUMENTS</li>
        <li>CONTACT</li>
    </nav>
</body>
 
Prijavite se ili registrujte da biste poslali poruku.

Back
Top