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 : Design

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>