Schüler für Schüler

In this example below you will see how to do a Schüler für Schüler with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by MGK_888, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MGK_888 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Schüler für Schüler</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <meta name="viewport" content="width=device-width, initial-scale=1">
<body>
  
  <ul id="topnavbar">
    <p></p>
  </ul>
  <div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
    <hr color="black" width= "80%" height= "1px" >
     <div class="chip">
       <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-512.png" alt="Person" width="96" height="96">William Koch
     </div>
     <div class="chip">
      <img src="https://s-media-cache-ak0.pinimg.com/236x/3b/7d/6f/3b7d6f60e2d450b899c322266fc6edfd.jpg" alt="Person" width="96" height="96">
  Marten Karl
     </div>
</div>
  <div id="main">
    
    <span style="cursor:pointer" onclick="openNav()"><img id="navimg" style="width:70px;" src="https://cdn1.iconfinder.com/data/icons/freeline/32/home_house_real_estate-128.png">
     </div></span>
    <h1 class="header">Schüler für Schüler!</h1>
  
  <hr>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1</div>
  <img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/question_mark-128.png" style="width:100%;height: 50px;">
  <div class="text"><!--Caption Text--></div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2</div>
  <img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/question_mark-128.png" style="width:100%;height: 50px;">
  <div class="text"><!--Caption Text--></div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3</div>
  <img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/question_mark-128.png" style="width:100%;height: 50px;">
  <div class="text"><!--Caption Text--></div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>
  
  <script>
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}    
    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";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
  
  <div class="Maintxt">
<p class="Introtxt">Lorem ipsum dolor sit amet, vis inani aliquando ut, ne facilisis evertitur reformidans mel. Ius veri invenire ad! Ut vim porro dicam referrentur, usu timeam commune no! Case dolores usu ea? Ad qui nostrum sapientem, utamur delicata duo id, mei ut tritani dolorum hendrerit!

Sea nonumes explicari ne, habemus molestiae at est? Ridens possim expetenda sea ea, id duo ludus vidisse vituperatoribus. Te modus movet nec. Dolor verear laboramus eos ex.

Amet invenire sed ne, eum amet invenire te, eam et decore dicunt? Te duis error alterum mei. Mel at epicuri electram intellegat. Eu mea cibo choro ignota, veri meis adipisci quo in. Prompta phaedrum forensibus no est! Eam vitae fuisset in, sit ei dicit utroque dissentiet. Per ei alii debitis prodesset, ex invenire quaerendum nec, ne sed persius epicurei evertitur.

Ad vis placerat tincidunt quaerendum. Dicta vituperatoribus ei cum, ad enim justo quo, te pri munere option fabulas? Eam in simul nonumes posidonium, oportere liberavisse id has! Vel et ignota singulis honestatis, delenit reprehendunt ei ius! Eos an esse option, esse cetero pro id. No sit vidit decore reformidans, eu minim inciderint sea, vis democritum inciderint no?

Cu ius oblique adipisci urbanitas, vim an justo necessitatibus. Nonumes sapientem assueverit.</p>
</div>
  
  <!--<div id="map"></div>
  
  <script>
function myMap() {
  var mapCanvas = document.getElementById("map");
  var mapOptions = {
    center: new google.maps.LatLng(51.5, -0.2), zoom: 10
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>-->
  
  </div>
</body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/MGK_888/schandxfcler-fandxfcr-schandxfcler-ggrZYM */
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed|Montserrat|Nunito+Sans|Raleway');
body {
  background: rgb(66, 138, 255);
}
#topnavbar {
    height: 40px;
    margin: 0;
    padding: 0;
    background-color: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: #;
}

#navimg {
  transition: 0.5s;
}
#circle {
      width: 50px;
      height: 50px;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
      margin-right: 120px;
      margin-bottom: 10px;
      position: fixed;
    }
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.9);
    overflow-x: scroll;
    transition: 0.5s;
    padding-top: 60px;
    font-family: 'Nunito Sans', sans-serif;
}
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: rgb(0, 93, 216);
    display: block;
    transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
#main {
    transition: margin-left .5s;
    padding: 16px;
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.header {
  font-family: 'Fira Sans Condensed', sans-serif;
  color: white;
  font-size: 100px;
  margin: auto;
  /*text-shadow: 10px 10px 10px rgba(0,0,0,0.75);*/
}
.chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
    width: 100%;
    margin-top: 10px;
}
.chip img {
    float: left;
    margin: 0 10px 0 -25px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
  width: 100%;
  position: relative;
  margin: auto;
  height: 50px;
}
/* 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-family: 'Montserrat', sans-serif;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* The dots/bullets/indicators */
.dot {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active {
  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) {
  .text {font-size: 11px}
}
hr{ 
    margin: 0 auto;
}
.Introtxt {
  margin: auto;
  width: 75%;
  font-size: 20px;
  font-family: 'Raleway', sans-serif;
  padding-top: 50px;
  padding-bottom: 50px;
  z-index: 1;
  background: white;
  overflow: hidee;
}
.Maintxt {
  width: 10%;
  background: white;
  margin-top: 50px;
  -webkit-transition-property: width;
  -webkit-transition-duration: 5s;
  transition-property: width;
  transition-duration: 5s;
}

.Maintxt:hover {
  width: 100%;
}

/*#map {
  width:100%;
  height:300px;
  margin: auto;
  border-style: solid;
  border-color: black;
}*/

/*
font-family: 'Fira Sans Condensed', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Nunito Sans', sans-serif;
*/

/*Downloaded from https://www.codeseek.co/MGK_888/schandxfcler-fandxfcr-schandxfcler-ggrZYM */
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
  
  document.getElementById("navimg").style.display = "none";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
  
  document.getElementById("navimg").style.display = "block";
    document.getElementById("main").style.marginLeft= "0";
}

Comments