xxxxxxxxxx1
<div class="container mt-5 justify-content-center">2
3
<div class="row text-center">4
<div class="col-6 col-sm-4 waves-light d-flex justify-content-center align-items-center">5
<h1 class="font-weight-bold mb-0" id="time"></h1>6
</div>7
<div class="col-6 col-sm-4 waves-light d-flex justify-content-center align-items-center">8
<div>9
<i class="fas fa-stopwatch fa-4x"></i>10
<p class="font-weight-bold mt-2 mb-0">6:00</p>11
</div>12
</div>13
<div class="col col-sm-4 waves-light">14
<p class="mt-3 text-left font-weight-bold fa-lg" id="month"></p>15
<p class="font-weight-bold text-right fa-4x" id="day"></p>16
</div>17
</div>18
19
<div class="row text-center">20
<div class="col-6 col-sm-3 waves-light d-flex justify-content-center align-items-center">21
<div>22
<i class="fab fa-twitter fa-4x mb-2"></i>23
<p class="font-weight-bold mb-0">Twitter</p>24
</div>25
</div>26
<div class="col-6 col-sm-3 waves-light d-flex justify-content-center align-items-center">27
<div>28
<i class="fab fa-youtube fa-4x mb-2"></i>29
<p class="font-weight-bold mb-0">YouTube</p>30
</div>31
</div>32
<div class="col col-sm-6 waves-light d-flex justify-content-center align-items-center">33
<div>34
<p class="font-weight-bold fa-2x">Schedule</p>35
<p class="font-weight-bold">10:00 - 11:00 Meeting with CEO</p>36
<p class="font-weight-bold mb-0"><i class="fas fa-plus-circle"></i> Add new</p>37
</div>38
</div>39
</div>40
41
<div class="row text-center">42
<div class="col waves-light d-flex justify-content-center align-items-center">43
<div>44
<i class="fas fa-calculator fa-4x mb-2"></i>45
<p class="font-weight-bold mb-0">Calculator</p>46
</div>47
</div>48
<div class="col waves-light d-flex justify-content-center align-items-center">49
<div>50
<i class="fab fa-instagram fa-4x mb-2"></i>51
<p class="font-weight-bold mb-0">Instagram</p>52
</div>53
</div>54
<div class="col waves-light d-flex justify-content-center align-items-center">55
<div>56
<i class="fas fa-calendar-alt fa-4x mb-2"></i>57
<p class="font-weight-bold mb-0">Calendar</p>58
</div>59
</div>60
</div>61
62
</div>xxxxxxxxxx1
.container {2
padding: 0;3
background: url("https://images.pexels.com/photos/2915997/pexels-photo-2915997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940&fbclid=IwAR3S0kMT7VV0oGP5ruCX3FChd8N6-7b3n3BlrT90ZLPl370OA7OsWXEvBnk") no-repeat top center fixed;4
}5
6
.container .row {7
margin: 0 auto;8
}9
10
.col,11
.col-sm-3,12
.col-sm-4,13
.col-sm-6,14
.col-6 {15
color: #f0f8ff;16
border: 1px solid #f0f8ff;17
height: 180px;18
}19
20
@media only screen and (max-width: 574px) {21
.container {22
margin-top: 0 !important;23
}24
}xxxxxxxxxx1
const monthNames = ["January", "February", "March", "April", "May", "June",2
"July", "August", "September", "October", "November", "December"3
];4
5
setInterval(function () {6
let ourDate = new Date();7
let hour = ourDate.getHours();8
let minute = ourDate.getMinutes();9
let day = ourDate.getDate();10
11
if (hour < 10) {12
hour = "0" + hour;13
}14
15
if (minute < 10) {16
minute = "0" + minute;17
}18
document.getElementById('time').innerHTML = hour + ":" + minute;19
document.getElementById('day').innerHTML = day;20
document.getElementById('month').innerHTML = monthNames[ourDate.getMonth()];21
}, 1000); Console errors: 0