DevWars weekly challenge week 1
How do I make an devwars weekly challenge week 1?
28/09/2016 - Updated assetsAudio Player UImy submission for the DevWars weekly challenge, the idea was to recreate the dribble shot (left) with code (right). . What is a devwars weekly challenge week 1? How do you make a devwars weekly challenge week 1? This script and codes were developed by Keith Light on 18 November 2022, Friday.
DevWars weekly challenge week 1 Previews
DevWars weekly challenge week 1 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>DevWars weekly challenge week 1</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* Vars */
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700);
/* Main Styles */
* { box-sizing: border-box;
}
img { max-width: 100%;
}
.container { width: 960px; position: relative; margin: 0 auto; padding: 0;
}
.columns { float: left; display: block; margin-bottom: 0; vertical-align: top; padding: 0;
}
.columns.half { width: 50%;
}
html { font-size: 16px;
}
body { background-color: #D1D4D5; font-family: "Roboto", sans-serif; font-size: 1rem;
}
h2 { font-size: 2rem;
}
.player-title { margin: 3.2rem 0; text-align: center;
}
b { font-weight: 700;
}
.original-image { text-align: center;
}
/* Player */
.player-outer-container { padding: 2.5rem;
}
.player-outer { background: white; width: 70%; height: 215px; border-radius: 1rem; margin: 0 auto; overflow: hidden; box-shadow: -4px 11px 11px -6px rgba(0, 0, 0, 0.2); animation: 2s fadeIn;
}
.artist-hero { overflow: hidden; position: relative; height: 60%; background: url(http://sophietsimmons.com/wp-content/uploads/James_Bay-color-17_3126971k.jpg) top center no-repeat; background-size: cover;
}
.artist-hero:hover .artist-info { transform: translate(0);
}
.artist-hero:before, .artist-hero:after { position: absolute; bottom: 0; left: 0; content: ""; height: 2px;
}
.artist-hero:before { width: 100%; background: #78909C; border-radius: 0 5px 5px 0; box-shadow: 2px 1px 5px 1px #78909C;
}
.artist-hero:after { width: 43%; background: #EC407A; border-radius: 0 5px 5px 0; box-shadow: 2px 1px 5px 1px #EC407A;
}
.artist-info { position: absolute; background: rgba(255, 255, 255, 0.5); bottom: 0; left: 0; padding: 1rem; width: 100%; text-align: center; font-size: 1rem; transform: translate(0, 200%); transition: all .5s;
}
.track-duration { color: #B0BEC5; font-size: 0.6rem; margin: 0.3rem;
}
.track-end { float: right;
}
/* Controls */
.controls-container { padding: 5px 0 5px 10px; opacity: 0; animation: 1s fadeInUp; animation-delay: 0.5s; animation-fill-mode: forwards;
}
.track-info { float: left; width: 53%; color: #B0BEC5; font-size: 0.7rem; padding: 0.4rem 0.6rem;
}
.track-info span { font-size: 1.2rem; display: block; color: #546E7A; margin-bottom: 0.2rem;
}
.additional-controls { margin-top: 0.35rem;
}
.controls-required, .btn-play-pause, .btn-shuffle-repeat, .btn-previous-track, .btn-next-track { background: url(//i.imgur.com/FAyemkP.png); cursor: pointer; float: left; transition: all 0.2s;
}
.btn-play-pause { background-position: 0 0; width: 45px; height: 45px;
}
.btn-play-pause:hover { opacity: 0.5;
}
.btn-play { background-position: 0 49px;
}
.btn-shuffle-repeat, .btn-previous-track, .btn-next-track { width: 25px; height: 25px; opacity: 0.4;
}
.btn-shuffle-repeat:hover, .btn-previous-track:hover, .btn-next-track:hover { opacity: 1;
}
.btn-shuffle-repeat { background-position: 305px -30px;
}
.on { opacity: 1;
}
.btn-previous-track { background-position: 82px -30px;
}
.btn-next-track { background-position: 52px -30px;
}
/* @Keyframes */
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 100% { opacity: 1; transform: none; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="container"> <div class="row"> <!-- Left Content /--> <div class="columns half original-image"> <img src="https://d13yacurqjgara.cloudfront.net/users/369807/screenshots/2133799/is-this-love_1x.png" /> <h2>Original Dribbble Shot</h2> </div> <!-- // End Left Content--> <!-- Right Content /--> <div class="columns half"> <!-- Player Container /--> <div class="player-outer-container"> <div class="player-outer"> <!-- Artists Image /--> <div class="artist-hero"> <span class="artist-info"><b>James Bay</b> - Hold Back The River</span> </div><!--// End Artists Image --> <!-- Track Duration /--> <div class="track-duration"> <span class="track-start">1.37</span> <span class="track-end">3.52</span> </div><!--// END Track Duration --> <!-- Controls /--> <div class="controls-container"> <div class="btn-play-pause"> </div> <div class="track-info"> <span>Hold Back...</span>James Bay </div> <div class="additional-controls"> <ul> <li class="btn-shuffle-repeat"></li> <li class="btn-previous-track"></li> <li class="btn-next-track"></li> </ul> </div> </div><!-- // END Controls --> </div> <h2 class="player-title">My Version</h2> </div><!-- // END Player Container --> </div><!-- // END Right Content --> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
DevWars weekly challenge week 1 - Script Codes CSS Codes
/* Vars */
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700);
/* Main Styles */
* { box-sizing: border-box;
}
img { max-width: 100%;
}
.container { width: 960px; position: relative; margin: 0 auto; padding: 0;
}
.columns { float: left; display: block; margin-bottom: 0; vertical-align: top; padding: 0;
}
.columns.half { width: 50%;
}
html { font-size: 16px;
}
body { background-color: #D1D4D5; font-family: "Roboto", sans-serif; font-size: 1rem;
}
h2 { font-size: 2rem;
}
.player-title { margin: 3.2rem 0; text-align: center;
}
b { font-weight: 700;
}
.original-image { text-align: center;
}
/* Player */
.player-outer-container { padding: 2.5rem;
}
.player-outer { background: white; width: 70%; height: 215px; border-radius: 1rem; margin: 0 auto; overflow: hidden; box-shadow: -4px 11px 11px -6px rgba(0, 0, 0, 0.2); animation: 2s fadeIn;
}
.artist-hero { overflow: hidden; position: relative; height: 60%; background: url(http://sophietsimmons.com/wp-content/uploads/James_Bay-color-17_3126971k.jpg) top center no-repeat; background-size: cover;
}
.artist-hero:hover .artist-info { transform: translate(0);
}
.artist-hero:before, .artist-hero:after { position: absolute; bottom: 0; left: 0; content: ""; height: 2px;
}
.artist-hero:before { width: 100%; background: #78909C; border-radius: 0 5px 5px 0; box-shadow: 2px 1px 5px 1px #78909C;
}
.artist-hero:after { width: 43%; background: #EC407A; border-radius: 0 5px 5px 0; box-shadow: 2px 1px 5px 1px #EC407A;
}
.artist-info { position: absolute; background: rgba(255, 255, 255, 0.5); bottom: 0; left: 0; padding: 1rem; width: 100%; text-align: center; font-size: 1rem; transform: translate(0, 200%); transition: all .5s;
}
.track-duration { color: #B0BEC5; font-size: 0.6rem; margin: 0.3rem;
}
.track-end { float: right;
}
/* Controls */
.controls-container { padding: 5px 0 5px 10px; opacity: 0; animation: 1s fadeInUp; animation-delay: 0.5s; animation-fill-mode: forwards;
}
.track-info { float: left; width: 53%; color: #B0BEC5; font-size: 0.7rem; padding: 0.4rem 0.6rem;
}
.track-info span { font-size: 1.2rem; display: block; color: #546E7A; margin-bottom: 0.2rem;
}
.additional-controls { margin-top: 0.35rem;
}
.controls-required, .btn-play-pause, .btn-shuffle-repeat, .btn-previous-track, .btn-next-track { background: url(//i.imgur.com/FAyemkP.png); cursor: pointer; float: left; transition: all 0.2s;
}
.btn-play-pause { background-position: 0 0; width: 45px; height: 45px;
}
.btn-play-pause:hover { opacity: 0.5;
}
.btn-play { background-position: 0 49px;
}
.btn-shuffle-repeat, .btn-previous-track, .btn-next-track { width: 25px; height: 25px; opacity: 0.4;
}
.btn-shuffle-repeat:hover, .btn-previous-track:hover, .btn-next-track:hover { opacity: 1;
}
.btn-shuffle-repeat { background-position: 305px -30px;
}
.on { opacity: 1;
}
.btn-previous-track { background-position: 82px -30px;
}
.btn-next-track { background-position: 52px -30px;
}
/* @Keyframes */
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 100% { opacity: 1; transform: none; }
}DevWars weekly challenge week 1 - Script Codes JS Codes
// Shuffle Toggle
$('.btn-shuffle-repeat').click(function(){ $(this).toggleClass("on");
});
// Play/Pause Toggle
$('.btn-play-pause').click(function(){ $(this).toggleClass("btn-play");
});
| Developer | Keith Light |
| Username | keefyboooo |
| Uploaded | November 18, 2022 |
| Rating | 3 |
| Size | 6,217 Kb |
| Views | 14,168 |
Do you need developer help for DevWars weekly challenge week 1?
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!
Keith Light (keefyboooo) Script Codes
| Name | Size |
| DevWars Weekly Challenge Week 3 | 6,386 Kb |
| Weather App Concept | 5,869 Kb |
| Skills Display, using jQuery | 4,084 Kb |
| Overlay Menu Concept | 4,431 Kb |
| Rainbow Text | 1,853 Kb |
| Material Design Colour Palette | 14,903 Kb |
| Responsive Dock Menu Concept | 5,029 Kb |
| CSS Pseudo Element Hover Effects | 4,029 Kb |
| Off Canvas Pop Out Menu | 4,027 Kb |
| Mobile Menu Concept | 6,725 Kb |
Create amazing captions 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!
Similar Scripts & Codes
| Name | Username | Size |
| Very Simple Slider | Doodlemarks | 2,682 Kb |
| HTML5 Video Autoplay | Zivcos | 1,352 Kb |
| Incremental game | Eprouver | 5,868 Kb |
| React Template | Isac | 1,241 Kb |
| Svg penguin | _massimo | 2,990 Kb |
| Simple Buttons | Haydenmills | 1,750 Kb |
| IE11 Test | Boostnewmedia | 4,998 Kb |
| Canvas snow | Win7killer | 2,572 Kb |
| CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
| Improve | Gavra | 1,652 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!