css index

/*
    ##################################################
    #                                                #
    #        Univerzitet Sinergija, Bijeljina        #
    #     Fakultet za računarstvo i informatiku      #
    #                                                #
    #              Predmet: Multimedija              #
    #                                                #
    #        MSc. Aleksandar Sandro Cvetković        #
    #                                                #
    #                     VEŽBE 2                    #
    #                                                #
    ##################################################
*/

/* Main CSS */
body, html {
  height: 100%;
  font-family: Verdana;
  color:#aaaaaa;
  margin: 0;
  overflow-x: hidden;
}

/* Znak "*" označava sve html tagove
Ukoliko je div element bez "box-sizing: border-box;" npr.

#jedan {
  width: 300px;
  padding: 40px;
  border: 2px solid red;
}

Onda se za širinu ovog diva uzima njegova širina od 300px + padding od 40px = 340px širine. Međutim ukoliko je div element sa "box-sizing: border-box;" onda isti div tretira kao da mu je širina samo 300px i padding ne ulazi u tu širinu. Npr. bez box sizing-a div "jedan" i div "dva" su različite širine, ali sa "box-sizing: border-box" su jednake širine.

#dva {
  width: 300px;
  padding: 10px;
  border: 2px solid red;
} */
* {
  box-sizing: border-box;
}

h3 {
	font-size: 30px;
	color: #444;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 20px;
}

/* Vertikalni meni */
/*
.menu {
  float:left;
  width:20%;
  text-align:center;
}

.menu a {
  background-color:#e5e5e5;
  padding:8px;
  margin-top:7px;
  display:block;
  width:100%;
  color:black;
}*/

/* Header CSS */
#header {
  overflow: hidden;
  padding: 20px 10px;
}

#header a {
  float: left;
  color: black;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

#header a.logo {
  font-size: 25px;
  font-weight: bold;
  font-family: 'Crete Round', serif;
}

#header a.logo:hover {
  background-color: #fff;
}

#header a:hover {
  background-color: #ddd;
  color: black;
}

/*
#header a.active {
  background-color: dodgerblue;
  color: white;
}*/

.header-right {
  float: right;
}

.color {
  color: #02b8dd;
}

/* Responsive design - Meni */
@media screen and (max-width: 500px) {
  #header a {
    float: none;
    display: block;
    text-align: left;
  }

  .header-right {
    float: none;
  }
}

/* Hero sekcija */
#hero-image {
  /* "linear-gradient" se koristi kako bi kreirali tamni sloj preko slike postavljene za pozadinu. Ovakav način omogućava da tekst koji se nalazi na slici bude jasno vidljiv */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url("../images/hero.jpg");

  /* Ukoliko je potrebno samo učitati sliku kao pozadinu bez efekata */
  /* background-image: url("../images/hero.jpg"); */

  /* Visina slike */
  height: 55%;
  /* Pozicioniranje i centriranje slike kako bi se skalirala prikladno na svim ekranima */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Pozicioniranje teksta na sredinu slike */
/* Ovakav pristup se najčešće koristi za pozicioniranje teksta na sredinu, plus da bude odmah i responsive. Uz apsolutno pozicioniranje često ide relativno. To znači da imamo primarni div "hero-image" i on ima "position: relative" a potom imamo div unutar njega "hero-text" koji ima "position:absolute" tj. apsolutno je pozicioniran na sredinu. Znači pošto primarni div ima relativno pozicioniranje to znači da div unutar njega centriran i ne može da ide izvan visine i širine primarnog div-a. Ukoliko primarni div nema relativno pozicioniranje to znači da div unutar njega nema granice i može bukvalno da bude pozicioniran i izvan rezolucije ekrana. Takođe pozicioniranje se vrši pomoću "top", "right", "left" i "bottom" atributa */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
}

.button-hero {
	display: block;
	background: #02b8dd;
	border-radius: 3px;
	color: #fff;
	width: 180px;
	height: 50px;
	font-size: 20px;
	line-height: 50px;
  margin: 0 auto;
  text-decoration: none;
  border: 1px solid #02b8dd;
}

.button-hero:hover {
	background-color: #444;
  color: #fff;
  border: 1px solid #fff;
}

/* Features sekcija */
#features {
  margin: 40px 0px;
  padding: 0px 15px;
}

/* Kolone (4 kolone jedna pored druge) */
.column {
  float: left;
  width: 25%; /* 33.3% za 3 kolone u jednom redu, za 2 50% */
  padding: 0 10px;
}

/* Ukoliko je potrebno napraviti override tj. ukoliko želimo da preko već definisanih vrednosti definišemo nove koje su važnije. Npr. upotrebom "!important" naznačili smo da sve ikonice treba da imaju istu definisanu boju. Na ovaj način postavili smo da definisana boja "#02b8dd" ima veći prioritet nego pojedninačne definisane boje za svaku ikonicu posebno  */
/*
.fab {
  color: #02b8dd !important;
}*/

/* Responsive design - Kolone */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* Kartice */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* senka iza kartice */
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}

/* Main sekcija */
#main {
  background-color: #f8fafa;
  margin-top: 40px;
  margin-bottom: 40px;
  padding-top: 30px;
  text-align: center;
  float: left;
}

.video {
  padding: 40px;
}

/* Responsive design - Youtube video */
.youtube-responsive-container {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
}

.youtube-responsive-container iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

/* Secondary sekcija */
#secondary {
	padding: 60px 0;
  text-align: center;
}

/* Plava linija ispod naslova */
.plava-linija {
  width: 300px; /* 50% */
  margin: 0px auto;
  border-top: 2px solid #02b8dd;
}

/* Dugme Kontakt */
.button-contact {
	display: block;
	margin: 0 auto;
	border: 2px solid #02b8dd;
	color: #02b8dd;
	border-radius: 3px;
	width: 180px;
	height: 50px;
	font-size: 20px;
  line-height: 50px;
  text-decoration: none;
}

.button-contact:hover {
	background-color: #02b8dd;
	color: #fff;
}

/* Footer */
#footer {
  background-color:#e5e5e5;
  text-align:center;
  padding:10px;
}

/* Autor */
.credits a {
  color: #666;
  font-size: 12px;
  text-decoration: none;
}

.credits p {
  font-size: 12px;
}