• HTML
• CSS
• JS

HTML

<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<div class="wrap">
	<div class="widget">
		<div class="fecha">
			<p id="diaSemana" class="diaSemana">Jueves</p>
			<p id="dia" class="dia">34</p>
			<p>de</p>
			<p id="mes" class="mes">Octubre</p>
			<p>del</p>
			<p id="year" class="year">0000</p>
		</div>
		<div class="reloj">
			<p id="horas" class="horas">1</p>
			<p>:</p>
			<p id="minutos" class="minutos">23</p>
			<p>:</p>
			<div class="caja-segundos">
				<p id="ampm" class="ampm">AM</p>
				<p id="segundos" class="segundos">45</p>
			</div>
		</div>
	</div>
</div>

CSS

*{
	margin:0px;
	padding:0px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
body{
	background:url(ubuntu.jpg) #f1f1f1 no-repeat;
	background-size:cover;
	width:100%;
	height:100vh;
	overflow:hidden;
	color:#fff;
	font-size:0.9em;

}
.wrap{
	width:90%;
	max-width:1000px;
}
.widget{
	width:40%;
	margin:2em;/*margin:32px;*/
}
.widget p{
	display:inline-block;
	line-height:1em;
}
.fecha{
	font-family:Oswald,Arial;
	text-align:center;
	font-size:1.5em;
	margin-bottom:0.3125rem;/*margin-bottom:5px;*/
	background:rgba(0,0,0,0.5);
	padding:20px;
	width:100%;
}
.reloj{
	font-family:Oswald,Arial;
	width:100%;
	padding:20px;
	font-size:3.5em;
	text-align:center;
	background:rgba(0,0,0,0.5);
}
.reloj .caja-segundos{
	display:inline-block;
}
.reloj .segundos,.reloj .ampm{
	font-size:1.5rem;
	display:block;
}

JS

var actualizarHora=function(){
	var fecha=new Date(),
		horas=fecha.getHours(),
		ampm,
		minutos=fecha.getMinutes(),
		segundos=fecha.getSeconds(),
		diaSemana=fecha.getDay(),
		dia=fecha.getDate(),
		mes=fecha.getMonth(),
		year=fecha.getFullYear();

	var pHoras=document.getElementById('horas'),
		pAMPM=document.getElementById('ampm'),
		pMinutos=document.getElementById('minutos'),
		pSegundos=document.getElementById('segundos'),
		pDiaSemana=document.getElementById('diaSemana'),
		pDia=document.getElementById('dia'),
		pMes=document.getElementById('mes'),
		pYear=document.getElementById('year');

	var semana=['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'];
	pDiaSemana.textContent=semana[diaSemana];
	pDia.textContent=dia;
	var meses=['Enero','Ferbrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Setiembre','Octubre','Noviembre','Diciembre'];
	pMes.textContent=meses[mes];
	pYear.textContent=year;

	if(horas>=12){
		horas=horas-12;
		ampm='PM';
	}else{
		ampm='AM'
	}

	if(horas==0){
		horas=12;
	}

	pHoras.textContent=horas;
	pAMPM=textContent=ampm;
	if(minutos<10){minutos="0"+minutos};
	if(segundos<10){segundos="0"+segundos};
	pMinutos.textContent=minutos;
	pSegundos.textContent=segundos;


};

//actualizarHora();
var intervalo=setInterval(actualizarHora,1000);