JSFiddle - React, Tailwind, and code Playground

by Carlos González

HTML

<h1> Informational Tech Site</h1>

<h2>This website is the place in which you can find all the information about what building games actually looks like in a workplace environment.
</h2>

<div class="carousel-wrapper">
  <div class="con">
    <img src="http://www.w3schools.com/images/w3schools_green.jpg" class="img">
    <img src="http://www.w3schools.com/images/w3schools_green.jpg" class="img">
    <img src="http://www.w3schools.com/images/w3schools_green.jpg" class="img">
  </div>

</div>

<div class="sidebar">
	<ul>
	<div class="sideimage"><img src="images/website logo draft.png" height="70" width="110"/></div>
	
	<li><a href="index.html">Home</a> </li>
	<li><a href="page 2.html">page 2</a></li>
	<li><a href="page 3.html">page 3</a></li>
	<li><a href="page 4.html">page 4</a></li>
	<li><a href="page 5.html">page 5</a></li>
</ul>	
</div>

CSS

body{
  background-color: #3399ff;
}

.sidebar {
	position: fixed;
	height:100%;
	left: 0;
	top: 0px;
	width: 300px;
	background:#808080;
	border: 3px solid #555;
}

h1 {
	text-align: center;
	padding-left: 300px;
	font-size: 50px;
	font-family: "Verdana", Geneva, sans-serif;
	color:#f2f2f2;
}

h2 {
	text-align: center;
	padding-left: 300px;
	margin-top:30px;
	color:#e6e6e6;
	font-family: "Verdana", Geneva, sans-serif;
}


.sideimage {
	text-align: center;
	padding-top: 30px;
}

/* Added a new wrapper as the main container of you carousel and .con to center the images. */
.carousel-wrapper{
  margin-left: 300px;
}

.con {
	border: 5px solid red;
	width: 300px;
	height: 300px;
	overflow: hidden;
  /* display: block and margin auto are used to center containers */
  display: block;
  margin: auto;
  
  /* This is necessary for using absolute possitions inside. */
  position: relative;
}

.img {
	position: absolute;
	width: 700px;
	height: 500px;
	animation: mm 15s infinite;
	-webkit-animation: mm 15s infinite;
	opacity: 0;
 
  /* I added this to controll image size. */
  width: 100%;
  height: auto;
}
	
@keyframes mm{
	10%{opacity:1}
	45%{opacity:0}
}

@-webkit-keyframes mm{
	10%{opacity:1}
	45%{opacity:0}
}


img:nth-child(0){animation-delay: 0s;-webkit-animation-delay: 0s;}
img:nth-child(1){animation-delay: 5s;-webkit-animation-delay: 5s;}
img:nth-child(2){animation-delay: 10s;-webkit-animation-delay: 10s;}


	

	
	
	
	
}
	
	
}






.main_image {
	text-align: center;
	padding-left: 300px;
	margin-top: 100px;
}




ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 300px;
    background-color: #66b3ff;
}

li a {
    display: block;
    color: #000000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
	font-size: 30px;
	font-family: "Verdana", Geneva, sans-serif;
	border-bottom: 3px solid #555;
}


li a:hover {
    background-color:#27C0FD;
    color: #000000;
}