below is the css code and above is htmlcode and the question is Create a start page that you will use as the default page in your browser. Include the following items in this start page: 1. Add two full width block divisions, the first full-width division needs to be divided in two equal parts, the first division should have a list and the second division should have an image. 2. Second full width block divisions need to be divided in two equal parts, first division should have an image and another division should contain heading. Acceptance criteria: 1. Keep all the blocks inside 1 div with class=”div” 2. Inside main div, create 2 more divs for upper blocks and lower blocks respectively. 3. Keep class name as “block-1”,“block-2”,“block-3”,“block-4” for top left, top right, bottom left and bottom right blocks respectively. give me the html and css code differently First Test Case: “It should have two full-width block divisions.”
- Second Test Case: “It should have an image in the first division of the second full-width block.”
- Third Test Case: “It should have an heading in the second division of the second full-width block.” this test cases should pass and i am using the below code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="div">
<!-- First full-width block division -->
<div class="upper">
<div class="block-1">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
</ul>
</li>
</ul>
</div>
<div class="block-2">
<img src="image1.jpg" alt="Sample Image 1">
</div>
</div>
<!-- Second full-width block division -->
<div class="lower">
<div class="block-3">
<img src="image2.jpg" alt="Sample Image 2">
</div>
<div class="block-4">
<h1>The largest community of photo enthusiasts</h1>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.div {
width: 100%;
}
/* First full-width block containing block-1 and block-2 */
.upper {
display: flex;
width: 100%;
}
.block-1 {
width: 50%;
padding: 20px;
}
.block-1 ul ul {
list-style-type: circle;
padding-left: 20px;
}
.block-2 {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.block-2 img {
max-width: 100%;
height: auto;
}
/* Second full-width block containing block-3 and block-4 */
.lower {
display: flex;
width: 100%;
}
.block-3 {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.block-3 img {
max-width: 100%;
height: auto;
}
.block-4 {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.block-4 h1 {
text-align: center;
font-size: 1.5rem;
}
/* Clearfix to ensure div containers expand properly */
.div::after {
content: "";
display: table;
clear: both;
}
''
Shiva Ks is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2