CSS (Part 1)
devashishmaurya7@gmail.com
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>
CSS Code
devashishmaurya7@gmail.com
.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;
}
devashishmaurya7@gmail.com
.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
HTML Code will remain the same as answer 1.
CSS Code
@media (max-width: 720px) {
.header {
grid-column: 1 / span 12;
}
.navigation {
grid-column: 1 / span 12;
devashishmaurya7@gmail.com
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
devashishmaurya7@gmail.com
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);
}
}
