Membuat Scoreboard Dengan HTML Dan CSS
Oke guys kali ini saya akan membagikan source code berupa Scoreboard html
Untuk membuat Scoreboard Dengan HTML. Pertama, Anda perlu membuat dua File: HTML & CSS. Setelah membuat file-file ini, rekatkan kode-kode berikut ke dalam file Anda. Anda juga dapat mengunduh file kode sumber dari program Deteksi Browser ini dari tombol unduh yang diberikan.
Pertama, buat file HTML dengan nama index.html dan tempel kode yang diberikan ke file HTML Anda. Ingat, Anda harus membuat file dengan ekstensi .html, dan gambar yang digunakan pada program ini tidak akan muncul. Anda harus mengunduh file dari tombol unduh yang diberikan untuk menggunakan gambar juga.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Football (soccer) match score component</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined|Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>
<body translate="no">
<div class="container">
<!-- code here -->
<div class="match">
<div class="match-header">
<div class="match-status">Live</div>
<div class="match-tournament"><img src="https://assets.codepen.io/285131/pl-logo.svg">English Premier League</div>
<div class="match-actions">
<button class="btn-icon"><i class="material-icons-outlined">grade</i></button>
<button class="btn-icon"><i class="material-icons-outlined">add_alert</i></button>
</div>
</div>
<div class="match-content">
<div class="column">
<div class="team team--home">
<div class="team-logo">
<img src="https://assets.codepen.io/285131/whufc.svg">
</div>
<h2 class="team-name">West Ham</h2>
</div>
</div>
<div class="column">
<div class="match-details">
<div class="match-date">
12 Aug at <strong>19:00</strong>
</div>
<div class="match-score">
<span class="match-score-number match-score-number--leading">2</span>
<span class="match-score-divider">:</span>
<span class="match-score-number">0</span>
</div>
<div class="match-time-lapsed">
72'
</div>
<div class="match-referee">
Referee: <strong>Joseph Hicks</strong>
</div>
<div class="match-bet-options">
<button class="match-bet-option">1.48</button>
<button class="match-bet-option">4.98</button>
<button class="match-bet-option">8.24</button>
</div>
<button class="match-bet-place">Place a bet</button>
</div>
</div>
<div class="column">
<div class="team team--away">
<div class="team-logo">
<img src="https://assets.codepen.io/285131/chelsea.svg">
</div>
<h2 class="team-name">Chelsea</h2>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Selanjutnya, buatlah file dengan nama style.css lalu masukkan kode nya dibawah ini
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
*,
*:after,
*:before {
box-sizing: border-box;
}
:root {
--color-text-primary: #1c2a38;
--color-text-secondary: #8A8F98;
--color-text-alert: #d72641;
--color-text-icon: #dbdade;
--color-bg-primary: #fff;
--color-bg-secondary: #f3f5f9;
--color-bg-alert: #fdeaec;
--color-theme-primary: #623ce6;
}
button,
input,
select,
textarea {
font: inherit;
}
img {
display: block;
}
strong {
font-weight: 600;
}
body {
font-family: "Inter", sans-serif;
line-height: 1.5;
color: var(--color-text-primary);
background-color: var(--color-bg-secondary);
}
.match {
background-color: var(--color-bg-primary);
display: flex;
flex-direction: column;
min-width: 600px;
border-radius: 10px;
box-shadow: 0 0 2px 0 rgba(48, 48, 48, 0.1), 0 4px 4px 0 rgba(48, 48, 48, 0.1);
}
.match-header {
display: flex;
border-bottom: 2px solid rgba(48, 48, 48, 0.1);
padding: 16px;
}
.match-status {
background-color: var(--color-bg-alert);
color: var(--color-text-alert);
padding: 8px 12px;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
line-height: 1;
margin-right: auto;
}
.match-status:before {
content: "";
display: block;
width: 6px;
height: 6px;
background-color: currentColor;
border-radius: 50%;
margin-right: 8px;
}
.match-tournament {
display: flex;
align-items: center;
font-weight: 600;
}
.match-tournament img {
width: 20px;
margin-right: 12px;
}
.match-actions {
display: flex;
margin-left: auto;
}
.btn-icon {
border: 0;
background-color: transparent;
color: var(--color-text-icon);
display: flex;
align-items: center;
justify-content: center;
}
.match-content {
display: flex;
position: relative;
}
.column {
padding: 32px;
display: flex;
justify-content: center;
align-items: center;
width: calc(100% / 3);
}
.team {
display: flex;
flex-direction: column;
align-items: center;
}
.team-logo {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--color-bg-primary);
box-shadow: 0 4px 4px 0 rgba(48, 48, 48, 0.15), 0 0 0 15px var(--color-bg-secondary);
}
.team-logo img {
width: 50px;
}
.team-name {
text-align: center;
margin-top: 24px;
font-size: 20px;
font-weight: 600;
}
.match-details {
display: flex;
flex-direction: column;
align-items: center;
}
.match-date,
.match-referee {
font-size: 14px;
color: var(--color-text-secondary);
}
.match-date strong,
.match-referee strong {
color: var(--color-text-primary);
}
.match-score {
margin-top: 12px;
display: flex;
align-items: center;
}
.match-score-number {
font-size: 48px;
font-weight: 600;
line-height: 1;
}
.match-score-number--leading {
color: var(--color-theme-primary);
}
.match-score-divider {
font-size: 28px;
font-weight: 700;
line-height: 1;
color: var(--color-text-icon);
margin-left: 10px;
margin-right: 10px;
}
.match-time-lapsed {
color: #DF9443;
font-size: 14px;
font-weight: 600;
margin-top: 8px;
}
.match-referee {
margin-top: 12px;
}
.match-bet-options {
display: flex;
margin-top: 8px;
padding-bottom: 12px;
}
.match-bet-option {
margin-left: 4px;
margin-right: 4px;
border: 1px solid var(--color-text-icon);
background-color: #F9f9f9;
border-radius: 2px;
color: var(--color-text-secondary);
font-size: 14px;
font-weight: 600;
padding: 4px 8px;
}
.match-bet-place {
position: absolute;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
border: 0;
background-color: var(--color-theme-primary);
border-radius: 6px;
padding: 10px 48px;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
box-shadow: 0 4px 8px 0 rgba(48, 48, 48, 0.25);
}
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}Atau bisa download source code nya dibawah ini sudah saya lampirkan
Posting Komentar
image quote pre code