PracticeFolder/07-07-2021.html at main · SwifSys/PracticeFolder · 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
<!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>
  </head>
  <body>
    <!-- This the the HTML comment example. -->
    <div>This is example of Code:</div>
    <code>
      <div>a+b</div>
    </code>
    <!-- This is example of I Frame -->
    <!-- IFrame is use to show a web page within a web page -->
    <iframe src="https://www.swifsys.com/" frameborder="1"></iframe>

    <!-- Example of html5 -->
    <!-- when you use <!DOCTYPE html> browser will understand as html 5 -->

    <header>
      <nav>
        <a href="code.html">Codee</a>
        <a href="htmlforms.html">HTML Forms</a>
        <a href="iframe.html">Iframe</a>
      </nav>
    </header>
    <main>
      <section>
        <h2>This is the heading 2 of section 1</h2>
      </section>
      <section>
        <h3>This is the heading 3 of section 2</h3>
      </section>
      <article>
        Veteran actor Dilip Kumar died on July 7 at around 7.30 am in Mumbai. He
        was 98. Last week, he was admitted to Khar-based Hinduja Hospital after
        complaining of breathing issues. His wife Saira Banu had shared a health
        update about Dilip Kumar a few days ago and asked everyone to pray for
        his recovery. More details about Dilip Kumar's funeral will be out
        shortly.
      </article>
      <aside
        style="float: right; width: 200px; height: 200px; background: lightgray"
      >
        This is the aside
        <ul>
          <li>aside 1</li>
          <li>aside 2</li>
          <li>aside 3</li>
        </ul>
      </aside>
      <figure>
        <img
          src="https://cdn-media-2.freecodecamp.org/w1280/5f9c9a4c740569d1a4ca24c2.jpg"
          alt="dummy"
          width="400"
        />
        <figcaption>This is figure caption</figcaption>
      </figure>

      <!-- this is the details semantic element -->
      <details>
        <summary>Swifsys Technologies</summary>
        <p>
          Swifsys Technologies is a Digital Marketing and software solution
          agency based in Lucknow, India. Our goal is quite simple: it's to make
          your business grow with our expertise in analysis, development, and
          design, we create unique and personalized digital marketing solutions
          for each client, 100% achievable with a return on investment. We want
          to develop an agency that clients get excited to be pitched to and
          that they value working with.
        </p>
      </details>

      <!-- mark semantic element -->
      <p>
        This is the <mark>web development training</mark> of Swifsys
        Technologies
      </p>

      <!-- time semantic element -->
      <p>
        The office timing of swifsys technologies <time>6:00</time> PM to
        <time>2:00</time> AM. Training will start from next
        <time datetime="2021-07-14 08:00">friday</time>
      </p>

      <!-- html responsive -->
      <picture>
        <source
          srcset="https://cdn.eso.org/images/thumb300y/eso1907a.jpg"
          media="(max-width:500px)"
        />
        <source
          srcset="https://i.ytimg.com/vi/opc7aMJszng/maxresdefault.jpg"
          media="(max-width: 1200px)"
        />
        <img
          src="https://neilpatel.com/wp-content/uploads/2017/09/image-editing-tools.jpg"
          alt=""
        />
      </picture>
    </main>

    <footer>
      <h3 align="center">This is the footer</h3>
    </footer>
  </body>
</html>