Objektno Orijentisani Pub

Baby Yoda:
Anyway, je li ovako nešto:

https://jsfiddle.net/gh1vm4d0/

Raširi dole slider da bi video skroz široko, lepo. Nije ništa responsive. Rekoh ti da je samo vizuelno zadovoljilo kriterijum. :mrgreen:
Kliknite za proširenje...
background iza ovog prvog teksta je drugaciji od ovog iza kolumni.......to nije problem samo mozda staviti istu boju....ali kad je fotka videlo bi se
druga stvar kolumne-svaka vodi svoju politiku :lol: kao i fotke

nav bar si potrefio kako mi treba :hvala::tick::tick::tick::tick::tick::tick::tick::tick::tick::tick::tick::tick::tick::tick::tick:
 
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>
        img {
            height: 200px;
            width: auto;
        }
        #button{
            display: inline-block;
            padding: 10px;
            background-color: rgb(37, 223, 223);
        }
        li {
            display: inline-block;
            text-decoration: none;
            list-style-type: none;
            padding: 10px;
        }
        .grid-container{
            
            display: grid;            
            border: 1px solid red;
        }
        .grid-item-nav{
            background-color: rgb(215, 226, 51);
            width: 100%;
            border: 1px solid red;
            
        }
        .grid-item-top{
            text-align: center;
            border: 1px solid red;
            padding: 10px;
            background-color: cornflowerblue;
        }                
        .grid-item-bottom{
            border: 1px solid red;
            height: max-content;
        }
        #flex-cont{
            
            text-align: center;
            display: flex;
        }
        .flex-item-left{
            padding: 10px 10px;
            flex-basis: 50%;
            border: 1px solid rgb(94, 27, 218);
            background-color: blueviolet;
            
        }
        .flex-item-right{
            padding: 10px 10px;
            flex-basis: 50%;
            border: 1px solid rgb(94, 27, 218);
            background-color: rgb(226, 43, 43);
            
            
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item-nav">
            <ul><li>Home</li><li>About</li><li>Contact</li></ul>
        </div>
        <div class="grid-item-top">
            <h1>VELIKI NASLOV CLANKA</h1>
            <img style="height:300px ;" src="./baba.jfif" alt="bakutaner" srcset="">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione voluptas ex consequuntur mollitia velit? Eligendi voluptates rem quos deleniti blanditiis, debitis ut ea velit ducimus voluptatum repellendus cumque placeat adipisci.</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione voluptas ex consequuntur mollitia velit? Eligendi voluptates rem quos deleniti blanditiis, debitis ut ea velit ducimus voluptatum repellendus cumque placeat adipisci.</p>
            <li id="button">Read more!</li>
        </div>
        <div id="flex-cont">
            <div class="flex-item-left">
                <h2>HEADING 1</h2>
                <img src="./download.jfif" alt="cat" srcset="">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium ipsa debitis, odio veniam eveniet ratione molestiae quam voluptates laudantium, voluptate, reiciendis adipisci alias. Nihil dolores doloremque quam laudantium velit doloribus?</p>
                <li id="button">CLICK ME!</li>
            </div>                
                <div class="flex-item-right">
                <h2>HEADING 2</h2>
                <img src="./StockPhotoBanner.jpg" alt="cat" srcset="">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium ipsa debitis, odio veniam eveniet ratione molestiae quam voluptates laudantium, voluptate, reiciendis adipisci alias. Nihil dolores doloremque quam laudantium velit doloribus?</p>
                <li id="button">CLICK ME!</li>
            </div>
        </div>
        <div class="grid-item-bottom">5</div>
        
      </div>
</body>
</html>
 
Nemam vremena vise, istice mi radno vreme uskoro :lol:
 

Prilozi

  • hue2.JPG
    hue2.JPG
    55,3 KB · Pregleda: 10
  • hue.JPG
    hue.JPG
    58,1 KB · Pregleda: 9
bmaxa:
Secer mi udario na noge ne na oci. Da je na oci, oslepeo bih i mogao samo u invalidsku...
Kliknite za proširenje...
Onda se smatraj srećnim. Jesi li razmatrao da napraviš nešto čime bi pomogao ljudima koji ne vide ili imaju poteškoća sa vidim da programiraju? Na foru glasovnih komandi u kombinaciji sa tastaturom, naravno. Ali za to bi trebao poseban editor namenjen tome koji bi slušao. Lupam sada :D
 
Baby Yoda:
Onda se smatraj srećnim. Jesi li razmatrao da napraviš nešto čime bi pomogao ljudima koji ne vide ili imaju poteškoća sa vidim da programiraju? Na foru glasovnih komandi u kombinaciji sa tastaturom, naravno. Ali za to bi trebao poseban editor namenjen tome koji bi slušao. Lupam sada :D
Kliknite za proširenje...
Jedan moj drug koji je gluv, je imao dosta poteskoca da nadje posao jer svi navikli da parlaju preko chata. Slep tesko da bi mogao ikad da se zaposli.
 
Prijavite se ili registrujte da biste poslali poruku.

Back
Top