<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
.container {
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.main {
flex: 1 0 auto;
}
h1 {
color: white;
}
p {
background-color: #efece9;
border-radius: 4px;
padding-left: 8px;
}
.card {
border-radius: 12px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.card-header:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom: 1px solid floralwhite;
}
.card-body {
min-height: 160px;
}
.card-footer {
padding-bottom: 0px;
}
footer {
flex-shrink: none;
}
</
style
>
</
head
>
<
body
>
<
nav
class
=
"navbar navbar-light justify-content-center"
>
<
span
class
=
"navbar-brand mb-0 h1"
>
GeeksforGeeks
</
span
>
</
nav
>
<
div
class
=
"container-fluid main"
>
<
div
class
=
"row"
>
<
div
class
=
"col-sm-2"
>
<
div
class
=
"container"
>
<
div
class
=
"card w-100"
>
<
div
class
=
"card-body"
>
<
p
>DSA Course</
p
>
<
p
>Machine Learning</
p
>
<
p
>Front End Course</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"col-sm-8"
>
<
div
class
=
"container"
>
<
div
class
=
"card w-100"
>
<
div
class
=
"card-header"
>
<
button
class="btn btn-success
btn-block">
Toggle for Langugaes
</
button
>
</
div
>
<
div
class
=
"card-body content"
>
<
p
> </
p
>
<
p
> C </
p
>
<
p
> C++ </
p
>
<
p
> Java </
p
>
<
p
> Python </
p
>
<
p
> C# </
p
>
<
p
> JavaScript </
p
>
<
p
> jQuery </
p
>
<
p
> SQL </
p
>
<
p
> PHP </
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"col-sm-2"
>
<
div
class
=
"container"
>
<
div
class
=
"card w-100"
>
<
div
class
=
"card-body"
>
<
p
>Adv - 1</
p
>
<
p
>Adv - 2</
p
>
<
p
>Adv - 3</
p
>
<
p
>Adv - 4</
p
>
<
p
>Adv - 5</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
br
><
br
>
<
footer
class
=
" bg-success"
>
<
div
class
=
"container text-center"
>
<
small
style
=
"color:white;"
>
<
b
>GeeksforGeeks: </
b
>
A Computer Science Portal for Geeks </
small
>
</
div
>
</
footer
>
<
script
>
$(document).ready(function () {
$('button').click(function () {
$('.content').toggle('slow');
});
});
</
script
>
</
body
>
</
html
>