Day 3 - Part 3

day-3-part-3.markdown

Day 3 - Part 3

A Pen by Samaila Malima Anthony on CodePen.

License.

index.html

<div class="mayweather-container">
  <div class="text-container">
    <h1 class="name">Floyd Mayweather</h1>
  </div>
</div>
<div class="logan-container">
  <div class="text-container">
    <h1 class="name">Logan Paul</h1>
  </div>
</div>

<div class="clock">
  <h1></h1>
</div>

script.js

var clockText = document.querySelector('.clock h1');

setInterval(() => {
  var now = new Date();
  var hoursToMidnight = 24 - now.getHours();
  var minutes = 59 - now.getMinutes();
  var seconds = 59 - now.getSeconds();
  if (minutes < 10) {
    minutes = `0${minutes}`
  }
  if (seconds < 10) {
    seconds = `0${seconds}`
  }
  clockText.textContent = `${hoursToMidnight}:${minutes}:${seconds}`;
}, 1000)

style.css

html {
  background: linear-gradient(46.19deg, #000000 5.66%, #434343 94.35%);
}

body {
  height: 100vh;
  background: url("https://assets.codepen.io/6060109/versus-bg.png") no-repeat center;
  background-size: cover;
  display: flex;
  align-items: space-between;
  width: 100%;
  font-family: Paladins;
}

.mayweather-container, .logan-container {
  position: relative;
}

.mayweather-container {
  height: 100%;
  width: 50%;
  background: bottom left / contain no-repeat url("https://assets.codepen.io/6060109/mayweather.png");
}

.logan-container {
  height: 100%;
  width: 50%;
  background: bottom right / contain no-repeat url("https://assets.codepen.io/6060109/loganpaul.png");
}

.text-container {
  background: url("https://assets.codepen.io/6060109/yellow-text-wrapper.png") no-repeat;
  height: 15%;
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  bottom: 10%;
  font-size: 20px;
}
.text-container-1{
  margin-left: -80px;
  width: 110%;
}

.name{
  padding-left: 70px;


.clock {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  color: white;
}