Scribd
Upload
3 views

Advanced CSS Assignment

The document contains multiple HTML tasks demonstrating various CSS techniques. Task 1 illustrates the use of CSS custom properties with buttons, Task 2 showcases a 3D cube using CSS transformations, and Task 3 features a circular loader animation. Task 4 includes SVG path data, likely for graphical representation.

Uploaded by

kishb630
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
3 views

Advanced CSS Assignment

The document contains multiple HTML tasks demonstrating various CSS techniques. Task 1 illustrates the use of CSS custom properties with buttons, Task 2 showcases a 3D cube using CSS transformations, and Task 3 features a circular loader animation. Task 4 includes SVG path data, likely for graphical representation.

Uploaded by

kishb630
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/ 8

Task_1

<!-- Purpose of using var() function in css is to reference CSS custom


properties or variables. -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box{
border: 2px solid black;
height: 500px;
width: 800px;
padding-left: 2px
}

:root{
--blue: #00b7ff;
--grey: #6c757d
}

#primaryBtn {
background: var(--blue);
border: none
}

#secondaryBtn {
background: var(--grey);
border: none
}
</style>
<body>
<div class="box">
<button id="primaryBtn">Primary Button</button>
<button id="secondaryBtn">Secondary Button</button>
</div>
</body>
</html>
Task_2
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>3D Cube with CSS</title>
<style>

* {
margin: 0;
padding: 0
}

body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center
}

.container {
border: 3px solid black;
width: 700px;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}

.parent {
width: 200px;
height: 200px;
perspective: 600px;
}

.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateX(25deg) rotateY(30deg);
}

.side {
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 128, 255, 0.7);
border: 2px solid gray;
}

.front {
transform: translateZ(100px);
}

.back {
transform: rotateY(180deg) translateZ(100px);
}

.right {
transform: rotateY(90deg) translateZ(100px);
}

.left {
transform: rotateY(-90deg) translateZ(100px);
}

.top {
transform: rotateX(90deg) translateZ(100px);
}

.bottom {
transform: rotateX(-90deg) translateZ(100px);
}

</style>
</head>

<body>
<div class="container">
<div class="parent">
<div class="cube">
<div class="side front">Front</div>
<div class="side back">Back</div>
<div class="side right">Right</div>
<div class="side left">Left</div>
<div class="side top">Top</div>
<div class="side bottom">Bottom</div>
</div>
</div>
</div>
</body>

</html>

Task_3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Circular Loader</title>
</head>
<style>

*{
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center
}
.container {
border: 3px solid black;
height: 500px;
width: 750px;
display: flex;
justify-content: center;
align-items: center
}
.loader {
height: 90px;
width: 90px;
border: 8px solid rgb(189, 179, 179);
border-top: 8px solid #3498db;
border-radius: 100%;
animation: spin 1.3s linear infinite;
}

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

