DevWars Weekly Challenge Week 8

Developer
Keith Light
Size
7,605 Kb
Views
12,144
  1. DevWars Weekly Challenge Week 8 Previews
  2. DevWars Weekly Challenge Week 8 HTML Codes
  3. DevWars Weekly Challenge Week 8 CSS Codes
  4. DevWars Weekly Challenge Week 8 JS Codes

How do I make an devwars weekly challenge week 8?

Mobile "burger" menu for DevWars week 8 challengehaving an issue in webkit with border radius & overflow hidden not working on children elements, Ive had to take a guess at the childs equal border radius. Any fixes let me know in the comments. What is a devwars weekly challenge week 8? How do you make a devwars weekly challenge week 8? This script and codes were developed by Keith Light on 18 November 2022, Friday.

DevWars Weekly Challenge Week 8 Previews
IQ Test

DevWars Weekly Challenge Week 8 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>DevWars Weekly Challenge Week 8</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.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! */ @import url(https://fonts.googleapis.com/css?family=Lato:300,400);
/* Grid */
* { box-sizing: border-box; transform: translateZ(0);
}
.container { max-width: 280px; position: relative; margin: 0 auto; padding: 0;
}
.container:before, .container:after { content: ""; display: table;
}
.container:after { clear: both;
}
.row:before, .row:after { content: ""; display: table;
}
.row:after { clear: both;
}
.columns { float: left; margin: 0;
}
.columns.six { width: 50%;
}
/* ul reset */
ul { list-style: none; margin: 0; padding: 0;
}
/* input reset */
input[type="search"] { -webkit-appearance: none; appearance: none; border: none; outline: none;
}
/* Main Styles */
html { font-size: 16px;
}
body { background: #f5f5f5; color: #37474F; font-family: "Lato", Tahoma, Geneva, sans-serif; font-size: 1rem; line-height: 1.4; padding: 2rem 0;
}
/* Phone Outer */
.phone { border: 5px solid #2196F3; border-radius: 2rem; overflow: hidden;
}
/* Phone Top */
.phone-top { background: #212121; height: 50px; border-radius: 1.5rem 1.5rem 0 0; position: relative;
}
.phone-top:after { content: ""; background: #3b3b3b; position: absolute; width: 40%; height: 10%; top: 50%; left: 30%;
}
/* Phone Inner */
.phone-inner { background: linear-gradient(to bottom right, rgba(244, 67, 54, 0.4), rgba(33, 150, 243, 0.4)); border: 2px solid #3b3b3b; height: 380px; position: relative;
}
.phone-inner-details { background: #0c83e4; color: #f5f5f5; font-size: 0.6rem; padding: 0 0.5rem; text-align: center;
}
.phone-inner-details:before, .phone-inner-details:after { content: ""; display: table;
}
.phone-inner-details:after { clear: both;
}
.details-left, .details-right, .details-center { float: left; width: 33.33%;
}
.details-left { text-align: left;
}
.details-left i { padding-right: 0.5rem;
}
.details-left i:last-child { padding: 0;
}
.details-right { text-align: right;
}
.details-right i { padding-right: 0.5rem;
}
.details-right i:last-child { padding: 0;
}
.current-time { font-weight: 900;
}
nav { background: #90CAF9; padding: 0.5rem; position: relative;
}
nav i.fa.fa-bars, nav i.fa.fa-ellipsis-v { cursor: pointer; font-size: 1.5rem; padding: 0 0.5rem; position: absolute; top: 50%; transform: translate(0, -50%);
}
nav i.fa.fa-bars { left: 5px;
}
nav i.fa.fa-ellipsis-v { right: 5px;
}
.search-bar { width: 70%; margin: 0 auto; position: relative;
}
.search-bar input[type="search"] { box-sizing: border-box; border: 2px solid transparent; border-radius: 5px; text-align: center; width: 100%; transition: all 0.5s;
}
.search-bar input[type="search"]:focus { border: 2px solid #2196F3; outline: none;
}
.search-bar .fa-search { position: absolute; top: 0; right: 0; font-size: 1rem; padding: 0.25rem 0.5rem;
}
/* Burger Menu */
.burger-menu { position: absolute; width: 100%; height: 100%; left: 0; top: 5%; border-radius: 50%; background: #42A5F5; color: #f5f5f5; text-align: center; opacity: 0; transform-origin: 0 0; transform: scale(0); transition-delay: 1s; transition: all 1s cubic-bezier(1, -0.5, 0, 1);
}
.burger-menu li { padding: 1rem; opacity: 0; transform: translate(0, 20px); transition: all 0.3s;
}
.burger-menu .social-icons i { font-size: 2rem; padding: 1rem; opacity: 0; transform: translate(0, 20px); transition: all 0.3s;
}
.burger-menu .close-menu { cursor: pointer; padding: 0.5rem 1rem; text-align: right;
}
.burger-menu.active { border-radius: 0; left: 0; top: 0; opacity: 1; text-align: center; transform: scale(1);
}
.burger-menu.active li { opacity: 1; transform: none; transition: all 1s;
}
.burger-menu.active li:nth-child(1) { transition-delay: 0.5s;
}
.burger-menu.active li:nth-child(2) { transition-delay: 1s;
}
.burger-menu.active li:nth-child(3) { transition-delay: 1.5s;
}
.burger-menu.active li:nth-child(4) { transition-delay: 2s;
}
.burger-menu.active li:nth-child(5) { transition-delay: 2.5s;
}
.burger-menu.active .social-icons i { opacity: 1; transform: none; transition: all 1s; transition-delay: 3s;
}
/* Phone Bottom */
.phone-bottom { background: #212121; height: 50px; position: relative; border-radius: 0 0 1.5rem 1.5rem;
}
.phone-bottom:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: #3b3b3b; border: 2px solid #a1a1a1;
}
/* Ripple Effect */
.ink { width: 50px; height: 50px; display: block; position: absolute; pointer-events: none; border-radius: 50%; transform: scale(0); background: white; opacity: 1;
}
.ink.animate { animation: ripple-effect 0.6s linear forwards;
}
.ink.animate:after { content: ""; width: 100%; height: 100%; display: block; position: absolute; pointer-events: none; border-radius: 50%; transform: scale(0); background: red; opacity: 1; animation: ripple-effect .3s linear forwards; animation-delay: 1s;
}
@keyframes ripple-effect { 100% { opacity: 0; transform: scale(2.5); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="container"> <!-- Start Phone //--> <div class="phone"> <!-- Start Phone Top //--> <div class="phone-top"> </div> <!--// End Phone Top --> <!-- Start Phone Inner //--> <div class="phone-inner"> <!-- Start Top Bar Details //--> <div class="phone-inner-details"> <div class="details-left"> <i class="fa fa-signal"></i> <span>G&T</span> </div> <div class="details-center"> <span class="current-time"> 08.52am </span> </div> <div class="details-right"> <i class="fa fa-location-arrow"></i> <i class="fa fa-wifi"></i> <i class="fa fa-battery-full"></i> </div> </div> <!--// End Top Bar Details--> <!-- Start Phone Nav Bar //--> <nav> <i class="fa fa-bars" id="js-burger-menu-toggle"></i> <div class="search-bar"> <input type="search" placeholder="Search"> <i class="fa fa-search"></i> </div> <i class="fa fa-ellipsis-v"></i> </nav> <!--// End Phone Nav Bar --> <!-- Start Nav Burger Menu //--> <section class="burger-menu"> <div class="close-menu" id="js-close-menu"> <i class="fa fa-times"></i> </div> <ul> <li>Menu</li> <li>Contact</li> <li>About Us</li> <li>Doritos</li> <li>& Dip</li> <div class="social-icons"> <i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-codepen"></i> </div> </ul> </section> </div> <!--// End Phone Inner--> <!-- Start Phone Bottom //--> <div class="phone-bottom"> </div> <!--// End Phone Bottom --> </div> <!--// End Phone -->
</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 8 - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
/* Grid */
* { box-sizing: border-box; transform: translateZ(0);
}
.container { max-width: 280px; position: relative; margin: 0 auto; padding: 0;
}
.container:before, .container:after { content: ""; display: table;
}
.container:after { clear: both;
}
.row:before, .row:after { content: ""; display: table;
}
.row:after { clear: both;
}
.columns { float: left; margin: 0;
}
.columns.six { width: 50%;
}
/* ul reset */
ul { list-style: none; margin: 0; padding: 0;
}
/* input reset */
input[type="search"] { -webkit-appearance: none; appearance: none; border: none; outline: none;
}
/* Main Styles */
html { font-size: 16px;
}
body { background: #f5f5f5; color: #37474F; font-family: "Lato", Tahoma, Geneva, sans-serif; font-size: 1rem; line-height: 1.4; padding: 2rem 0;
}
/* Phone Outer */
.phone { border: 5px solid #2196F3; border-radius: 2rem; overflow: hidden;
}
/* Phone Top */
.phone-top { background: #212121; height: 50px; border-radius: 1.5rem 1.5rem 0 0; position: relative;
}
.phone-top:after { content: ""; background: #3b3b3b; position: absolute; width: 40%; height: 10%; top: 50%; left: 30%;
}
/* Phone Inner */
.phone-inner { background: linear-gradient(to bottom right, rgba(244, 67, 54, 0.4), rgba(33, 150, 243, 0.4)); border: 2px solid #3b3b3b; height: 380px; position: relative;
}
.phone-inner-details { background: #0c83e4; color: #f5f5f5; font-size: 0.6rem; padding: 0 0.5rem; text-align: center;
}
.phone-inner-details:before, .phone-inner-details:after { content: ""; display: table;
}
.phone-inner-details:after { clear: both;
}
.details-left, .details-right, .details-center { float: left; width: 33.33%;
}
.details-left { text-align: left;
}
.details-left i { padding-right: 0.5rem;
}
.details-left i:last-child { padding: 0;
}
.details-right { text-align: right;
}
.details-right i { padding-right: 0.5rem;
}
.details-right i:last-child { padding: 0;
}
.current-time { font-weight: 900;
}
nav { background: #90CAF9; padding: 0.5rem; position: relative;
}
nav i.fa.fa-bars, nav i.fa.fa-ellipsis-v { cursor: pointer; font-size: 1.5rem; padding: 0 0.5rem; position: absolute; top: 50%; transform: translate(0, -50%);
}
nav i.fa.fa-bars { left: 5px;
}
nav i.fa.fa-ellipsis-v { right: 5px;
}
.search-bar { width: 70%; margin: 0 auto; position: relative;
}
.search-bar input[type="search"] { box-sizing: border-box; border: 2px solid transparent; border-radius: 5px; text-align: center; width: 100%; transition: all 0.5s;
}
.search-bar input[type="search"]:focus { border: 2px solid #2196F3; outline: none;
}
.search-bar .fa-search { position: absolute; top: 0; right: 0; font-size: 1rem; padding: 0.25rem 0.5rem;
}
/* Burger Menu */
.burger-menu { position: absolute; width: 100%; height: 100%; left: 0; top: 5%; border-radius: 50%; background: #42A5F5; color: #f5f5f5; text-align: center; opacity: 0; transform-origin: 0 0; transform: scale(0); transition-delay: 1s; transition: all 1s cubic-bezier(1, -0.5, 0, 1);
}
.burger-menu li { padding: 1rem; opacity: 0; transform: translate(0, 20px); transition: all 0.3s;
}
.burger-menu .social-icons i { font-size: 2rem; padding: 1rem; opacity: 0; transform: translate(0, 20px); transition: all 0.3s;
}
.burger-menu .close-menu { cursor: pointer; padding: 0.5rem 1rem; text-align: right;
}
.burger-menu.active { border-radius: 0; left: 0; top: 0; opacity: 1; text-align: center; transform: scale(1);
}
.burger-menu.active li { opacity: 1; transform: none; transition: all 1s;
}
.burger-menu.active li:nth-child(1) { transition-delay: 0.5s;
}
.burger-menu.active li:nth-child(2) { transition-delay: 1s;
}
.burger-menu.active li:nth-child(3) { transition-delay: 1.5s;
}
.burger-menu.active li:nth-child(4) { transition-delay: 2s;
}
.burger-menu.active li:nth-child(5) { transition-delay: 2.5s;
}
.burger-menu.active .social-icons i { opacity: 1; transform: none; transition: all 1s; transition-delay: 3s;
}
/* Phone Bottom */
.phone-bottom { background: #212121; height: 50px; position: relative; border-radius: 0 0 1.5rem 1.5rem;
}
.phone-bottom:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: #3b3b3b; border: 2px solid #a1a1a1;
}
/* Ripple Effect */
.ink { width: 50px; height: 50px; display: block; position: absolute; pointer-events: none; border-radius: 50%; transform: scale(0); background: white; opacity: 1;
}
.ink.animate { animation: ripple-effect 0.6s linear forwards;
}
.ink.animate:after { content: ""; width: 100%; height: 100%; display: block; position: absolute; pointer-events: none; border-radius: 50%; transform: scale(0); background: red; opacity: 1; animation: ripple-effect .3s linear forwards; animation-delay: 1s;
}
@keyframes ripple-effect { 100% { opacity: 0; transform: scale(2.5); }
}

DevWars Weekly Challenge Week 8 - Script Codes JS Codes

$('#js-burger-menu-toggle').click(function() { $('.burger-menu').addClass('active');
});
$('#js-close-menu').click(function() { $(this).parent().removeClass('active');
});
// Working Clock
function clock() { var currentTime = new Date(); var currentHours = currentTime.getHours(); var currentMinutes = currentTime.getMinutes(); // Pad the minutes and seconds with leading zeros, if required currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes; // Choose either "AM" or "PM" as appropriate var timeOfDay = (currentHours < 12) ? "AM" : "PM"; // Compose the string for display var time = currentHours + ":" + currentMinutes + " " + timeOfDay; $(".current-time").html(time);
}
// runs on load
clock();
// runs every 30 seconds so you will only ever be 30seconds or less late ; )
setInterval(clock, 30000);
// Ripple Effect
$('body').click(function(e) { $('.ink').remove(); if ($('body').find(".ink").length == 0) { $('body').append("<span class='ink'></span>"); } var x = e.pageX - $('.ink').width() /2; var y = e.pageY - $('.ink').height() /2; $('.ink').removeClass('animate'); $('.ink').css({ left: x, top: y }); $('.ink').addClass('animate'); $('.x').text("x-coords "+x); $('.y').text("y-coords "+y);
});
DevWars Weekly Challenge Week 8 - Script Codes
DevWars Weekly Challenge Week 8 - Script Codes
Home Page Home
Developer Keith Light
Username keefyboooo
Uploaded November 18, 2022
Rating 3
Size 7,605 Kb
Views 12,144
Do you need developer help for DevWars Weekly Challenge Week 8?

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
SlideToggle Menu
Animated Burger Menu
Skills Display, using jQuery
Material Design Buttons
JQuery Responsive Tabs
Material Design Colour Palette
Angled Menu
DevWars Weekly Challenge Week 2
Mobile Menu Concept
Off Canvas Pop Out Menu
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!