Homework Help is Here – Start Your Trial Now!
Engineering
Computer Engineering
The CSS Requirements • Separate your style sheets into three files: o/styles/colors.css o/styles/formatting.css o/styles/transitions-animations.css • Create three breakpoints using media queries in at least one style sheet to alter the way your website looks on small, medium, and large devices o it will help to view your current website on a mobile device and document what looks broken (overflow, small text, etc) o start coding media queries after identifying elements of your website that need responsive behavior Minimum of 25 unique CSS selectors (total across all 3 style sheets together). Your selectors must satisfy the requirements below: o 1 x Universal Selector >= 1 x Type Selector 。> 1 x Class Selector >= 1 x ID Selector >= 1 x Group Selector (ex: h1, p, a {/*styles here*/}) o >= 2 x Child Selector >= 2 x General Sibling Combinator (~) >= 2 x Adjacent Sibling Combinator (+) o >= 2 x Pseudo Class Selector (ex: :nth-of-type) • There must be at least one Grid layout and one Flex layout on your website • Grid style requirements: grid-template-areas grid-template-columns grid-template-rows grid-area • Flex style requirements: ■ flex-direction (can be set to row our column) ■ flex-wrap ■ flex-basis ■ flex-grow - you must have one item that grows more tha other flex items given available space! flex-shrink - you must have one item that shrinks more than other flex items given available space! • Create at least one transition on the page

The CSS Requirements • Separate your style sheets into three files: o/styles/colors.css o/styles/formatting.css o/styles/transitions-animations.css • Create three breakpoints using media queries in at least one style sheet to alter the way your website looks on small, medium, and large devices o it will help to view your current website on a mobile device and document what looks broken (overflow, small text, etc) o start coding media queries after identifying elements of your website that need responsive behavior Minimum of 25 unique CSS selectors (total across all 3 style sheets together). Your selectors must satisfy the requirements below: o 1 x Universal Selector >= 1 x Type Selector 。> 1 x Class Selector >= 1 x ID Selector >= 1 x Group Selector (ex: h1, p, a {/*styles here*/}) o >= 2 x Child Selector >= 2 x General Sibling Combinator (~) >= 2 x Adjacent Sibling Combinator (+) o >= 2 x Pseudo Class Selector (ex: :nth-of-type) • There must be at least one Grid layout and one Flex layout on your website • Grid style requirements: grid-template-areas grid-template-columns grid-template-rows grid-area • Flex style requirements: ■ flex-direction (can be set to row our column) ■ flex-wrap ■ flex-basis ■ flex-grow - you must have one item that grows more tha other flex items given available space! flex-shrink - you must have one item that shrinks more than other flex items given available space! • Create at least one transition on the page

Computer Networking: A Top-Down Approach (7th Edition)
Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
See similar textbooks
icon
Related questions
Question

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="./styles/colors1.css">
<link rel="stylesheet" href="./styles/formatting1.css">
<link rel="stylesheet" href="./styles/transitions-animations1.css">
</head>

<body>
<main>
<nav>
<a href="index.html">Home</a>
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
</nav>
<h1>Welcome to my (about me) site</h1>
<picture>
<source media="(min-width:650px)" srcset="./images/me3-650.jpg">
<source media="(min-width:465px)" srcset="./images/me3-465.jpg">
<img src="./images/me3.JPG" alt="ME" style="width:auto;">
</picture>

<h3>HI there this is one of my favorite songs down below.</h3>
<iframe width="420" height="345"
src="https://www.bing.com/search?q=Nirvana%20-%20The%20Man%20Who%20Sold%20The %20World&pc=0TTE&ptag=C1N2A04173C0C08&form=CONBNT&conlogo=CT3210127&shtp=GetUrl&shid=38702244-8c35-477e-a042- 805b2b2d81bc&shtk=TmlydmFuYSAtIFRoZSBNYW4gV2hvIFNvbGQgVGhlIFdvcmxkIChNVFYgVW5wbHVnZ2VkKQ%3D %3D&shdk=UkVNQVNURVJFRCBJTiBIRCEgVGFrZW4gZnJvbSB0aGUgMjV0aCBBbm5pdmVyc2FyeSBFZGl0aW9ucyBvZiBOaXJ2YW5hIGI%3D&shhk=7xVtP%2FaZHQw%2B31lGYV%2F3cJukwLOZgUcFMDTYwdmuLsA %3D&shth=OVP.2ZxeDKLNemtX7dQ99X3ETQHgFo">

</iframe>
<footer>
<div class="foot">
<p>Author: Josiah McSweeney<br>
<p>Copyright Reserved</p>
</div>
</footer>
</main>
</body>

</html>

The CSS Requirements Separate your style sheets into three files: o Istyles/colors.css o Istyles/formatting.css o Istyles/transitions-animations.css Create three breakpoints using media queries in at least one style sheet to alter the way your website looks on small, medium, and large devices o it will help to view your current website on a mobile device and document what looks broken (overflow, small text, etc) o start coding media queries after identifying elements of your website that need responsive behavior Minimum of 25 unique CsS selectors (total across all 3 style sheets together). Your selectors must satisfy the requirements below: • 1x Universal Selector o >= 1 x Type Selector o >= 1 x Class Selector >= 1 x ID Selector >= 1 x Group Selector (ex: h1, p, a {/*styles here*/}) = 2 x Child Selector = 2 x General Sibling Combinator (-) • >= 2 x Adjacent Sibling Combinator (+) o >= 2 x Pseudo Class Selector (ex: nth-of-type ) >ニ There must be at least one Grid layout and one Flex layout on your website o Grid style requirements: - grid-template-areas 1 grid-template-columns 1 grid-template-rows grid-area o Flex style requirements: flex-direction (can be set to row our column) . flex-wrap flex-basis flex-grow - you must have one item that grows more than other flex items given available space! . flex-shrink - you must have one item that shrinks more than other flex items given available space! • Create at least one transition on the page
Transcribed Image Text:The CSS Requirements Separate your style sheets into three files: o Istyles/colors.css o Istyles/formatting.css o Istyles/transitions-animations.css Create three breakpoints using media queries in at least one style sheet to alter the way your website looks on small, medium, and large devices o it will help to view your current website on a mobile device and document what looks broken (overflow, small text, etc) o start coding media queries after identifying elements of your website that need responsive behavior Minimum of 25 unique CsS selectors (total across all 3 style sheets together). Your selectors must satisfy the requirements below: • 1x Universal Selector o >= 1 x Type Selector o >= 1 x Class Selector >= 1 x ID Selector >= 1 x Group Selector (ex: h1, p, a {/*styles here*/}) = 2 x Child Selector = 2 x General Sibling Combinator (-) • >= 2 x Adjacent Sibling Combinator (+) o >= 2 x Pseudo Class Selector (ex: nth-of-type ) >ニ There must be at least one Grid layout and one Flex layout on your website o Grid style requirements: - grid-template-areas 1 grid-template-columns 1 grid-template-rows grid-area o Flex style requirements: flex-direction (can be set to row our column) . flex-wrap flex-basis flex-grow - you must have one item that grows more than other flex items given available space! . flex-shrink - you must have one item that shrinks more than other flex items given available space! • Create at least one transition on the page
Expert Solution
steps

Step by step

Solved in 3 steps with 4 images

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY
SEE MORE TEXTBOOKS