Веб дизајн/К1 2020 — разлика између измена

Тренутна верзија на датум 18. април 2024. у 11:15

Prvi kolokvijum 2020. godine održan je 11. marta. Bile su dve grupe, i postavka je dostupna sa stranice predmeta. Bootstrap biblioteka se uvozila preko minifikovanih JavaScript i CSS fajlova koji su bili dati u materijalima.

Grupa 1

Korišćene slike mogu se preuzeti ovde.

1. zadatak

Rešenje

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            header, nav, ul, li, section, main, form, p, label, input, body, h1, footer {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            body, section, header, nav, footer {
                width: 100%;
            }
            header > p {
                background-color: lightgray;
                padding: 5px;
                margin-bottom: 1px;
                text-align: right;
            }
            header > img {
                width: 100%;
            }
            nav {
                background-color: lightgray;
                padding: 5px;
            }
            nav > ul {
                display: flex;
                font-weight: bold;
                justify-content: center;
                list-style-type: none;
                width: 100%;
            }
            nav > ul > li:not(:last-child)::after {
                content: "|";
                padding: 5px;
            }
            section {
                background-color: lightgray;
                height: 500px;
                margin-top: 1px;
                text-align: center;
            }
            main {
                background-color: white;
                box-sizing: border-box;
                height: 100%;
                margin: 0 auto;
                padding: 3px;
                text-align: center;
                width: 1000px;
            }
            main > h1 {
                border-bottom: 1px solid lightgray;
                padding-top: 50px;
                padding-bottom: 20px;
            }
            .form-row > label {
                text-align: left;
            }
            main > form {
                box-sizing: border-box;
                margin: 20px auto;
                width: 400px;
            }
            .form-row {
                display: grid;
                grid-template-columns: 250px 1fr;
                margin-bottom: 3px;
            }
            .form-row > div {
                display: flex;
            }
            .submit-button {
                margin-top: 20px;
            }
            footer {
                background-color: lightgray;
                margin-top: 1px;
                padding: 10px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <header>
            <p>12.03.2020.</p>
            <img src="image.jpg" />
        </header>
        <nav>
            <ul>
                <li>Početna stranica</li>
                <li>O nama</li>
                <li>Kontakt</li>
            </ul>
        </nav>
        <section>
            <main>
                <h1>Postanite deo naše kompanije</h1>
                <form>
                    <p class="form-row">
                        <label for="ime">Ime firme:</label>
                        <input type="text" id="ime" name="ime">
                    </p>
                    <p class="form-row">
                        <label for="adresa">Adresa:</label>
                        <input type="text" id="adresa" name="adresa">
                    </p>
                    <p class="form-row">
                        <label for="mejl">Mejl:</label>
                        <input type="email" id="mejl" name="mejl">
                    </p>
                    <div class="form-row">
                        <label>Način plaćanja:</label>
                        <div>
                            <p>
                                <input type="radio" name="nacin" id="kartica">
                                <label for="kartica">Kartica</label>
                            </p>
                            <p>
                                <input type="radio" name="nacin" id="kes">
                                <label for="kes">Keš</label>
                            </p>
                        </div>
                    </div>
                    <p class="form-row">
                        <label for="tos">Slažem se sa uslovima korišćenja:</label>
                        <input type="checkbox" id="tos" name="tos">
                    </p>
                    <p class="form-row">
                        <label for="datum">Datum:</label>
                        <input type="date" id="datum" name="datum">
                    </p>
                    <input type="submit" value="Prijavi se" class="submit-button">
                </form>
            </main>
        </section>
        <footer>Copyright</footer>
    </body>
</html>

2. zadatak

Rešenje

`zadatak2.html`

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
        <link href="zadatak2.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg bg-light">
            <div class="container-fluid">
                <a class="navbar-brand fw-bold" href="#">Moj indeks</a>
                <div class="justify-content-end dropdown">
                    <a class="btn btn-success dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Petar Petrovic
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Profil</a></li>
                        <li><a class="dropdown-item" href="#">Podesavanja</a></li>
                        <li><a class="dropdown-item" href="#">Ocene</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Odjava</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container mt-15">
            <div class="row text-center justify-content-md-center">
                <div class="col-auto">
                    <h1 class="border-bottom pb-3 fw-bold">Moje ocene</h1>
                    <table class="table table-striped table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th>Predmet</th>
                                <th>Datum polaganja</th>
                                <th>Ocena</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Veb dizajn</td>
                                <td>10.9.2019.</td>
                                <td>10</td>
                            </tr>
                            <tr>
                                <td>Objektno orijentisano programiranje 2</td>
                                <td>11.6.2019.</td>
                                <td>9</td>
                            </tr>
                            <tr>
                                <td>Arhitektura racunara</td>
                                <td>28.6.2019.</td>
                                <td>10</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col col-lg-3 col-md-6 col-12 logo nordeus">
                    <a href="https://nordeus.com/">
                        <img src="nordeus.jpg" alt="Nordeus logo">
                    </a>
                </div>
                <div class="col col-lg-3 col-md-6 col-12 logo nvidia">
                    <a href="https://nvidia.com/">
                        <img src="nvidia.jpg" alt="Nvidia logo">
                    </a>
                </div>
                <div class="col col-lg-3 col-md-6 col-12 logo microsoft">
                    <a href="https://microsoft.com/">
                        <img src="microsoft.png" alt="Microsoft logo">
                    </a>
                </div>
                <div class="col col-lg-3 col-md-6 col-12 logo facebook">
                    <a href="https://facebook.com/">
                        <img src="facebook.png" alt="Facebook logo">
                    </a>
                </div>
            </div>
        </div>
        <footer class="container-fluid">
            <p class="text-center fw-bold fst-italic">
                Made by: Petar Petrovic
            </p>
        </div>
    </body>
</html>

`zadatak2.css`

:root {
    --bs-light-rgb: 144, 238, 144;
    --bs-bg-opacity: 1;
}

.navbar-brand {
    color: #5E5E5E;
    font-size: 28px;
}

.container {
    margin-top: 15px;
}

.logo {
    box-sizing: border-box;
    height: 40px;
    text-align: center;
}

.nordeus {
    background-color: #E7482A;
}

.nvidia {
    background-color: black;
}

.microsoft {
    background-color: #575352;
}

.facebook {
    background-color: #3B5998;
}

.logo img {
    height: 100%;
}

.logo img:hover {
    border-left: 1px dotted white;
    border-right: 1px dotted white;
}

footer {
    background-color: lightgreen;
    color: #5E5E5E;
}

Grupa 2

Korišćene slike mogu se preuzeti ovde.

Korišćene boje: lightblue header/footer pozadina, darkblue ivice na slikama, red ivice na slikama prilikom prelaska mišem preko njih. Veličina teksta u header u je 21px. Centralni deo stranice je odvojen od header a 25px. Deo sa rasporedom kolokvijuma i deo sa logo ima firme su za uređaje sa velikim ekranima zauzimaju centralni deo u odnosu 9:3, a za uređaje sa srednjom veličinom ekrana u odnosu 7:5. Sve slike su linkovi. Prelaskom miša preko slike dobija se efekat prikazan na logo u Facebook a.

1. zadatak

Овај задатак није решен. Помозите SI Wiki тако што ћете га решити.

2. zadatak

Rešenje

`zadatak2.html`

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


    <title>Document</title>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-sm-12" id="header">
                <nav class="navbar navbar-expand-sm navbar-light">
                    <img src="image.jpg" alt="Logo" id="logo">
                    <ul class="navbar-nav" id="lista">
                        <li class="nav-item"><a href="#" class="nav-link">Pocetna</a></li>
                        <li class="nav-item"><a href="#" class="nav-link active">Raspored</a></li>
                        <li class="nav-item"><a href="#" class="nav-link">Prijava ispita</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-9 col-md-7">
                <div id="rasporedklk">
                    Raspored Kolokvijuma
                </div>

                <table class="table text-center table-dark table-striped table-bordered">
                    <th>Predmet</th>
                    <th>Datum polaganja</th>
                    <th>Sala</th>
                    <tr>
                        <td>Veb dizajn</td>
                        <td>12.3.2020.</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>Objektno orijentisano programiranje 2</td>
                        <td>13.3.2020.</td>
                        <td>70</td>
                    </tr>
                    <tr>
                        <td>Arhitektura racunara</td>
                        <td>15.3.2020.</td>
                        <td>65</td>
                    </tr>
                </table>
            </div>
            <div class="col-lg-3 col-md-5 text-center"  id="slike">

                <div class="okoSlike">
                    <a href="#"><img src="nordeus.jpg" alt="Nordeus" class="firme"></a>
                </div>

                <div class="okoSlike">
                    <a href="#"><img src="nvidia.jpg" alt="Nvidia" class="firme"></a>
                </div>
                
                <div class="okoSlike">
                    <a href="#"><img src="microsoft.png" alt="Microsoft" class="firme"></a>
                </div>

                <div class="okoSlike">
                    <a href="#"><img src="facebook.png" alt="Facebook" class="firme"></a>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col-sm-12 text-center" id="footer">
                Made by: Pera Peric
            </div>
        </div>
    </div>
    
</body>
</html>

`zadatak2.css`

#header{
    background-color: lightblue;
    text-align: center;
    font-size: 21px;
}



#logo{
    width: 5%;
    height: 30px;
}

