Content through Media Queries

Developer

Size

9,350 Kb

Views

50,600

Content through Media Queries Previews
Content through Media Queries HTML Codes
Content through Media Queries CSS Codes
Content through Media Queries JS Codes

How do I make an content through media queries?

A clean and Sassy way for ArleyM work with Media Queries: http://css-tricks.com/lark-queries/Short and easily maintainable code. Epic win!. What is a content through media queries? How do you make a content through media queries? This script and codes were developed by Hugo Giraudel on 08 August 2022, Monday.

Content through Media Queries Previews

Content through Media Queries - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Content through Media Queries</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ /** * Adjective dictionary says hi! */
/** * Gimme some styles */
.be { display: inline-block; vertical-align: middle; font: 111px/1 'BebasNeueRegular', sans-serif; text-shadow: 1px 1px 4px #333333; text-transform: uppercase; /** * One loop to rule them all * One loop to find them * One loop to bring them all * And in the Sassy way bind them */ /* Biggest size */
}
@media screen and (max-width: 1910px) { .be:after { content: "Be Unconventional."; }
}
@media screen and (max-width: 1900px) { .be:after { content: "Be Flabbergasting."; }
}
@media screen and (max-width: 1890px) { .be:after { content: "Be Scintillating."; }
}
@media screen and (max-width: 1880px) { .be:after { content: "Be Extraordinary."; }
}
@media screen and (max-width: 1870px) { .be:after { content: "Be Unforgettable."; }
}
@media screen and (max-width: 1860px) { .be:after { content: "Be Unpredictable."; }
}
@media screen and (max-width: 1850px) { .be:after { content: "Be Dumbfounding."; }
}
@media screen and (max-width: 1840px) { .be:after { content: "Be Electrifying."; }
}
@media screen and (max-width: 1830px) { .be:after { content: "Be Overwhelming."; }
}
@media screen and (max-width: 1820px) { .be:after { content: "Be Incomparable."; }
}
@media screen and (max-width: 1810px) { .be:after { content: "Be Entertaining."; }
}
@media screen and (max-width: 1800px) { .be:after { content: "Be Magnificient."; }
}
@media screen and (max-width: 1790px) { .be:after { content: "Be Confounding."; }
}
@media screen and (max-width: 1780px) { .be:after { content: "Be Resourceful."; }
}
@media screen and (max-width: 1770px) { .be:after { content: "Be Interesting."; }
}
@media screen and (max-width: 1760px) { .be:after { content: "Be Adventurous."; }
}
@media screen and (max-width: 1750px) { .be:after { content: "Be Bewildering."; }
}
@media screen and (max-width: 1740px) { .be:after { content: "Be Astonishing."; }
}
@media screen and (max-width: 1730px) { .be:after { content: "Be Fascinating."; }
}
@media screen and (max-width: 1720px) { .be:after { content: "Be Outstanding."; }
}
@media screen and (max-width: 1710px) { .be:after { content: "Be Influential."; }
}
@media screen and (max-width: 1700px) { .be:after { content: "Be Imaginative."; }
}
@media screen and (max-width: 1690px) { .be:after { content: "Be Nonsensical."; }
}
@media screen and (max-width: 1680px) { .be:after { content: "Be Stimulating."; }
}
@media screen and (max-width: 1670px) { .be:after { content: "Be Exceptional."; }
}
@media screen and (max-width: 1660px) { .be:after { content: "Be Resplendent."; }
}
@media screen and (max-width: 1650px) { .be:after { content: "Be Commanding."; }
}
@media screen and (max-width: 1640px) { .be:after { content: "Be Determined."; }
}
@media screen and (max-width: 1630px) { .be:after { content: "Be Remarkable."; }
}
@media screen and (max-width: 1620px) { .be:after { content: "Be Incredible."; }
}
@media screen and (max-width: 1610px) { .be:after { content: "Be Impressive."; }
}
@media screen and (max-width: 1600px) { .be:after { content: "Be Perplexing."; }
}
@media screen and (max-width: 1590px) { .be:after { content: "Be Passionate."; }
}
@media screen and (max-width: 1580px) { .be:after { content: "Be Formidable."; }
}
@media screen and (max-width: 1570px) { .be:after { content: "Be Stupefying."; }
}
@media screen and (max-width: 1560px) { .be:after { content: "Be Refreshing."; }
}
@media screen and (max-width: 1550px) { .be:after { content: "Be Delightful."; }
}
@media screen and (max-width: 1540px) { .be:after { content: "Be Incredible."; }
}
@media screen and (max-width: 1530px) { .be:after { content: "Be Innovative."; }
}
@media screen and (max-width: 1520px) { .be:after { content: "Be Monumemtal."; }
}
@media screen and (max-width: 1510px) { .be:after { content: "Be Surprising."; }
}
@media screen and (max-width: 1500px) { .be:after { content: "Be Stupendous."; }
}
@media screen and (max-width: 1490px) { .be:after { content: "Be Staggering."; }
}
@media screen and (max-width: 1480px) { .be:after { content: "Be Delectable."; }
}
@media screen and (max-width: 1470px) { .be:after { content: "Be Astounding."; }
}
@media screen and (max-width: 1460px) { .be:after { content: "Be Responsive."; }
}
@media screen and (max-width: 1450px) { .be:after { content: "Be Courageous."; }
}
@media screen and (max-width: 1440px) { .be:after { content: "Be Outlandish."; }
}
@media screen and (max-width: 1430px) { .be:after { content: "Be Marvelous."; }
}
@media screen and (max-width: 1420px) { .be:after { content: "Be Whimsical."; }
}
@media screen and (max-width: 1410px) { .be:after { content: "Be Versatile."; }
}
@media screen and (max-width: 1400px) { .be:after { content: "Be Motivated."; }
}
@media screen and (max-width: 1390px) { .be:after { content: "Be Brilliant."; }
}
@media screen and (max-width: 1380px) { .be:after { content: "Be Eccentric."; }
}
@media screen and (max-width: 1370px) { .be:after { content: "Be Wonderful."; }
}
@media screen and (max-width: 1360px) { .be:after { content: "Be Excellent."; }
}
@media screen and (max-width: 1350px) { .be:after { content: "Be Thrilling."; }
}
@media screen and (max-width: 1340px) { .be:after { content: "Be Inspiring."; }
}
@media screen and (max-width: 1330px) { .be:after { content: "Be Exquisite."; }
}
@media screen and (max-width: 1320px) { .be:after { content: "Be Inventive."; }
}
@media screen and (max-width: 1310px) { .be:after { content: "Be Colourful."; }
}
@media screen and (max-width: 1300px) { .be:after { content: "Be Delicious."; }
}
@media screen and (max-width: 1290px) { .be:after { content: "Be Fantastic."; }
}
@media screen and (max-width: 1280px) { .be:after { content: "Be Audacious."; }
}
@media screen and (max-width: 1270px) { .be:after { content: "Be Dexterous."; }
}
@media screen and (max-width: 1260px) { .be:after { content: "Be Different."; }
}
@media screen and (max-width: 1250px) { .be:after { content: "Be Confident."; }
}
@media screen and (max-width: 1240px) { .be:after { content: "Be Enthused."; }
}
@media screen and (max-width: 1230px) { .be:after { content: "Be Peculiar."; }
}
@media screen and (max-width: 1220px) { .be:after { content: "Be Glorious."; }
}
@media screen and (max-width: 1210px) { .be:after { content: "Be Smashing."; }
}
@media screen and (max-width: 1200px) { .be:after { content: "Be Splendid."; }
}
@media screen and (max-width: 1190px) { .be:after { content: "Be Adaptive."; }
}
@media screen and (max-width: 1180px) { .be:after { content: "Be Daunting."; }
}
@media screen and (max-width: 1170px) { .be:after { content: "Be Imposing."; }
}
@media screen and (max-width: 1160px) { .be:after { content: "Be Striking."; }
}
@media screen and (max-width: 1150px) { .be:after { content: "Be Charming."; }
}
@media screen and (max-width: 1140px) { .be:after { content: "Be Dazzling."; }
}
@media screen and (max-width: 1130px) { .be:after { content: "Be Engaging."; }
}
@media screen and (max-width: 1120px) { .be:after { content: "Be Resolute."; }
}
@media screen and (max-width: 1110px) { .be:after { content: "Be Intrepid."; }
}
@media screen and (max-width: 1100px) { .be:after { content: "Be Dramatic."; }
}
@media screen and (max-width: 1090px) { .be:after { content: "Be Original."; }
}
@media screen and (max-width: 1080px) { .be:after { content: "Be Fearless."; }
}
@media screen and (max-width: 1070px) { .be:after { content: "Be Flexible."; }
}
@media screen and (max-width: 1060px) { .be:after { content: "Be Creative."; }
}
@media screen and (max-width: 1050px) { .be:after { content: "Be Animated."; }
}
@media screen and (max-width: 1040px) { .be:after { content: "Be Puzzling."; }
}
@media screen and (max-width: 1030px) { .be:after { content: "Be Shocking."; }
}
@media screen and (max-width: 1020px) { .be:after { content: "Be Intense."; }
}
@media screen and (max-width: 1010px) { .be:after { content: "Be Elastic."; }
}
@media screen and (max-width: 1000px) { .be:after { content: "Be Pointed."; }
}
@media screen and (max-width: 990px) { .be:after { content: "Be Unusual."; }
}
@media screen and (max-width: 980px) { .be:after { content: "Be Devoted."; }
}
@media screen and (max-width: 970px) { .be:after { content: "Be Amusing."; }
}
@media screen and (max-width: 960px) { .be:after { content: "Be Radiant."; }
}
@media screen and (max-width: 950px) { .be:after { content: "Be Refined."; }
}
@media screen and (max-width: 940px) { .be:after { content: "Be Natural."; }
}
@media screen and (max-width: 930px) { .be:after { content: "Be Dynamic."; }
}
@media screen and (max-width: 920px) { .be:after { content: "Be Radical."; }
}
@media screen and (max-width: 910px) { .be:after { content: "Be Bizarre."; }
}
@media screen and (max-width: 900px) { .be:after { content: "Be Curious."; }
}
@media screen and (max-width: 890px) { .be:after { content: "Be Amazing."; }
}
@media screen and (max-width: 880px) { .be:after { content: "Be Lively."; }
}
@media screen and (max-width: 870px) { .be:after { content: "Be Modest."; }
}
@media screen and (max-width: 860px) { .be:after { content: "Be Mighty."; }
}
@media screen and (max-width: 850px) { .be:after { content: "Be August."; }
}
@media screen and (max-width: 840px) { .be:after { content: "Be Unique."; }
}
@media screen and (max-width: 830px) { .be:after { content: "Be Absurd."; }
}
@media screen and (max-width: 820px) { .be:after { content: "Be Brazen."; }
}
@media screen and (max-width: 810px) { .be:after { content: "Be Crafty."; }
}
@media screen and (max-width: 800px) { .be:after { content: "Be Astute."; }
}
@media screen and (max-width: 790px) { .be:after { content: "Be Shrewd."; }
}
@media screen and (max-width: 780px) { .be:after { content: "Be Daring."; }
}
@media screen and (max-width: 770px) { .be:after { content: "Be Lovely."; }
}
@media screen and (max-width: 760px) { .be:after { content: "Be Nimble."; }
}
@media screen and (max-width: 750px) { .be:after { content: "Be Classy."; }
}
@media screen and (max-width: 740px) { .be:after { content: "Be Humble."; }
}
@media screen and (max-width: 730px) { .be:after { content: "Be Limber."; }
}
@media screen and (max-width: 720px) { .be:after { content: "Be Superb."; }
}
@media screen and (max-width: 710px) { .be:after { content: "Be Super."; }
}
@media screen and (max-width: 700px) { .be:after { content: "Be Ready."; }
}
@media screen and (max-width: 690px) { .be:after { content: "Be Crazy."; }
}
@media screen and (max-width: 680px) { .be:after { content: "Be Proud."; }
}
@media screen and (max-width: 670px) { .be:after { content: "Be First."; }
}
@media screen and (max-width: 660px) { .be:after { content: "Be Light."; }
}
@media screen and (max-width: 650px) { .be:after { content: "Be Alert."; }
}
@media screen and (max-width: 640px) { .be:after { content: "Be Lithe."; }
}
@media screen and (max-width: 630px) { .be:after { content: "Be Fiery."; }
}
@media screen and (max-width: 620px) { .be:after { content: "Be Eager."; }
}
@media screen and (max-width: 610px) { .be:after { content: "Be Quick."; }
}
@media screen and (max-width: 600px) { .be:after { content: "Be Risky."; }
}
@media screen and (max-width: 590px) { .be:after { content: "Be Adept."; }
}
@media screen and (max-width: 580px) { .be:after { content: "Be Sharp."; }
}
@media screen and (max-width: 570px) { .be:after { content: "Be Smart."; }
}
@media screen and (max-width: 560px) { .be:after { content: "Be Brisk."; }
}
@media screen and (max-width: 550px) { .be:after { content: "Be Fresh."; }
}
@media screen and (max-width: 540px) { .be:after { content: "Be Swift."; }
}
@media screen and (max-width: 530px) { .be:after { content: "Be Novel."; }
}
@media screen and (max-width: 520px) { .be:after { content: "Be Giant."; }
}
@media screen and (max-width: 510px) { .be:after { content: "Be Funky."; }
}
@media screen and (max-width: 500px) { .be:after { content: "Be Weird."; }
}
@media screen and (max-width: 490px) { .be:after { content: "Be Grand."; }
}
@media screen and (max-width: 480px) { .be:after { content: "Be Alive."; }
}
@media screen and (max-width: 470px) { .be:after { content: "Be Happy."; }
}
@media screen and (max-width: 460px) { .be:after { content: "Be Keen."; }
}
@media screen and (max-width: 450px) { .be:after { content: "Be Bold."; }
}
@media screen and (max-width: 440px) { .be:after { content: "Be Wild."; }
}
@media screen and (max-width: 430px) { .be:after { content: "Be Spry."; }
}
@media screen and (max-width: 420px) { .be:after { content: "Be Zany."; }
}
@media screen and (max-width: 410px) { .be:after { content: "Be Nice."; }
}
@media screen and (max-width: 400px) { .be:after { content: "Be Loud."; }
}
@media screen and (max-width: 390px) { .be:after { content: "Be Lean."; }
}
@media screen and (max-width: 380px) { .be:after { content: "Be Fine."; }
}
@media screen and (max-width: 370px) { .be:after { content: "Be Busy."; }
}
@media screen and (max-width: 360px) { .be:after { content: "Be Cool."; }
}
@media screen and (max-width: 350px) { .be:after { content: "Be Rare."; }
}
@media screen and (max-width: 340px) { .be:after { content: "Be Apt."; }
}
@media screen and (max-width: 330px) { .be:after { content: "Be Fun."; }
}
@media screen and (max-width: 320px) { .be:after { content: "Be Hot."; }
}
@media screen and (max-width: 310px) { .be:after { content: "Be Big."; }
}
/** * Nice font is nice */
@font-face { font-family: 'BebasNeueRegular'; src: url("font/BebasNeue-webfont.eot"); src: url("http://css-tricks.com/examples/LarkQueries/font/BebasNeue-webfont.eot?#iefix") format("embedded-opentype"), url("http://css-tricks.com/examples/LarkQueries/font/BebasNeue-webfont.woff") format("woff"), url("http://css-tricks.com/examples/LarkQueries/font/BebasNeue-webfont.ttf") format("truetype"), url("http://css-tricks.com/examples/LarkQueries/font/BebasNeue-webfont.svg#BebasNeueRegular") format("svg"); font-weight: normal; font-style: normal;
}
/** * What a beautiful wall */
html { background: url("http://arleym.com/wp-content/themes/ChapterX/images/wall_4.png"), url("http://arleym.com/wp-content/themes/ChapterX/images/wall_3.png"), url("http://arleym.com/wp-content/themes/ChapterX/images/wall_2.png"), url("http://arleym.com/wp-content/themes/ChapterX/images/wall_1.png"); background-attachment: fixed; height: 100%;
}
/** * What about a shadow? */
body { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI1NCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI5NyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC45MSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuOTEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+"); background-attachment: fixed !important; background-position: top; background-repeat: none; background-size: cover; height: 100%; text-align: center;
}
body:before { content: ''; display: inline-block; height: 100%; vertical-align: middle;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1 class="be"></h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Content through Media Queries - Script Codes CSS Codes

/** * Adjective dictionary says hi! */
/** * Gimme some styles */
.be { display: inline-block; vertical-align: middle; font: 111px/1 'BebasNeueRegular', sans-serif; text-shadow: 1px 1px 4px #333333; text-transform: uppercase; /** * One loop to rule them all * One loop to find them * One loop to bring them all * And in the Sassy way bind them */ /* Biggest size */
}
@media screen and (max-width: 1910px) { .be:after { content: "Be Unconventional."; }
}
@media screen and (max-width: 1900px) { .be:after { content: "Be Flabbergasting."; }
}
@media screen and (max-width: 1890px) { .be:after { content: "Be Scintillating."; }
}
@media screen and (max-width: 1880px) { .be:after { content: "Be Extraordinary."; }
}
@media screen and (max-width: 1870px) { .be:after { content: "Be Unforgettable."; }
}
@media screen and (max-width: 1860px) { .be:after { content: "Be Unpredictable."; }
}
@media screen and (max-width: 1850px) { .be:after { content: "Be Dumbfounding."; }
}
@media screen and (max-width: 1840px) { .be:after { content: "Be Electrifying."; }
}
@media screen and (max-width: 1830px) { .be:after { content: "Be Overwhelming."; }
}
@media screen and (max-width: 1820px) { .be:after { content: "Be Incomparable."; }
}
@media screen and (max-width: 1810px) { .be:after { content: "Be Entertaining."; }
}
@media screen and (max-width: 1800px) { .be:after { content: "Be Magnificient."; }
}
@media screen and (max-width: 1790px) { .be:after { content: "Be Confounding."; }
}
@media screen and (max-width: 1780px) { .be:after { content: "Be Resourceful."; }
}
@media screen and (max-width: 1770px) { .be:after { content: "Be Interesting."; }
}
@media screen and (max-width: 1760px) { .be:after { content: "Be Adventurous."; }
}
@media screen and (max-width: 1750px) { .be:after { content: "Be Bewildering."; }
}
@media screen and (max-width: 1740px) { .be:after { content: "Be Astonishing."; }
}
@media screen and (max-width: 1730px) { .be:after { content: "Be Fascinating."; }
}
@media screen and (max-width: 1720px) { .be:after { content: "Be Outstanding."; }
}
@media screen and (max-width: 1710px) { .be:after { content: "Be Influential."; }
}
@media screen and (max-width: 1700px) { .be:after { content: "Be Imaginative."; }
}
@media screen and (max-width: 1690px) { .be:after { content: "Be Nonsensical."; }
}
@media screen and (max-width: 1680px) { .be:after { content: "Be Stimulating."; }
}
@media screen and (max-width: 1670px) { .be:after { content: "Be Exceptional."; }
}
@media screen and (max-width: 1660px) { .be:after { content: "Be Resplendent."; }
}
@media screen and (max-width: 1650px) { .be:after { content: "Be Commanding."; }
}
@media screen and (max-width: 1640px) { .be:after { content: "Be Determined."; }
}
@media screen and (max-width: 1630px) { .be:after { content: "Be Remarkable."; }
}
@media screen and (max-width: 1620px) { .be:after { content: "Be Incredible."; }
}
@media screen and (max-width: 1610px) { .be:after { content: "Be Impressive."; }
}
@media screen and (max-width: 1600px) { .be:after { content: "Be Perplexing."; }
}
@media screen and (max-width: 1590px) { .be:after { content: "Be Passionate."; }
}
@media screen and (max-width: 1580px) { .be:after { content: "Be Formidable."; }
}
@media screen and (max-width: 1570px) { .be:after { content: "Be Stupefying."; }
}
@media screen and (max-width: 1560px) { .be:after { content: "Be Refreshing."; }
}
@media screen and (max-width: 1550px) { .be:after { content: "Be Delightful."; }
}
@media screen and (max-width: 1540px) { .be:after { content: "Be Incredible."; }
}
@media screen and (max-width: 1530px) { .be:after { content: "Be Innovative."; }
}
@media screen and (max-width: 1520px) { .be:after { content: "Be Monumemtal."; }
}
@media screen and (max-width: 1510px) { .be:after { content: "Be Surprising."; }
}
@media screen and (max-width: 1500px) { .be:after { content: "Be Stupendous."; }
}
@media screen and (max-width: 1490px) { .be:after { content: "Be Staggering."; }
}
@media screen and (max-width: 1480px) { .be:after { content: "Be Delectable."; }
}
@media screen and (max-width: 1470px) { .be:after { content: "Be Astounding."; }
}
@media screen and (max-width: 1460px) { .be:after { content: "Be Responsive."; }
}
@media screen and (max-width: 1450px) { .be:after { content: "Be Courageous."; }
}
@media screen and (max-width: 1440px) { .be:after { content: "Be Outlandish."; }
}
@media screen and (max-width: 1430px) { .be:after { content: "Be Marvelous."; }
}
@media screen and (max-width: 1420px) { .be:after { content: "Be Whimsical."; }
}
@media screen and (max-width: 1410px) { .be:after { content: "Be Versatile."; }
}
@media screen and (max-width: 1400px) { .be:after { content: "Be Motivated."; }
}
@media screen and (max-width: 1390px) { .be:after { content: "Be Brilliant."; }
}
@media screen and (max-width: 1380px) { .be:after { content: "Be Eccentric."; }
}
@media screen and (max-width: 1370px) { .be:after { content: "Be Wonderful."; }
}
@media screen and (max-width: 1360px) { .be:after { content: "Be Excellent."; }
}
@media screen and (max-width: 1350px) { .be:after { content: "Be Thrilling."; }
}
@media screen and (max-width: 1340px) { .be:after { content: "Be Inspiring."; }
}
@media screen and (max-width: 1330px) { .be:after { content: "Be Exquisite."; }
}
@media screen and (max-width: 1320px) { .be:after { content: "Be Inventive."; }
}
@media screen and (max-width: 1310px) { .be:after { content: "Be Colourful."; }
}
@media screen and (max-width: 1300px) { .be:after { content: "Be Delicious."; }
}
@media screen and (max-width: 1290px) { .be:after { content: "Be Fantastic."; }
}
@media screen and (max-width: 1280px) { .be:after { content: "Be Audacious."; }
}
@media screen and (max-width: 1270px) { .be:after { content: "Be Dexterous."; }
}
@media screen and (max-width: 1260px) { .be:after { content: "Be Different."; }
}
@media screen and (max-width: 1250px) { .be:after { content: "Be Confident."; }
}
@media screen and (max-width: 1240px) { .be:after { content: "Be Enthused."; }
}
@media screen and (max-width: 1230px) { .be:after { content: "Be Peculiar."; }
}
@media screen and (max-width: 1220px) { .be:after { content: "Be Glorious."; }
}
@media screen and (max-width: 1210px) { .be:after { content: "Be Smashing."; }
}
@media screen and (max-width: 1200px) { .be:after { content: "Be Splendid."; }
}
@media screen and (max-width: 1190px) { .be:after { content: "Be Adaptive."; }
}
@media screen and (max-width: 1180px) { .be:after { content: "Be Daunting."; }
}
@media screen and (max-width: 1170px) { .be:after { content: "Be Imposing."; }
}
@media screen and (max-width: 1160px) { .be:after { content: "Be Striking."; }
}
@media screen and (max-width: 1150px) { .be:after { content: "Be Charming."; }
}
@media screen and (max-width: 1140px) { .be:after { content: "Be Dazzling."; }
}
@media screen and (max-width: 1130px) { .be:after { content: "Be Engaging."; }
}
@media screen and (max-width: 1120px) { .be:after { content: "Be Resolute."; }
}
@media screen and (max-width: 1110px) { .be:after { content: "Be Intrepid."; }
}
@media screen and (max-width: 1100px) { .be:after { content: "Be Dramatic."; }
}
@media screen and (max-width: 1090px) { .be:after { content: "Be Original."; }
}
@media screen and (max-width: 1080px) { .be:after { content: "Be Fearless."; }
}
@media screen and (max-width: 1070px) { .be:after { content: "Be Flexible."; }
}
@media screen and (max-width: 1060px) { .be:after { content: "Be Creative."; }
}
@media screen and (max-width: 1050px) { .be:after { content: "Be Animated."; }
}
@media screen and (max-width: 1040px) { .be:after { content: "Be Puzzling."; }
}
@media screen and (max-width: 1030px) { .be:after { content: "Be Shocking."; }
}
@media screen and (max-width: 1020px) { .be:after { content: "Be Intense."; }
}
@media screen and (max-width: 1010px) { .be:after { content: "Be Elastic."; }
}
@media screen and (max-width: 1000px) { .be:after { content: "Be Pointed."; }
}
@media screen and (max-width: 990px) { .be:after { content: "Be Unusual."; }
}
@media screen and (max-width: 980px) { .be:after { content: "Be Devoted."; }
}
@media screen and (max-width: 970px) { .be:after { content: "Be Amusing."; }
}
@media screen and (max-width: 960px) { .be:after { content: "Be Radiant."; }
}
@media screen and (max-width: 950px) { .be:after { content: "Be Refined."; }
}
@media screen and (max-width: 940px) { .be:after { content: "Be Natural."; }
}
@media screen and (max-width: 930px) { .be:after { content: "Be Dynamic."; }
}
@media screen and (max-width: 920px) { .be:after { content: "Be Radical."; }
}
@media screen and (max-width: 910px) { .be:after { content: "Be Bizarre."; }
}
@media screen and (max-width: 900px) { .be:after { content: "Be Curious."; }
}
@media screen and (max-width: 890px) { .be:after { content: "Be Amazing."; }
}
@media screen and (max-width: 880px) { .be:after { content: "Be Lively."; }
}
@media screen and (max-width: 870px) { .be:after { content: "Be Modest."; }
}
@media screen and (max-width: 860px) { .be:after { content: "Be Mighty."; }
}
@media screen and (max-width: 850px) { .be:after { content: "Be August."; }
}
@media screen and (max-width: 840px) { .be:after { content: "Be Unique."; }
}
@media screen and (max-width: 830px) { .be:after { content: "Be Absurd."; }
}
@media screen and (max-width: 820px) { .be:after { content: "Be Brazen."; }
}
@media screen and (max-width: 810px) { .be:after { content: "Be Crafty."; }
}
@media screen and (max-width: 800px) { .be:after { content: "Be Astute."; }
}
@media screen and (max-width: 790px) { .be:after { content: "Be Shrewd."; }
}
@media screen and (max-width: 780px) { .be:after { content: "Be Daring."; }
}
@media screen and (max-width: 770px) { .be:after { content: "Be Lovely."; }
}
@media screen and (max-width: 760px) { .be:after { content: "Be Nimble."; }
}
@media screen and (max-width: 750px) { .be:after { content: "Be Classy."; }
}
@media screen and (max-width: 740px) { .be:after { content: "Be Humble."; }
}
@media screen and (max-width: 730px) { .be:after { content: "Be Limber."; }
}
@media screen and (max-width: 720px) { .be:after { content: "Be Superb."; }
}
@media screen and (max-width: 710px) { .be:after { content: "Be Super."; }
}
@media screen and (max-width: 700px) { .be:after { content: "Be Ready."; }
}
@media screen and (max-width: 690px) { .be:after { content: "Be Crazy."; }
}
@media screen and (max-width: 680px) { .be:after { content: "Be Proud."; }
}
@media screen and (max-width: 670px) { .be:after { content: "Be First."; }
}
@media screen and (max-width: 660px) { .be:after { content: "Be Light."; }
}
@media screen and (max-width: 650px) { .be:after { content: "Be Alert."; }
}
@media screen and (max-width: 640px) { .be:after { content: "Be Lithe."; }
}
@media screen and (max-width: 630px) { .be:after { content: "Be Fiery."; }
}
@media screen and (max-width: 620px) { .be:after { content: "Be Eager."; }
}
@media screen and (max-width: 610px) { .be:after { content: "Be Quick."; }
}
@media screen and (max-width: 600px) { .be:after { content: "Be Risky."; }
}
@media screen and (max-width: 590px) { .be:after { content: "Be Adept."; }
}
@media screen and (max-width: 580px) { .be:after { content: "Be Sharp."; }
}
@media screen and (max-width: 570px) { .be:after { content: "Be Smart."; }
}
@media screen and (max-width: 560px) { .be:after { content: "Be Brisk."; }
}
@media screen and (max-width: 550px) { .be:after { content: "Be Fresh."; }
}
@media screen and (max-width: 540px) { .be:after { content: "Be Swift."; }
}
@media screen and (max-width: 530px) { .be:after { content: "Be Novel."; }
}
@media screen and (max-width: 520px) { .be:after { content: "Be Giant."; }
}
@media screen and (max-width: 510px) { .be:after { content: "Be Funky."; }
}
@media screen and (max-width: 500px) { .be:after { content: "Be Weird."; }
}
@media screen and (max-width: 490px) { .be:after { content: "Be Grand."; }
}
@media screen and (max-width: 480px) { .be:after { content: "Be Alive."; }
}
@media screen and (max-width: 470px) { .be:after { content: "Be Happy."; }
}
@media screen and (max-width: 460px) { .be:after { content: "Be Keen."; }
}
@media screen and (max-width: 450px) { .be:after { content: "Be Bold."; }
}
@media screen and (max-width: 440px) { .be:after { content: "Be Wild."; }
}
@media screen and (max-width: 430px) { .be:after { content: "Be Spry."; }
}
@media screen and (max-width: 420px) { .be:after { content: "Be Zany."; }
}
@media screen and (max-width: 410px) { .be:after { content: "Be Nice."; }
}
@media screen and (max-width: 400px) { .be:after { content: "Be Loud."; }
}
@media screen and (max-width: 390px) { .be:after { content: "Be Lean."; }
}
@media screen and (max-width: 380px) { .be:after { content: "Be Fine."; }
}
@media screen and (max-width: 370px) { .be:after { content: "Be Busy."; }
}
@media screen and (max-width: 360px) { .be:after { content: "Be Cool."; }
}
@media screen and (max-width: 350px) { .be:after { content: "Be Rare."; }
}
@media screen and (max-width: 340px) { .be:after { content: "Be Apt."; }
}
@media screen and (max-width: 330px) { .be:after { content: "Be Fun."; }
}
@media screen and (max-width: 320px) { .be:after { content: "Be Hot."; }
}
@media screen and (max-width: 310px) { .be:after { content: "Be Big."; }
}
/** * Nice font is nice */
@font-face { font-family: 'BebasNeueRegular'; src: url("font/BebasNeue-webfont.eot"); src: url("http://css-tricks.com/examples/LarkQueries/font/BebasNeue-webfont.eot?#iefix") format("embedded-opentype"), url("http://css-tricks.com/examples/LarkQueries/font/BebasNeue-webfont.woff") format("woff"), url("http://css-tricks.com/examples/LarkQueries/font/BebasNeue-webfont.ttf") format("truetype"), url("http://css-tricks.com/examples/LarkQueries/font/BebasNeue-webfont.svg#BebasNeueRegular") format("svg"); font-weight: normal; font-style: normal;
}
/** * What a beautiful wall */
html { background: url("http://arleym.com/wp-content/themes/ChapterX/images/wall_4.png"), url("http://arleym.com/wp-content/themes/ChapterX/images/wall_3.png"), url("http://arleym.com/wp-content/themes/ChapterX/images/wall_2.png"), url("http://arleym.com/wp-content/themes/ChapterX/images/wall_1.png"); background-attachment: fixed; height: 100%;
}
/** * What about a shadow? */
body { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI1NCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI5NyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC45MSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuOTEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+"); background-attachment: fixed !important; background-position: top; background-repeat: none; background-size: cover; height: 100%; text-align: center;
}
body:before { content: ''; display: inline-block; height: 100%; vertical-align: middle;
}

Content through Media Queries - Script Codes JS Codes

/** * Resize your browser * * Original work by Arley McBlain: http://arleym.com * Article on CSS-Tricks here: http://css-tricks.com/lark-queries/ * * I only did the Sass-ification * making the whole thing easier to maintain and customize */

Home Page	Home
Developer	Hugo Giraudel
Username	HugoGiraudel
Uploaded	August 08, 2022
Rating	4.5
Size	9,350 Kb
Views	50,600

Do you need developer help for Content through 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!

Hugo Giraudel (HugoGiraudel) Script Codes

Name	Size
Synchronise background position with padding	3,411 Kb
Batman loader	4,984 Kb
Stripe-a-gradient Sass function	11,192 Kb
Demo Flexbox 1	2,388 Kb
Demo Flexbox 2	2,778 Kb
Social swatchbook	4,245 Kb
Items on circle	3,437 Kb
A Pen by Hugo Giraudel	3,061 Kb
CSS power button	3,836 Kb
Off-canvas navigation	3,864 Kb

Create amazing marketing copy 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
Header Line Issue	Charlie-volpe	1,768 Kb
Boxes	H3l1um	2,563 Kb
Basic HTML5 Structure	YuvarajTana	1,289 Kb
Simple content swap	Snografx	1,859 Kb
AngularJS Animated Todo List	Ehaase	2,975 Kb
Resume	Rottingroom	5,483 Kb
Testing Portfolio Page	Sideshowli	3,395 Kb
Planet Awesome	Bartuc	3,554 Kb
Css3 slide	Nakome	3,190 Kb
Navier Stoke Fluid Simulation	Esimov	8,584 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!