Loop Control Statements in C
Introduction to HTML
How to use the Github API
The image tag, anchor tag and the button tag
Ordered and Unordered Lists in HTML
The division tag
HTML Forms
Tables in HTML
Introduction to C Programming
Introduction to Python
Varibles and Datatypes in Python
Operators in Python
Typecasting in Python
Input and Output in Python
If Else in Python
Loops in Python
Break, Continue and Pass in Python
Python practice section 1
Lists in Python
Tuple in Python
CSS Practice Design 1
Now we will create the following Design using HTML and CSS. We can use colors according to our choice. We need to use the given template to create the design.
Design
The colors used in the Design are :- #0B0215
- #FFFFFF
- #f766ae
Starter Template
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* WARNING: Do not edit this part of the code (unless you know what you are doing) */
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center center;
place-content: center center;
height: 100vh;
}
/* Write your code here */
.parent {
width: 400px;
height: 400px;
background-color: #0B0215;
color: white;
}
</style>
<title>Rapid Coders</title>
</head>
<body>
<div class='parent'>
<!-- write your code here -->
</div>
</body>
</html>
Solution
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* WARNING: Do not edit this part of the code (unless you know what you are doing) */
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center center;
place-content: center center;
height: 100vh;
}
/* Write you code here */
.parent {
width: 400px;
height: 400px;
background-color: #0B0215;
color: white;
display: grid;
place-items: center center;
place-content: center center;
}
#pinkbox {
height: 325px;
width: 325px;
justify-content: center;
background-color: #f766ae;
display: grid;
place-items: center center;
place-content: center center;
}
#whiteBox {
background-color: #ffe4e1;
height: 230px;
width: 230px;
transform: rotate(45deg);
display: grid;
place-items: center center;
}
#pink2box {
background-color: #f766ae;
height: 163px;
width: 163px;
transform: rotate(45deg);
display: grid;
place-items: center center;
}
#lastwhite {
background-color: #ffe4e1;
height: 115px;
width: 115px;
transform: rotate(45deg);
}
</style>
<title>Rapid Coders</title>
</head>
<body>
<div class='parent'>
<!-- write your code here -->
<div id="pinkbox">
<div id="whiteBox">
<div id="pink2box">
<div id="lastwhite">
</div>
</div>
</div>
</div>
</div>
</body>
</html>