Add files via upload
This commit is contained in:
GitHub
parent
944bec5481
commit
0b4f66e203
BIN
css/Solid_brown.svg.png
Normal file
BIN
css/Solid_brown.svg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
181
css/steev.css
Normal file
181
css/steev.css
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
* {
|
||||||
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||||
|
font-size: 12pt;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Container CSS
|
||||||
|
*/
|
||||||
|
.container {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
@media (min-width: 770px) {
|
||||||
|
.container {
|
||||||
|
width: 750px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.container {
|
||||||
|
width: 970px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.container {
|
||||||
|
width: 1170px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
NavBar CSS
|
||||||
|
*/
|
||||||
|
.nav {
|
||||||
|
position: relative;
|
||||||
|
background-color: aliceblue;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
ul.nav-list {
|
||||||
|
display: flex;
|
||||||
|
margin:0;
|
||||||
|
padding: 5px;
|
||||||
|
min-height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
li.nav-item{
|
||||||
|
float:left;
|
||||||
|
list-style: none;
|
||||||
|
color:black;
|
||||||
|
font-size: 10pt;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
li.nav-item:hover{
|
||||||
|
font-size: 12pt;
|
||||||
|
}
|
||||||
|
a.brand {
|
||||||
|
position: inherit;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Dropdown
|
||||||
|
*/
|
||||||
|
.dropdown {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
min-width: 160px;
|
||||||
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||||
|
padding: 12px 16px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.dropdown:hover .dropdown-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
SlideShow CSS
|
||||||
|
*/
|
||||||
|
* {box-sizing: border-box}
|
||||||
|
body {font-family: Verdana, sans-serif; margin:0}
|
||||||
|
.mySlides {display: none}
|
||||||
|
img {vertical-align: middle;}
|
||||||
|
|
||||||
|
/* Slideshow container */
|
||||||
|
.slideshow-container {
|
||||||
|
max-width: 1000px;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Next & previous buttons */
|
||||||
|
.prev, .next {
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: auto;
|
||||||
|
padding: 16px;
|
||||||
|
margin-top: -22px;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
transition: 0.6s ease;
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Position the "next button" to the right */
|
||||||
|
.next {
|
||||||
|
right: 0;
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* On hover, add a black background color with a little bit see-through */
|
||||||
|
.prev:hover, .next:hover {
|
||||||
|
background-color: rgba(0,0,0,0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Caption text */
|
||||||
|
.text {
|
||||||
|
color: #f2f2f2;
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 8px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Number text (1/3 etc) */
|
||||||
|
.numbertext {
|
||||||
|
color: #f2f2f2;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The dots/bullets/indicators */
|
||||||
|
.dot {
|
||||||
|
cursor: pointer;
|
||||||
|
height: 15px;
|
||||||
|
width: 15px;
|
||||||
|
margin: 0 2px;
|
||||||
|
background-color: #bbb;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
transition: background-color 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active, .dot:hover {
|
||||||
|
background-color: #717171;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fading animation */
|
||||||
|
.fade {
|
||||||
|
-webkit-animation-name: fade;
|
||||||
|
-webkit-animation-duration: 1.5s;
|
||||||
|
animation-name: fade;
|
||||||
|
animation-duration: 1.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fade {
|
||||||
|
from {opacity: .4}
|
||||||
|
to {opacity: 1}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
from {opacity: .4}
|
||||||
|
to {opacity: 1}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* On smaller screens, decrease text size */
|
||||||
|
@media only screen and (max-width: 300px) {
|
||||||
|
.prev, .next,.text {font-size: 11px}
|
||||||
|
}
|
||||||
1
css/steevcss.min.css
vendored
Normal file
1
css/steevcss.min.css
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
*{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:12pt}body{margin:0;padding:0}.container{margin-right:auto;margin-left:auto}@media (min-width:770px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.nav{position:relative;background-color:#f0f8ff;top:0;left:0;right:0}ul.nav-list{display:flex;margin:0;padding:5px;min-height:60px;line-height:60px}li.nav-item{float:left;list-style:none;color:#000;font-size:10pt;margin-left:10px}li.nav-item:hover{font-size:12pt}a.brand{position:inherit;display:flex}*{box-sizing:border-box}body{font-family:Verdana,sans-serif;margin:0}.mySlides{display:none}img{vertical-align:middle}.slideshow-container{max-width:1000px;position:relative;margin:auto}.next,.prev{cursor:pointer;position:absolute;top:50%;width:auto;padding:16px;margin-top:-22px;color:#fff;font-weight:700;font-size:18px;transition:.6s ease;border-radius:0 3px 3px 0;user-select:none}.next{right:0;border-radius:3px 0 0 3px}.next:hover,.prev:hover{background-color:rgba(0,0,0,.8)}.text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center}.numbertext{color:#f2f2f2;font-size:12px;padding:8px 12px;position:absolute;top:0}.dot{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color .6s ease}.active,.dot:hover{background-color:#717171}.fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}@keyframes fade{from{opacity:.4}to{opacity:1}}@media only screen and (max-width:300px){.next,.prev,.text{font-size:11px}}
|
||||||
54
index.html
Normal file
54
index.html
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>steev CSS</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/steev.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="nav">
|
||||||
|
<ul class="nav-list">
|
||||||
|
<a href="/" class="list-item brand"><img height="60" src="https://testcreative.co.uk/wp-content/uploads/2018/08/logo.png" alt="dev-icon"></a>
|
||||||
|
<li class="nav-item">Hello World</li>
|
||||||
|
<li class="nav-item">Hello World</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<!-- Slideshow Container-->
|
||||||
|
<div class="slideshow-container">
|
||||||
|
|
||||||
|
<!-- a slide -->
|
||||||
|
<div class="mySlides fade">
|
||||||
|
<div class="numbertext">1 / 3</div>
|
||||||
|
<img src="https://www.exclusive-networks.com/de/wp-content/uploads/sites/10/2019/06/test-image.jpg" style="width:100%">
|
||||||
|
<div class="text">Caption Text</div>
|
||||||
|
</div>
|
||||||
|
<!-- slide end -->
|
||||||
|
|
||||||
|
<div class="mySlides fade">
|
||||||
|
<div class="numbertext">2 / 3</div>
|
||||||
|
<img src="https://wow.olympus.eu/webfile/img/1632/oly_testwow_stage.jpg?x=1024" style="width:100%">
|
||||||
|
<div class="text">Caption Two</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mySlides fade">
|
||||||
|
<div class="numbertext">3 / 3</div>
|
||||||
|
<img src="https://knowpathology.com.au/app/uploads/2018/07/Happy-Test-Screen-01.png" style="width:100%">
|
||||||
|
<div class="text">Caption Three</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a class="prev" onclick="plusSlides(-1)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div style="text-align:center">
|
||||||
|
<span class="dot" onclick="currentSlide(1)"></span>
|
||||||
|
<span class="dot" onclick="currentSlide(2)"></span>
|
||||||
|
<span class="dot" onclick="currentSlide(3)"></span>
|
||||||
|
</div>
|
||||||
|
<script src="js/steevcss.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
26
js/steevcss.js
Normal file
26
js/steevcss.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
var slideIndex = 1;
|
||||||
|
showSlides(slideIndex);
|
||||||
|
|
||||||
|
function plusSlides(n) {
|
||||||
|
showSlides(slideIndex += n);
|
||||||
|
}
|
||||||
|
|
||||||
|
function currentSlide(n) {
|
||||||
|
showSlides(slideIndex = n);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showSlides(n) {
|
||||||
|
var i;
|
||||||
|
var slides = document.getElementsByClassName("mySlides");
|
||||||
|
var dots = document.getElementsByClassName("dot");
|
||||||
|
if (n > slides.length) {slideIndex = 1}
|
||||||
|
if (n < 1) {slideIndex = slides.length}
|
||||||
|
for (i = 0; i < slides.length; i++) {
|
||||||
|
slides[i].style.display = "none";
|
||||||
|
}
|
||||||
|
for (i = 0; i < dots.length; i++) {
|
||||||
|
dots[i].className = dots[i].className.replace(" active", "");
|
||||||
|
}
|
||||||
|
slides[slideIndex-1].style.display = "block";
|
||||||
|
dots[slideIndex-1].className += " active";
|
||||||
|
}
|
||||||
1
js/steevcss.min.js
vendored
Normal file
1
js/steevcss.min.js
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
var slideIndex=1;function plusSlides(e){showSlides(slideIndex+=e)}function currentSlide(e){showSlides(slideIndex=e)}function showSlides(e){var s,l=document.getElementsByClassName("mySlides"),d=document.getElementsByClassName("dot");for(e>l.length&&(slideIndex=1),e<1&&(slideIndex=l.length),s=0;s<l.length;s++)l[s].style.display="none";for(s=0;s<d.length;s++)d[s].className=d[s].className.replace(" active","");l[slideIndex-1].style.display="block",d[slideIndex-1].className+=" active"}showSlides(slideIndex);
|
||||||
Loading…
x
Reference in New Issue
Block a user