Веб дизајн/К1 Јун 2021

Извор: SI Wiki
Пређи на навигацију Пређи на претрагу

Prvi kolokvijum u junskom roku 2021. godine održan je 10. juna. Postavka je dostupna sa stranice predmeta. Bootstrap biblioteka se uvozila preko minifikovanih JavaScript i CSS fajlova koji su bili dati u materijalima.

Rešenje

zadatak1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bundle.min.js"></script>
    <link rel="stylesheet" href="zadatak1.css">
    <title>Document</title>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 jumbotron">
                <nav class="navbar2">
                    <img src="./slike k1/logo.png" alt="Logo" class="logo justify-content-left">
                    <h2 class="naslov">Špageterija</h2>
                    <img src="./slike k1/logo.png" alt="Logo" class="logo justify-content-right">
                </nav>
                
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 d-flex midrow">
                <img src="./slike k1/slika1.jpg" alt="Bolonjeze" id="s1">
                <img src="./slike k1/slika2.jpg" alt="Karbonara" id="s2">
                <img src="./slike k1/slika3.jpg" alt="Arabiata" id="s3">
                
            </div>
        </div>



        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 bg-warning rounded">
                Najbolje špagete u gradu! Naručite i uverite se u to!
            </div>
        </div>
        <div class="row">
            <div class="class col-lg-4 col-md-4 col-sm-4"></div>
            
            <div class="col-lg-4 col-md-4 col-sm-4">
                <form action="">
                    <table class="table table-light table-striped">
                        <tr>
                            <td>Ime:</td>
                            <td colspan="2"><input type="text"></td>
                        </tr>
                        <tr>
                            <td>Prezime:</td>
                            <td colspan="2"><input type="text"></td>
                        </tr>
                        <tr>
                            <td>Testenina:</td>
                            <td colspan="2"><select>
                                <option value="Pene">Pene</option>
                                <option value="Fusili">Fusili</option>
                                <option value="Taljatele">Taljatele</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Dodatak</td>
                            <td colspan="2">
                                <input type="checkbox" value="Pesto sos" name="sos">Pesto sos
                                <input type="checkbox" value="Napoletana sos" name="sos">Napoletana sos&nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="checkbox" value="Bademi">Bademi
                                <input type="checkbox" value="Parmezan">Parmezan
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" class="text-center">
                                <button class="btn">Naruči</button>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="class col-lg-4 col-md-4 col-sm-4"></div>
        </div>
    </div>
    
</body>
</html>

zadatak1.css

.logo{
    width: 50px;
}

.navbar2{
    display: flex;
    justify-content: space-between;
}

.naslov{
    text-align: center;
    font-size: 28px;
    font-weight: bold;
}

.jumbotron{
    background-color: lightgray;
    padding-top: 60px;
    padding-bottom: 60px;
    margin-bottom: 10px;

}

#s1, #s2, #s3{
    width: 30%;
}

.midrow{
    justify-content: space-between;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 20px;
}
.bg-warning{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
}


.btn{
    background-color: lightsalmon;
    font-weight: bold;
    border: 2px solid black;
}

.btn:hover{
    background-color: lightgray;
}
Преузето из „https://siwiki.rs/w/index.php?title=Веб_дизајн/К1_Јун_2021&oldid=7511”