Day 78 - TV UI - Player Card

Developer
Arnelle Balane
Size
3,004 Kb
Views
16,192
  1. Day 78 - TV UI - Player Card Previews
  2. Day 78 - TV UI - Player Card HTML Codes
  3. Day 78 - TV UI - Player Card CSS Codes

How do I make an day 78 - tv ui - player card?

Implementation of Day 78 design from @npaulflavius' 100 Days UI Challenge. What is a day 78 - tv ui - player card? How do you make a day 78 - tv ui - player card? This script and codes were developed by Arnelle Balane on 14 October 2022, Friday.

Day 78 - TV UI - Player Card Previews
IQ Test

Day 78 - TV UI - Player Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Day 78 - TV UI - Player Card</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,700,600'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <aside class="player-card"> <header> <h1>Luan Oliveira</h1> <p>Currently Leader</p> </header> <section> <h2>Run Section</h2> <ul class="list horizontal"> <li>9.1</li> <li>8.9</li> </ul> </section> <section> <h2>Best Trick Attempt 5 Of 5</h2> <ul class="list horizontal"> <li>8.4</li> <li>8.9</li> <li>0</li> <li>9.5</li> <li>-</li> </ul> </section> <section> <h2>Scores</h2> <ol class="list numbered"> <li>Oliveira <span>36.4</span></li> <li>Huston <span>35.7</span></li> <li>Hoefler <span>35.5</span></li> <li>Decenzo <span>31.1</span></li> <li>Ortiz <span>29.5</span></li> <li>Berger <span>27.6</span></li> <li>O'Neill <span>25.5</span></li> <li>Rodriguez <span>15.7</span></li> </ol> </section>
</aside>
<div class="overlay"></div>
</body>
</html>

Day 78 - TV UI - Player Card - Script Codes CSS Codes

/** Base Styles **/
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box;
}
html { font-size: 62.5%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh; font-family: "Poppins", sans-serif; -webkit-font-smoothing: antialiased; line-height: 1; color: #0b0b0b; background: url("https://cdn.arnellebalane.com/images/codepen-day78/background.jpg") center center no-repeat; background-size: cover;
}
ul,
ol { list-style: none;
}
/** Reusable Components **/
.list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.list.horizontal { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
.list.numbered { counter-reset: item;
}
.list li { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
}
.list.horizontal li { width: 0;
}
.list.numbered li::before { counter-increment: item; content: counter(item);
}
/** Player Card **/
.player-card { display: inline-block; width: 38rem; padding: 2rem; position: relative; border-radius: 1rem; background-color: rgba(38, 40, 42, 0.95); box-shadow: 0 0.8rem 9rem 0 rgba(0, 0, 0, 0.57);
}
.player-card header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 16rem; padding: 0 2rem 0 17rem; margin: -2rem -2rem 2rem -2rem; border-radius: 1rem 1rem 0 0; background: #fff url("https://cdn.arnellebalane.com/images/codepen-day78/contestant.jpg") left center no-repeat;}
.player-card header h1 { margin-bottom: 0.5rem; font-size: 3rem; text-transform: uppercase;
}
.player-card header p { font-size: 1.4rem; text-transform: uppercase; color: #72a1ff;
}
/** Player Card Lists Sections **/
.player-card section { margin-bottom: 2rem; border-radius: 0.5rem; box-shadow: 0 0 5rem 0.8rem rgba(0, 0, 0, 0.17);
}
.player-card section:last-of-type { margin-bottom: 0;
}
.player-card section h2 { padding: 0.75rem 0.5rem; font-size: 1.5rem; text-align: center; text-transform: uppercase; border-radius: 0.5rem 0.5rem 0 0; background-color: rgba(255, 255, 255, 0.9);
}
.player-card .list li { padding: 0.85rem 0.5rem; position: relative; font-size: 1.6rem; text-transform: uppercase; color: #fff; background-color: rgba(250, 251, 252, 0.1);
}
.player-card .list.horizontal li { padding: 0; font-size: 2.4rem; text-align: center; line-height: 6rem;
}
.player-card .list.horizontal li:not(:last-child) { margin-right: 1px;
}
.player-card .list.horizontal li:first-child { border-bottom-left-radius: 0.5rem;
}
.player-card .list.horizontal li:last-child { border-bottom-right-radius: 0.5rem;
}
.player-card .list.numbered li { padding-left: 5rem; padding-right: 8rem;
}
.player-card .list.numbered li:not(:last-child) { margin-bottom: 1px;
}
.player-card .list.numbered li:first-child { background-color: #72a1ff;
}
.player-card .list.numbered li:last-child { border-radius: 0 0 0.5rem 0.5rem;
}
.player-card .list.numbered li::before { width: 5rem; position: absolute; left: 0; text-align: center; opacity: 0.5;
}
.player-card .list.numbered span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 8rem; padding-right: 2rem; position: absolute; top: 0; right: 0; bottom: 0; text-align: right;
}
.player-card .list.numbered li:first-child span { background-color: #37ceff;
}
/** Overlay Layer **/
.overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: -webkit-linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1)), -webkit-linear-gradient(135deg, transparent, rgba(126, 87, 194, 0.1)); background: linear-gradient(-45deg, transparent, rgba(255, 255, 255, 0.1)), linear-gradient(-45deg, transparent, rgba(126, 87, 194, 0.1)); pointer-events: none;
}
Day 78 - TV UI - Player Card - Script Codes
Day 78 - TV UI - Player Card - Script Codes
Home Page Home
Developer Arnelle Balane
Username arnellebalane
Uploaded October 14, 2022
Rating 4
Size 3,004 Kb
Views 16,192
Do you need developer help for Day 78 - TV UI - Player Card?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Arnelle Balane (arnellebalane) Script Codes
Name
Day 60 - Knob
Day 48 - Speedometer
Pixel mario
Day 85 - Cinema Application
Day 41 - File Upload Widget
Running pixel mario
Day 77 - Choose Category
Virtual Filesystem
Day 11 - Calendar Card
Yummy Food App
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!