Web_dev_learn/class6.html at main · Allwina/Web_dev_learn · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CLASS6</title>
    <!-- INTERNAL CSS -->
    <style>
        h1{
            color:white;
           line-height: 40px;


        }
        /* h2{
            color: black;
            font-size: 30px;
           font-style: italic;
           /* help to capitalize first letter of each word capital */
           /* text-transform: capitalize;
           text-decoration:solid; */
           /* to move text to a certain distance from left or right  */
           /* text-indent: 150px;
           letter-spacing: 2px;
           word-spacing: 3px; */
           /* line-height: 2px; */
        /* } */
        body{
            background-color: crimson;
            /* background-image: linear-gradient(90deg,blue,white,purple); */
            /* background-image: url(https://images.pexels.com/photos/992734/pexels-photo-992734.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1); */

            background-size: cover;
            /* background-repeat: repeat-y; */
            background-attachment: fixed;
            padding-top: 80px;
        }
        /* Animation means moving anything */
        #mybox{
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 20px;
            border-radius: 20px;
            text-align: center;
            animation-name: myanim;
            animation-duration: 3s;
            animation-iteration-count: 4;
            /* for changing position */
            position: relative;
        }
        /* @keyframes: used for animation */
        @keyframes myanim{
            /* from{background-color: blueviolet;left: 200px;}
            to{background-color: coral;right: 0px;} */
            20%{background-color: red;left: 0px;top: 0px;}
            40%{background-color: blue;left: 200px;top: 0px;}
            60%{background-color: teal;left: 200px;top: 200px;}
            80%{background-color: darkolivegreen;left: 0px;top: 200px;}
            100%{background-color: fuchsia;left: 0px;top: 0px;}
            }
            #Header{
                width: 100%;
                top: 0px;
                left: 0px;
                background-image: linear-gradient(90deg,orange,yellow);
                color: white;
                text-align: center;
                position: fixed;
            }
            #footer{
                width: 100%;
                bottom: 0px;
                left: 0px;
                background-image: linear-gradient(90deg, indigo,yellow);
                color: white;
                text-align: center;
                position: fixed;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                font-size: 30px;
            }

    </style>
</head>
<body>
    <div id="Header">
        <h2>Welcome</h2>
    </div>
    <div align="left">
        <!-- <h1 >WELCOME</h1> -->
        <h1>Cherry Blossom</h1>
        <!-- <h2>I am nothing and everything <br>
            but never in between <br>
            the green buds or the dead leaves <br>
            but never the cherry blossom. <br>
            And that’s okay. <br>

            She is the whole bright bloom <br>
            the cherry blossom incarnate, <br>
            consistant and whole <br>
            even in moments <br>
            when her joy is fleeting. <br>

            I am whole too. <br>
            Home amoung the petals <br>
            and spring breezes. <br>
            This isn’t in between, <br>
            it doesn’t have to be. <br>

            She does not follow <br>
            does not lead <br>
            let’s her heart go where it must <br>
            there is no choice, <br>
            and that’s okay. <br>

            We’re born fractured sometimes <br>
            coming together eventually <br>
            even after the longest life. <br>
            We can be whole <br>
            even if just for a little while. <br></h2> -->
    </div>
    <div align="center" id="mybox">
        <h2>Thankz</h2>

    </div>
    <div id="footer"> Thank u</div>

</body>
</html>