CSS-Basic/index.html at main · beingumang077/CSS-Basic · 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
<!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-BASIC</title>
    <link href="styles.css" rel="stylesheet"/>
</head>
<body>
    <h1 class="mainj">Uma Shankar's component library.</h1>
    <p>I am creating this file for storing the basic elements of HTML file</p>
    <hr>
    <h2>Typography</h2>
    <p>There are various types of typography</p>
    <h1>Biggest Heading</h1>
    <h2>Lower than the previous one</h2>
    <h3>Much lower than the previous one</h3>
    <p>For paragraph text</p>
    <small>The smallest font</small>
    <p>This text will be in <strong>Bold</strong></p>
    <hr>
    <h2>Containers</h2>
    <h3  class="hola">Fluid Container</h3>
    <div>Goes through end to end</div>
    <h3>Centre container</h3>
    <div class="centre">centered at a point</div>
    <hr>
    <h2>Links</h2>
    <a class="Linkw primary" href="">primary link</a>
    <a class="Linkw secondary" href="">secondary link</a>
    <hr>
    <h2>Lists</h2>
    <p>There are mainly 2 types of lists</p>
    <h3>unordered list</h3>
    <ul>
        <li>Uma</li>
        <li>Uma Shankar</li>
        <li>Umang</li>
    </ul>
    <h3>Unordered inline list</h3>
    <ul>
        <li class="inline-list">Hi !</li>
        <li class="inline-list">Hello</li>
        <li class="inline-list">There.</li>
    </ul>
    <h3>Ordered list</h3>
    <ol reversed>
        <li cl class="padding-left">egg</li>
        <li cl class="padding-left">milk</li>
        <li cl class="padding-left">bread</li>
    </ol>
    <div>Note: we can also reverse the order of the ordered list using CSS.</div>
    <hr>
    <h2>Navigation</h2>
    <p>Navigation is used at the top to visit some sections quickly.</p>
    <nav class="navigation">
        <h3>MENU</h3>
        <ul class="isli">
            <li class="inline-list"><a class="nave" href="/"><strong>Home</strong></a></li>
            <li class="inline-list"><a class="nave" href="/">Accounts Section</a></li>
            <li class="inline-list"><a class="nave" href="\">Back</a></li>
        </ul>
    </nav>
    <hr>
    <h2>Header</h2>
    <header class="edithead">
    <img class="imgi" src="https://www.maxim.com/wp-content/uploads/2021/05/coffee-pulp-fiction-1.jpg"/>
    <h1>wants some <span class="shit">Gourmet shit</span>,huh?.</h1>
    </header>
    <hr>
    <h2>Section</h2>
<section class="sectionedit">
    <h1>Front-end development</h1>
    <p>In this, we design the basic structure of a web page using HTML, position content and graphics using CSS and JavaScript for responsiveness.This is visible to the normal user in terms of graphics and design.
    </p>
</section>
<section class="sectionedit two">
    <h1>Back-end development</h1>
    <p>Portion or working of a web page that is not visible to the user, usually a backend engineer manages the server side of the software, architecture, and management of databases.This includes API calling etc.</p>
</section>
<hr>
<h2>Footer</h2>
<footer class="fotedit">
    <img class="imgl" src="https://constantscribbles.files.wordpress.com/2014/03/special-26.jpg"/>
    <h1 class="myname">Uma Shankar</h1>
    <ul class="liz">
   <li class="inline-list"><a class="Linke" href="">umangsharma077@gmail.com</a></li>

   <li class="inline-list"><a class="Linke" href="">Facebook</a></li>

  <li class="inline-list"><a class="Linke" href="">Twitter</a></li>
    </ul>
  <p>Important note-- By default,the "a href" system is all inline, to make it appear in different rows we use "div" or can use "li" tag in every link.</p>
</footer>
</body>
</html>