82 lines
No EOL
1.5 KiB
Svelte
82 lines
No EOL
1.5 KiB
Svelte
<div class="header">
|
|
<div class="select">
|
|
<select name="heats" id="heats">
|
|
<option value="uno">Uno</option>
|
|
<option value="due">Due</option>
|
|
</select>
|
|
</div>
|
|
<div class="timer">
|
|
<h2>00:00</h2>
|
|
</div>
|
|
<div class="button">
|
|
<button>START</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="line">
|
|
<div class="pri">
|
|
<h1>P</h1>
|
|
</div>
|
|
<div class="color">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.header {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
grid-template-rows: 3rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.select {
|
|
grid-column: 1/2;
|
|
justify-self: start;
|
|
}
|
|
|
|
.timer {
|
|
grid-column: 2/5;
|
|
justify-self: center;
|
|
}
|
|
|
|
.button {
|
|
grid-column: 5/6;
|
|
justify-self: end;
|
|
}
|
|
|
|
.container {
|
|
display: grid;
|
|
|
|
}
|
|
|
|
.line {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
grid-template-rows: 4rem;
|
|
grid-template-areas:
|
|
"pri color color color color color";
|
|
align-items: center;
|
|
}
|
|
|
|
.pri {
|
|
grid-area: pri;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: yellow;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-self: start;
|
|
}
|
|
|
|
.color {
|
|
grid-area: color;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: blue;
|
|
justify-self: end;
|
|
}
|
|
|
|
</style> |