diff --git a/css/Solid_brown.svg.png b/css/Solid_brown.svg.png
new file mode 100644
index 0000000..5c2513e
Binary files /dev/null and b/css/Solid_brown.svg.png differ
diff --git a/css/steev.css b/css/steev.css
new file mode 100644
index 0000000..c9be846
--- /dev/null
+++ b/css/steev.css
@@ -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}
+}
\ No newline at end of file
diff --git a/css/steevcss.min.css b/css/steevcss.min.css
new file mode 100644
index 0000000..dc2d583
--- /dev/null
+++ b/css/steevcss.min.css
@@ -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}}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2117441
--- /dev/null
+++ b/index.html
@@ -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)">&#10094;</a>
+                <a class="next" onclick="plusSlides(1)">&#10095;</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>
\ No newline at end of file
diff --git a/js/steevcss.js b/js/steevcss.js
new file mode 100644
index 0000000..ff4aa28
--- /dev/null
+++ b/js/steevcss.js
@@ -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";
+}
\ No newline at end of file
diff --git a/js/steevcss.min.js b/js/steevcss.min.js
new file mode 100644
index 0000000..6c26546
--- /dev/null
+++ b/js/steevcss.min.js
@@ -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);
\ No newline at end of file