Use Flexbox to Help Dave Matthews!

Developer
Joshua P. Larson
Size
4,310 Kb
Views
52,624
  1. Use Flexbox to Help Dave Matthews! Previews
  2. Use Flexbox to Help Dave Matthews! HTML Codes
  3. Use Flexbox to Help Dave Matthews! CSS Codes
  4. Use Flexbox to Help Dave Matthews! JS Codes

How do I make an use flexbox to help dave matthews!?

He's struggling to add space-between a few of his song lyrics. Can you help him out? Here's a hint. What is a use flexbox to help dave matthews!? How do you make a use flexbox to help dave matthews!? This script and codes were developed by Joshua P. Larson on 22 July 2022, Friday.

Use Flexbox to Help Dave Matthews! Previews
IQ Test

Use Flexbox to Help Dave Matthews! - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Use Flexbox to Help Dave Matthews!</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" href="css/style.css">
</head>
<body> <pre>
<style id="dave-matthews"> /* Help Dave by editing this style tag in the HTML! */ .band { display: flex; flex-flow: column nowrap; justify-content: ???; }
</style>
</pre>
<div class="band"> <div>the tears we cry</div> <div>the wicked lies we tell</div> <div>the wicked lies we tell</div> <div>where you're smilin' high</div> <div>the bullets in our firefight</div> <div>our wicked lies</div> <div>between wrong and right</div> <div>your heart and mine</div>
</div>
<div class="nag"> <p>Dave Matthews wishes you would add some <em>space-between</em> these elements using <a href="https://css-tricks.com/almanac/properties/j/justify-content/" target="_blank">justify content</a> and the HTML editor&hellip;</p>
</div>
<div class="vid"></div> <script src="js/index.js"></script>
</body>
</html>

Use Flexbox to Help Dave Matthews! - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto);
body { background: #a010b1; color: #fff; font-family: Roboto, Helvetica, Arial, sans-serif;
}
head { display: block;
}
pre { background: #da3aed; margin: 0;
}
style#dave-matthews { display: block;
}
.band { height: 100%; padding: 1rem; height: calc(100vh - 13em);
}
.band div { padding: .5vh; border-radius: 10px; background-color: #F0F6A9; color: #333; text-align: center; font-size: 2vh;
}
.band div:not(:last-child) { margin-bottom: 1rem;
}
.nag { position: absolute; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.75); padding: 1rem; max-width: 300px; line-height: 1.5; -webkit-transition: opacity 0.4s; transition: opacity 0.4s;
}
.nag p { margin: 0;
}
.nag a { color: #efefef;
}
.nag.hide { opacity: 0;
}
.vid { position: absolute; top: 50%; left: 50%; -webkit-transform-origin: 0 0; transform-origin: 0 0; display: none; opacity: .8;
}
.vid.active { display: block; -webkit-animation: scale 5s infinite linear alternate; animation: scale 5s infinite linear alternate;
}
@-webkit-keyframes scale { from { -webkit-transform: scale(0.75) translate(-50%, -50%); transform: scale(0.75) translate(-50%, -50%); } to { -webkit-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); }
}
@keyframes scale { from { -webkit-transform: scale(0.75) translate(-50%, -50%); transform: scale(0.75) translate(-50%, -50%); } to { -webkit-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); }
}

Use Flexbox to Help Dave Matthews! - Script Codes JS Codes

'use strict';
(function () { var VID = '<iframe width="560" height="315" src="https://www.youtube.com/embed/uiVav5nBmOE?autoplay=1&start=25;rel=0&amp" frameborder="0" allowfullscreen></iframe>'; var dm = document.getElementById('dave-matthews'); var vidContainer = document.querySelector('.vid'); var nag = document.querySelector('.nag'); var addVid = function addVid() { vidContainer.innerHTML = VID; vidContainer.classList.add('active'); }; var containsSpaceBetween = function containsSpaceBetween(code) { var fixed = code.replace(/(\r\n|\n|\r| )/gm, ""); return fixed.indexOf('justify-content:space-between;') != -1; }; window.addEventListener('load', function () { if (containsSpaceBetween(dm.innerText)) { addVid(); nag.classList.add('hide'); } });
})();
Use Flexbox to Help Dave Matthews! - Script Codes
Use Flexbox to Help Dave Matthews! - Script Codes
Home Page Home
Developer Joshua P. Larson
Username jplhomer
Uploaded July 22, 2022
Rating 3.5
Size 4,310 Kb
Views 52,624
Do you need developer help for Use Flexbox to Help Dave Matthews!?

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!

Joshua P. Larson (jplhomer) Script Codes
Name
Displaying a Google Street View of your current location
Fixed Nav HoverIntent Example
Webkit Text Masking
Responsive HTML Timeline
Lightweight Quiz Widget
CSS-Only Art Direction
Seamless Scrolling Background
Verge-Style Homepage Tiles
Populate Native HTML Datalist with AJAX
Hey React
Create amazing blog posts 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!