Frontend-Web-Development/index.html at main · Sakshi-1701/Frontend-Web-Development · 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
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>CodeBox</title>
<link rel="icon" type="image/png" sizes="32x32" href="https://img.icons8.com/ios-filled/50/000000/computer.png">
  </head>
  <body>


   <!-- NAVBAR -->
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">CodeBox</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="/Frontend-Web-Development/">Home <span class="sr-only">(current)</span></a>

        </li>
        <li class="nav-item">
            <a class="nav-link" href="/Frontend-Web-Development/about.html" target="blank">About</a>
          </li>

        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Topics
            </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Web Development</a>
            <a class="dropdown-item" href="#">Android Development</a>
            <a class="dropdown-item" href="#">DSA in c++</a>
            <a class="dropdown-item" href="#">ML & AI</a>
        <li class="nav-item">
          <a class="nav-link" href="/Frontend-Web-Development/contact.html">Contact us</a>
        </li>

        </li>

      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
      </form>
      <div class="mx-2">
        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">Login</button>
        <button type="button" class="btn btn-danger">Signup</button>
      </div>
    </div>
  </nav>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


  <!-- CAROUSEL -->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100 " src="https://images.unsplash.com/photo-1544006659-f0b21884ce1d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"  alt="First slide" height="550px">
        <div class="carousel-caption d-none d-md-block">
          <h2 style="color: rgb(255, 255, 255); ">Welcome to Codebox</h2>
          <p style="color: rgb(255, 255, 255);"> Technology news, development and trends</p>
          <button type="button" class="btn btn-primary">Latest technology</button>
          <button type="button" class="btn btn-danger">Various Domains</button>
          <button type="button" class="btn btn-success">Tech Fuh</button>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1172&q=80" alt="Second slide" height="550px">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://images.unsplash.com/photo-1534665482403-a909d0d97c67?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Third slide" height="550px">

      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon color-dark" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <!-- CARDS BELOW CAROUSEL -->
  <div class="container my-5">
     <div class="row mb-2">
    <div class="col-md-6">
      <div class="card flex-md-row mb-4 box-shadow h-md-250">
        <div class="card-body d-flex flex-column align-items-start">
          <strong class="d-inline-block mb-2 text-primary">Opportunities</strong>
          <h3 class="mb-0">
            <a class="text-dark" href="https://edu.google.com/intl/ALL_no/scholarships/the-generation-google-scholarship/">Tech</a>
          </h3>
          <div class="mb-1 text-muted">Dec 10</div>
          <p class="card-text mb-auto">The Generation Google Scholarship was established to help aspiring students pursuing computer science degrees excel in technology and become leaders in the field. Last date to apply Dec10,2021</a>
        </div>
        <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" style="width: 200px; height: 250px;" src="https://images.unsplash.com/photo-1536009197840-7b923cc3e195?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80" data-holder-rendered="true">
      </div>
    </div>
    <div class="col-md-6">
      <div class="card flex-md-row mb-4 box-shadow h-md-250">
        <div class="card-body d-flex flex-column align-items-start">
          <strong class="d-inline-block mb-2 text-success">Opportunities</strong>
          <h3 class="mb-0">
            <a class="text-dark" href="https://careers.google.com/jobs/results/137988399735677638-software-student-training-in-engineering-program-step-intern-2022/">Google STEP</a>
          </h3>
          <div class="mb-1 text-muted">Dec 10</div>
          <p class="card-text mb-auto">The Student Training in Engineering Program (STEP) is a 12 week program that offers students the opportunity to work on a software project with another STEP intern, along with full-time Googlers.</a>
        </div>
        <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" src="https://images.unsplash.com/photo-1573141597928-403fcee0e056?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80" data-holder-rendered="true" style="width: 200px; height: 250px;">
      </div>
    </div>
  </div>
  <div class="row mb-2">
    <div class="col-md-6">
      <div class="card flex-md-row mb-4 box-shadow h-md-250">
        <div class="card-body d-flex flex-column align-items-start">
          <strong class="d-inline-block mb-2 text-primary">Tech-news</strong>
          <h3 class="mb-0">
            <a class="text-dark" href="#">Twitter</a>
          </h3>
          <div class="mb-1 text-muted">Nov 29</div>
          <p class="card-text mb-auto">Indian-origin technology executive Parag Agrawal has been appointed as the new CEO of Twitter after the social media giant’s co-founder Jack Dorsey stepped down on Nove 29,2021</a>
        </div>
        <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" style="width: 200px; height: 250px;" src="https://images.unsplash.com/photo-1611605698335-8b1569810432?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dHdpdHRlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" data-holder-rendered="true">
      </div>
    </div>
    <div class="col-md-6">
      <div class="card flex-md-row mb-4 box-shadow h-md-250">
        <div class="card-body d-flex flex-column align-items-start">
          <strong class="d-inline-block mb-2 text-success">Tech-news</strong>
          <h3 class="mb-0">
            <a class="text-dark" href="#">Top Progamming languages</a>
          </h3>
          <p class="card-text mb-auto">Here’s a list of the best programming languages to learn that you can pursue without giving it a second thought: C++, Java,Javascript, python and kotlin. </p>
         </div>
        <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" src="https://images.unsplash.com/photo-1537884944318-390069bb8665?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" data-holder-rendered="true" style="width: 200px; height: 250px;">
      </div>
    </div>
  </div>
</div>

<!-- NEXT BOX -->
<div class="row featurette">
  <div class="col-md-7 order-md-2">
    <h2 class="featurette-heading">Keep yourself ahead of the tech curve !<span class="text-muted"> Awesome Free Websites, All Newbie Programmers Need to Know</span></h2>
    <p class="lead">1. W3Schools:
      New programmers will surely come across W3Schools at the top of the Google search. It’s popular with newbies and senior developers alike, because it offers a lot of examples and you can quickly find the answer you’re looking for.</p>
  <p class="lead">2. Stack Overflow:
    The community here is really fantastic, and once you get some programming experience under your belt, be sure to try and give back to the community as well. Earn some coding karma.
  </p>
  <p class="lead">
    3.Hackerrank:
    It’s good to get familiar with this one when you’re starting to have enough experience to become a Junior Developer, as many companies use HackerRank challenges in their technical tests during the hiring process.
  </p>
  <p class="lead">
    4. Codecademy:
    Codecademy is a super fun website to learn to code interactively. It’s a great place to start for the basics: do the short courses on HTML, CSS, or the website module before moving on to more programming languages
  </p>
    </div>
  <div class="col-md-5 order-md-1">
<img class="img-fluid mx-4"  src="https://images.unsplash.com/photo-1618477388954-7852f32655ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80" alt="">  </div>
</div>

<footer class="container">
  <p class="float-right"><a href="#">Back to top</a></p>
  <p>© 2021-2022 CodeBox, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </body>
</html>