Question

In: Computer Science

Create 6 tags with text inside them (in a valid HTML page,) color each differently. All...

Create 6 tags with text inside them (in a valid HTML page,) color each differently. All show up on the page at this point... it's better to try to have everything upfront and in the open 1st and later have them hide, hover, or whatever interaction they will do. See the video for the text, don't bother matching the colors in the video.
Validate the HTML. Bugs multiply as you make the page more complex; a CSS problem could actually be an HTML problem.
Find the CSS property to HIDE something using CSS (there are two different ones that would work.) Hide all the tags by default. Knowing how to hide things with CSS is extremely useful (not just necessary for this assignment.)
Using Media Queries show the proper tags depending upon the device changes:
1. show landscape when the device is in landscape orientation
2. show portrait when the device is in portrait orientation
3. show >300 wide when the device is over 300px wide
4. show >300 tall when the device is over 300px high
5. show HD TV when the device the exact aspect ratio is 16/9 (there is a feature for aspect ratio; in firefox to preview you will need the exact window size for that ratio, you do not have to use HD you can use smaller numbers; equation: width = height*16/9. Also, you can look at the video)
6. show big when the device is above in 400px width and height.
Optional: instead of px pixel units, try using rem units. If you do, you should look up what a root em unit is so you know how big they are.

Expert Solution

Here is the code that will satisfy the conditions given above:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="d1 card">
<div class="card_heading">Heading 1</div>
<div class="card_text">Hidden With Opacity 0</br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, vero.
libero, ipsam tempore? Doloremque laborum cumque id adipisci delectus eius.</div>
</div>
<div class="d2 card">
<div class="card_heading">Heading 2</div>
<div class="card_text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos nam accusantium reprehenderit sequi unde architecto
libero, ipsam tempore? Doloremque laborum cumque id adipisci delectus eius.</div>
</div>
<div class="d3 card">
<div class="card_heading">Heading 3</div>
<div class="card_text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos nam accusantium reprehenderit sequi unde architecto
libero, ipsam tempore? Doloremque laborum cumque id adipisci delectus eius.</div>
</div>
<div class="d4 card">
<div class="card_heading">Heading 4</div>
<div class="card_text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos nam accusantium reprehenderit sequi unde architecto
libero, ipsam tempore? Doloremque laborum cumque id adipisci delectus eius.</div>
</div>
<div class="d5 card">

<div class="card_heading">Heading 5</div>
<div class="card_text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos nam accusantium reprehenderit sequi unde architecto
libero, ipsam tempore? Doloremque laborum cumque id adipisci delectus eius.</div>
</div>
<div class="d6 card">
<div class="card_heading">Heading 6</div>
<div class="card_text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos nam accusantium reprehenderit sequi unde architecto
libero, ipsam tempore? Doloremque laborum cumque id adipisci delectus eius.</div>
</div>
</div>
</body>
</html>

styles.css

