Scribd
Upload
2 views

CSS Part6 (Qs)

The document contains practice questions for CSS, focusing on creating layouts using CSS Grid and media queries for responsive design. It includes instructions for designing a grid with specific dimensions and gaps, as well as a task to complete a web page loader using CSS animations. Additionally, it provides HTML and CSS code snippets for the loader implementation.

Uploaded by

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

CSS Part6 (Qs)

The document contains practice questions for CSS, focusing on creating layouts using CSS Grid and media queries for responsive design. It includes instructions for designing a grid with specific dimensions and gaps, as well as a task to complete a web page loader using CSS animations. Additionally, it provides HTML and CSS code snippets for the loader implementation.

Uploaded by

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

CSS (Part 6)

kuwargautam108@gmail.com
Practice Questions

Qs1. Create the following layout using CSS Grid :

- Divide the grid into 12 rows & 12 columns.


- Give a gap of 10px between each row and column
- Set the sizing of individual boxes as shown in the image
Qs2. Use Media Queries to change the above layout the given one when the viewport
width goes below 720px.

kuwargautam108@gmail.com
Qs3. Try to complete this code to create a web page loader using CSS animations.

kuwargautam108@gmail.com
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>
<h1>Loader</h1>
<div class="loader"></div>
</body>
</html>
kuwargautam108@gmail.com
CSS Code :
.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% {
/* Set rotation to 0 degrees */
}
100% {
/* Set rotation to 360 degrees */
}
}

You might also like