CSS Requirements

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...
icon
Related questions
Question


what I have so far I need help with seperading the style sheet into three files:
/styles/colors.css
/styles/formatting.css
/styles/transitions-animations.css


and anythe else I may have missed 

 


<!DOCTYPE html>
<html>

<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<!--Added main tag-->
<main>
<!--Added nav tag-->
<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>

style.css:

*{
margin: 0;
padding: 0;
}
@media (min-width:1224px){
body{
background-color: darkblue;
color: white;
}
main{
display: grid;
grid-template-areas: "nav"
"h1"
"picture"
"h3"
"iframe"
"footer";
grid-template-columns: auto;
grid-template-rows: auto;
}
nav{
display: flex;
flex-direction: row;
justify-content: end;
background-color: lightcoral;
}

picture{
text-align: center;
}
nav>a{
padding: 10px;
margin: 10px;
}
main>h1, h3{
text-align: center;
}
iframe{
margin: auto;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color:antiquewhite;
color: black;
}
footer>.foot{
padding: 10px;
display: flex;

flex-direction: row;
justify-content: space-evenly;
}
.foot:nth-of-type(1) {
flex-shrink: 1;
}
.foot:nth-of-type(2) {
flex-grow: 1;
}
}

@media (min-width:726px){
body{
background-color: darkblue;
color: white;
}
main{
display: grid;
grid-template-areas: "nav"
"h1"
"picture"
"h3"
"iframe"
"footer";
grid-template-columns: auto;
grid-template-rows: auto;
}

nav{
display: flex;
flex-direction: row;
justify-content: end;
background-color: lightcoral;
}
picture{
text-align: center;
}
nav>a{
padding: 10px;
margin: 10px;
}
main>h1, h3{
text-align: center;
}
iframe{
margin: auto;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color:antiquewhite;
color: black;
}
footer>.foot{
padding: 10px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}

.foot:nth-of-type(1) {
flex-grow: 1;
}
.foot:nth-of-type(2) {
flex-shrink: 1;
}
}

@media (min-width:320px) and (max-width:726px){
body{
background-color: darkblue;
color: white;
}
main{
display: grid;
grid-template-areas: "nav"
"h1"
"picture"
"h3"
"iframe"
"footer";
grid-template-columns: auto;
grid-template-rows: auto;
}
nav{

display: flex;
flex-direction: row;
justify-content: center;
background-color: lightcoral;
}
picture{
text-align: center;
}
nav>a{
padding: 10px;
margin: 10px;
}
main>h1, h3{
font-size: 16px;
text-align: center;
}
iframe{
margin: auto;
width: 300px;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color:antiquewhite;
color: black;
}

footer>.foot{
padding: 10px;
display: flex;
flex-direction: column;
text-align: center;
}
}

CSS Requirements
Create three break points 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
Each style sheet must have at least 25 unique CSS selectors. Your selectors must satisfy the requirements below:
• 1x Universal Selector
• >= 1x Type Selector
o >= 1 x Class Selector
o >= 1 x ID Selector
• >= 1x Group Selector (ex: h1, p, a {/*styles here*/})
• >= 2 x Child Selector
o >= 2 x General Sibling Combinator (~)
o >= 2 x Adjacent Sibling Combinator (+)
• >= 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 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
page
Transcribed Image Text:CSS Requirements Create three break points 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 Each style sheet must have at least 25 unique CSS selectors. Your selectors must satisfy the requirements below: • 1x Universal Selector • >= 1x Type Selector o >= 1 x Class Selector o >= 1 x ID Selector • >= 1x Group Selector (ex: h1, p, a {/*styles here*/}) • >= 2 x Child Selector o >= 2 x General Sibling Combinator (~) o >= 2 x Adjacent Sibling Combinator (+) • >= 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 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 page
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 3 steps with 3 images

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