DevWars Player

Developer
Size
4,798 Kb
Views
24,288

How do I make an devwars player?

Yeah, I know it's not "identical." I'm cool with that. I wanted to do it all with CSS. I didn't use the sprite sheet. This was fun. And thank the lord for Flexbox.. What is a devwars player? How do you make a devwars player? This script and codes were developed by BROWNERD on 29 August 2022, Monday.

DevWars Player Previews

DevWars Player - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>DevWars Player</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/1311f2931ab6ecb41850f3e08.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="player"> <div class="artwork"></div> <div class="ui-upper"> <div class="indicator"></div> <div class="time"> <div class="completed">1:37</div> <div class="total">3:45</div> </div> </div> <div class="ui-lower"> <div class="play"> <div class="icon"></div> </div> <div class="info"> <div class="song">small axe</div> <div class="artist">Bob Marley</div> </div> <div class="controls"> <div class="repeat"></div> <div class="previous"></div> <div class="next"></div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

DevWars Player - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background: -webkit-radial-gradient(#ee82ee, #4b0082); background: radial-gradient(#ee82ee, #4b0082); color: #ccc; font-family: roboto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh; width: 100vw;
}
.player { background-color: #f00; border-radius: 1rem; box-shadow: 1rem 1rem 2rem rgba(75,0,130,0.5); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 215px; width: 280px; overflow: hidden;
}
.artwork { background: url("http://images.fineartamerica.com/images-medium-large/2-bob-marley-1979-chris-walter.jpg"), -webkit-linear-gradient(45deg, #f00, #ffd700, #008000); background: url("http://images.fineartamerica.com/images-medium-large/2-bob-marley-1979-chris-walter.jpg"), linear-gradient(45deg, #f00, #ffd700, #008000); background-size: cover; background-blend-mode: screen; height: 60%;
}
.ui-upper { background-color: #fff; height: 10%;
}
.indicator { background: -webkit-linear-gradient(left, #f0f, #ee82ee); background: linear-gradient(90deg, #f0f, #ee82ee); height: 2px; width: 50%;
}
.time { color: #666; font-weight: 100; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 0.8rem; padding: 0.5rem 1rem;
}
.ui-lower { background-color: #fff; height: 30%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around;
}
.play { background-color: #333; border-radius: 50%; height: 2.5rem; width: 2.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.play:hover { background-color: #ee82ee;
}
.play:hover .icon { background-color: #ee82ee; width: 0; height: 0; border-top: 5px solid transparent; border-left: 10px solid #fff; border-bottom: 5px solid transparent; border-right: 0;
}
.play .icon { background-color: #333; border-left: 3px solid #fff; border-right: 3px solid #fff; height: 0.8rem; width: 0.75rem;
}
.info { color: #333; font-family: 'roboto condensed';
}
.info .song { font-size: 1.25rem; font-weight: 600; text-transform: capitalize;
}
.info .artist { color: #bbb;
}
.controls { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; width: 28%;
}
.repeat { border: 1px solid #333; height: 0.75rem; width: 1.4rem; position: relative;
}
.repeat:hover { border-color: #ee82ee;
}
.repeat:hover::before { border-left: 6px solid #ee82ee;
}
.repeat:hover::after { border-right: 6px solid #ee82ee;
}
.repeat::before { content: ''; position: absolute; top: -5px; right: 3px; width: 0; height: 0; border-top: 4px solid transparent; border-left: 6px solid #333; border-bottom: 4px solid transparent;
}
.repeat::after { content: ''; position: absolute; bottom: -5px; left: 3px; width: 0; height: 0; border-top: 4px solid transparent; border-right: 6px solid #333; border-bottom: 4px solid transparent;
}
.previous { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 1.25rem; width: 1.25rem; position: relative;
}
.previous:hover { border-color: #ee82ee;
}
.previous:hover::before,
.previous:hover::after { border-right: 8px solid #ee82ee;
}
.previous::before { content: ''; width: 0; height: 0; border-top: 5px solid transparent; border-right: 8px solid #333; border-bottom: 5px solid transparent;
}
.previous::after { content: ''; width: 0; height: 0; border-top: 5px solid transparent; border-right: 8px solid #333; border-bottom: 5px solid transparent;
}
.next { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 1.25rem; width: 1.25rem; position: relative;
}
.next:hover { border-color: #ee82ee;
}
.next:hover::before,
.next:hover::after { border-left: 8px solid #ee82ee;
}
.next::before { content: ''; width: 0; height: 0; border-top: 5px solid transparent; border-left: 8px solid #333; border-bottom: 5px solid transparent;
}
.next::after { content: ''; width: 0; height: 0; border-top: 5px solid transparent; border-left: 8px solid #333; border-bottom: 5px solid transparent;
}

DevWars Player - Script Codes JS Codes

(function() {
}).call(this);
DevWars Player - Script Codes
DevWars Player - Script Codes
Home Page Home
Developer BROWNERD
Username brownerd
Uploaded August 29, 2022
Rating 3.5
Size 4,798 Kb
Views 24,288
Do you need developer help for DevWars Player?

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!

BROWNERD (brownerd) Script Codes
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!