LetsUpgrade HTML CSS Essentials code

devjyoti · devjyoti · commit b69b0eac94f2 · 2021-07-06T12:24:37.000+05:30
diff --git a/first.html b/first.html
diff --git a/layout.css b/layout.css
@@ -0,0 +1,26 @@
+*{
+    margin: 0px;
+}
+
+.one{
+    height: 300px;
+    width: 300px;
+    background-color: green;
+    /* padding: 50px;  */
+    border: 20px solid blue;
+    /* margin: 50px; */
+    box-sizing: border-box;
+    display: inline-block;
+}
+
+.two{
+    height: 200px;
+    width: 200px;
+    background-color: rgb(128, 0, 96);
+    /* padding: 50px;  */
+    border: 20px solid blue;
+    /* margin: 50px; */
+    box-sizing: border-box;
+    display: inline-block;
+}
+
diff --git a/layout.html b/layout.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Layouting</title>
+        <link rel="stylesheet" href="layout.css" />
+    </head>
+    <body>
+        <div class="one">
+            Hello
+        </div>
+        <div class="two">
+            Wow
+        </div>
+
+    </body>
+</html>
diff --git a/second.css b/second.css
@@ -0,0 +1,11 @@
+.one{
+    height: 400px;
+    width: 400px;
+    background-color: red;
+}
+
+.one_child{
+    height: 100%;
+    width: 50%;
+    background-color: green;
+}
diff --git a/second.html b/second.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS Demo</title>
+        <link rel="stylesheet" href="second.css">
+    </head>
+    <body>
+        <div class="one">
+            <div class="one_child">
+                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia deleniti dicta beatae soluta alias maxime inventore ducimus dignissimos. Eos voluptas a neque modi autem hic quos aperiam sit sint perspiciatis?</p>
+            </div>
+
+        </div>
+    </body>
+</html>
diff --git a/third.css b/third.css
@@ -0,0 +1,22 @@
+.parent1{
+ 
+    background-color: rgb(128, 87, 0);
+}
+
+.par1{
+    font-size: large;
+    background-color: honeydew;
+    
+}
+.par2{
+    font-size: medium;
+    background-color: rgb(77, 235, 77);
+    
+}
+
+.par3{
+    font-size: small;
+    background-color: rgb(41, 27, 136);
+    
+}
+
diff --git a/third.html b/third.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+    <header>
+        <title>Practice 1</title>
+        <link rel="stylesheet" href="third.css" />
+    </header>
+    <body>
+        <div class="parent1">
+            <div>
+                <p1 class="par1">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia dolore sapiente dolor accusamus! Eius cumque corporis deserunt, ducimus dicta eveniet iure numquam optio quos! Reprehenderit optio accusamus fuga odit quae?
+                </p1>
+            </div>    
+            <div>
+                <p2 class="par2">
+                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, eveniet. Libero, quisquam. Maiores sunt dicta ullam unde? Est nam dolores, pariatur numquam quia porro rerum maxime beatae accusantium earum dolorum?
+                </p2>
+            </div>  
+            <div>
+                <p3 class="par3">
+                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima molestias, nostrum fuga accusantium reprehenderit alias quia expedita rem ad asperiores facilis ullam nemo tempora quod numquam doloribus optio amet quam.
+                </p3>
+            </div> 
+        </div>  
+                   
+        
+    </body>
+
+</html>
