Mad9013 - Layout and Picture Element

Developer
Mobile Application Design-Development
Size
2,377 Kb
Views
44,528
  1. Mad9013 - Layout and Picture Element Previews
  2. Mad9013 - Layout and Picture Element HTML Codes
  3. Mad9013 - Layout and Picture Element CSS Codes

How do I make an mad9013 - layout and picture element?

What is a mad9013 - layout and picture element? How do you make a mad9013 - layout and picture element? This script and codes were developed by Mobile Application Design-Development on 10 August 2022, Wednesday.

Mad9013 - Layout and Picture Element Previews
IQ Test

Mad9013 - Layout and Picture Element - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>mad9013 - Layout and Picture Element</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="banner"></div>
<div class="wrapper"> <section class="col-container clearfix"> <article class="feature-article"> <h1>Layout and Picture Elements</h1> <p><strong>Task</strong>: Create a flexible grid that substitues different images at different breakpoints.</p> <p><strong>Requirements</strong>:</p> <hr> <pre>
// Layout Requirements
The starting layout should be single column up to 600px wide.
At 600px wide the layout should rearrange into two columns.
At 1024px wide the layout should rearrange into it's final layout of three columns.
If the screensize is larger than 1024px the layout should stay 1024px wide and stay centered.
// Picture Requirements
340px
400px
600px
512px
Up to 400px wide the picture src should be - http://placehold.it/400x400
From 400px to 600px the picture src should be - http://placehold.it/600x600
From 600px to 800px the picture src should be - http://placehold.it/400x400
From 800px to 1020px the picture src should be - http://placehold.it/512x512
At 1024px the picture scr should be - http://placehold.it/340x340
The Fallback should be 600px - http://placehold.it/600x600 </pre> </article> </section>
<div class="wrapper">
<picture> <source media="(max-width: 600px)" srcset="http://placehold.it/600x600"> <source src="http://placehold.it/340x340"> <img src="http://placehold.it/340x340" alt="This picture loads on non-supporting browsers.">
</picture>
</div>
<footer class="footer"> <p>Copyright MySite 1954<p>
</footer>
</body>
</html>

Mad9013 - Layout and Picture Element - Script Codes CSS Codes

html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit; padding: 0; margin: 0;
}
.clearfix:after { content: ""; display: table; clear: both;
}
/* -- Baseline Elements --*/
body{ font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; line-height: 1.5;
}
h1{ margin-bottom: 1rem; font-size: 1.8rem;
}
p{ font-family: georgia; line-height: 1.75;
}
.wrapper{ max-width: 1024px; margin: 0 auto;
}
/* -- Header -- */
.banner{ background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/5847/viewport-selection-opt.jpg) no-repeat 50% 50%; text-transform: uppercase; text-align:center; color: #fff; font-size: 2rem; padding: 10rem 0;
}
/* ----------- Grid --------- */
/* -------------------------- */
.col-container{ margin: 3rem 0;
}
/* -- Footer -- */
.footer{ background: #111; text-align: center; color: #fff;
}
Mad9013 - Layout and Picture Element - Script Codes
Mad9013 - Layout and Picture Element - Script Codes
Home Page Home
Developer Mobile Application Design-Development
Username mad-d
Uploaded August 10, 2022
Rating 3
Size 2,377 Kb
Views 44,528
Do you need developer help for Mad9013 - Layout and Picture Element?

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!

Mobile Application Design-Development (mad-d) Script Codes
Name
MAD9014 Exercise 3 Starters
Closure Failure
Navigation Tabs
Contact Manager
A Pen by Mobile Application Design-Development
MAD9022 Refactoring Practice
Two-Column Form
HTML Canvas Samples
Sept 14 Demo
MAD9022 Simple Pie Chart
Create amazing sales emails 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!