felipecabargas/hola.html

## hola.html
<html>
  <head>
    <title>nuevoensayo</title>
    <link rel="stylesheet" href="nuevoensayo.css">
    <link href="https://fonts.googleapis.com/css?family=Sanchez" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body onload="startTime()">
    <div id="maincontainer">
      <div id="optionsbar">
        <div class="option">
          <p class="optiontitle">OPCION</p>
        </div>
        <div class="option">
          <p class="optiontitle">OPCION</p>
        </div>
        <div class="option">
          <p class="optiontitle">OPCION</p>
        </div>
        <div class="option">
          <p class="optiontitle">OPCION</p>
        </div>
      </div>
      <div id="supercontainer">
        <div id="box1">
          <div id="txt"></div>
        </div>
        <div id="box2">
          <div class="sub-box2">
            <p>sub2 1</p>
            <img src="Rectangle.png" width="100px" />
          </div>
          <div class="sub-box2">
            <p>sub2 2</p>
          </div>
        </div>
      </div>
      <div id="footer">
        <div id="infospace">
          <p class="footertext">
            blablablablbalalainfo
          </p>
        </div>
        <div id="spaceautor">
          <p id="autor"></p>
        </div>
      </div>
    </div>
  </body>

  <script>
    $(document).ready(function() {
      var nombre = document.getElementById("spaceautor");
      var autor = document.getElementById("autor");

      autor.innerHTML = "Daniela Acuna";

      //nombre.onmouseover = function() {
      //  autor.innerHTML = autor.innerHTML.replace("Daniela Acuña", "Felipe Cabargas");
      //};
      //nombre.onmouseout = function(){
      //  autor.innerHTML = autor.innerHTML.replace("Felipe Cabargas", "Daniela Acuña");
      //}
    });

  function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
  }
  function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
  }
  </script>

</html>

## nuevoensayo.css
*{
  margin: 0%;
}
body{
  background-color: aquamarine;
  font-family: 'Sanchez', serif;
}
#maincontainer{
  background-color: black;
  margin:5% 5% 5% 5%;
  width: 90%;
  height: 90%;
}
#optionsbar{
  background-color: white;
  height: 6%;
  width: 100%;
  float: left;
}
.option{
 width: 25%;
 height: 100%;
 float: left;
 margin: 0%;
}
.optiontitle{
  color:crimson;
  text-align: center;
  margin: auto;
}
.optiontitle:hover{
  color: saddlebrown;
}
#supercontainer{
  height: 86%;
  width: 100%;
  margin: 0%;
  float: left;
}
#box1{
  height:94%;
  width: 48%;
  background-color: brown;
  float: left;
  margin: 3% 1% 3% 1%;
}
#box2{
  height: 94%;
  width: 48%;
  background-color: coral;
  float: left;
  margin: 3% 1% 3% 1%;
}
.sub-box2{
  height: 47%;
  width:98%;
  float: left;
  margin: 1% 1% 1% 1%;
  background-color: azure;
  background: url("micro.jpg")
}

#footer{
  height: 8%;
  width: 98%;
  margin: 0% 1% 0% 0%;
  float: left;
  background:transparent;
}
#infospace{
  height: 100%;
  width: 70%;
  float: left;
}
#spaceautor{
  height: 100%;
  width: 30%;
  float: left;
}
.footertext{
  color: antiquewhite;
  margin: 0.8em;
  text-align: center;
  font-size: 0.4em;
}
#autor{
  color: burlywood;
  text-align: right;
  font-size: 1.1em
}
	<html>
	<head>
	<title>nuevoensayo</title>
	<link rel="stylesheet" href="nuevoensayo.css">
	<link href="https://fonts.googleapis.com/css?family=Sanchez" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	</head>
	<body onload="startTime()">
	<div id="maincontainer">
	<div id="optionsbar">
	<div class="option">
	<p class="optiontitle">OPCION</p>
	</div>
	<div class="option">
	<p class="optiontitle">OPCION</p>
	</div>
	<div class="option">
	<p class="optiontitle">OPCION</p>
	</div>
	<div class="option">
	<p class="optiontitle">OPCION</p>
	</div>
	</div>
	<div id="supercontainer">
	<div id="box1">
	<div id="txt"></div>
	</div>
	<div id="box2">
	<div class="sub-box2">
	<p>sub2 1</p>
	<img src="Rectangle.png" width="100px" />
	</div>
	<div class="sub-box2">
	<p>sub2 2</p>
	</div>
	</div>
	</div>
	<div id="footer">
	<div id="infospace">
	<p class="footertext">
	blablablablbalalainfo
	</p>
	</div>
	<div id="spaceautor">
	<p id="autor"></p>
	</div>
	</div>
	</div>
	</body>

	<script>
	$(document).ready(function() {
	var nombre = document.getElementById("spaceautor");
	var autor = document.getElementById("autor");

	autor.innerHTML = "Daniela Acuna";

	//nombre.onmouseover = function() {
	// autor.innerHTML = autor.innerHTML.replace("Daniela Acuña", "Felipe Cabargas");
	//};
	//nombre.onmouseout = function(){
	// autor.innerHTML = autor.innerHTML.replace("Felipe Cabargas", "Daniela Acuña");
	//}
	});

	function startTime() {
	var today = new Date();
	var h = today.getHours();
	var m = today.getMinutes();
	var s = today.getSeconds();
	m = checkTime(m);
	s = checkTime(s);
	document.getElementById('txt').innerHTML =
	h + ":" + m + ":" + s;
	var t = setTimeout(startTime, 500);
	}
	function checkTime(i) {
	if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
	return i;
	}
	</script>

	</html>
	*{
	margin: 0%;
	}
	body{
	background-color: aquamarine;
	font-family: 'Sanchez', serif;
	}
	#maincontainer{
	background-color: black;
	margin:5% 5% 5% 5%;
	width: 90%;
	height: 90%;
	}
	#optionsbar{
	background-color: white;
	height: 6%;
	width: 100%;
	float: left;
	}
	.option{
	width: 25%;
	height: 100%;
	float: left;
	margin: 0%;
	}
	.optiontitle{
	color:crimson;
	text-align: center;
	margin: auto;
	}
	.optiontitle:hover{
	color: saddlebrown;
	}
	#supercontainer{
	height: 86%;
	width: 100%;
	margin: 0%;
	float: left;
	}
	#box1{
	height:94%;
	width: 48%;
	background-color: brown;
	float: left;
	margin: 3% 1% 3% 1%;
	}
	#box2{
	height: 94%;
	width: 48%;
	background-color: coral;
	float: left;
	margin: 3% 1% 3% 1%;
	}
	.sub-box2{
	height: 47%;
	width:98%;
	float: left;
	margin: 1% 1% 1% 1%;
	background-color: azure;
	background: url("micro.jpg")
	}

	#footer{
	height: 8%;
	width: 98%;
	margin: 0% 1% 0% 0%;
	float: left;
	background:transparent;
	}
	#infospace{
	height: 100%;
	width: 70%;
	float: left;
	}
	#spaceautor{
	height: 100%;
	width: 30%;
	float: left;
	}
	.footertext{
	color: antiquewhite;
	margin: 0.8em;
	text-align: center;
	font-size: 0.4em;
	}
	#autor{
	color: burlywood;
	text-align: right;
	font-size: 1.1em
	}