Scribd
Upload
29 views

CSS Part 6 (Ans)

The document provides the code for a multi-column layout website using CSS Grid. It includes the HTML, CSS, and media queries to adjust the layout for smaller screens. The CSS Grid divides the page into 12 equal columns and rows, with different page elements assigned to grid areas. For mobile screens, the layout stacks some elements vertically using media queries.

Uploaded by

Tarini Shah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views

CSS Part 6 (Ans)

The document provides the code for a multi-column layout website using CSS Grid. It includes the HTML, CSS, and media queries to adjust the layout for smaller screens. The CSS Grid divides the page into 12 equal columns and rows, with different page elements assigned to grid areas. For mobile screens, the layout stacks some elements vertically using media queries.

Uploaded by

Tarini Shah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

CSS (Part 1)

Practice Solutions

Ans 1
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="navigation">navigation</div>
<div class="sidebar">sidebar</div>
<div class="main">main</div>
<div class="ads">ads </div>
<div class="footer">footer </div>
</div>
</body>
</html>
CSSCode
.container {
margin: 0;
padding: 0;
height: 100vh;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-gap: 10px;
}

.container div {
background-color: pink;
font-size: 1.5rem;
}

.header {
grid-column: 1 / span 12;
}

.sidebar {
grid-column: 1 / span 3;
grid-row: 2 / span 10;
}

.navigation {
grid-column: 4 / span 6;
}

.ads {
grid-column: 10 / span 3;
grid-row: 2 / span 10;
}

.main {
grid-column: 4 / span 6;
grid-row: 3 / span 9;
}

.footer {
grid-column: 1 / span 12;
}
Ans 2
@media (max-width: 720px) {
.header {
grid-column: 1 / span 12;
}
HTML Code will remain the same as answer 1.

CSS Code
.navigation {
grid-column: 1 / span 12;
grid-row: 2;
}

.sidebar {
grid-column: 1 / span 3;
grid-row: 3 / span 9;
}

.main {
grid-column: 4 / span 9;
grid-row: 3 / span 9;
}

.ads {
grid-column: 1 / span 3;
grid-row: 12;
}

.footer {
grid-column: 4 / span 9;
grid-row: 12;
}
}
Ans 3

Complete CSS:
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid goldenrod;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

You might also like