tarunjawla · tarunjawla · Apr 3, 2024 · Apr 3, 2024 · Apr 3, 2024 · Apr 3, 2024
diff --git a/Canvas.html b/Canvas.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Canvas and WebGL Example in HTML</title>
+<style>
+  canvas {
+    border: 1px solid black;
+  }
+</style>
+</head>
+<body>
+
+<h1>Canvas and WebGL Example in HTML</h1>
+
+<canvas id="myCanvas" width="400" height="200"></canvas>
+
+<script>
+
+  var canvas = document.getElementById('myCanvas');
+  var ctx = canvas.getContext('2d');
+
+
+  ctx.fillStyle = 'red';
+  ctx.fillRect(50, 50, 100, 100);
+
+
+  ctx.beginPath();
+  ctx.arc(300, 100, 50, 0, 2 * Math.PI);
+  ctx.fillStyle = 'blue';
+  ctx.fill();
+</script>
+
+</body>
+</html>
diff --git a/Day-1 b/Day-1
diff --git a/Day-2/BoxModel.html b/Day-2/BoxModel.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS BOX Model Property </title>
+
+    <style>
+        .main{
+            font-size: 36px;
+            font-weight: bold;
+            Text-align: center;
+        }
+
+        .myDiv{
+            margin-left: 60px;
+            border: 50px solid #009900;
+            width: 300px;
+            height: 200px;
+            text-align: center;
+            padding: 50px;
+        }
+
+        .myDiv1{
+            font-size: 42px;
+            font-weight: bold;
+            color: #009900;
+            margin-top: 60px;
+            background-color: #c5c5db;
+        }
+
+        .myDiv2{
+            font-size: 18px;
+            font-weight: bold;
+            background-color: #c5c5db;
+        }
+    </style>
+</head>
+<body>
+
+
+    <div class="main">
+        BOX Model in CSS
+    </div>
+    <div class="myDiv">
+        <div class="myDiv1">
+            BOX Model Tutorial in CSS
+        </div>
+
+        <div class="myDiv2">
+            We are learning CSS Box Model 
+        </div>
+    </div>
+</body>
+</html>
diff --git a/Day-2/Layout.css b/Day-2/Layout.css
@@ -0,0 +1,21 @@
+.grid-container {
+    display: grid;
+    column-gap: 5px;
+    row-gap: 15px;
+    gap: 50px 100px;
+    grid-template-columns: auto auto auto;
+    background-color: #2196F3;
+    padding: 10px;
+  }
+
+  .grid-item {
+    background-color: rgba(255, 255, 255, 0.8);
+    border: 1px solid rgba(0, 0, 0, 0.8);
+    padding: 20px;
+    font-size: 30px;
+    text-align: center;
+  }
+  .grid-item1 {
+    grid-column-start: 1;
+    grid-column-end: 3;
+  }
diff --git a/Day-2/Layout.html b/Day-2/Layout.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Layouts in CSS</title>
+    <link rel="stylesheet" href="Layout.css">
+</head>
+<body>
+    <h1>Grid Lines</h1>
+    <div class="grid-container">
+        <div class="grid-item1">1</div>
+        <div class="grid-item">2</div>
+        <div class="grid-item">3</div>  
+        <div class="grid-item">4</div>
+        <div class="grid-item">5</div>
+        <div class="grid-item">6</div>  
+        <div class="grid-item">7</div>
+        <div class="grid-item">8</div>
+        <div class="grid-item">9</div>  
+      </div>
+</body>
+</html>
diff --git a/Day-2/PsuedoSelectors.css b/Day-2/PsuedoSelectors.css
@@ -0,0 +1,25 @@
+div {
+    background-color: green;
+    color: white;
+    padding: 25px;
+    text-align: center;
+  }
+
+  div:hover {
+    background-color: blue;
+  }
+
+  #p2 {
+    display: none;
+    background-color: red;
+    padding: 20px;
+  }
+  div:hover #p2 {
+    display: block;
+  }
+
+  /*The :first-child Pseudo-class*/
+
+  p:first-child {
+    color: magenta;
+  } 
diff --git a/Day-2/PsuedoSelectors.html b/Day-2/PsuedoSelectors.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="PsuedoSelectors.css">
+  </head>
+  <body>
+    <p>Mouse over the div element below to change its background color:</p>
+    <div>Mouse Over Me</div>
+
+    <div>Hover over this div element to show the p element
+        <p id="p2">Tada! Here I am!</p>
+    </div>
+
+    <div>
+        <p>This is some text.</p>
+        <p>This is some text.</p>
+      </div>
+  </body>
+</html>
diff --git a/Day-2/Selectors.css b/Day-2/Selectors.css
@@ -0,0 +1,69 @@
+/*Element Selector*/
+
+h1 {
+
+    color: red;
+}
+
+/* CSS for h2 element */
+h2 {
+    color: blue;
+    font-size: 28px;
+}
+
+/* CSS for p element */
+p {
+    color: green;
+    font-size: 18px;
+}
+
+/* CSS for class element */
+.div {
+    background-color: yellow;
+    padding: 20px;
+    border: 2px solid orange;
+    margin-top: 20px;
+}
+
+/* CSS for element with a id  */
+#id-element {
+    color: blue;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+
+ /* Universal Selector - Applies to all elements */
+ * {
+    margin: 0;
+    padding: 0;
+    background: pink;
+    box-sizing: border-box;
+    font-family: Arial, sans-serif;
+}
+
+ /* Grouping selectors to apply same styles on h1 and h2 */
+ h1, h2{
+    text-align: center;
+    font-family: Arial, sans-serif;
+}
+
+ /* child selector */
+
+ div>p{
+    background-color: red;
+ }
+
+
+
+ /* Adjacent Sibling Selector (+) */
+
+ div+p{
+    background-color: yellow;
+ }
+
+  /* General Sibling Selector  */
+
+  div~p{
+    background-color: blue;
+  }
diff --git a/Day-2/Selectors.html b/Day-2/Selectors.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="Selectors.css">
+    <title>Selectors in CSS</title>
+</head>
+<body>
+    <h1>CSS Selectors Example </h1>
+    <h2>This is a Heading 2</h2>
+    <p>This is a paragraph. Lorem ipsum dolor sit amet.</p>
+    <div class="div">
+        <p>This paragraph is inside a div with a div class.</p>
+    </div>
+
+    <div id="id-element">This div has an ID and is styled using the ID selector.</div>
+
+
+    <div>
+        <p>Paragraph 1 in the div.</p>
+        <p>Paragraph 2 in the div.</p>
+        <section>
+          <!-- not Child but Descendant -->
+          <p>Paragraph 3 in the div (inside a section element).</p>
+        </section>
+        <p>Paragraph 4 in the div.</p>
+      </div>
+
+      <p>Paragraph 3. After a div.</p>
+      <p>Paragraph 4. After a div.</p>
+</body>
+</html>
diff --git a/Day-2/ShadowProperty.html b/Day-2/ShadowProperty.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shadow Property in CSS</title>
+    <style>
+        h1{
+            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
+
+        }
+        .myDiv{
+            height: 200px;
+            width: 200px;
+            background-color: aquamarine;
+            box-shadow: 10px 10px 5px 12px red;
+            text-align: center;
+        }
+    </style>
+
+</head>
+
+<body>
+    <h1>Shadow Property in CSS </h1>
+
+    <div class="myDiv">This Div Element will show the example of box shadow in css</div>
+</body>
+</html>
diff --git a/Day-2/Specificity.css b/Day-2/Specificity.css
@@ -0,0 +1,42 @@
+
+/*Cascade*/
+h2 {
+    color: red;
+}
+
+h2 {
+    color: blue;
+}
+
+/*Specificity*/
+
+/* 
+p{
+    color: pink;
+}
+
+.myPara{
+    color: green;
+} */
+
+
+/*Inheritance*/
+
+body{
+    color: red;
+}
+
+span {
+    color: black;
+  }
+
+  ul#summer-drinks li {
+    font-weight: normal;
+    font-size: 12px;
+    color: black;
+ }
+ .fav{
+    color: red !important ;
+    font: 400 !important;
+    text-decoration:dashed !important ;
+ }