Web-dictionary-BS/Web_dictionary.html at main · prasannavb/Web-dictionary-BS · 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<html lang="en">
  <head>
    <title>Web Dictionary</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="images/dict.jpg" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
      <div class="container">
        <h3 style="color:white">
          <i class="fa-brands fa-chrome"></i>Web Dictionary </h2>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto">
              <li id="nav-margin" class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li id="nav-margin" class="nav-item">
                <a style="color:white" class="nav-link" href="#">About</a>
              </li>
              <li id="nav-margin" class="nav-item dropdown">
                <a style="color:white" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Top Technologies </a>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                  <li>
                    <a class="dropdown-item" href="#">React</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Angular</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Vue</a>
                  </li>
                </ul>
              </li>
              <li id="nav-margin" class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Contact</a>
              </li>
            </ul>
          </div>
      </div>
    </nav>
    <div class="outer-wrapper" style="width: 100%">
      <div class="s-wrap s-type-1" role="slider">
        <input type="radio" id="s-1" name="slider-control" checked="checked">
        <input type="radio" id="s-2" name="slider-control">
        <input type="radio" id="s-3" name="slider-control">
        <ul class="s-content">
          <li class="s-item s-item-1"></li>
          <li class="s-item s-item-2"></li>
          <li class="s-item s-item-3"></li>
        </ul>
        <div class="s-control">
          <label class="s-c-1" for="s-1"></label>
          <label class="s-c-2" for="s-2"></label>
          <label class="s-c-3" for="s-3"></label>
        </div>
        <div class="s-nav">
          <label class="s-nav-1 right" for="s-2"></label>
          <label class="s-nav-2 left" for="s-1"></label>
          <label class="s-nav-2 right" for="s-3"></label>
          <label class="s-nav-3 left" for="s-2"></label>
          <label class="s-nav-3 right" for="s-4"></label>
          <label class="s-nav-4 left" for="s-3"></label>
        </div>
      </div>
    </div>
    <div class="about">
      <h2>Lets Learn </h2>
    </div>
    <div class="container cards-div">
      <div class="row gy-4">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <img src="images/r.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">React Js</h5>
              <p class="card-text">What is ReactJs used for? The React. js framework is an open-source JavaScript framework and library developed by Facebook. It's used for building interactive user interfaces and web applications quickly and efficiently.</p>
              <a href="https://react.dev/" class="btn btn-primary">Learn More <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <img src="images/angularjs.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Angular Js</h5>
              <p class="card-text">AngularJS is a JavaScript framework designed to extend the syntax of HTML. AngularJS empowers developers to build rich internet applications (RIAs) more easily. Where many JavaScript frameworks focus on expanding the capabilities of JavaScript itself, AngularJS instead provides methods for enhancing HTML</p>
              <a href="https://angularjs.org/" class="btn btn-primary">Learn More <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <img src="images/Vue.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Vue Js</h5>
              <p class="card-text">Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be they simple or complex.</p>
              <a href="https://vuejs.org/" class="btn btn-primary">Learn More <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <img src="images/php.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">PHP</h5>
              <p class="card-text">PHP(short for Hypertext PreProcessor) is the most widely used open source and general purpose server side scripting language used mainly in web development to create dynamic websites and applications</p>
              <a href="https://www.php.net/" class="btn btn-primary">Learn More <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <img src="images/svelte.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Svelte</h5>
              <p class="card-text"> Svelte is a modern JavaScript framework used to build static web apps that are fast, lean, and are fun for developers to use. You can use Svelte to build single, reusable components for projects of any kind, including larger applications written with any frameworks.</p>
              <a href="https://svelte.dev/" class="btn btn-primary">Learn More <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <img src="images/node.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Node Js</h5>
              <p class="card-text"> Node. js is easily employed as a server-side proxy, where it can handle a large amount of simultaneous connections in non-blocking manner.It's useful for proxying different services with varying response times, or collecting data from multiple source points.</p>
              <a href="https://nodejs.org/en" class="btn btn-primary">Learn More <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="text-center text-lg-start bg-dark text-muted footer">
      <section class="" id="foot">
        <div class="container text-center text-md-start mt-5">
          <div class="row mt-3">
            <div id="text-company" class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
              <h6 class="text-uppercase fw-bold mb-4">
                <i id="font" class="fas fa-gem me-3 "></i>Web Dictionary
              </h6>
              <p> Web Dictionary is an online platform that updates you with top trending Technologies and resources. </p>
            </div>
            <div id="text-company" class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
              <h6 class="text-uppercase fw-bold mb-4"> Technologies </h6>
              <p>
                <a href="#!" class="text-reset">Angular</a>
              </p>
              <p>
                <a href="#!" class="text-reset">React</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Vue</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Node</a>
              </p>
            </div>
            <div id="text-company" class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
              <h6 class="text-uppercase fw-bold mb-4"> Useful links </h6>
              <p>
                <a href="https://animate.style/" class="text-reset">Animate Css</a>
              </p>
              <p>
                <a href="https://whirl.netlify.app/" class="text-reset">Whirl Css</a>
              </p>
              <p>
                <a href="https://plotly.com/javascript/" class="text-reset">Plotty JS</a>
              </p>
              <p>
                <a href="https://plotly.com/javascript/" class="text-reset">AOS</a>
              </p>
            </div>
            <div id="text-company" class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
              <h6 class="text-uppercase fw-bold mb-4">Contact</h6>
              <p>
                <i id="font" class="fas fa-home me-3 "></i> Chennai,Tamil Nadu,India
              </p>
              <p>
                <i id="font" class="fas fa-envelope me-3 "></i> webdictionary@example.com
              </p>
              <p>
                <i id="font" class="fas fa-phone me-3 "></i> +91 7305045677
              </p>
            </div>
          </div>
        </div>
        <section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
          <div class="me-5 d-none d-lg-block">
            <span>Get connected with me on social networks:</span>
          </div>
          <div>
            <a href="https://www.google.com/" target="__blank" class="me-4 link-secondary">
              <i id="font" class="fab fa-google"></i>
            </a>
            <a href="https://www.instagram.com/" target="__blank" class="me-4 link-secondary">
              <i id="font" class="fab fa-instagram"></i>
            </a>
            <a href="https://www.linkedin.com/"  target="__blank" class="me-4 link-secondary">
              <i id="font" class="fab fa-linkedin"></i>
            </a>
          </div>
        </section>
      </section>
      <div class="text-center p-4" style="color:white"> © 2023 Copyright: <a class="text-reset fw-bold" href="#">Prasanna V B</a>
      </div>
    </footer>
  </body>
</html>