Hi, I need help with this project. Using CSS to create a Modrian as this picture

ID: 3757150 • Letter: H

Question

Hi, I need help with this project. Using CSS to create a Modrian as this picture.

There is my code so far:

index.html:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Assignment 2</title>
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<div class="painting">
<div class="toprow">
<div class="bigbox red right"></div>
<div class="divider1 black right"></div>
<div class="topleftcolunm">
<div class="mediumbox"></div>
<div class="divider2 black"></div>
<div class="mediumbox"></div>
</div>
<div class="midllerow black"></div>

</div>
</div>
</div>
</body>
</html>

style.css:

body{
background: #f6f6f6;
}
.painting{
background: #fff4db;
width: 400px;
height: 400px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
box-shadow: 10px 10px 5px #8d8d8d ;
}

.toprow{
height: 29px;
}

.bigbox{
width: 290px;
height:290px;
}

.red{
background: #cc3333;
}

.blue{
background: #0000ff;
}

.yellow{
background: #ffff00;
}

.black{
background: #000000;
}

.right{
float:right;
}

.left{
float: left;
}

.divider1{
height: 290px;
width: 10px;
}

.mediumbox{
width: 100px;
height: 140px;
}

.divider2{
height: 10px;
width: 100px;
}

.midllerow{
width: 400px;
height:10px;
}

.bottomrow{
height:100px;
}

.divider3{
height:100px;
width: 10px;
}

.smallbox{
height:45px;
width:20px;
}

.divider4{
height:10px;
width:20px;
}

.top{
float: top;
}

.bottom{
float: bottom;
}

.divider5{
height: 100px;
width:10px;
}
.box2{
height:100px;
width:260px;
}

.box3{
height:100px;
width:100px;
}

: 290px : 10px h: 140px Mi 100px 10P : 100px- hi 290px M: 290px hi 140px w: 100px hs 10px : 400px h: 45px 20px h: 100px 100px h: 100px : 260px h: 10px wi 20px -h: 45px w: 20px h: 100px s 10px : 100px Ms 10px

Explanation / Answer

index.html:

<!DOCTYPE html>

<head>

<title>Assignment 2</title>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

style.css:

body{

background: #f6f6f6;

}

.painting{

background: #fff4db;

width: 400px;

height: 400px;

margin-top: 30px;

margin-right: auto;

margin-left: auto;

box-shadow: 10px 10px 5px #8d8d8d ;

}

.toprow{

height: 29px;

}

.bigbox{

width: 290px;

height:290px;

}

.red{

background: #cc3333;

}

.blue{

background: #0000ff;

}

.yellow{

background: #ffff00;

}

.black{

background: #000000;

}

.right{

float:right;

}

.left{

float: left;

}

.divider1{

height: 290px;

width: 10px;

}

.mediumbox{

width: 100px;

height: 140px;

}

.divider2{

height: 10px;

width: 100px;

}

.midllerow{

width: 400px;

height:10px;

}

.bottomrow{

height:100px;

}

.divider3{

height:100px;

width: 10px;

}

.smallbox{

height:45px;

width:20px;

}

.divider4{

height:10px;

width:20px;

}

.top{

float: top;

}

.bottom{

float: bottom;

}

.divider5{

height: 100px;

width:10px;

}

.box2{

height:100px;

width:260px;

}

.box3{

height:100px;

width:100px;

}

Navigate

Hi, I need help with this programming problem. Add functions and function protot

Hi, I need help with this project: Using JAVA language Requirements: 1. Create a

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Hi, I need help with this project. Using CSS to create a Modrian as this picture

Question

Explanation / Answer

Related Questions

Navigate