#lista{
    font-weight: bold;
}

#rasporedklk{
    margin-top: 25px;
    margin-bottom: 25px;
    text-align: center;
    font-size: 21px;
    font-weight: bold;
}

#slike{
    background-color: blue;
}

.okoSlike{
    padding: 5px;
}

.firme{
    height: 25%;
    border-style: dashed;
    border-color: darkblue;
}

.firme:hover{
    border-style: dashed;
    border-width: 5px;
    border-color: red;
}

#footer{
    background-color: lightblue;
    font-weight: bold;
}

Веб дизајн/К1 2020 — разлика између измена

Тренутна верзија на датум 18. април 2024. у 11:15

Садржај

Grupa 1

1. zadatak

Rešenje

2. zadatak

Rešenje

`zadatak2.html`

`zadatak2.css`

Grupa 2

1. zadatak

2. zadatak

Rešenje

`zadatak2.html`

`zadatak2.css`

Мени за навигацију

Веб дизајн/К1 2020 — разлика између измена

Тренутна верзија на датум 18. април 2024. у 11:15

Grupa 1

1. zadatak

Rešenje

2. zadatak

Rešenje

zadatak2.html

zadatak2.css

Grupa 2

1. zadatak

2. zadatak

Rešenje

zadatak2.html

zadatak2.css

Мени за навигацију

Претрага

`zadatak2.html`

`zadatak2.css`

`zadatak2.html`

`zadatak2.css`