1.Explain the purpose of using the var() func on in css.
Also you have
created two bu ons with id named primaryBtn and secondaryBtn
which should be given background colors using the var() func on.
The color code for primaryColor is #00b7ff and secondaryColor is
#6c757d.
Ans. <!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-
scale=1.0">
< tle>Document</ tle>
<link rel="stylesheet" href="assignani.css">
</head>
<body>
<div >
<bu on id="btn1"> primary bu on</bu on>
<bu on id="btn2"> secandary bu on</bu on>
</div>
</body>
</html> -->
:root {
--primaryColor: #00b7ff;
--secondaryColor: #6c757d;
}
#primaryBtn {
background-color: var(--primaryColor);
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
#secondaryBtn {
background-color: var(--secondaryColor);
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.b n{
height: 200px;
width: 500px;
border: solid black;
margin: auto;
}
2. Create a 3D cube using the transform property of CSS.
Ans. !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-
scale=1.0">
< tle>Document</ tle>
<link rel="stylesheet" href="assignani.css">
</head>
<body>
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face le ">Le </div>
<div class="face right">Right</div>
<div class="face top">Top</div>
<div class="face bo om">Bo om</div>
</div>
</body>
</html>
body {
perspec ve: 800px;
}
.cube {
posi on: rela ve;
width: 100px;
height: 100px;
transform-style: preserve-3d;
anima on: rotate 5s infinite linear;
margin: auto;
margin-top:100px ;
}
.face {
posi on: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
font-size: 16px;
font-weight: bold;
}
body{
height: 300px;
width: 500px;
border: solid black;
margin: auto;
margin-top:200px;
}
.front { transform: translateZ(50px); }
.back { transform: rotateY(180deg) translateZ(50px); }
.le { transform: rotateY(-90deg) translateZ(50px); }
.right { transform: rotateY(90deg) translateZ(50px); }
.top { transform: rotateX(90deg) translateZ(50px); }
.bo om { transform: rotateX(-90deg) translateZ(50px); }
@keyframes rotate {
from {
transform: rotateX(0) rotateY(0);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
3. Create a simple circular loader which will rotate con nuously to
look like a loading screen on a website.
Ans.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-
scale=1.0">
< tle>Loading Screen</ tle>
<link rel="stylesheet" href="loader.css">
</head>
<body>
<div class="loader"></div>
</body>
</html>
body {
display: flex;
jus fy-content: center;
align-items: center;
height: 100vh;
margin:auto;
background-color: #f0f0f0;
border: solid black;
height: 250px;
width: 500px;
margin-top: 200px;
}
.loader {
border: 8px solid #f3f3f3; /* Light grey */
border-top: 8px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
anima on: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
4. You have to visit the PW Skills website (h ps://pwskills.com/) and
have to hide the logo by using the developer tool. This should be
done using the css and developer tool only, use of javascript is
prohibited.
Ans. o hide the logo on the PW Skills website using only CSS in the
developer tools, follow these steps:
1. Open the Website: Go to PW Skills.
2. Open Developer Tools:
o Right-click anywhere on the page and select Inspect (or
press F12 or Ctrl+Shi +I).
3. Select the Element:
o Use the Elements tab in the developer tools to inspect the
page elements.
o Hover over different elements un l you find the logo
(usually an img tag inside a header or a div).
4. Add CSS to Hide the Logo:
o Once you locate the logo element (it might have a class
like .logo or #logo), right-click on it and choose Copy >
Copy selector. This gives you the CSS selector for that
element.
o Go to the Styles panel in the developer tools.
o At the bo om of the styles sec on, you can add new CSS
rules. Enter the following code:
css
.your-logo-class-or-id {
display: none !important;
}
Replace .your-logo-class-or-id with the actual class or ID you copied.
5. See the Changes:
o A er adding the CSS, you should see the logo disappear
from the page.
Example
If the logo has a class like logo, your CSS would look like this:
css
Copy code
.logo {
display: none !important;
}
Notes
Using !important ensures that your style takes precedence over
exis ng styles.
These changes are temporary and will revert when you refresh
the page.
4o mini
Problem Statement You have to visit the PW Skills website
(h ps://pwskills.com/) and have to change the content of the ‘Login
/ Register’ bu on to ‘Connect with us’ using the developer tool. This
should be done using the elements of developer tools only, use of
javascript is prohibited.
<a class="login-register" href="#">Login / Register</a>
