consolidate all repos to one for archive
This commit is contained in:
BIN
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS.zip
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS.zip
Normal file
Binary file not shown.
46
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/index.html
Normal file
46
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Moja spletna stran</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Domov</a></li>
|
||||
<li><a href="izdelki.html">Izdelki</a></li>
|
||||
<li><a href="svetovanje.html">Svetovanje</a></li>
|
||||
<li><a href="http://estudij.um.si">Vaje</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="vsebina"> <!--Preimenoval article v div-->
|
||||
<div class="kartica">
|
||||
<h2>Naslov</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum. Curabitur in consectetur mauris, nec ultrices elit. Proin sit amet condimentum urna. Maecenas iaculis eros ac orci faucibus laoreet. Sed congue, diam in suscipit rhoncus, metus sem consequat nibh, in aliquet lacus ligula at neque. Fusce eu sem lorem. Vestibulum in tellus convallis, ultricies ligula a, consectetur dolor. Quisque felis ipsum, condimentum ut finibus nec, interdum semper dui. Ut tempus rutrum tincidunt. Phasellus pulvinar dolor et nunc imperdiet iaculis. Aliquam erat volutpat. Sed nec dolor sed nisl aliquam tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent posuere dapibus ipsum. Quisque ac mi pretium, faucibus nisi et, elementum nunc. Duis eu porta mauris, id ultrices dolor.
|
||||
</p>
|
||||
<figure>
|
||||
<img src="slika.jpg" />
|
||||
<figcaption>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="kartica">
|
||||
<h2>Video: Big Buck Bunny</h2>
|
||||
<video controls>
|
||||
<source src="mov_bbb.mp4" type="video/mp4">
|
||||
Your browser does not support HTML5 video.
|
||||
</video>
|
||||
<p>
|
||||
Ut non tempus dui, non euismod leo. Ut dignissim fermentum enim, vitae luctus nunc aliquam a. Donec in auctor purus, tempor porttitor orci. Ut sagittis sem eu lacus euismod pellentesque. Cras eu orci arcu. Nullam euismod mattis leo. Quisque vel volutpat ante, non posuere magna. In feugiat mi nunc.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
66
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/izdelki.html
Normal file
66
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/izdelki.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Moja spletna stran</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Domov</a></li>
|
||||
<li><a href="izdelki.html">Izdelki</a></li>
|
||||
<li><a href="svetovanje.html">Svetovanje</a></li>
|
||||
<li><a href="http://estudij.um.si">Vaje</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="vsebina">
|
||||
<div class="kartica izdelek">
|
||||
<h3>Procesor Intel Core-i9-7900X</h3>
|
||||
<img src="https://www.evetech.co.za/repository/ProductImages/intel-Core-i9-7900X-Processor-1000px-v1.jpg" />
|
||||
<div class="opis">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum. Curabitur in consectetur mauris, nec ultrices elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kartica izdelek">
|
||||
<h3>Grafična kartica GeForce RTX 2080 Ti</h3>
|
||||
<img src="https://asset.msi.com/resize/image/global/product/product_1_20180919185540_5ba22b2ce7ec4.png62405b38c58fe0f07fcef2367d8a9ba1/1024.png" />
|
||||
<div class="opis">
|
||||
<p>Etiam dignissim lectus purus, et rhoncus nibh dignissim at. Nullam lorem sem, sagittis eget ornare et, gravida ut felis. Duis lobortis, sem quis tincidunt accumsan, leo ante iaculis nulla, eget tincidunt dui massa tristique quam. Phasellus dignissim odio sit amet congue molestie. Sed vestibulum erat ac lectus facilisis suscipit. Nam sodales ligula et risus aliquam, vitae ultrices sem ultrices. Curabitur viverra ac sem in aliquet. Morbi dapibus dui mi, sit amet vulputate felis sollicitudin in. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tristique ornare efficitur. Phasellus vulputate mollis ante ac tincidunt. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kartica izdelek">
|
||||
<h3>Grafična kartica GeForce RTX 2080 Ti</h3>
|
||||
<img src="https://asset.msi.com/resize/image/global/product/product_1_20180919185540_5ba22b2ce7ec4.png62405b38c58fe0f07fcef2367d8a9ba1/1024.png" />
|
||||
<div class="opis">
|
||||
<p>Etiam dignissim lectus purus, et rhoncus nibh dignissim at. Nullam lorem sem, sagittis eget ornare et, gravida ut felis. Duis lobortis, sem quis tincidunt accumsan, leo ante iaculis nulla, eget tincidunt dui massa tristique quam. Phasellus dignissim odio sit amet congue molestie. Sed vestibulum erat ac lectus facilisis suscipit. Nam sodales ligula et risus aliquam, vitae ultrices sem ultrices. Curabitur viverra ac sem in aliquet. Morbi dapibus dui mi, sit amet vulputate felis sollicitudin in. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tristique ornare efficitur. Phasellus vulputate mollis ante ac tincidunt. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kartica izdelek">
|
||||
<h3>Procesor Intel Core-i9-7900X</h3>
|
||||
<img src="https://www.evetech.co.za/repository/ProductImages/intel-Core-i9-7900X-Processor-1000px-v1.jpg" />
|
||||
<div class="opis">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum. Curabitur in consectetur mauris, nec ultrices elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kartica izdelek">
|
||||
<h3>Procesor Intel Core-i9-7900X</h3>
|
||||
<img src="https://www.evetech.co.za/repository/ProductImages/intel-Core-i9-7900X-Processor-1000px-v1.jpg" />
|
||||
<div class="opis">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum. Curabitur in consectetur mauris, nec ultrices elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kartica izdelek">
|
||||
<h3>Grafična kartica GeForce RTX 2080 Ti</h3>
|
||||
<img src="https://asset.msi.com/resize/image/global/product/product_1_20180919185540_5ba22b2ce7ec4.png62405b38c58fe0f07fcef2367d8a9ba1/1024.png" />
|
||||
<div class="opis">
|
||||
<p>Etiam dignissim lectus purus, et rhoncus nibh dignissim at. Nullam lorem sem, sagittis eget ornare et, gravida ut felis. Duis lobortis, sem quis tincidunt accumsan, leo ante iaculis nulla, eget tincidunt dui massa tristique quam. Phasellus dignissim odio sit amet congue molestie. Sed vestibulum erat ac lectus facilisis suscipit. Nam sodales ligula et risus aliquam, vitae ultrices sem ultrices. Curabitur viverra ac sem in aliquet. Morbi dapibus dui mi, sit amet vulputate felis sollicitudin in. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tristique ornare efficitur. Phasellus vulputate mollis ante ac tincidunt. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/mov_bbb.mp4
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/mov_bbb.mp4
Normal file
Binary file not shown.
BIN
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/slika.jpg
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/slika.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
251
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/style.css
Normal file
251
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/style.css
Normal file
@@ -0,0 +1,251 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
|
||||
|
||||
html{
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background-color: #404040;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
padding: 0px; /*Določi zunanji odmik*/
|
||||
}
|
||||
|
||||
body{
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background-color: #404040;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
padding: 0px; /*Določi zunanji odmik*/
|
||||
margin-top: 110px;
|
||||
}
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
header{
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
h1{
|
||||
background-color: black;
|
||||
color: orange;
|
||||
text-align: center;
|
||||
outline-offset: 10px; /*Določi notranji odmik*/
|
||||
margin-bottom: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
|
||||
nav ul{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
nav ul li{
|
||||
float: left;
|
||||
}
|
||||
|
||||
nav ul li a{
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav ul li a:hover{
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
div.vsebina{
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
div.kartica{
|
||||
background-color: #707070;
|
||||
margin-top: 20px;
|
||||
color: white;
|
||||
margin: 1%;
|
||||
}
|
||||
|
||||
h2{
|
||||
display: block;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
background-color: orange;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p{
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/*INDEX*/
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figure{
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
figcaption{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
video{
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/*IZDELKI*/
|
||||
|
||||
h3{
|
||||
background-color: orange;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin: 0px;
|
||||
height: 40px;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
div.izdelek p{
|
||||
margin: 0px;
|
||||
padding: 5px;
|
||||
height: 150px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
div.izdelek img{
|
||||
max-width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
div.izdelek{
|
||||
display: inline-block;
|
||||
height: 400px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
/*SVETOVANJE*/
|
||||
|
||||
form.obrazec{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
label.oznaka{
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
input[type=text]{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
background-color: #cccccc;
|
||||
border-radius: 20px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 20px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
textarea{
|
||||
border-width: 20px;
|
||||
display:block;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
resize: none;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-radius: 2px;
|
||||
background-color: #cccccc;
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
textarea:focus{
|
||||
border-color: pink;
|
||||
}
|
||||
|
||||
input[type=submit]{
|
||||
background-color: orange;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
margin-top: 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type=submit]:hover{
|
||||
background-color: darkorange;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*RESIZE*/
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
label.radio-gumb{
|
||||
display: block;
|
||||
}
|
||||
|
||||
label.checkbox-gumb{
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.izdelek{
|
||||
width:90%;
|
||||
}
|
||||
|
||||
|
||||
nav ul{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
nav ul li{
|
||||
float: none;
|
||||
}
|
||||
|
||||
nav ul li a{
|
||||
display: block;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body{
|
||||
margin-top: 210px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 601px) and (max-width: 1000px) {
|
||||
|
||||
label.radio-gumb{
|
||||
display: block;
|
||||
}
|
||||
|
||||
label.checkbox-gumb{
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.izdelek{
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
45
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/svetovanje.html
Normal file
45
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/svetovanje.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Moja spletna stran</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Domov</a></li>
|
||||
<li><a href="izdelki.html">Izdelki</a></li>
|
||||
<li><a href="svetovanje.html">Svetovanje</a></li>
|
||||
<li><a href="http://estudij.um.si">Vaje</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="vsebina">
|
||||
<div class="kartica">
|
||||
<h2>Anketa</h2>
|
||||
<form class="obrazec">
|
||||
<label class="oznaka">Ime in priimek:</label><input type="text"/><br/>
|
||||
<label class="oznaka">Kraj:</label><input type="text"/><br/>
|
||||
<label class="oznaka">Elektronska pošta:</label><input type="text"/><br/>
|
||||
<label class="oznaka">Vrsta računalnika:</label>
|
||||
<label class="radio-gumb" for="namizni"><input type="radio" name="vrsta" id="namizni">Namizni<span class="pika"></span></label>
|
||||
<label class="radio-gumb" for="prenosni"><input type="radio" name="vrsta" id="prenosni">Prenosni<span class="pika"></span></label>
|
||||
<label class="radio-gumb" for="allinone"><input type="radio" name="vrsta" id="allinone">All-In-One<span class="pika"></span></label>
|
||||
<br/>
|
||||
<label class="oznaka">Namen uporabe:</label>
|
||||
<label class="checkbox-gumb" for="igre"><input name="namen" type="checkbox" id="igre">Igranje iger<span class="kljukica"></label>
|
||||
<label class="checkbox-gumb" for="video"><input name="namen" type="checkbox" id="video">Video obdelava<span class="kljukica"></label>
|
||||
<label class="checkbox-gumb" for="3d"><input name="namen" type="checkbox" id="3d">3D modeliranje<span class="kljukica"></label>
|
||||
<label class="checkbox-gumb" for="ml"><input name="namen" type="checkbox" id="ml">Strojno učenje<span class="kljukica"></label>
|
||||
<br/>
|
||||
<label class="oznaka">Komentar:</label><textarea></textarea><br/>
|
||||
<input type="submit" value="Pošlji"/>
|
||||
</form>
|
||||
</div>
|
||||
<div id="content">
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 831 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 539 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 656 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 313 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 590 KiB |
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Demo vaja 3 - CSS</title>
|
||||
<link rel="stylesheet" href="./styles/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Demo vaja 3 - CSS</h1>
|
||||
</header>
|
||||
<div id="textContainer">
|
||||
<h2>Besedilo</h2>
|
||||
<div>
|
||||
<p class="sampleParagraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu posuere ipsum. Pellentesque a efficitur eros. Ut lacinia, ex eu faucibus rutrum, libero ligula ultrices est, ut venenatis est arcu nec massa. Donec ultricies ante purus, sed tincidunt justo lobortis ut. Fusce nec mauris in odio accumsan varius id non ante. Suspendisse sodales felis eu nisi malesuada congue sed a dolor. Aenean sed velit ligula. Nulla vitae lorem consectetur, faucibus erat vitae, sollicitudin quam. Sed facilisis sit amet ante vel auctor. Phasellus commodo, mi at egestas gravida, lacus metus tempus dui, a dictum leo quam quis massa. Sed molestie purus nisl, vitae finibus eros varius id. Nam posuere tempus risus vitae consequat. Donec posuere bibendum nibh, non semper purus eleifend ut. Etiam mauris orci, dignissim ut blandit id, sollicitudin eget sem. Donec pretium tincidunt est eu imperdiet. Nulla sodales diam sed elementum ultricies.
|
||||
</p>
|
||||
<p class="sampleParagraph">
|
||||
Etiam ornare interdum odio. Praesent eget lorem interdum, vehicula sem vitae, fringilla risus. Etiam eleifend massa magna, non interdum ipsum lacinia et. Aenean vel posuere justo. Praesent eu felis volutpat, placerat quam et, feugiat orci. Donec sollicitudin sapien quis mauris pellentesque placerat. Nam tempor erat sed euismod ultricies. Fusce aliquam eleifend neque accumsan fermentum. Nam sed mauris id arcu vehicula accumsan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="columnContainer">
|
||||
<div id="leftColumn">
|
||||
<figure>
|
||||
<figcaption id="feriImageCaption">Vaša fakulteta</figcaption>
|
||||
<img src="./images/feri.jpg" id="feriImage" alt="FERI">
|
||||
</figure>
|
||||
<div>
|
||||
Promocijski video si lahko ogledate na <a href="https://www.youtube.com/watch?v=wVacjt_8Ha4&t=1s&ab_channel=FERIUM" target="_blank">povezavi</a>.
|
||||
</div>
|
||||
</div>
|
||||
<div id="rightColumn">
|
||||
<figure id="ectsFigure">
|
||||
<table id="ectsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Predmet</th>
|
||||
<th>ECTS točke</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr id="USS">
|
||||
<td>Uvod v svetovni splet</td>
|
||||
<td>6</td>
|
||||
</tr>
|
||||
<tr id="Programiranje1">
|
||||
<td>Programiranje 1</td>
|
||||
<td>7</td>
|
||||
</tr>
|
||||
<tr id="Matematika1">
|
||||
<td>Matematika 1</td>
|
||||
<td>6</td>
|
||||
</tr>
|
||||
<tr id="SPO">
|
||||
<td>Sodobna programska orodja</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div id="flexContainer">
|
||||
<div id="flexLeftColumn"> <!-- pozor: izjemoma slike niso znotraj značke <figure> -->
|
||||
<img src="./images/dallas_mavericks.jpg" alt="DallasMavericks" class="leftColumnFlexImage">
|
||||
<img src="./images/ferrari.jpg" alt="Ferrari" class="leftColumnFlexImage">
|
||||
</div>
|
||||
<div id="flexRightColumn">
|
||||
<img src="./images/K2.jpg" alt="K2" class="rightColumnFlexImage">
|
||||
<img src="./images/snowboarding.jpg" alt="Snowboarding" class="rightColumnFlexImage">
|
||||
<img src="./images/rally.jpg" alt="Rally" class="rightColumnFlexImage">
|
||||
<img src="./images/ultrawide_sunset.jpg" alt="Sunset" class="rightColumnFlexImage">
|
||||
<img src="./images/pag.jpg" alt="IslandPag" class="rightColumnFlexImage">
|
||||
<img src="./images/surfing.jpg" alt="Surfing" class="rightColumnFlexImage">
|
||||
<img src="./images/kitesurfing.jpg" alt="Kitesurfing" class="rightColumnFlexImage">
|
||||
</div>
|
||||
</div>
|
||||
<footer id="footer">
|
||||
<p>Več informacij je na voljo na <a href="https://feri.um.si/" target="_blank">povezavi</a>.</p>
|
||||
<p>Avtor: Ime Priimek</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,167 @@
|
||||
html{
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body{
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#columnContainer{
|
||||
height: 50%;
|
||||
width: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#textContainer{
|
||||
height: 30%;
|
||||
margin-bottom: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#leftColumn{
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
#rightColumn{
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
footer{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1,h2{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sampleParagraph{
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#textContainer p:first-of-type{
|
||||
color: darkblue;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#textContainer p:first-of-type::first-letter{
|
||||
color: orange;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
a[href*="youtube"]{
|
||||
color: red;
|
||||
}
|
||||
|
||||
#feriImage {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
#feriImage:hover{
|
||||
border-radius: 40%;
|
||||
opacity: 0.7; /*0-1*/
|
||||
transition: 250ms;
|
||||
}
|
||||
|
||||
#feriImageCaption{
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
#ectsFigure{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#ectsTable {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#ectsTable td:nth-child(1){
|
||||
border: 1px solid black;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#ectsTable td:nth-child(2){
|
||||
border: 1px solid red;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#ectsTable td:nth-child(even){
|
||||
background-color: #b3b3b3;
|
||||
}
|
||||
|
||||
#ectsTable td:nth-child(odd){
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#ects tr:hover{
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*flex box*/
|
||||
|
||||
#flexContainer{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#flexLeftColumn{
|
||||
display: flex;
|
||||
flex: 1 0 300px; /*dovoli širjenje, dovoli krčenje, začetna širina*/
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#flexRightColumn{
|
||||
display: flex;
|
||||
flex: 70%;
|
||||
flex-flow: row wrap;
|
||||
gap: 20px;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.leftColumnFlexImage{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.rightColumnFlexImage{
|
||||
max-width: 100%;
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:800px){
|
||||
#leftColum{
|
||||
width: 100%;
|
||||
}
|
||||
#rightColum{
|
||||
width: 100%;
|
||||
}
|
||||
footer{
|
||||
float: left;
|
||||
}
|
||||
#flexContainer{
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
row-gap:20px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user