RWD Conversion Practice

Developer
Jemma Riedel
Size
2,743 Kb
Views
14,161

How do I make an rwd conversion practice?

Forked from P. Colin Manikoth's Pen RWD Conversion Practice.. What is a rwd conversion practice? How do you make a rwd conversion practice? This script and codes were developed by Jemma Riedel on 26 November 2022, Saturday.

RWD Conversion Practice Previews
IQ Test

RWD Conversion Practice - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RWD Conversion Practice</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> <!-- Main Container Body (not <body> element) -->
<main>
<!-- Header with Logo and Navigation --> <header> <img src="http://placehold.it/100x100" alt="Logo" id="logo" /> <h1>Page Name</h1> <nav role='navigation'> <ul> <li><a href="#">Home</a></li> <li><a href="#">Link A</a></li> <li><a href="#">Link B</a></li> <li><a href="#">Link C</a></li> </ul> </nav> </header>
<!-- Primary Content --> <article>
<!-- A Section of Content --> <section id="a"> <h3>Section A</h3> <figure> <img src="http://placehold.it/300x200" alt="Placeholder" class="figure"/> <figcaption>Description of Image</figcaption> </figure> <p class="lead">Pellentesque habitant morbi tristique senectus et <a href="#">netus et malesuada</a> fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi <a href="#">tristique senectus et</a> netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </section>
<!-- Another Section of Content --> <section id="b"> <h3>Section B</h3> <figure> <img src="http://placehold.it/300x200" alt="Placeholder" class="figure"/> <figcaption>Description of Image</figcaption> </figure> <p class="lead">Pellentesque habitant morbi <a href="#">tristique senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, <a href="#">ultricies eget,</a> tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </section> </article> <!-- Footer --> <footer> <nav role='navigation'> <ul> <li><a href="#">Home</a></li> <li><a href="#">Link A</a></li> <li><a href="#">Link B</a></li> <li><a href="#">Link C</a></li> </ul> </nav> <p>Copyright 201X</p> </footer>
</main>
</body>
</html>

RWD Conversion Practice - Script Codes CSS Codes

/* http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/dark_embroidery.png
*/
@import url(https://fonts.googleapis.com/css?family=Poiret+One);
/* Global */
body{ background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/dark_embroidery.png);
}
/* Typography */
body{ color: #ccc; line-height: 1.5em; font-family: 'Poiret One', cursive;
}
/* Navigation */
a:link,
a:visited{ color: teal; padding: 4px 0; text-decoration: none;
}
a:hover{ color: purple; transition: background .5s;
}
/* Paragraph and Headings*/
p{ font-size: 1.25em;
}
h2{ font-size: 2.25em;
}
h3{ font-size: 2em;
}
/* Layout */
main{ width: 95%; max-width: 95%; margin: 0 auto;
}
header{ width: 100%;
}
header nav{ float: right;
}
header img,
header h1{ float: left;
}
article{ width: 100%; float: left;
}
article section{ width: 50%; float: left;
}
#a { width: 58%; margin-right: 2%;
}
#b { width: 38%; margin-left: 2%;
}
/* footer */
footer{ clear: both;
}
/* Media Quieries */
/* MOBILE */
@media screen and (min-width: 320px){ body{ background: #333; } header{ width: 100%; float: left; }
/* Navigation */ header nav li{ background: red; width: 100%; list-style: none; } nav{ float: left; } nav ul{ padding: 0; margin: 0; }
/* columns */ #a, #b{ float: none; width: 100%; }
}
RWD Conversion Practice - Script Codes
RWD Conversion Practice - Script Codes
Home Page Home
Developer Jemma Riedel
Username jxqr97
Uploaded November 26, 2022
Rating 3
Size 2,743 Kb
Views 14,161
Do you need developer help for RWD Conversion Practice?

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!

Jemma Riedel (jxqr97) Script Codes
Name
RWD Nav
2D Transforms
Using Animate.css
Section B
Dropcap
Jemma Riedel
Fluid Layout with Float
Keyframe Animations
CodePen Embed
Portfolio
Create amazing SEO content 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!