<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Website Layout
</
title
>
<
style
>
* {
box-sizing: border-box;
}
/* CSS property for header section */
.header {
background-color: green;
padding: 15px;
text-align: center;
}
/* CSS property for navigation menu */
.nav_menu {
overflow: hidden;
background-color: #333;
}
.nav_menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: white;
color: green;
}
/* CSS property for content section */
.columnA,
.columnB,
.columnC {
float: left;
width: 31%;
padding: 15px;
text-align: justify;
}
h2 {
color: green;
text-align: center;
}
/* Media query to set website layout
according to screen size */
@media screen and (max-width:600px) {
.columnA,
.columnB,
.columnC {
width: 50%;
}
}
@media screen and (max-width:400px) {
.columnA,
.columnB,
.columnC {
width: 100%;
}
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"header"
>
<
h2
style
=
"color:white;font-size:200%"
>
GeeksforGeeks
</
h2
>
</
div
>
<
div
class
=
"nav_menu"
>
<
a
href
=
"#"
>Algo</
a
>
<
a
href
=
"#"
>DS</
a
>
<
a
href
=
"#"
>Language</
a
>
</
div
>
<
div
class
=
"row"
>
<
div
class
=
"columnA"
>
<
h2
>Column A</
h2
>
<
p
>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</
p
>
</
div
>
<
div
class
=
"columnB"
>
<
h2
>Column B</
h2
>
<
p
>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</
p
>
</
div
>
<
div
class
=
"columnC"
>
<
h2
>Column C</
h2
>
<
p
>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</
p
>
</
div
>
</
div
>
</
body
>
</
html
>