Wii Menu Part One


by Jeremy Caudle
code

I'm going to take a shot at recreating the Wii menu using CSS, SVG, and HTML. I'm hoping I can do it without using any JavaScript, but I'll see further down the road. Can't do a lot with it today, so I'm just doing a bit to get things started.

Wii
Wii
Wii
Wii
Wii
Wii
Wii
Wii
Wii
Wii
Wii
Wii
AM/PM9:08
Month Day

View the code:

HTML and JS 
<div class="codedoodle-block">
			<section class="channels">
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
				<div class="channel">Wii</div>
			</section>		
			<section class="clock">
				<span class="time-of-day">AM/PM</span><span class="time">9:08</span>
				
			</section>
			<section class="date">
				<span>Month</span> <span>Day</span>	
			</section>
			
			<section class="buttons">
				
			</sectin>
			
			
		
		</div>
CSS 
body {
				box-sizing: border-box;
			}
		
			.codedoodle-block {
				margin: 1rem auto;
				padding: 0;
				background-color: #dedede;
			}
		
			section.channels {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-template-rows: repeat(3, 1fr);
				grid-gap: .2rem;
				padding: .125rem 0 .125rem 2rem;
			}
			
			.channel {
				display: flex;
				border-radius: .5rem;
				border: solid 1px gray;
				background-color: white;
				flex-flow: column;
				justify-content: center;
				align-content: center;
				text-align: center;
				padding: .25rem;
				min-height: 90px;
				min-width: 120px;
			}

Tags