Веб дизајн/К1 2022

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

Први колоквијум 2022. године одржан је 28. марта. Поставка је доступна са странице предмета. Боотстрап библиотека се увозила преко минификованих ЈаваСцрипт и ЦСС фајлова који су били дати у материјалима.

1. задатак

Решење

<!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/bootstrap.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-9 col-sm-12 text-left" id="header">
                Dobrodošli na portal!
            </div>

            <div class="col-lg-3 col-sm-12 d-flex justify-content-end" id="nav">
                <button type="button" class="btn btn-info">Početna &nbsp;&nbsp; Profil &nbsp;&nbsp; Poruke <span class="badge bg-danger">26</span></button>
            </div>
        </div>

        <div class="row" id="main">

            <div class="col-lg-3 col-sm-12" id="boja">
            </div>

            <div class="col-lg-6 col-sm-12">
                <div class="alert alert-info">
                    Za više informacija o dnevnoj tabeli, kliknite <a href="#" id="link1" class="alert-link">ovde.</a>
                </div>

                <ul class="pagination justify-content-center">
                    <li class="page-item"><a href="#" class="page-link">Prethodna</a></li>
                    <li class="page-item"><a href="#" class="page-link">5</a></li>
                    <li class="page-item"><a href="#" class="page-link">6</a></li>
                    <li class="page-item"><a href="#" class="page-link active">7</a></li>
                    <li class="page-item"><a href="#" class="page-link text-muted">Sledeća</a></li>
                </ul>

                <table class="table table-bordered table-info text-center">
                    <th>Korisničko ime</th>
                    <th>Nivo</th>
                    <th>Više informacija</th>
                    <tr>
                        <td>ranger99</td>
                        <td>32</td>
                        <td><a href="#">više</a></td>
                    </tr>
                    <tr>
                        <td>c0c0s</td>
                        <td>31</td>
                        <td><a href="#">više</a></td>
                    </tr>
                    <tr>
                        <td>hello_world</td>
                        <td>29</td>
                        <td><a href="#">više</a></td>
                    </tr>
                </table>

            </div>

            <div class="col-lg-3 col-sm-12" id="boja">
            </div>

        </div>

        <div class="row" id="footer">

            <hr style="color: aqua;">

            <div class="text-center" id="donate">
                Donirajte:
                <span class="badge bg-dark">5$</span><input type="radio" name="donacija">
                <span class="badge bg-dark">10$</span><input type="radio" name="donacija">
                <span class="badge bg-dark">25$</span><input type="radio" name="donacija">
                <button type="button" class="btn btn-info">Doniraj</button>
            </div>

            <hr style="color: aqua; height: 5px;">

        </div>
    </div>
    
</body>
</html>
zadatak1.css
#header{
    font-size: 28px;
    font-weight: bold;
}

#link1{
    font-weight: bold;
    text-decoration: underline;
}

#boja{
    background-color: lightblue;
}

#main{
    padding-top: 20px;
}

#footer{
    padding-top: 15px;
}

#donate{
    padding-bottom: 15px;
}

hr{
    height: 10px;
    margin-bottom: 5px;
}