<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0">
<
style
>
body {
background-color: rgb(237, 237, 180);
}
h1 {
color: green;
text-align: center;
}
p {
font-size: 30px;
text-align: center;
}
.float-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.float-item {
float: left;
width: 100%;
margin: 0 10px;
box-sizing: border-box;
background-color: #d3c5c5;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
text-align: center;
}
@media screen and (min-width: 600px) {
.float-item {
width: 48%;
}
}
@media screen and (min-width: 900px) {
.float-item {
width: 31%;
height: 400px;
}
}
.card-img {
max-width: 100%;
height: auto;
border-radius: 50%;
}
.card-title {
font-size: 1.5rem;
margin: 10px 0;
}
.card-paragraph {
font-size: 1rem;
}
</
style
>
<
title
>Responsive Floating Elements</
title
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
p
>Responsive Floating Elements</
p
>
<
div
class
=
"float-container"
>
<
div
class
=
"float-item"
>
<
img
class
=
"card-img"
src
=
alt
=
"Card Image"
>
<
h2
class
=
"card-title"
>
Learn Data Structures and Algorithms | DSA Tutorial
</
h2
>
<
p
class
=
"card-paragraph"
>
DSA is defined as a combination of
two separate yet interrelated topics
– Data Structure and Algorithms.
DSA is one of the most important
skills that every computer science
student. It is often seen that people
with good knowledge of these technologies.
</
p
>
</
div
>
<
div
class
=
"float-item"
>
<
img
class
=
"card-img"
src
=
alt
=
"Card Image"
>
<
h2
class
=
"card-title"
>SDE Sheet</
h2
>
<
p
class
=
"card-paragraph"
>
Preparing for placements and dont
know where to start ? GFG has used
their years of experience and put
together this list for you. It is
a compilation of the most popular
DSA problems ranging from topics
like arrays, hashing, tree, graph
etc. The list contains problems
across easy, medium, hard difficulty.
</
p
>
</
div
>
<
div
class
=
"float-item"
>
<
img
class
=
"card-img"
src
=
alt
=
"Card Image"
>
<
h2
class
=
"card-title"
>
Complete Machine Learning & Data
Science Program
</
h2
>
<
p
class
=
"card-paragraph"
>
A 360-degree Learning experience designed
for geeks who wish to get hands-on Data
Science. Mentored by industry experts;
learn to apply DS methods and techniques,
and acquire analytical skills. So Master
the Art of Data Science Now!
</
p
>
</
div
>
</
div
>
</
body
>
</
html
>