</style>
<body>
<div class="container">
<div class="loader"></div>
</div>
</body>
</html>
Task_4
<path style="display: none" d="M17.7972 39.3569C13.1903 39.3814 8.75663
37.5908 5.44391 34.3678C3.9909 32.958 2.80034 31.2978 1.92859
29.4656H3.14925C3.9432 30.9983 4.97874 32.3913 6.21557 33.5904C9.32357
36.6064 13.4787 38.2813 17.7955 38.2582C22.1123 38.2813 26.2674 36.6064
29.3754 33.5904C30.6135 32.3916 31.6502 30.9986 32.4451
29.4656H33.6658C32.7937 31.2979 31.6028 32.9582 30.1493 34.3678C26.8369
37.5905 22.4037 39.3811 17.7972 39.3569V39.3569ZM3.14869
15.1785H1.92859C2.80054 13.3458 3.9915 11.6851 5.44504 10.2751C8.75748
7.05244 13.1907 5.26184 17.7972 5.28601C22.4041 5.26154 26.8377 7.05216
30.1505 10.2751C31.6035 11.6844 32.7943 13.3441 33.6664
15.1757H32.4463C31.6519 13.6428 30.6157 12.2497 29.3782 11.0508C26.2702
8.03483 22.1151 6.35995 17.7983 6.3831C13.4802 6.35982 9.32391 8.03558
6.21557 11.0531C4.97795 12.252 3.94165 13.6451 3.14699 15.1779L3.14869
15.1785Z" fill="currentColor"></path>
<path style="display: none" d="M17.7996 37.1593C15.7595 37.1642 13.738
36.7682 11.8486 35.9935C10.0425 35.2552 8.39333 34.1758 6.99023
32.8135C5.60154 31.4728 4.48836 29.8702 3.71407 28.097C2.81276 26.0249
2.40911 23.7683 2.53582 21.5099C2.66254 19.2515 3.31607 17.055 4.44342
15.0983C5.68974 12.9472 7.44247 11.1377 9.54719 9.82926V9.96952C9.8721
10.0178 10.179 10.0757 10.4593 10.1399C10.7247 10.1972 10.9668 10.3335
11.1542 10.5311C11.2412 10.6322 11.3005 10.7543 11.3263 10.8855C11.371
11.0646 11.4012 11.2471 11.4165 11.4312C11.434 11.6299 11.4464 11.844
11.4532 12.0672C11.46 12.2903 11.4617 12.5135 11.4617
12.7304V17.33C11.4617 17.6917 11.4588 18.05 11.4532 18.3941L11.4504
18.5514C11.4453 18.8353 11.4402 19.1034 11.4346 19.3464C11.4289 19.6354
11.4261 19.8677 11.4261 20.0375C11.4261 20.2266 11.4199 20.4282 11.4075
20.6371C11.3951 20.8461 11.381 21.038 11.3624 21.2192C11.3473 21.3843
11.3201 21.5481 11.2812 21.7092C11.2573 21.8277 11.208 21.9396 11.1368
22.0369C10.9649 22.2405 10.7398 22.3916 10.4869 22.473C10.2049 22.5712
9.91476 22.6442 9.61995 22.691V22.8728H13.5239C13.6069 22.8916 13.6878
22.9188 13.7654 22.954C13.914 23.0218 14.0531 23.1092 14.1788
23.214C14.2834 23.3008 14.3738 23.4035 14.4468 23.5184C14.515 23.632
14.5596 23.7143 14.5934 23.7785C14.6679 23.929 14.7299 24.0624 14.7824
24.176C14.8348 24.2895 14.8918 24.4287 14.9465 24.5735C15.0012 24.7183
15.0593 24.8773 15.1186 25.0277C15.1778 25.1782 15.2421 25.3497 15.334
25.6007C15.6097 26.3298 15.8855 27.0616 16.1615 27.796L16.2326
27.9857C16.4876 28.6656 16.7482 29.3619 17.0144 30.0748C17.2186 30.6195
17.4285 31.1798 17.6439 31.7556L17.926 32.5131C18.2757 33.4467 18.6029
34.3206 18.9346 35.1854H19.1416L19.8997 33.4853C20.0779 32.9901 20.2697
32.4524 20.5032 31.7931C20.6916 31.261 20.8947 30.679 21.1237
30.0146C21.3206 29.4422 21.5299 28.8431 21.7442 28.2355C21.9659 27.6109
22.1577 27.0629 22.3303 26.5615C22.5779 27.2264 22.8154 27.8891 23.0371
28.5302C23.2588 29.1713 23.4883 29.8363 23.7523 30.587C23.9977 31.2883
24.26 32.0299 24.5279 32.7908C24.7908 33.5347 25.0841 34.3405 25.3983
35.1854H25.4186C23.0862 36.4829 20.4644 37.1621 17.7996
37.1593V37.1593ZM25.6228 35.0701L26.2957 33.5216C26.5152 32.8595
26.7532 32.1559 27.0025 31.4302C27.2519 30.7045 27.5063 29.9612 27.7522
29.2349C27.9931 28.5246 28.2396 27.8091 28.4855 27.1095C28.7314 26.4099
28.9435 25.7813 29.1235 25.2265C29.2363 24.8932 29.3491 24.6104 29.4512
24.3849C29.5367 24.1933 29.6347 24.0076 29.7445 23.829C29.817 23.7101
29.8975 23.5962 29.9854 23.4883C30.0621 23.398 30.1089 23.3463 30.1411
23.3145C30.2476 23.2131 30.3664 23.1258 30.4947 23.0545C30.7182 22.9196
30.9687 22.8366 31.228 22.8114V22.6382H27.4352V22.8114C27.5918 22.826
27.7472 22.8522 27.9 22.8898C28.0671 22.9283 28.2292 22.9865 28.3828
23.063C28.5243 23.1326 28.6526 23.2266 28.7619 23.3407C28.8674 23.4563
28.9233 23.6091 28.9176 23.766C28.9176 23.8835 28.9057 24.0641 28.8826
24.3037C28.8251 24.6988 28.7328 25.088 28.6068 25.4667C28.4799 25.8852
28.3377 26.3378 28.1848 26.8119L27.9976 27.3917L27.7195 28.252C27.5762
28.696 27.4239 29.1605 27.2541 29.6665C27.0945 30.1435 26.9535 30.5546
26.8237 30.9243C26.694 31.2939 26.5834 31.6154 26.496 31.8788C26.4086
32.1423 26.3493 32.3104 26.3155 32.3899C26.2403 32.1874 26.1248 31.8701
25.9691 31.4382L25.9274 31.3246C25.7373 30.7982 25.5371 30.2377 25.3323
29.6591C25.118 29.0509 24.8861 28.3996 24.643 27.7239C24.3999 27.0481
24.1827 26.4292 23.9881 25.8585C23.7969 25.298 23.6344 24.8074 23.5053
24.4008C23.4218 24.1725 23.3582 23.9373 23.3152 23.6978C23.3148 23.6137
23.3341 23.5306 23.3716 23.4553C23.409 23.3801 23.4635 23.3147 23.5306
23.2646C23.6754 23.1483 23.8386 23.0574 24.0135 22.996C24.1864 22.9335
24.3655 22.8899 24.5477 22.8659C24.74 22.8404 24.8545 22.8239 24.9183
22.8137V22.6405H19.5223V22.8307C19.7619 22.8369 19.9995 22.8751 20.2291
22.9443C20.4047 22.9984 20.5706 23.0805 20.7204 23.1873C20.8386 23.2721
20.943 23.3748 21.0301 23.4917C21.0985 23.5848 21.1592 23.6834 21.2117
23.7864C21.3697 24.1169 21.5208 24.4639 21.663 24.8188C21.7984 25.1646
21.9501 25.5649 22.1278 26.0425C21.8762 26.8375 21.6201 27.6103 21.3697
28.3423C21.1209 29.0651 20.8885 29.7312 20.6798 30.3207C20.4711 30.9101
20.3007 31.3911 20.1625 31.7783C20.0368 32.1315 19.9426 32.3939 19.9042
32.4989C19.7778 32.1525 19.6148 31.7181 19.4044 31.1713C19.1867 30.6034
18.9481 29.9788 18.7411 29.4359C18.5064 28.8198 18.2689 28.1867 18.0343
27.553C17.7697 26.8375 17.5638 26.2776 17.3879 25.7926C17.1955 25.2645
17.0364 24.8034 16.9135 24.4218C16.826 24.1895 16.765 23.948 16.7318
23.7018C16.7231 23.5302 16.7821 23.362 16.896 23.2339C17.0042 23.1189
17.1366 23.0297 17.2835 22.9727C17.4227 22.9182 17.5668 22.8775 17.7139
22.8512C17.8107 22.8327 17.9087 22.8211 18.0072
22.8165V22.6433H14.8777C14.6554 22.6076 14.4406 22.5348 14.242
22.4281C14.0201 22.3183 13.8279 22.156 13.6819 21.9551C13.554 21.7474
13.4854 21.5084 13.4833 21.264C13.4709 20.9852 13.4591 20.6491 13.4466
20.2641C13.4466 20.0591 13.4438 19.8666 13.4382 19.6917C13.4325 19.5168
13.4292 19.3328 13.4292 19.1187V17.4061H14.4045C14.779 17.4061 15.1648
17.3907 15.5512 17.3601C15.9376 17.3294 16.3319 17.2846 16.716
17.2244C17.0847 17.1674 17.4473 17.076 17.7991 16.9512C18.1346 16.825
18.456 16.6636 18.758 16.4697C19.0664 16.2736 19.3433 16.0314 19.5793
15.7514C19.8197 15.4627 20.0119 15.1367 20.1484 14.786C20.2969 14.3974
20.3704 13.9838 20.365 13.5674C20.3806 12.899 20.1984 12.241 19.8416
11.677C19.5104 11.1616 19.0575 10.7369 18.5233 10.4408C17.9868 10.1404
17.398 9.94632 16.7888 9.86901C16.0876 9.78506 15.3819 9.74543 14.6758
9.75033H13.8629C13.5775 9.75033 13.2492 9.75317 12.8606 9.75942C12.5221
9.76566 12.1589 9.7685 11.7888 9.7685C11.4289 9.7685 11.0916 9.77134
10.7865 9.77702C10.492 9.78327 10.2224 9.78611 9.98322
9.78611H9.61657C11.7221 8.50225 14.0962 7.73103 16.5501 7.53386C19.0039
7.33669 21.4695 7.71903 23.7506 8.65041C25.5568 9.38865 27.2059 10.4681
28.609 11.8304C29.9975 13.1711 31.1105 14.7737 31.8846 16.5469C32.8025
18.657 33.2041 20.958 33.0556 23.2567C32.9071 25.5554 32.2128 27.7847
31.0312 29.7573C29.7059 31.9601 27.8467 33.7879 25.6279 35.0696L25.6228
35.0701ZM13.4303 17.1517V14.8235C13.4303 14.2227 13.4337 13.6231
13.4393 13.0422C13.445 12.451 13.454 11.9309 13.4664 11.4965C13.4777
11.2239 13.4895 11.007 13.5019 10.8514C13.5143 10.6958 13.5262 10.5805
13.5386 10.4965C13.5477 10.4258 13.5628 10.3561 13.5837 10.2881C13.6023
10.2252 13.6163 10.1611 13.6255 10.0962C13.7097 10.084 13.821 10.0689
13.9594 10.0507C14.1544 10.0293 14.3505 10.0202 14.5466 10.0235C14.8858
10.0228 15.2246 10.0471 15.5602 10.0962C16.0328 10.1627 16.4852 10.3321
16.886 10.5927C17.2868 10.8533 17.6263 11.1987 17.8809 11.6049C18.2386
12.1628 18.4239 12.8149 18.4133 13.4788C18.421 14.2132 18.207 14.9326
17.7996 15.5418C17.3717 16.167 16.7491 16.6309 16.0301 16.8604C15.6395
16.9968 15.2323 17.0793 14.8196 17.1057C14.392 17.1375 13.9244 17.1517
13.4303 17.1517Z" fill="currentColor"></path>

Task_5
<button class="opacity-100 bg-orange-500 text-white hover:bg-orange-600
text-sm px-3 py-[10px] medium:text-base medium:px-6 medium:py-3
font-semibold rounded-md flex gap-2 justify-center items-center
font-nunitoSans cursor-pointer !py-[10px]">Connect with us</button>

You might also like