Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <style>
- @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
- body, html {
- height: 100%;
- margin: 0;
- font-family: 'Roboto', sans-serif;
- font: 400 15px/1.8 'Roboto', sans-serif;
- color: #777;
- }
- /* Boja pozadine u topnav */
- .topnav {
- background-color: #333;
- overflow: hidden;
- justify-content: space-between;
- align-items: center;
- display: flex;
- opacity: 0.7;
- text-transform: uppercase;
- }
- .topnav:hover{
- opacity: 1;
- transition: 0.6s;
- }
- /* Linkovi u navbar-u*/
- .topnav a {
- float: left;
- color: #f2f2f2;
- text-align: center;
- padding: 14px 40px;
- text-decoration: none;
- font-size: 17px;
- }
- /* hover navbar */
- .topnav a:hover {
- background-color: #ddd;
- color: black;
- transition: 0.6s;
- }
- .topnav a.active {
- background-color: #cc4e00;
- }
- /* ----NASLOV----*/
- .caption span.border {
- background-color: #111;
- color: #cc4e00;
- padding: 18px;
- font-size: 25px;
- letter-spacing: 10px;
- }
- /* ----POZADINE NA POČETNOJ----*/
- .bgimg-1, .bgimg-2, .bgimg-3 {
- position: relative;
- opacity: 0.65;
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- }
- .bgimg-1 {
- background-image: url("carpenter.jpg");
- height: 100%;
- }
- .bgimg-2 {
- background-image: url("cover2.jpg");
- height: 100%;
- }
- .caption {
- position: absolute;
- left: 0;
- top: 55%;
- width: 100%;
- text-align: center;
- color: #000;
- opacity: 0.9;
- text-transform: uppercase;
- -webkit-animation-name: naslov; /* Safari 4.0 - 8.0 */
- -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
- -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
- -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
- animation-name: naslov;
- animation-duration: 2s;
- animation-delay: 0.3s;
- animation-fill-mode: both;
- }
- @-webkit-keyframes naslov{
- from {top:15%;}
- to {top:55%;}
- }
- @keyframes naslov{
- from {top:15%;}
- to {top:55%;}
- }
- .poslovi{
- position: relative;
- opacity: 0.75;
- }
- .ponuda{
- position: absolute;
- top: 20px;
- left: 20px;
- background-color: chocolate;
- color: rgb(255, 246, 246);
- padding-left: 5px;
- padding-right: 5px;
- font-size: 20px;
- text-align: match-parent;
- }
- ul li{
- list-style-type: none;
- }
- </style>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Stolarija Mašić</title>
- <link rel="stylesheet" href="style.css">
- <link rel="icon" href="https://image.flaticon.com/icons/png/512/123/123586.png">
- </head>
- <body>
- <div class="bgimg-1">
- <div class="caption">
- <span class="border"><strong>Stolarija Mašić</strong></span><br>
- <span class="border"><b>061 - 696 - 730</b></span>
- </div>
- <div class="topnav">
- <a class="active" href="#">Početna</a>
- <a href="#">Poslovi</a>
- <a href="#">Kontakt</a>
- <a href="#">Galerija završenih radova</a>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement