Question

In: Computer Science

Overview Students will learn how to use block-level <div> elements in HTML and style them with...

Overview

Students will learn how to use block-level <div> elements in HTML and style them with CSS to transform them using various properties such as:

  • position
  • top, left, right, bottom
  • float
  • border
  • border-radius
  • background-color
  • etc.

Related Lecture(s)

  • Module 2: Lecture #3 - The Box Model & Positioning Elements

Basic Content

  1. Create a folder on your local machine in the "csis1430/htdocs" folder called "little-boxes" with the following folder structure:
    • css
    • img
    • js
  2. Create an index.html file with multiple (as many as needed, but at least 15) divs
  3. Create a style.css file in the css folder
    • Modify the divs using CSS to completely transform them into a cohesive "thing"
    • The "thing" can be anything. Some examples:
      • Houses
      • A scenery
    • See examples from previous students below
  4. IMPORTANT NOTE: Do NOT use images in any way. i.e..
    1. No <img> tags
    2. No background-images
    3. etc.
    4. no images
  5. Lastly, no tags other than <div> tags are allowed to be used inside the <body> tag.

https://www.youtube.com/watch?v=Rv1bKo3SskY&feature=emb_logo

Solutions

Expert Solution

Heirarchy of folder:

index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="/css/style.css">

</head>

<body>

    <main>

        <div>

            <div class="h1">

                <div class="hw">

               </div>

           </div>

           <div>

               <div class="sq"></div>

           </div>

        </div>

    </main>

</body>

</html>

style.css:

body {

    background-color: #fff;

    margin: auto;

    padding: 50px;

  }

  .h1 {

    height: 20vh;

    width: 20vw;

    margin: 0 auto;

    position: relative;

    background-color: black;

    z-index: 1000;

  }

  .h1:before {

    content: " ";

    display: block;

    width: 100%;

    height: 20%;

    background-color: #95296b;

    transform: perspective(15px) rotateX(2deg) scalex(1.2);

    position: absolute;

    top: 0px;

    border: 0;

    z-index: 10001;

  }

  .h1:after {

    content: " ";

    display: block;

    width: 100%;

    height: 10%;

    background-color: blue;

    position: absolute;

    bottom: 0px;

    border: 0;

    transform: scalex(1.3);

  }

  .h1 .hw {

    position: absolute;

    display: block;

    height: 40%;

    width: 20%;

    

    background-color: #fff;

    bottom: 10%;

    left: 40%;

  }

  .h1 .hw:before {

    content: " ";

    height: 100%;

    width: 100%;

    

    background-color: #fff;

    display: block;

    position: absolute;

    right: 150%;

    transform: scaley(0.4);

  }

  .h1 .hw:after {

    content: " ";

    height: 100%;

    width: 100%;

    background-color: white;

    display: block;

    position: absolute;

    left: 150%;

    transform: scaley(0.4);

  }

  

  .body {

  background-color: #f7f7f7;

  margin: 0;

  padding: 20px;

}

.house {

  height: 80vh;

  width: 80vw;

  margin: 0 auto;

  position: relative;

  background-image: radial-gradient(circle at 0% 100%, rgba(99, 41, 147, 0.9), rgba(149, 41, 107, 0.6), rgba(9, 141, 147, 0.9), rgba(49, 11, 147, 0.2));

  z-index: 998;

}

.house:before {

  content: " ";

  display: block;

  width: 100%;

  height: 25%;

  background-image: repeating-linear-gradient(90deg, #000, #fff 7%, #000 10%);

  transform: perspective(10px) rotateX(1deg) scalex(1.1);

  position: absolute;

  top: 0px;

  border: 0;

  z-index: 999;

}

.house:after {

  content: " ";

  display: block;

  width: 100%;

  height: 10%;

  background-image: radial-gradient(circle at 0% 100%, #632993, #95296b, #098d93, #310b93);

  position: absolute;

  bottom: 0px;

  border: 0;

  transform: scalex(1.2);

}

.house .door-window {

  position: absolute;

  display: block;

  height: 40%;

  width: 20%;

  background: radial-gradient(white, #949699);

  background-color: #fff;

  bottom: 10%;

  left: 40%;

}

.house .door-window:before {

  content: " ";

  height: 100%;

  width: 100%;

  background: radial-gradient(white, #949699);

  background-color: #fff;

  display: block;

  position: absolute;

  right: 150%;

  transform: scaley(0.5);

}

.house .door-window:after {

  content: " ";

  height: 100%;

  width: 100%;

  background: radial-gradient(white, #949699);

  display: block;

  position: absolute;

  left: 150%;

  transform: scaley(0.5);

}

.sq{

    margin: auto;

    margin-top: 5%;

    border: 10px solid green;

    padding: 5%;

    width: 20%;

    height: 20%;

}

venereology answered 2 hours ago
Next > < Previous

Related Solutions

Create a form using the following HTML elements at a minimum. Style the form in your...
Create a form using the following HTML elements at a minimum. Style the form in your CSS. You do not need to include a form action (i.e. the form doesn't have to do anything - we're designing the front end of the form). textarea textbox input type of "email" select radio button checkbox submit button style at least three elements of your form in your stylesheet, including your submit button Use a comment to delineate the beginning and end of...
this is done in HTML In footer, use HTML tags/style of your choice to explain steps...
this is done in HTML In footer, use HTML tags/style of your choice to explain steps you took to add css file and _Layout. Should include the following: Folder structure Short description of what layout does You should not include the content of css or how you defined your css
Write an HTML which will create two moving balls (use div with border-radius to create these...
Write an HTML which will create two moving balls (use div with border-radius to create these balls). The red ball starts its movement from top left corner and the green ball starts its movement from top right corner. Assuming the red ball take diagonal direction and the red ball takes anti-diagonal direction downward. When ball meets in the middle of the screen, the red ball will on top of the green ball (hint: use z-inedx). Make sure these two balls...
CSS Write a document wide style block (include the correct HTML tag) to set all <p>...
CSS Write a document wide style block (include the correct HTML tag) to set all <p> tags to be double spaced and justified (not ragged left / right text)
Use a style sheet to define the following rules and implement the given HTML code. Please...
Use a style sheet to define the following rules and implement the given HTML code. Please put your style information within the same file as the HTML code. Rules • Hyperlinks using the nodec class should display no decoration. • Hyperlinks should display text in white with a green background color when the mouse pointer is held over the link. (use the hover pseudo-class) • Unordered lists not nested within any other lists should be displayed in blue text and...
What are the five elements of financial management how can a financial manager use them to...
What are the five elements of financial management how can a financial manager use them to make the organization work more effectively
What is the difference between HTML attributes and CSS properties? What are depricted elements and how...
What is the difference between HTML attributes and CSS properties? What are depricted elements and how can we address them? Why would a browser not support certain fonts? 1 paragraph for each plz
Reflect on your own learning style. Describe in a paragraph how you learn best.
Reflect on your own learning style. Describe in a paragraph how you learn best.
What are the major medical norms, how do doctors learn them, and how do they affect...
What are the major medical norms, how do doctors learn them, and how do they affect doctor-patient relationships?
How do organizations learn (or fail to learn)? Use a contemporary business example to illustrate your...
How do organizations learn (or fail to learn)? Use a contemporary business example to illustrate your answer. (2-3 pages)
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT