From 95b9d1e3587ea0ea08e97c84d71477f5eaf0aa44 Mon Sep 17 00:00:00 2001
From: im-kamil <kamilnasar786@gmail.com>
Date: Wed, 19 Oct 2022 12:08:54 +0530
Subject: [PATCH] I have added important HTML,CSS code for beginners to
 building websites

---
 webdevbootcamp/CSSdisplayproperty.html  | 152 ++++++++++++++++++++++++
 webdevbootcamp/CSSfloatclear.html       |  74 ++++++++++++
 webdevbootcamp/CSSfonts.html            |  25 ++++
 webdevbootcamp/CSSpositionpro.html      |  48 ++++++++
 webdevbootcamp/CSSselectors.html        |  38 ++++++
 webdevbootcamp/headingparaandemmet.html |  26 ++++
 webdevbootcamp/htmlsemantuctags.html    |  34 ++++++
 webdevbootcamp/table.html               |  24 ++++
 webdevbootcamp/tableandlist.html        |  62 ++++++++++
 9 files changed, 483 insertions(+)
 create mode 100644 webdevbootcamp/CSSdisplayproperty.html
 create mode 100644 webdevbootcamp/CSSfloatclear.html
 create mode 100644 webdevbootcamp/CSSfonts.html
 create mode 100644 webdevbootcamp/CSSpositionpro.html
 create mode 100644 webdevbootcamp/CSSselectors.html
 create mode 100644 webdevbootcamp/headingparaandemmet.html
 create mode 100644 webdevbootcamp/htmlsemantuctags.html
 create mode 100644 webdevbootcamp/table.html
 create mode 100644 webdevbootcamp/tableandlist.html
diff --git a/webdevbootcamp/CSSdisplayproperty.html b/webdevbootcamp/CSSdisplayproperty.html
new file mode 100644
index 00000000..3a558cf0
--- /dev/null
+++ b/webdevbootcamp/CSSdisplayproperty.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>CSS Display property</title>
+    <style> 
+
+        *{
+            box-sizing: border-box;
+        }
+        header {
+            border: 2px solid red;
+            margin: auto;
+    width: 1200px;
+        }
+
+        img {
+            margin: auto;
+            display: block;
+            width: 34px;
+        }
+
+        h3 {
+            text-align: center;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0px;
+        }
+
+        .box {
+            border: 4px solid black;
+            background-color: grey;
+            margin: 4px 0px;
+            padding: 23px;
+            width: 33%;
+            box-sizing: border-box;
+            display: inline-block;
+        }
+        .container{
+            margin: auto;
+            width: 1200px;
+        }
+    </style>
+</head>
+
+<body>
+    <header class="top">
+        <img src="<!DOCTYPE html>
+        <html lang="en">
+        
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <meta http-equiv="X-UA-Compatible" content="ie=edge">
+            <title>CSS Display property</title>
+            <style> 
+        
+                *{
+                    box-sizing: border-box;
+                }
+                header {
+                    border: 2px solid red;
+                    margin: auto;
+            width: 1200px;
+                }
+        
+                img {
+                    margin: auto;
+                    display: block;
+                    width: 34px;
+                }
+        
+                h3 {
+                    text-align: center;
+                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                    margin: 0px;
+                }
+        
+                .box {
+                    border: 4px solid black;
+                    background-color: grey;
+                    margin: 4px 0px;
+                    padding: 23px;
+                    width: 33%;
+                    box-sizing: border-box;
+                    display: inline-block;
+                }
+                .container{
+                    margin: auto;
+                    width: 1200px;
+                }
+            </style>
+        </head>
+        
+        <body>
+            <header class="top">
+                <img src="https://avatars.githubusercontent.com/u/94951157?s=400&u=2df33e1f700dbe0a7c0e4c8c754d748566f70d13&v=4" alt="">
+                <h3>Welcome to KAMIL_KAMMO Blog</h3>
+            </header>
+            <div class="container">
+                <div class="box">
+                    <h4 class="heading">Heading</h4>
+                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, harum ipsam aliquid deleniti, vitae
+                        labore cum laudantium a blanditiis est voluptates dolorum consequuntur. Aliquam corporis, fuga
+                        consectetur rerum molestias consequatur tempora natus sed laborum recusandae fugit harum soluta
+                        inventore enim. Aspernatur aperiam cum reprehenderit!</p>
+                </div><div class="box">
+                    <h4 class="heading">Heading</h4>
+                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, harum ipsam aliquid deleniti, vitae
+                        labore cum laudantium a blanditiis est voluptates dolorum consequuntur. Aliquam corporis, fuga
+                        consectetur rerum molestias consequatur tempora natus sed laborum recusandae fugit harum soluta
+                        inventore enim. Aspernatur aperiam cum reprehenderit!</p>
+                </div><div class="box">
+                    <h4 class="heading">Heading</h4>
+                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, harum ipsam aliquid deleniti, vitae
+                        labore cum laudantium a blanditiis est voluptates dolorum consequuntur. Aliquam corporis, fuga
+                        consectetur rerum molestias consequatur tempora natus sed laborum recusandae fugit harum soluta
+                        inventore enim. Aspernatur aperiam cum reprehenderit!</p>
+                </div>
+            </div>
+        </body>
+        
+        </html>
+        " alt="">
+        <h3>Welcome to KAMIL_KAMMO Blog</h3>
+    </header>
+    <div class="container">
+        <div class="box">
+            <h4 class="heading">Heading</h4>
+            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, harum ipsam aliquid deleniti, vitae
+                labore cum laudantium a blanditiis est voluptates dolorum consequuntur. Aliquam corporis, fuga
+                consectetur rerum molestias consequatur tempora natus sed laborum recusandae fugit harum soluta
+                inventore enim. Aspernatur aperiam cum reprehenderit!</p>
+        </div><div class="box">
+            <h4 class="heading">Heading</h4>
+            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, harum ipsam aliquid deleniti, vitae
+                labore cum laudantium a blanditiis est voluptates dolorum consequuntur. Aliquam corporis, fuga
+                consectetur rerum molestias consequatur tempora natus sed laborum recusandae fugit harum soluta
+                inventore enim. Aspernatur aperiam cum reprehenderit!</p>
+        </div><div class="box">
+            <h4 class="heading">Heading</h4>
+            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, harum ipsam aliquid deleniti, vitae
+                labore cum laudantium a blanditiis est voluptates dolorum consequuntur. Aliquam corporis, fuga
+                consectetur rerum molestias consequatur tempora natus sed laborum recusandae fugit harum soluta
+                inventore enim. Aspernatur aperiam cum reprehenderit!</p>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/webdevbootcamp/CSSfloatclear.html b/webdevbootcamp/CSSfloatclear.html
new file mode 100644
index 00000000..8fbd96f7
--- /dev/null
+++ b/webdevbootcamp/CSSfloatclear.html
@@ -0,0 +1,74 @@
+<!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>Alignment </title>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap" rel="stylesheet">
+    <style>
+        *{
+            box-sizing: border-box;
+        }
+        body{
+            font-family: 'Rubik Moonrocks', cursive;
+        }
+        .container{
+            width: 900px;
+            border: 3px solid pink;
+            /* margin: auto;   for centre to the container */
+            background-color: rgba(170, 0, 255, 0.314);
+            margin: 33px auto;   /* for upper side maintain */
+        }
+        .item{
+            border: 3px solid greenyellow;
+            margin: 12px 3px;
+            padding: 12px 3px;
+            background: rgba(0, 255, 217, 0.475);
+        }
+        #fruits{
+            float: left;
+            width: 50%;
+        }
+        #computer{
+            float: left;
+            width: 50%;
+        }
+        #stationary{
+            /* float: left; */
+            clear: both;
+            width: 100%;
+        }
+        p, h3{
+            /* text-align: right;
+            text-align: left; /* bad wala consider krega */
+            /* text-align: center; */
+            text-align: justify;
+        }
+    </style>
+</head>
+<body>
+    
+    <div class="Container">
+        <h1>WELCOME TO MY STORE KAMMO</h1>
+        <div id="fruits" class="item">
+            <h1>fruits</h1>
+            <p id="fruitspara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam repellendus ex impedit obcaecati, cum sint aut quo exercitationem corrupti voluptatem eos, modi consequatur reiciendis hic cupiditate, iste laudantium commodi dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam repudiandae, cumque error at similique maiores numquam! Fugiat dolorem ipsum nobis numquam aliquid consequuntur eaque aspernatur nesciunt repudiandae, sit quasi necessitatibus rem laborum eos natus.</p>
+        </div>
+        <div id="computer" class="item">
+            <h1>computer</h1>
+            <p id="computerpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima exercitationem vel, saepe tenetur temporibus ullam molestias neque quibusdam ducimus commodi quod repudiandae illo magni. Perspiciatis aliquam eligendi iure necessitatibus sequi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi pariatur laboriosam aliquam sit, consectetur officia amet et. Impedit veritatis cupiditate est quod culpa neque optio aliquid molestiae atque laborum. Consequuntur necessitatibus blanditiis placeat consectetur!</p>
+        </div>
+        <div id="stationary" class="item">
+            <h1>stationary</h1>
+            <p id="stationarypara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam repellendus ex impedit obcaecati, cum sint aut quo exercitationem corrupti voluptatem eos, modi consequatur reiciendis hic cupiditate, iste laudantium commodi dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam repudiandae, cumque error at similique maiores numquam! Fugiat dolorem ipsum nobis numquam aliquid consequuntur eaque aspernatur nesciunt repudiandae, sit quasi necessitatibus rem laborum eos natus.</p>
+        </div>
+        <div id="glasses" class="item">
+            <h1>glasses</h1>
+            <p id="glassespara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam repellendus ex impedit obcaecati, cum sint aut quo exercitationem corrupti voluptatem eos, modi consequatur reiciendis hic cupiditate, iste laudantium commodi dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam repudiandae, cumque error at similique maiores numquam! Fugiat dolorem ipsum nobis numquam aliquid consequuntur eaque aspernatur nesciunt repudiandae, sit quasi necessitatibus rem laborum eos natus.</p>
+        </div>
+
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/webdevbootcamp/CSSfonts.html b/webdevbootcamp/CSSfonts.html
new file mode 100644
index 00000000..e801ad82
--- /dev/null
+++ b/webdevbootcamp/CSSfonts.html
@@ -0,0 +1,25 @@
+<!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>CSS fonts</title>
+    <style>
+        p{
+            font-family: cursive;
+            font-size: 22px;
+            line-height: 8.3em;
+            /* font-weight: bold; */
+        }
+        span{
+            font-weight: bold; 
+            font-style: italic;
+        }
+    </style>
+</head>
+<body>
+    <h1>CSS fonts </h1>
+    <p>lets play with fonts <span>font</span>.. its very exciting</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/webdevbootcamp/CSSpositionpro.html b/webdevbootcamp/CSSpositionpro.html
new file mode 100644
index 00000000..b5278756
--- /dev/null
+++ b/webdevbootcamp/CSSpositionpro.html
@@ -0,0 +1,48 @@
+<!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>Document</title>
+    <style>
+        /* CSS position --> static(default) ,absolute, relative, fixed, sticky */
+        .container {
+            border: 2px;
+            background-color: khaki;
+            height: 3444px;
+        }
+
+        .box {
+            display: inline-block;
+            border: 2px solid red;
+            width: 150px;
+            height: 150px;
+            margin: 2px;
+        }
+
+        #box3 {
+            /* position: absolute; */
+            /* position: fixed;
+            right: 4px;
+            bottom: 2px;     */
+            /* top: 34px;
+            left: 134px; */
+            position: sticky;
+            top: 3px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="box" id="box1">1</div>
+        <div class="box" id="box2">2</div>
+        <div class="box" id="box3">Chat with us</div>
+        <div class="box" id="box4">4</div>
+
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/webdevbootcamp/CSSselectors.html b/webdevbootcamp/CSSselectors.html
new file mode 100644
index 00000000..318bd3ae
--- /dev/null
+++ b/webdevbootcamp/CSSselectors.html
@@ -0,0 +1,38 @@
+<!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>CSS SELECTORS</title>
+    <style>
+        /* element selector */
+        p{
+            border: 2px solid red;
+        }
+        /* this is id selector */
+        #firstPara{
+            color: green;
+        }
+        /* this is class selector */
+        .bgBlue{
+            color: yellow;
+            background-color: blue;
+        }
+        /* this is grouping selector */
+        footer, span{  
+            background-color: darkmagenta;
+        }
+    </style>
+</head>
+<body>
+    <h1>CSS SELECTORS</h1>
+    <p id="firstPara">This is a simple demonstrate css selectors </p>
+    <p id="secondPara " class="redElement bgBlue">This is another simple demonstrate css selectors </p>
+    <div>
+        <p>This is yet another simple paragraph inside div demonstrate css selectors </p> 
+        <span>This is span</span>
+    </div>
+      <footer>This is footer </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/webdevbootcamp/headingparaandemmet.html b/webdevbootcamp/headingparaandemmet.html
new file mode 100644
index 00000000..43efb61f
--- /dev/null
+++ b/webdevbootcamp/headingparaandemmet.html
@@ -0,0 +1,26 @@
+<!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>Heading paragraphs and Emmet</title>
+</head>
+<body>
+    <h1>kamil</h1>
+    <h2>kamil</h2>
+    <h3>kamil</h3>
+    <h4>kamil</h4>
+    <h5>kamil</h5>
+    <h6>kamil</h6>
+     <p>This is kamil</p>
+     <!-- lorem 36 for dummy text line with 36 words -->
+     <p>Lorem ipsum dolor sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id et optio autem aliquid repudiandae excepturi aut enim, praesentium deserunt dolor <strong>This is strong</strong> voluptates dolores vitae voluptas <em>This is emphasized</em> rerum eligendi dolorem <b>bold is line</b> nostrum amet <i>italic</i> ipsum ad veniam minima eos!</p>
+     <p>first <br>This is my first line </p>
+     <p>Second</p>
+     <p>Third</p>
+     <p>Fourth</p>
+     <p>This is paragraph</p>
+     <!-- cntrl+enter for new line -->
+</body>
+</html>
\ No newline at end of file
diff --git a/webdevbootcamp/htmlsemantuctags.html b/webdevbootcamp/htmlsemantuctags.html
new file mode 100644
index 00000000..06086a57
--- /dev/null
+++ b/webdevbootcamp/htmlsemantuctags.html
@@ -0,0 +1,34 @@
+<!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>HTML Semantic Tags</title>
+</head>
+  <H1>Semantic Elements</H1>
+  <details>
+     <summary>I have keys but no doors . I have space but no room. You can enter but cant leave. What am I?
+     A keyboard.
+     A keyboard.
+     A keyboard.
+     A keyboard.
+     A keyboard.
+     A keyboard.
+     A keyboard.
+     A keyboard.
+     A keyboard.
+     A keyboard.
+     A keyboard.
+     A keyboard.
+     A keyboard.
+     A keyboard.
+     A keyboard.
+     A keyboard. </summary>
+     
+     
+  </details>
+<body>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/webdevbootcamp/table.html b/webdevbootcamp/table.html
new file mode 100644
index 00000000..167670f1
--- /dev/null
+++ b/webdevbootcamp/table.html
@@ -0,0 +1,24 @@
+<!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>TABLE</title>
+</head>
+<body>
+    <table
+        border = "number"
+        align = "left/right/center"
+        width = "number%"
+        bgcolor = "NameOfColor"
+        background = "addressOfTheFile"
+        bordercolor = "#hexadecimalNumberOfColour" >
+    <tr>
+        <td> kamran is a good boy badmash bioy kamina boy <br> </td>
+        <br>
+        <td> emran bhai si khadoos kanjoos bro <br> </td>
+    </tr>
+    </table>
+</body>
+</html>
\ No newline at end of file
diff --git a/webdevbootcamp/tableandlist.html b/webdevbootcamp/tableandlist.html
new file mode 100644
index 00000000..7960f11c
--- /dev/null
+++ b/webdevbootcamp/tableandlist.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Tables and Lists</title>
+</head>
+
+<body>
+    <ul type="circle">
+        <li>This is first item of my unordered list</li>
+        <li>This is second item of my unordered list</li>
+
+        <ul>
+            <li>Another one</li>
+            <li>Another two</li>
+            <li>Another three</li>
+        </ul>
+
+
+        <li>This is third item of my unordered list</li>
+    </ul>
+    <ol type="a">
+        <li>This is first item of my ordered list</li>
+        <li>This is second item of my ordered list</li>
+        <li>This is third item of my ordered list</li>
+    </ol>
+
+    <!-- Tables -->
+    <h3>HTML Table</h3>
+    <table>
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Employee Id</th>
+                <th>Employee Role</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td> Kamil </td>
+                <td> 34343 </td>
+                <td> Programmer </td>
+            </tr>
+            <tr>
+                <td> Farri</td>
+                <td> 3483 </td>
+                <td> HTML Expert </td>
+            </tr>
+            <tr>
+                <td> Farru </td>
+                <td> 7564 </td>
+                <td> Android Developer </td>
+            </tr>
+        </tbody>
+    </table>
+
+</body>
+
+</html>

Name	Employee Id	Employee Role
Kamil	34343	Programmer
Farri	3483	HTML Expert
Farru	7564	Android Developer