Colors and Media Queries

Developer
Ty Strong
Size
2,952 Kb
Views
36,432
  1. Colors and Media Queries Previews
  2. Colors and Media Queries HTML Codes
  3. Colors and Media Queries CSS Codes
  4. Colors and Media Queries JS Codes

How do I make an colors and media queries?

As you resize the window, you get the perfect number of colors per row, with no gaps. Responsive!. What is a colors and media queries? How do you make a colors and media queries? This script and codes were developed by Ty Strong on 11 August 2022, Thursday.

Colors and Media Queries Previews
IQ Test

Colors and Media Queries - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colors and Media Queries</title> <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(http://fonts.googleapis.com/css?family=Oswald:400,700);
body { color: #fff; margin: 0; font-size: 30px; font-family: 'Oswald', sans-serif;
}
h1 { color: #333; margin-left: 14px; font-size: 5vw;
}
div { box-sizing: border-box; white-space: nowrap; float: left; width: 16.666%; height: 140px; padding: 14px; box-shadow: inset 0 0 0 7px rgba(255,255,255,0.2); overflow: hidden;
}
@media (max-width: 1100px) {div {width: 20%;}}
@media (max-width: 900px) {div {width: 25%;} h1 {font-size: 1.5em;}}
@media (max-width: 740px) {div {width: 33.33%;}}
@media (max-width: 560px) {div {width: 50%;}}
@media (max-width: 440px) {div {width: 100%;} h1 {display: none;}}
div:nth-child(2) {background: #DA4453;}
div:nth-child(3) {background: #F6BB42;}
div:nth-child(4) {background: #3BAFDA;}
div:nth-child(5) {background: #4A89DC;}
div:nth-child(6) {background: #E9573F;}
div:nth-child(7) {background: #37BC9B;}
div:nth-child(8) {background: #D770AD;}
div:nth-child(9) {background: #8CC152;}
div:nth-child(10) {background: #967ADC;}
div:nth-child(11) {background: #E6E9ED; color: #333;}
div:nth-child(12) {background: #AAB2BD; color: #333;}
div:nth-child(13) {background: #434A54;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1> Colors | Media Queries
</h1>
<div> Grapefruit
</div>
<div> Sunflower
</div>
<div> Aqua
</div>
<div> Blue Jeans
</div>
<div> Bittersweet
</div>
<div> Mint
</div>
<div> Pink Rose
</div>
<div> Grass
</div>
<div> Lavender
</div>
<div> Light Gray
</div>
<div> Medium Gray
</div>
<div> Dark Gray
</div> <script src="js/index.js"></script>
</body>
</html>

Colors and Media Queries - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
body { color: #fff; margin: 0; font-size: 30px; font-family: 'Oswald', sans-serif;
}
h1 { color: #333; margin-left: 14px; font-size: 5vw;
}
div { box-sizing: border-box; white-space: nowrap; float: left; width: 16.666%; height: 140px; padding: 14px; box-shadow: inset 0 0 0 7px rgba(255,255,255,0.2); overflow: hidden;
}
@media (max-width: 1100px) {div {width: 20%;}}
@media (max-width: 900px) {div {width: 25%;} h1 {font-size: 1.5em;}}
@media (max-width: 740px) {div {width: 33.33%;}}
@media (max-width: 560px) {div {width: 50%;}}
@media (max-width: 440px) {div {width: 100%;} h1 {display: none;}}
div:nth-child(2) {background: #DA4453;}
div:nth-child(3) {background: #F6BB42;}
div:nth-child(4) {background: #3BAFDA;}
div:nth-child(5) {background: #4A89DC;}
div:nth-child(6) {background: #E9573F;}
div:nth-child(7) {background: #37BC9B;}
div:nth-child(8) {background: #D770AD;}
div:nth-child(9) {background: #8CC152;}
div:nth-child(10) {background: #967ADC;}
div:nth-child(11) {background: #E6E9ED; color: #333;}
div:nth-child(12) {background: #AAB2BD; color: #333;}
div:nth-child(13) {background: #434A54;}

Colors and Media Queries - Script Codes JS Codes

// colors by http://codepen.io/devi8/pen/lvIeh
// I use their colors quite often.
Colors and Media Queries - Script Codes
Colors and Media Queries - Script Codes
Home Page Home
Developer Ty Strong
Username tystrong
Uploaded August 11, 2022
Rating 4
Size 2,952 Kb
Views 36,432
Do you need developer help for Colors and Media Queries?

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!

Ty Strong (tystrong) Script Codes
Name
Logo with Slim and SCSS
New Personal Page
Social Network Messages
Beautiful Round Shadow
8-Bit Mario
Updated Personal Page
CSS Spinner
CSS Laptop
The Greatest.
Rolling Circle
Create amazing love letters 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!