Fun with Media Q

Developer
Noel Peña
Size
2,360 Kb
Views
10,120
  1. Fun with Media Q Previews
  2. Fun with Media Q HTML Codes
  3. Fun with Media Q CSS Codes

How do I make an fun with media q?

What is a fun with media q? How do you make a fun with media q? This script and codes were developed by Noel Peña on 05 November 2022, Saturday.

Fun with Media Q Previews
IQ Test

Fun with Media Q - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fun with Media Q</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="body-wrap"> <header> <h1>Page Title</h1> <h2>Page sub-heading</h2> </header> <nav> <ul> <li><a href="#">Directory</a></li> <li><a href="#">Membership</a></li> <li> <a href="#">Resources</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> </ul> </li> </ul> </nav> <article> <div class="body-copy"> <h3>Title of Content</h3> <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A excepturi non mollitia ipsam unde quos pariatur recusandae ea quisquam, corporis, praesentium eveniet libero, ullam debitis explicabo rerum velit? Eos, enim.</span><span>Amet ab placeat magni excepturi, rerum exercitationem? Perspiciatis libero ex pariatur amet impedit dicta qui ipsa dolor. Consectetur, dolor, vero cumque quidem consequatur placeat dolore incidunt veritatis sequi quis velit.</span></p> </div> </article> <aside> <ul> <li><a href="">link 1</a></li> <li><a href="">link 2</a></li> <li><a href="">link 3</a></li> <li><a href="">link 4</a></li> <li><a href="">link 5</a></li> <li><a href="">link 6</a></li> <li><a href="">link 7</a></li> </ul> <p>I'm a side NAV</p> </aside>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Fun with Media Q - Script Codes CSS Codes

body { margin: 0px;
}
body .body-wrap { width: 100%; margin: 0 auto; font-family: Arial;
}
body .body-wrap header { background-color: #f1f1f1;
}
body .body-wrap header h1 { font-size: 250%; margin: 0px;
}
body .body-wrap header h2 { padding-bottom: 5px; margin-bottom: 0px;
}
body .body-wrap nav { background-color: #777; height: 30px; padding: 0px; margin: 0 auto;
}
ul{ list-style: none; padding: 0px; margin: 0px;
}
nav ul li { display: block; position: relative; float: left; z-index:200;
}
li ul {display: none;}
ul li a { display: block; background: #777; padding: 5px 10px 5px 10px; text-decoration: none; white-space: nowrap;color: #fff;
}
ul li a:hover {background: #333;}
li:hover ul { display: block; position: absolute;
}
li:hover li {float: right;}
li:hover a {background: #333;}
li:hover li a:hover { background: #000;
}
article{ float: right; width: 75%;
}
aside{ float: left; width: 20%; margin: 5px; padding: 5px; background-color: #d3d3d3;
}
aside ul li{ float: none; text-align: center; width: 80%; font-size: 120%; margin: 0 auto; margin-bottom: 2px;
}
aside p{ text-align: center;
}
@media only screen and (max-width: 640px) { aside{display: none;} article{width: 98%;}
}
Fun with Media Q - Script Codes
Fun with Media Q - Script Codes
Home Page Home
Developer Noel Peña
Username ewganoel
Uploaded November 05, 2022
Rating 3
Size 2,360 Kb
Views 10,120
Do you need developer help for Fun with Media Q?

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!

Noel Peña (ewganoel) Script Codes
Name
Golf tracks table
Tryout.Flexbox
Grayscale Filter - Hover to normal
FAQs with Toggle - CSS Only
Cutter and Buck Sizing Chart
Countdown with Rings
Google Maps JS API
LB JS
Testing Responsive table
EWGA PerksTable
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!