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