First Project

by ffischer2309

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <script src="js/clockanddate.js"></script>
    <title>My Website</title>
  </head>

  <body onload="aufruf()">
    <div class="header">
      <h1>My Website</h1>
      <marquee>++! Website under Construction !++</marquee>
    </div>

    <div class="topnav">
      <a href="https://www.heise.de" target="_blank">Heise</a>
      <a href="https://www.huf-group.com" target="_blank">Huf Group</a>
      <a href="https://www.google.de" target="_blank">Google</a>
      <span style="float:right">
	<a href="#" target="_blank">Contact</a>
  </span>
    </div>

    <div class="row">
      <div class="leftcolumn">
        <div class="card">
          <h2 align="center">TITLE HEADING</h2>
          <h5>Title Description</h5>
          <div class="fakeimg" style="height: 200px;">Image</div>
          <p>Some text...</p>
        </div>
        <div class="card">
          <h2 align="center">TITLE HEADING</h2>
          <h5>Title description</h5>
          <div class="fakeimg" style="height:200px;">Image</div>
          <p>Some text...</p>
        </div>
        <div class="card">
          <h2 align="center">TITLE HEADING</h2>
          <h5>Title description</h5>
          <div class="fakeimg" style="height:200px">Image</div>
          <p>Some text...</p>
        </div>
      </div>
      <div class="rightcolumn">
        <div class="card">
          <h3 align="center">About Me</h3>
          <div class="fakeimg" style="height: 100px">Image</div>
          <p>Some text about Me</p>
        </div>
        <div class="card">
          <h3 align="center">Popular Post</h3>
          <div class="fakeimg">
            <p>Image</p>
          </div><br>
          <div class="fakeimg">
            <p>Image</p>
          </div><br>
          <div class="fakeimg">
            <p>Image</p>
          </div>
        </div>


        <div class="cardDate">
          <h2>Date and Time</h2>
   ...

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: verdana;
  padding: 10px;
  background: #F1F1F1;
}

.header {
  background: white;
  text-align: center;
  padding: 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.header h1 {
  font-size: 100px;
  color: lightblue;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  border-top: 10px solid #333;
  border-bottom: 10px solid #333;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: lightgreen;
  color: black;
  transition-duration: 0.6s;
}

.leftcolumn {
  float: left;
  width: 75%;
}

.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

.fakeimg {
  background-color: lightblue;
  width: 100%;
  padding: 20px;
  border-radius: 25px;
}

.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 800px) {
  .leftcolumn,
  .righcolumn {
    width: 100%;
    padding: 0;
  }
}

@media screen and (max-width: 400px) {
  .topnav a {
    width: 100%;
    float: none;
  }
}

.footer {
  background: white;
  text-align: center;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#uhr {
  color: black;
  font-size: 30px;
  font-family: verdana;
}

div.cardDate {
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

div.date {
  background-color: lightblue;
  color: black;
  padding: 10px;
  font-size: 40px;
  font-family:...

JavaScript

function changeColorGreen() {
    document.body.style.background = "lightgreen";
  }

  function changeColorBlue() {
    document.body.style.background = "blue";
  }

  function changeColorOrange() {
    document.body.style.background = "orange";
  }

  function changeColorRed() {
    document.body.style.background = "red";
  }

  function changeColorGrey() {
    document.body.style.background = "lightgrey";
  }

  function standard() {
    document.body.style.background = "#F1F1F1";
  }

  function myColor() {
    check = prompt('Please type in the backgroundcolor (you can use hexadecimal aswell)', '');
    document.body.style.background = check;
  }


     function ticken() {
       var stunden, minuten, sekunden;
       var StundenZahl, MinutenZahl, SekundenZahl;
       var heute;

       heute = new Date();
       StundenZahl = heute.getHours();
       MinutenZahl = heute.getMinutes();
       SekundenZahl = heute.getSeconds();

       if (StundenZahl < 10) {
         stunden = "0" + StundenZahl + ":";
       } else {
         stunden = StundenZahl + ":";
       }
       if (MinutenZahl < 10) {
         minuten = "0" + MinutenZahl + ":";
       } else {
         minuten = MinutenZahl + ":";
       }
       if (SekundenZahl < 10) {
         sekunden = "0" + SekundenZahl + " ";
       } else {
         sekunden = SekundenZahl + " ";
       }
       zeit = stunden + minuten + sekunden + " Uhr";
       uhr.innerHTML = zeit;

       window.setTimeout("ticken();", 1000);

     }

     function date_1() {
       var tage;
       var datumTag;

       datumTag = new Date();
       tage = datumTag.getDate();

       tageID.innerHTML = tage;
       window.setTimeout("date_1();", 1000);
     }

     function date_2() {
       var d = new Date();
       var month = new Array();
       month[0] = "January";
       month[1] = "February";
       month[2] = "March";
       month[3] = "April";
       month[4] = "May";
       month[5] = "June";
       month[6] = "July";
      ...