*{
margin:0;
padding:0;
box-sizing: border-box;
}
@media (min-width:1000px){
.wrapper{
position: relative;
margin:0 auto;
min-height: 100vh;
width: 80vw;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
.card{
margin:1em;
width: 30%;

padding:1.5em;
}
.card_heading{
font-weight: 800;
font-size: 3rem;
text-align: center;
padding: 1rem;
border-bottom: 0.05em solid black;
border-radius:40% ;
}
}

.d1{
background: chocolate;
opacity: 0;
transition: all 0.5s ease-out;
}
.d1:hover{
opacity: 1;
transition: all 0.5s ease-in;
}
.d2{
background: crimson;
visibility: hidden;
transition: all 0.5s ease-in;
}
.d2:hover{
visibility: visible;
transition: all 0.5s ease-in;
}
.d2 .card_heading,.d4 .card_text,.d2 .card_text,
.d6 .card_text,.d4 .card_heading,.d6 .card_heading
{
visibility: visible;
}
.d3{
background: cyan;
opacity: 0;
transition: all 0.5s ease-out;
}
.d3:hover{
opacity: 1;
transition: all 0.5s ease-in;
}
.d4{
background: darkgrey;
visibility: hidden;
transition: all 0.5s ease-in;
}
.d5{
background: darksalmon;
opacity: 0;
transition: all 0.5s ease-out;
}
.d5:hover{
opacity: 1;
transition: all 0.5s ease-in;
}
.d6{
background: darkseagreen;
visibility: hidden;
transition: all 0.5s ease-in;
}
.d4:hover{
visibility: visible;
transition: all 0.5s ease-in;
}
.d4:hover{
visibility: visible;
transition: all 0.5s ease-in;
}
.card_text{
padding: 1rem;
text-align: center;
overflow-y:hidden ;
}

@media( device-aspect-ratio : 16/9)
{
.wrapper{
position: relative;
margin:0 auto;
min-height: 100vh;
width: 90vw;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
.card{
margin:1em;
width: 60%;

padding:1.5em;
}
.card_heading{
font-weight: 800;
font-size: 1rem;
text-align: center;
padding: 1rem;
border-bottom: 0.05em solid black;
border-radius:40% ;
}
}
@media ( max-width : 720px) and (min-width:400px)
{
.wrapper{
position: relative;
margin:0 auto;
min-height: 100vh;
width: 90vw;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
.card{
margin:1em;
width: 60%;

padding:1.5em;
}
.card_heading{
font-weight: 800;
font-size: 1rem;
text-align: center;
padding: 1rem;
border-bottom: 0.05em solid black;
border-radius:40% ;
}
}

@media(max-width : 400px )
{
.wrapper{
position: relative;
margin:0 auto;
min-height: 100vh;
width: 95vw;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
.card{
margin:1em;
width: 80%;
padding:1.5em;
}
.card_heading{
font-weight: 800;
font-size: 1rem;
text-align: center;
padding: 1rem;
border-bottom: 0.05em solid black;
border-radius:40% ;
}
}
@media(min-height : 720px) and (orientaion : potrait)
{
.wrapper{
position: relative;
margin:0 auto;
min-height: 100vh;
width: 80vw;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
.card{
margin:1em;
width: 40%;

padding:1.5em;
}
.card_heading{
font-weight: 800;
font-size: 2rem;
text-align: center;
padding: 1rem;
border-bottom: 0.05em solid black;
border-radius:40% ;
}
}
@media(min-width : 720px) and (max-width:1000px)
{
.wrapper{
position: relative;
margin:0 auto;
min-height: 100vh;
width: 80vw;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
.card{
margin:1em;
width: 40%;

padding:1.5em;
}
.card_heading{
font-weight: 800;
font-size: 2rem;
text-align: center;
padding: 1rem;
border-bottom: 0.05em solid black;
border-radius:40% ;
}
}

Output: When we Vary size of screen the content automatically adjusts.

1.

2.

3.

4.

5.

6.

venereology answered 7 months ago

1. Create a PHP page with standard HTML tags. Remember to save the file with the...

1. Create a PHP page with standard HTML tags. Remember to save the file with the .php extension. Inside the <body> tag, create a PHP section that will show the text "Hello World!" 2. For this exercise, echo the phrase "Twinkle, Twinkle little star." Create two variables, one for the word "Twinkle" and one for the word "star". Echo the statement tothe browser. 3. PHP includes all the standard arithmetic operators. For this PHP exercise, you will use them along...

HTML mark-up text know the following HTML tags: · <html> · <body> · <head> · <p> ·...

HTML mark-up text know the following HTML tags: · <html> · <body> · <head> · <p> · <h1>, <h2>, <h3>, etc… · <a> · <img> · <br> · <hr> · <pre> · <i> · <b> · <em> · <sub> · <ins> · <strong> · <mark> · <cite> · <address> · <abbr> After you have reviewed these HTML tags and developed a sense of how they manipulate the presentation of the mark-up, write a sample page of HTML that briefly goes over...

Create 1 HTML page and 1 CSS file for all the styles. Your html page will...

Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under...

Given the html below, create css to produce the following illustrated color page output: Red for...

Given the html below, create css to produce the following illustrated color page output: Red for outer paragraph and outer list Green and italic for first inner div paragraph, green for second div paragraph, blue for inner list HTML File <html> <head> <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body> <p> I'm a paragraph, what color am I ? </p> <ul> <li id = "fix"> I'm a list item;what color am I? </li> </ul> <div class = "central1"> <p class ="above"> I'm...

using text edit html Create a Web page that makes a list of your favorite movies...

using text edit html Create a Web page that makes a list of your favorite movies and a list of your favorite actors. Make one list ordered (numbered) and one list unordered (bulleted). Title your Web page - John Doe's Movies Page but use your own name (this information goes in the title tag). Also include a paragraph describing one of your favorite movies and another paragraph describing one of your favorite actors. Include two heading levels - h1 and...

Develop a one-page website using HTML tags and element to implement the following. THIS IS HEADING...

Develop a one-page website using HTML tags and element to implement the following. THIS IS HEADING 1 THIS IS HEADING 2 THIS IS HEADING 3 THIS IS HEADING 4 THIS IS HEADING 5 THIS IS HEADING 6 THIS IS A PARAGRAPH. THIS IS A PARAGRAPH. THIS IS A PARAGRAPH THIS IS ANOTHER PARAGRAPH. THIS IS ANOTHER PARAGRAPH. THIS IS ANOTHER PARAGRAPH THIS IS A LINE BREAK THIS IS A LINE BREAK THIS IS A LINE BREAK THIS IS AN ORDERED...

The code to create a Search/Filter Data with Javascript or html from html page.

Create following webpage in HTML : 1. Login Page This is the first page the user...

Create following webpage in HTML : 1. Login Page This is the first page the user should see. The user can login, signup, or continue as a guest. Your task is to implement the following features: a) Signup form This form should collect the information required for creating a new account on your movie database website. At the least, it should collect an email address, username, avatar image/graphic, first name, last name, and a password. You can ask for more...

In html create a Watchlist page in which a user can create as many watchlist as...

In html create a Watchlist page in which a user can create as many watchlist as they wish. This page will contain the list of watchlist, allow the user to create a new watchlist, and delete an existing one. You have to implement the following: a) A list of all the watchlist that a user has created. For now, you can randomly create few. b) An option to create a new watchlist. Make sure you ask the user what the...

HTML Create a page of texts that uses inline elements. The page should contain a citation,...

HTML Create a page of texts that uses inline elements. The page should contain a citation, a term definition, a subscript, a superscript and some highlighted texts.