Scribd
Upload
17 views

CSS Part 6 (Ans)

Uploaded by

mdev0043
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

CSS Part 6 (Ans)

Uploaded by

mdev0043
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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);
}
}

You might also like