├── .github └── FUNDING.yml ├── README.md ├── backup2.css ├── contact └── index.html ├── cursor.png ├── docs ├── formcode.png ├── formstyling.html ├── icon.png ├── index.html ├── logo.png ├── modes.html └── use.html ├── everything.html ├── icon.png ├── icons ├── basic-mad.png ├── basic-mad.svg ├── basic-shock.png ├── basic-shock.svg ├── basic-smile.png ├── basic-smile.svg ├── basic-sussy.png ├── basic-sussy.svg ├── icons └── index.html ├── index.html ├── js ├── intro └── main.js ├── logo.png ├── main.css ├── main2.css ├── main3.css ├── mainbackup.css ├── mission └── index.html ├── pressedbutton.css ├── savircssfont.woff ├── team └── index.html └── themainbackup.css /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: https://buymeacoffee.com/savircss 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SavirCSS 2 | ## A free, open-source CSS library. 3 | 4 | ![SavirCSS](logo.png) 5 | 6 | ### Add to your website 7 | Add the following code to your head tag: 8 | ``` 9 | 10 | ``` 11 | 12 | ### See all the styles 13 | View the [Everything Page](https://savirsingh.github.io/SavirCSS/everything). 14 | 15 | ### Use SavirCSS JS 16 | Unlock more things that can't be done with CSS alone. 17 | 18 | Import SavirCSS JS by downloading version 0.8 or later or importing SavirCSS online and adding this code: 19 | 20 | ``` 21 | 22 | ``` 23 | 24 | ### Icons! 25 | ![basic-smile](https://user-images.githubusercontent.com/84334654/178381126-9997c5cf-5274-4be2-b918-f3c11bb7a9fd.png) 26 | ![basic-sussy](https://user-images.githubusercontent.com/84334654/178381205-705603f4-faca-4685-ac4d-45056f73f33b.png) 27 | ![basic-shock](https://user-images.githubusercontent.com/84334654/178381235-4958b9a8-f40c-4768-b776-bdfc7451cd46.png) 28 | ![basic-mad](https://user-images.githubusercontent.com/84334654/178381240-12768c00-128d-4c33-8ae5-bbd438209402.png) 29 | 30 | 31 | We have amazing custom icon styles and are always adding more! 32 | Check out the [Icons Page](https://savirsingh.github.io/SavirCSS/icons). 33 | 34 | ### Fonts 35 | The main body font included with SavirCSS is called SavirCSS Font and is not available for separate distribution. It also cannot be redistributed, just like everything else provided by the library. 36 | 37 | 38 | ### Documentation & help 39 | See the [Official Docs](https://savirsingh.github.io/SavirCSS/docs). 40 | 41 | ### Feedback & support 42 | For feedback/support, create an issue or email kopichiki@gmail.com. 43 | 44 | #### Used by: 45 | 46 | ![181853345-e717b2d5-ebe8-498b-94f3-91689504dce2](https://user-images.githubusercontent.com/84334654/181853571-78d1e293-0a4f-4612-b273-1659805cb9f9.png) 47 | ![181853345-e717b2d5-ebe8-498b-94f3-91689504dce2](https://user-images.githubusercontent.com/84334654/181852960-aa792341-d6e9-4c7b-b7ee-d2d1e19e8d29.png) 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /backup2.css: -------------------------------------------------------------------------------- 1 | @import "pressedbutton.css"; 2 | @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"; 3 | 4 | #dark { 5 | background-color: #4b4852; 6 | color: #edf1f7; 7 | } 8 | 9 | body { 10 | font-family: SavirCSS Font; 11 | background-color: #edf1f7; 12 | cursor:url(cursor.png), auto; 13 | ::-webkit-scrollbar { 14 | width: 20px; 15 | ::-moz-selection { 16 | color: white; 17 | background: purple; 18 | } 19 | 20 | ::selection { 21 | color: white; 22 | background: purple; 23 | } 24 | } 25 | 26 | ::-webkit-scrollbar-track { 27 | box-shadow: inset 0 0 5px grey; 28 | border-radius: 10px; 29 | } 30 | 31 | ::-webkit-scrollbar-thumb { 32 | background: red; 33 | border-radius: 10px; 34 | } 35 | 36 | ::-webkit-scrollbar-thumb:hover { 37 | background: #b30000; 38 | } 39 | } 40 | 41 | button { 42 | padding: 20px; 43 | border: 0px; 44 | background-color: #f2ecdc; 45 | font-size: 20px; 46 | cursor:url(cursor.png), auto; 47 | } 48 | 49 | @font-face { 50 | font-family: 'SavirCSS Font'; 51 | font-style: normal; 52 | font-weight: 400; 53 | src: url(savircssfont.woff) format('woff'); 54 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 55 | } 56 | 57 | button { 58 | font-family: SavirCSS Font; 59 | } 60 | 61 | .navigation-top { 62 | font-family: SavirCSS Font; 63 | overflow: hidden; 64 | background-color: indigo; 65 | font-size: 20px; 66 | } 67 | 68 | .navigation-top a { 69 | float: left; 70 | color: #f2f2f2; 71 | text-align: center; 72 | padding: 24px 8px; 73 | text-decoration: none; 74 | font-size: 20px; 75 | } 76 | 77 | .navigation-top a:hover { 78 | background-color: white; 79 | color: black; 80 | } 81 | 82 | .navigation-top a.active { 83 | background-color: darkblue; 84 | color: white; 85 | } 86 | 87 | .dropdown { 88 | float: left; 89 | overflow: hidden; 90 | cursor:url(cursor.png), auto; 91 | } 92 | 93 | .dropdown .dropbtn { 94 | font-size: 20px; 95 | border: none; 96 | outline: none; 97 | color: white; 98 | padding: 24px 8px; 99 | background-color: inherit; 100 | font-family: inherit; 101 | margin: 0; 102 | } 103 | 104 | .dropdown-content { 105 | display: none; 106 | position: absolute; 107 | background-color: #edf1f7; 108 | min-width: 160px; 109 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 110 | z-index: 1; 111 | } 112 | 113 | .dropdown-content a { 114 | float: none; 115 | color: black; 116 | padding: 12px 16px; 117 | text-decoration: none; 118 | display: block; 119 | text-align: left; 120 | } 121 | 122 | .dropdown-content a:hover { 123 | background-color: white; 124 | } 125 | 126 | .dropdown:hover .dropdown-content { 127 | display: block; 128 | } 129 | 130 | .footer { 131 | position: fixed; 132 | left: 0; 133 | bottom: 0; 134 | width: 100%; 135 | background-color: #4b4852; 136 | color: white; 137 | text-align: center; 138 | cursor:url(cursor.png), auto; 139 | } 140 | 141 | .footer-unfixed { 142 | left: 0; 143 | bottom: 0; 144 | width: 100%; 145 | height: 32px; 146 | background-color: #4b4852; 147 | color: white; 148 | text-align: center; 149 | cursor:url(cursor.png), auto; 150 | } 151 | 152 | img:hover { 153 | opacity: 0.6; 154 | } 155 | 156 | @media only screen and (max-width: 600px) { 157 | img { 158 | width: 100%; 159 | } 160 | } 161 | 162 | .rainbow { 163 | 164 | text-shadow: 1px 1px 2px #000000; 165 | font-size:20px; 166 | -webkit-animation: rainbow 5s infinite; 167 | cursor:url(cursor.png), auto; 168 | 169 | -ms-animation: rainbow 5s infinite; 170 | 171 | animation: rainbow 5s infinite; 172 | } 173 | 174 | @-webkit-keyframes rainbow{ 175 | 0%{color: orange;} 176 | 10%{color: purple;} 177 | 20%{color: red;} 178 | 30%{color: CadetBlue;} 179 | 40%{color: yellow;} 180 | 50%{color: coral;} 181 | 60%{color: green;} 182 | 70%{color: cyan;} 183 | 80%{color: DeepPink;} 184 | 90%{color: DodgerBlue;} 185 | 100%{color: orange;} 186 | } 187 | 188 | @-ms-keyframes rainbow{ 189 | 0%{color: orange;} 190 | 10%{color: purple;} 191 | 20%{color: red;} 192 | 30%{color: CadetBlue;} 193 | 40%{color: yellow;} 194 | 50%{color: coral;} 195 | 60%{color: green;} 196 | 70%{color: cyan;} 197 | 80%{color: DeepPink;} 198 | 90%{color: DodgerBlue;} 199 | 100%{color: orange;} 200 | } 201 | 202 | @keyframes rainbow{ 203 | 0%{color: orange;} 204 | 10%{color: purple;} 205 | 20%{color: red;} 206 | 30%{color: CadetBlue;} 207 | 40%{color: yellow;} 208 | 50%{color: coral;} 209 | 60%{color: green;} 210 | 70%{color: cyan;} 211 | 80%{color: DeepPink;} 212 | 90%{color: DodgerBlue;} 213 | 100%{color: orange;} 214 | } 215 | 216 | 217 | code { 218 | background-color: lightgray; 219 | } 220 | 221 | ::-webkit-scrollbar { 222 | width: 16px; 223 | cursor:url(cursor.png), auto; 224 | } 225 | 226 | ::-webkit-scrollbar-track { 227 | box-shadow: inset 0 0 5px grey; 228 | border-radius: 10px; 229 | } 230 | 231 | ::-webkit-scrollbar-thumb { 232 | background: #ad77e6; 233 | border-radius: 10px; 234 | } 235 | 236 | ::-webkit-scrollbar-thumb:hover { 237 | background: #9c52eb; 238 | } 239 | 240 | .shadowed { 241 | 242 | text-shadow: 1px 1px 2px #000000; 243 | font-size:20px; 244 | } 245 | 246 | a { 247 | color: green; 248 | cursor:url(cursor.png), auto; 249 | text-decoration: none; 250 | } 251 | 252 | a:link { 253 | text-decoration: none; 254 | } 255 | 256 | a:visited { 257 | text-decoration: none; 258 | } 259 | 260 | a:hover { 261 | text-decoration: underline; 262 | } 263 | 264 | a:active { 265 | text-decoration: underline; 266 | } 267 | 268 | .linkbutton, .linkbutton:visited { 269 | background-color: #f2ecdc; 270 | color: #4b4852; 271 | padding: 14px 25px; 272 | text-align: center; 273 | text-decoration: none; 274 | display: inline-block; 275 | } 276 | 277 | .linkbutton:hover, a:active { 278 | background-color: #f2ecdc; 279 | text-decoration: none; 280 | } 281 | 282 | .accordion { 283 | background-color: #edf1f7; 284 | color: #444; 285 | cursor: pointer; 286 | padding: 18px; 287 | width: 100%; 288 | border: none; 289 | text-align: left; 290 | outline: none; 291 | font-size: 15px; 292 | transition: 0.4s; 293 | } 294 | 295 | .active, .accordion:hover { 296 | background-color: #ccc; 297 | } 298 | 299 | .accordion:after { 300 | content: '\002B'; 301 | color: #777; 302 | font-weight: bold; 303 | float: right; 304 | margin-left: 5px; 305 | } 306 | 307 | .active:after { 308 | content: "\2212"; 309 | } 310 | 311 | .accordiontext { 312 | padding: 0 18px; 313 | background-color: white; 314 | max-height: 0; 315 | overflow: hidden; 316 | transition: max-height 0.2s ease-out; 317 | } 318 | 319 | input[type=text], select, textarea { 320 | width: 100%; 321 | padding: 12px; 322 | border: 1px solid #ccc; 323 | border-radius: 4px; 324 | resize: vertical; 325 | } 326 | 327 | label { 328 | padding: 12px 12px 12px 0; 329 | display: inline-block; 330 | } 331 | 332 | input[type=submit] { 333 | background-color: #ad77e6; 334 | color: white; 335 | padding: 12px 20px; 336 | border: none; 337 | border-radius: 4px; 338 | cursor: pointer; 339 | float: right; 340 | } 341 | 342 | input[type=submit]:hover { 343 | background-color: #9c52eb; 344 | } 345 | 346 | .container { 347 | border-radius: 5px; 348 | background-color: #edf1f7; 349 | padding: 20px; 350 | } 351 | 352 | .basic-smile { 353 | background: url('https://savirsingh.github.io/SavirCSS/icons/basic-smile.png'); 354 | height: 20px; 355 | width: 20px; 356 | display: block; 357 | } 358 | 359 | .basic-shock { 360 | background: url('https://savirsingh.github.io/SavirCSS/icons/basic-shock.png'); 361 | height: 20px; 362 | width: 20px; 363 | display: block; 364 | } 365 | 366 | .basic-sussy { 367 | background: url('https://savirsingh.github.io/SavirCSS/icons/basic-sussy.png'); 368 | height: 20px; 369 | width: 20px; 370 | display: block; 371 | } 372 | 373 | .basic-mad { 374 | background: url('https://savirsingh.github.io/SavirCSS/icons/basic-mad.png'); 375 | height: 20px; 376 | width: 20px; 377 | display: block; 378 | } 379 | -------------------------------------------------------------------------------- /contact/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | SavirCSS - A free, open-source CSS library. 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | SavirCSS 14 | Docs 15 | Styles 16 | Use 17 |
18 | 21 |
22 | Contact Us 23 | Our Team 24 | Our Mission 25 |
26 |
27 |
28 | 29 |
30 |

To contact SavirCSS, please email kopichiki@gmail.com.

31 | 32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | 41 |
42 |

© 2022 SavirCSS by Savir Singh

43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/savirsingh/SavirCSS/fcafb9e20c52bf6e2b9ac1b6549d976027ac79fe/cursor.png -------------------------------------------------------------------------------- /docs/formcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/savirsingh/SavirCSS/fcafb9e20c52bf6e2b9ac1b6549d976027ac79fe/docs/formcode.png -------------------------------------------------------------------------------- /docs/formstyling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Form Styling - SavirCSS Docs 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | SavirCSS 12 | Docs 13 | Styles 14 | Use 15 |
16 | 19 |
20 | Contact Us 21 | Our Team 22 | Our Mission 23 |
24 |
25 |

26 | 27 |
28 |

Quick Links:

29 | Use SavirCSS 30 | Full Form Styling 31 |

Code:

32 | 33 |

Output:

34 |
35 |

Form Styling:

36 |
37 |

Just a SavirCSS form.

38 |
39 |
40 |
41 | 42 |
43 |
44 | 45 |
46 |
47 |
48 |
49 | 50 |
51 |
52 | 53 |
54 |
55 |
56 |
57 | 58 |
59 |
60 | 64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 | 72 |
73 |
74 |
75 |
76 | 77 |
78 |
79 |
80 |
81 | 82 |
83 |
84 |
85 |
86 |
87 |
88 | 89 | 90 |
91 |

© 2022 SavirCSS by Savir Singh

92 |
93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /docs/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/savirsingh/SavirCSS/fcafb9e20c52bf6e2b9ac1b6549d976027ac79fe/docs/icon.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Official SavirCSS Docs 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | SavirCSS 13 | Docs 14 | Styles 15 | Use 16 |
17 | 20 |
21 | Contact Us 22 | Our Team 23 | Our Mission 24 |
25 |
26 |

27 | 28 |
29 |

Quick Links:

30 | Use SavirCSS 31 | Full Form Styling 32 |
33 | 34 |
35 |

Create Rainbow Text:

36 | <p class="rainbow">Hello, world!</p> 37 |

Output: Hello, world!

38 |
39 |
40 |

Create Shadowed Text:

41 | <p class="shadowed">Hello, world!</p> 42 |

Output: Hello, world!

43 |
44 |
45 |

Create Button Link:

46 | <a class="linkbutton">Hello, world!</a> 47 |

Output: Hello, world!

48 |
49 |
50 |

Create "Pressed" Buttons (Version 0.3 or later):

51 | <button class="pressed-button">Hello, world!</button> 52 |

Output:

53 |
54 |
55 |

Create Top Navigation Bar:

56 | <div class="navigation-top">Hello, world!>
57 | <a class="active">Link 1</a>
58 | <a href="#">Link 2</a>
59 | <div class="dropdown">
60 | <button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
61 | </button>
62 | <div class="dropdown-content">
63 | <a href="#">Link 1</a>
64 | </div>
65 | </div>
66 | </div>
67 |

Output:

68 | Link 1 69 | Link 2 70 |
71 | 74 |
75 | Link 1 76 |
77 |
78 |

79 |
80 |
81 |

Create SavirCSS Form:

82 |

To learn how to create a SavirCSS form, visit this page.

83 |
84 |
85 |

Use SavirCSS:

86 |

To learn how to use SavirCSS on your website, visit this page.

87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 | 96 |
97 |

© 2022 SavirCSS by Savir Singh

98 |
99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /docs/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/savirsingh/SavirCSS/fcafb9e20c52bf6e2b9ac1b6549d976027ac79fe/docs/logo.png -------------------------------------------------------------------------------- /docs/modes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Official SavirCSS Docs 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | SavirCSS 12 | Docs 13 | Styles 14 | Use 15 |
16 | 19 |
20 | Contact Us 21 | Our Team 22 | Our Mission 23 |
24 |
25 |

26 | 27 |
28 |

Quick Links:

29 | Use SavirCSS 30 | Full Form Styling 31 |
32 | 33 |
34 |

Create Rainbow Text:

35 | <p class="rainbow">Hello, world!</p> 36 |

Output: Hello, world!

37 |
38 |
39 |

Make Anything Dark Mode:

40 | <button id="dark">Hello, world!</button> 41 |

Output:

42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | 50 | 51 |
52 |

© 2022 SavirCSS by Savir Singh

53 |
54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /docs/use.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | How to use SavirCSS on your website | SavirCSS Docs 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | SavirCSS 12 | Docs 13 | Styles 14 | Use 15 |
16 | 19 |
20 | Contact Us 21 | Our Team 22 | Our Mission 23 |
24 |
25 |

26 | 27 |
28 |

How to use the latest version of SavirCSS:

29 |
    30 |
  1. Link SavirCSS in your head tag

    2. 31 | <link>rel="stylesheet"
    href="https://savirsin
    gh.github.io/SavirCSS/
    main.css">

    32 |
  2. Refer to the SavirCSS Docs if you're new
    3. 33 |
34 |
35 |
36 |

How to get the offline version of SavirCSS:

37 |
    38 |
  1. Download the .css file from here.

    2. 39 |
  2. Move the file to the same directory as your main .html file

    3. 40 |
  3. Link the file in your head tag

    4. 41 | <link>rel="stylesheet"
    href="main.css">

    42 |
  4. Refer to the SavirCSS Docs if you're new
    5. 43 |
44 |








45 | 46 |
47 |

© 2022 SavirCSS by Savir Singh

48 |
49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /everything.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | SavirCSS - EVERYTHING 7 | 8 | 9 | 10 | 11 | 12 |
13 | Home 14 | Stuff 15 | More Stuff 16 | Even More Stuff 17 |
18 | 21 |
22 | Link 1 23 | Link 2 24 | Link 3 25 |
26 |
27 |
28 | 29 |
30 |

footer-unfixed

31 |
32 | 33 | savircss logo- (try hovering over it) 34 | 35 |

SavirCSS even lets you make rainbow text! Just add class="rainbow" to your HTML tags!

36 | 37 |

This is shadowed text. Use class="shadowed" to make your HTML text shadowed.

38 | 39 | This is the classic SavirCSS a tag. 40 |

41 | This is the linkbutton SavirCSS a tag. Use class="linkbutton" on a link to make it a linkbutton. 42 | 43 |

Look at the scrollbar, SavirCSS gives you a cool scrollbar!

44 |

SavirCSS also comes with Font Awesome built-in.

45 |

Oh, and don't forget the cool cursor!

46 | 47 |
48 |

Just a SavirCSS form.

49 |
50 |
51 |
52 | 53 |
54 |
55 | 56 |
57 |
58 |
59 |
60 | 61 |
62 |
63 | 64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 | 75 |
76 |
77 |
78 |
79 | 80 |
81 |
82 | 83 |
84 |
85 |
86 |
87 | 88 |
89 |
90 |
91 | 92 | Link SavirCSS Online (No Download Required) 93 |

94 | Download SavirCSS For Offline Use (Possibly Large File) 95 | 96 | 97 |
98 |
99 |
100 |
101 |
102 |
103 | 104 |
105 |

© 2022 SavirCSS by Savir Singh (this is an example of class="footer" div).

106 |
107 | 108 | 109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/savirsingh/SavirCSS/fcafb9e20c52bf6e2b9ac1b6549d976027ac79fe/icon.png -------------------------------------------------------------------------------- /icons/basic-mad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/savirsingh/SavirCSS/fcafb9e20c52bf6e2b9ac1b6549d976027ac79fe/icons/basic-mad.png -------------------------------------------------------------------------------- /icons/basic-shock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/savirsingh/SavirCSS/fcafb9e20c52bf6e2b9ac1b6549d976027ac79fe/icons/basic-shock.png -------------------------------------------------------------------------------- /icons/basic-shock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/basic-smile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/savirsingh/SavirCSS/fcafb9e20c52bf6e2b9ac1b6549d976027ac79fe/icons/basic-smile.png -------------------------------------------------------------------------------- /icons/basic-smile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/basic-sussy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/savirsingh/SavirCSS/fcafb9e20c52bf6e2b9ac1b6549d976027ac79fe/icons/basic-sussy.png -------------------------------------------------------------------------------- /icons/icons: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /icons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | SavirCSS - Icons 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | SavirCSS 12 | Docs 13 | Styles 14 | Use 15 |
16 | 19 |
20 | Contact Us 21 | Our Team 22 | Our Mission 23 |
24 |
25 |

26 | 27 |
28 |

Quick Links:

29 | Use SavirCSS 30 | Full Form Styling 31 |
32 | 33 |
34 |

If you're linking SavirCSS online or have downloaded Version 0.7 or later, you have access to our custom icons collection.

35 |

Basic Smile Icon:

36 | <i class="basic-smile"></i> 37 |

Output:

38 |
39 |
40 |

Basic Shock Icon:

41 | <i class="basic-shock"></i> 42 |

Output:

43 |
44 |
45 |

Basic Sussy Icon:

46 | <i class="basic-sussy"></i> 47 |

Output:

48 |
49 |
50 |

Basic Mad Icon:

51 | <i class="basic-mad"></i> 52 |

Output:

53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | 61 | 62 |
63 |

© 2022 SavirCSS by Savir Singh

64 |
65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SavirCSS - A free, open-source CSS library. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | SavirCSS 15 | Docs 16 | Styles 17 | Use 18 |
19 | 22 |
23 | Contact Us 24 | Our Team 25 | Our Mission 26 |
27 |
28 |
29 |
30 |
31 |

Use the latest version of SavirCSS on your website.

32 | 33 | Link SavirCSS Online (No Download Required) 34 |

SavirCSS was created by Savir Singh to minimize the web design process.

35 |
36 | 37 |
38 |

Make anything dark mode or rainbow mode with an id/class.

39 | Learn More In SavirCSS Docs 40 |
41 | 42 |
43 |

Take SavirCSS with you to use it offline.

44 | Download SavirCSS For Offline Use (.css) 45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | 55 |
56 |

© 2022 SavirCSS by Savir Singh

57 |
58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /js/intro: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | let slideIndex = 1; 2 | showSlides(slideIndex); 3 | 4 | function plusSlides(n) { 5 | showSlides(slideIndex += n); 6 | } 7 | 8 | function currentSlide(n) { 9 | showSlides(slideIndex = n); 10 | } 11 | 12 | function slideshowgo(n) { 13 | let i; 14 | let slides = document.getElementsByClassName("mySlides"); 15 | let dots = document.getElementsByClassName("dot"); 16 | if (n > slides.length) {slideIndex = 1} 17 | if (n < 1) {slideIndex = slides.length} 18 | for (i = 0; i < slides.length; i++) { 19 | slides[i].style.display = "none"; 20 | } 21 | for (i = 0; i < dots.length; i++) { 22 | dots[i].className = dots[i].className.replace(" active", ""); 23 | } 24 | slides[slideIndex-1].style.display = "block"; 25 | dots[slideIndex-1].className += " active"; 26 | } 27 | 28 | var accord = document.getElementsByClassName("accordion"); 29 | var i; 30 | 31 | for (i = 0; i < accord.length; i++) { 32 | accord[i].addEventListener("click", function() { 33 | this.classList.toggle("active"); 34 | var panel = this.nextElementSibling; 35 | if (panel.style.maxHeight) { 36 | panel.style.maxHeight = null; 37 | } else { 38 | panel.style.maxHeight = panel.scrollHeight + "px"; 39 | } 40 | }); 41 | } 42 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/savirsingh/SavirCSS/fcafb9e20c52bf6e2b9ac1b6549d976027ac79fe/logo.png -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | @import "pressedbutton.css"; 2 | @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"; 3 | 4 | #dark { 5 | background-color: #4b4852; 6 | color: #edf1f7; 7 | } 8 | 9 | body { 10 | font-family: SavirCSS Font; 11 | background-color: #edf1f7; 12 | cursor:url(cursor.png), auto; 13 | ::-webkit-scrollbar { 14 | width: 20px; 15 | ::-moz-selection { 16 | color: white; 17 | background: purple; 18 | } 19 | 20 | ::selection { 21 | color: white; 22 | background: purple; 23 | } 24 | } 25 | 26 | ::-webkit-scrollbar-track { 27 | box-shadow: inset 0 0 5px grey; 28 | border-radius: 10px; 29 | } 30 | 31 | ::-webkit-scrollbar-thumb { 32 | background: red; 33 | border-radius: 10px; 34 | } 35 | 36 | ::-webkit-scrollbar-thumb:hover { 37 | background: #b30000; 38 | } 39 | } 40 | 41 | button { 42 | padding: 20px; 43 | border: 0px; 44 | background-color: #f2ecdc; 45 | font-size: 20px; 46 | cursor:url(cursor.png), auto; 47 | } 48 | 49 | @font-face { 50 | font-family: 'SavirCSS Font'; 51 | font-style: normal; 52 | font-weight: 400; 53 | src: url(savircssfont.woff) format('woff'); 54 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 55 | } 56 | 57 | button { 58 | font-family: SavirCSS Font; 59 | } 60 | 61 | .navigation-top { 62 | font-family: SavirCSS Font; 63 | overflow: hidden; 64 | background-color: indigo; 65 | font-size: 20px; 66 | } 67 | 68 | .navigation-top a { 69 | float: left; 70 | color: #f2f2f2; 71 | text-align: center; 72 | padding: 24px 8px; 73 | text-decoration: none; 74 | font-size: 20px; 75 | } 76 | 77 | .navigation-top a:hover { 78 | background-color: white; 79 | color: black; 80 | } 81 | 82 | .navigation-top a.active { 83 | background-color: darkblue; 84 | color: white; 85 | } 86 | 87 | .dropdown { 88 | float: left; 89 | overflow: hidden; 90 | cursor:url(cursor.png), auto; 91 | } 92 | 93 | .dropdown .dropbtn { 94 | font-size: 20px; 95 | border: none; 96 | outline: none; 97 | color: white; 98 | padding: 24px 8px; 99 | background-color: inherit; 100 | font-family: inherit; 101 | margin: 0; 102 | } 103 | 104 | .dropdown-content { 105 | display: none; 106 | position: absolute; 107 | background-color: #edf1f7; 108 | min-width: 160px; 109 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 110 | z-index: 1; 111 | } 112 | 113 | .dropdown-content a { 114 | float: none; 115 | color: black; 116 | padding: 12px 16px; 117 | text-decoration: none; 118 | display: block; 119 | text-align: left; 120 | } 121 | 122 | .dropdown-content a:hover { 123 | background-color: white; 124 | } 125 | 126 | .dropdown:hover .dropdown-content { 127 | display: block; 128 | } 129 | 130 | .footer { 131 | position: fixed; 132 | left: 0; 133 | bottom: 0; 134 | width: 100%; 135 | background-color: #4b4852; 136 | color: white; 137 | text-align: center; 138 | cursor:url(cursor.png), auto; 139 | } 140 | 141 | .footer-unfixed { 142 | left: 0; 143 | bottom: 0; 144 | width: 100%; 145 | height: 32px; 146 | background-color: #4b4852; 147 | color: white; 148 | text-align: center; 149 | cursor:url(cursor.png), auto; 150 | } 151 | 152 | img:hover { 153 | opacity: 0.6; 154 | } 155 | 156 | @media only screen and (max-width: 600px) { 157 | img { 158 | width: 100%; 159 | } 160 | } 161 | 162 | .rainbow { 163 | 164 | text-shadow: 1px 1px 2px #000000; 165 | font-size:20px; 166 | -webkit-animation: rainbow 5s infinite; 167 | cursor:url(cursor.png), auto; 168 | 169 | -ms-animation: rainbow 5s infinite; 170 | 171 | animation: rainbow 5s infinite; 172 | } 173 | 174 | @-webkit-keyframes rainbow{ 175 | 0%{color: orange;} 176 | 10%{color: purple;} 177 | 20%{color: red;} 178 | 30%{color: CadetBlue;} 179 | 40%{color: yellow;} 180 | 50%{color: coral;} 181 | 60%{color: green;} 182 | 70%{color: cyan;} 183 | 80%{color: DeepPink;} 184 | 90%{color: DodgerBlue;} 185 | 100%{color: orange;} 186 | } 187 | 188 | @-ms-keyframes rainbow{ 189 | 0%{color: orange;} 190 | 10%{color: purple;} 191 | 20%{color: red;} 192 | 30%{color: CadetBlue;} 193 | 40%{color: yellow;} 194 | 50%{color: coral;} 195 | 60%{color: green;} 196 | 70%{color: cyan;} 197 | 80%{color: DeepPink;} 198 | 90%{color: DodgerBlue;} 199 | 100%{color: orange;} 200 | } 201 | 202 | @keyframes rainbow{ 203 | 0%{color: orange;} 204 | 10%{color: purple;} 205 | 20%{color: red;} 206 | 30%{color: CadetBlue;} 207 | 40%{color: yellow;} 208 | 50%{color: coral;} 209 | 60%{color: green;} 210 | 70%{color: cyan;} 211 | 80%{color: DeepPink;} 212 | 90%{color: DodgerBlue;} 213 | 100%{color: orange;} 214 | } 215 | 216 | 217 | code { 218 | background-color: lightgray; 219 | } 220 | 221 | ::-webkit-scrollbar { 222 | width: 16px; 223 | cursor:url(cursor.png), auto; 224 | } 225 | 226 | ::-webkit-scrollbar-track { 227 | box-shadow: inset 0 0 5px grey; 228 | border-radius: 10px; 229 | } 230 | 231 | ::-webkit-scrollbar-thumb { 232 | background: #ad77e6; 233 | border-radius: 10px; 234 | } 235 | 236 | ::-webkit-scrollbar-thumb:hover { 237 | background: #9c52eb; 238 | } 239 | 240 | .shadowed { 241 | 242 | text-shadow: 1px 1px 2px #000000; 243 | font-size:20px; 244 | } 245 | 246 | a { 247 | color: green; 248 | cursor:url(cursor.png), auto; 249 | text-decoration: none; 250 | } 251 | 252 | a:link { 253 | text-decoration: none; 254 | } 255 | 256 | a:visited { 257 | text-decoration: none; 258 | } 259 | 260 | a:hover { 261 | text-decoration: underline; 262 | } 263 | 264 | a:active { 265 | text-decoration: underline; 266 | } 267 | 268 | .linkbutton, .linkbutton:visited { 269 | background-color: #f2ecdc; 270 | color: #4b4852; 271 | padding: 14px 25px; 272 | text-align: center; 273 | text-decoration: none; 274 | display: inline-block; 275 | } 276 | 277 | .linkbutton:hover, a:active { 278 | background-color: #f2ecdc; 279 | text-decoration: none; 280 | } 281 | 282 | .accordion { 283 | background-color: #edf1f7; 284 | color: #444; 285 | cursor: pointer; 286 | padding: 18px; 287 | width: 100%; 288 | border: none; 289 | text-align: left; 290 | outline: none; 291 | font-size: 15px; 292 | transition: 0.4s; 293 | } 294 | 295 | .active, .accordion:hover { 296 | background-color: #ccc; 297 | } 298 | 299 | .accordion:after { 300 | content: '\002B'; 301 | color: #777; 302 | font-weight: bold; 303 | float: right; 304 | margin-left: 5px; 305 | } 306 | 307 | .active:after { 308 | content: "\2212"; 309 | } 310 | 311 | .accordiontext { 312 | padding: 0 18px; 313 | background-color: white; 314 | max-height: 0; 315 | overflow: hidden; 316 | transition: max-height 0.2s ease-out; 317 | } 318 | 319 | input[type=text], select, textarea { 320 | width: 100%; 321 | padding: 12px; 322 | border: 1px solid #ccc; 323 | border-radius: 4px; 324 | resize: vertical; 325 | } 326 | 327 | label { 328 | padding: 12px 12px 12px 0; 329 | display: inline-block; 330 | } 331 | 332 | input[type=submit] { 333 | background-color: #ad77e6; 334 | color: white; 335 | padding: 12px 20px; 336 | border: none; 337 | border-radius: 4px; 338 | cursor: pointer; 339 | float: right; 340 | } 341 | 342 | input[type=submit]:hover { 343 | background-color: #9c52eb; 344 | } 345 | 346 | .container { 347 | border-radius: 5px; 348 | background-color: #edf1f7; 349 | padding: 20px; 350 | } 351 | 352 | .basic-smile { 353 | background: url('https://savirsingh.github.io/SavirCSS/icons/basic-smile.png'); 354 | height: 20px; 355 | width: 20px; 356 | display: block; 357 | } 358 | 359 | .basic-shock { 360 | background: url('https://savirsingh.github.io/SavirCSS/icons/basic-shock.png'); 361 | height: 20px; 362 | width: 20px; 363 | display: block; 364 | } 365 | 366 | .basic-sussy { 367 | background: url('https://savirsingh.github.io/SavirCSS/icons/basic-sussy.png'); 368 | height: 20px; 369 | width: 20px; 370 | display: block; 371 | } 372 | 373 | .basic-mad { 374 | background: url('https://savirsingh.github.io/SavirCSS/icons/basic-mad.png'); 375 | height: 20px; 376 | width: 20px; 377 | display: block; 378 | } 379 | 380 | .slideshow {display: none} 381 | img {vertical-align: middle;} 382 | 383 | .slideshow-container { 384 | max-width: 1000px; 385 | position: relative; 386 | margin: auto; 387 | } 388 | 389 | .prev, .next { 390 | cursor: pointer; 391 | position: absolute; 392 | top: 50%; 393 | width: auto; 394 | padding: 16px; 395 | margin-top: -22px; 396 | color: white; 397 | font-weight: bold; 398 | font-size: 18px; 399 | transition: 0.6s ease; 400 | border-radius: 0 3px 3px 0; 401 | user-select: none; 402 | } 403 | 404 | .next { 405 | right: 0; 406 | border-radius: 3px 0 0 3px; 407 | } 408 | 409 | .prev:hover, .next:hover { 410 | background-color: rgba(0,0,0,0.8); 411 | } 412 | 413 | .text { 414 | color: #f2f2f2; 415 | font-size: 15px; 416 | padding: 8px 12px; 417 | position: absolute; 418 | bottom: 8px; 419 | width: 100%; 420 | text-align: center; 421 | } 422 | 423 | .numbertext { 424 | color: #f2f2f2; 425 | font-size: 12px; 426 | padding: 8px 12px; 427 | position: absolute; 428 | top: 0; 429 | } 430 | 431 | .sdot { 432 | cursor: pointer; 433 | height: 15px; 434 | width: 15px; 435 | margin: 0 2px; 436 | background-color: purple; 437 | border-radius: 50%; 438 | display: inline-block; 439 | transition: background-color 0.6s ease; 440 | } 441 | 442 | .active, .sdot:hover { 443 | background-color: blue; 444 | } 445 | 446 | .fade { 447 | animation-name: fade; 448 | animation-duration: 1.5s; 449 | } 450 | 451 | @keyframes fade { 452 | from {opacity: .4} 453 | to {opacity: 1} 454 | } 455 | 456 | @media only screen and (max-width: 300px) { 457 | .prev, .next,.text {font-size: 11px} 458 | } 459 | 460 | -------------------------------------------------------------------------------- /main2.css: -------------------------------------------------------------------------------- 1 | @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"; 2 | 3 | #dark { 4 | background-color: #4b4852; 5 | color: #edf1f7; 6 | } 7 | 8 | body { 9 | font-family: SavirCSS Font; 10 | background-color: #edf1f7; 11 | cursor:url(cursor.png), auto; 12 | ::-webkit-scrollbar { 13 | width: 20px; 14 | } 15 | 16 | ::-webkit-scrollbar-track { 17 | box-shadow: inset 0 0 5px grey; 18 | border-radius: 10px; 19 | } 20 | 21 | ::-webkit-scrollbar-thumb { 22 | background: red; 23 | border-radius: 10px; 24 | } 25 | 26 | ::-webkit-scrollbar-thumb:hover { 27 | background: #b30000; 28 | } 29 | } 30 | 31 | button { 32 | padding: 20px; 33 | border: 0px; 34 | background-color: #f2ecdc; 35 | font-size: 20px; 36 | cursor:url(cursor.png), auto; 37 | } 38 | 39 | @font-face { 40 | font-family: 'SavirCSS Font'; 41 | font-style: normal; 42 | font-weight: 400; 43 | src: url(savircssfont.woff) format('woff'); 44 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 45 | } 46 | 47 | button { 48 | font-family: SavirCSS Font; 49 | } 50 | 51 | .navigation-top { 52 | font-family: SavirCSS Font; 53 | overflow: hidden; 54 | background-color: indigo; 55 | font-size: 20px; 56 | } 57 | 58 | .navigation-top a { 59 | float: left; 60 | color: #f2f2f2; 61 | text-align: center; 62 | padding: 24px 8px; 63 | text-decoration: none; 64 | font-size: 20px; 65 | } 66 | 67 | .navigation-top a:hover { 68 | background-color: white; 69 | color: black; 70 | } 71 | 72 | .navigation-top a.active { 73 | background-color: darkblue; 74 | color: white; 75 | } 76 | 77 | .dropdown { 78 | float: left; 79 | overflow: hidden; 80 | cursor:url(cursor.png), auto; 81 | } 82 | 83 | .dropdown .dropbtn { 84 | font-size: 20px; 85 | border: none; 86 | outline: none; 87 | color: white; 88 | padding: 24px 8px; 89 | background-color: inherit; 90 | font-family: inherit; 91 | margin: 0; 92 | } 93 | 94 | .dropdown-content { 95 | display: none; 96 | position: absolute; 97 | background-color: #edf1f7; 98 | min-width: 160px; 99 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 100 | z-index: 1; 101 | } 102 | 103 | .dropdown-content a { 104 | float: none; 105 | color: black; 106 | padding: 12px 16px; 107 | text-decoration: none; 108 | display: block; 109 | text-align: left; 110 | } 111 | 112 | .dropdown-content a:hover { 113 | background-color: white; 114 | } 115 | 116 | .dropdown:hover .dropdown-content { 117 | display: block; 118 | } 119 | 120 | .footer { 121 | position: fixed; 122 | left: 0; 123 | bottom: 0; 124 | width: 100%; 125 | background-color: #4b4852; 126 | color: white; 127 | text-align: center; 128 | } 129 | 130 | .footer-unfixed { 131 | left: 0; 132 | bottom: 0; 133 | width: 100%; 134 | height: 32px; 135 | background-color: #4b4852; 136 | color: white; 137 | text-align: center; 138 | } 139 | 140 | img:hover { 141 | opacity: 0.6; 142 | } 143 | 144 | @media only screen and (max-width: 600px) { 145 | img { 146 | width: 100%; 147 | } 148 | } 149 | 150 | .rainbow { 151 | 152 | text-shadow: 1px 1px 2px #000000; 153 | font-size:20px; 154 | -webkit-animation: rainbow 5s infinite; 155 | 156 | -ms-animation: rainbow 5s infinite; 157 | 158 | animation: rainbow 5s infinite; 159 | } 160 | 161 | @-webkit-keyframes rainbow{ 162 | 0%{color: orange;} 163 | 10%{color: purple;} 164 | 20%{color: red;} 165 | 30%{color: CadetBlue;} 166 | 40%{color: yellow;} 167 | 50%{color: coral;} 168 | 60%{color: green;} 169 | 70%{color: cyan;} 170 | 80%{color: DeepPink;} 171 | 90%{color: DodgerBlue;} 172 | 100%{color: orange;} 173 | } 174 | 175 | @-ms-keyframes rainbow{ 176 | 0%{color: orange;} 177 | 10%{color: purple;} 178 | 20%{color: red;} 179 | 30%{color: CadetBlue;} 180 | 40%{color: yellow;} 181 | 50%{color: coral;} 182 | 60%{color: green;} 183 | 70%{color: cyan;} 184 | 80%{color: DeepPink;} 185 | 90%{color: DodgerBlue;} 186 | 100%{color: orange;} 187 | } 188 | 189 | @keyframes rainbow{ 190 | 0%{color: orange;} 191 | 10%{color: purple;} 192 | 20%{color: red;} 193 | 30%{color: CadetBlue;} 194 | 40%{color: yellow;} 195 | 50%{color: coral;} 196 | 60%{color: green;} 197 | 70%{color: cyan;} 198 | 80%{color: DeepPink;} 199 | 90%{color: DodgerBlue;} 200 | 100%{color: orange;} 201 | } 202 | 203 | 204 | code { 205 | background-color: lightgray; 206 | } 207 | 208 | ::-webkit-scrollbar { 209 | width: 16px; 210 | cursor:url(cursor.png), auto; 211 | } 212 | 213 | ::-webkit-scrollbar-track { 214 | box-shadow: inset 0 0 5px grey; 215 | border-radius: 10px; 216 | } 217 | 218 | ::-webkit-scrollbar-thumb { 219 | background: #ad77e6; 220 | border-radius: 10px; 221 | } 222 | 223 | ::-webkit-scrollbar-thumb:hover { 224 | background: #9c52eb; 225 | } 226 | 227 | .shadowed { 228 | 229 | text-shadow: 1px 1px 2px #000000; 230 | font-size:20px; 231 | } 232 | 233 | a { 234 | color: green; 235 | cursor:url(cursor.png), auto; 236 | text-decoration: none; 237 | } 238 | 239 | a:link { 240 | text-decoration: none; 241 | } 242 | 243 | a:visited { 244 | text-decoration: none; 245 | } 246 | 247 | a:hover { 248 | text-decoration: underline; 249 | } 250 | 251 | a:active { 252 | text-decoration: underline; 253 | } 254 | 255 | .linkbutton, .linkbutton:visited { 256 | background-color: #f2ecdc; 257 | color: #4b4852; 258 | padding: 14px 25px; 259 | text-align: center; 260 | text-decoration: none; 261 | display: inline-block; 262 | } 263 | 264 | .linkbutton:hover, a:active { 265 | background-color: #f2ecdc; 266 | text-decoration: none; 267 | } 268 | 269 | .accordion { 270 | background-color: #edf1f7; 271 | color: #444; 272 | cursor: pointer; 273 | padding: 18px; 274 | width: 100%; 275 | border: none; 276 | text-align: left; 277 | outline: none; 278 | font-size: 15px; 279 | transition: 0.4s; 280 | } 281 | 282 | .active, .accordion:hover { 283 | background-color: #ccc; 284 | } 285 | 286 | .accordion:after { 287 | content: '\002B'; 288 | color: #777; 289 | font-weight: bold; 290 | float: right; 291 | margin-left: 5px; 292 | } 293 | 294 | .active:after { 295 | content: "\2212"; 296 | } 297 | 298 | .accordiontext { 299 | padding: 0 18px; 300 | background-color: white; 301 | max-height: 0; 302 | overflow: hidden; 303 | transition: max-height 0.2s ease-out; 304 | } 305 | 306 | input[type=text], select, textarea { 307 | width: 100%; 308 | padding: 12px; 309 | border: 1px solid #ccc; 310 | border-radius: 4px; 311 | resize: vertical; 312 | } 313 | 314 | label { 315 | padding: 12px 12px 12px 0; 316 | display: inline-block; 317 | } 318 | 319 | input[type=submit] { 320 | background-color: #ad77e6; 321 | color: white; 322 | padding: 12px 20px; 323 | border: none; 324 | border-radius: 4px; 325 | cursor: pointer; 326 | float: right; 327 | } 328 | 329 | input[type=submit]:hover { 330 | background-color: #9c52eb; 331 | } 332 | 333 | .container { 334 | border-radius: 5px; 335 | background-color: #edf1f7; 336 | padding: 20px; 337 | } 338 | 339 | -------------------------------------------------------------------------------- /main3.css: -------------------------------------------------------------------------------- 1 | @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"; 2 | 3 | #dark { 4 | background-color: #4b4852; 5 | color: #edf1f7; 6 | } 7 | 8 | body { 9 | font-family: SavirCSS Font; 10 | background-color: #edf1f7; 11 | cursor:url(cursor.png), auto; 12 | ::-webkit-scrollbar { 13 | width: 20px; 14 | } 15 | 16 | ::-webkit-scrollbar-track { 17 | box-shadow: inset 0 0 5px grey; 18 | border-radius: 10px; 19 | } 20 | 21 | ::-webkit-scrollbar-thumb { 22 | background: red; 23 | border-radius: 10px; 24 | } 25 | 26 | ::-webkit-scrollbar-thumb:hover { 27 | background: #b30000; 28 | } 29 | } 30 | 31 | button { 32 | padding: 20px; 33 | border: 0px; 34 | background-color: #f2ecdc; 35 | font-size: 20px; 36 | cursor:url(cursor.png), auto; 37 | } 38 | 39 | @font-face { 40 | font-family: 'SavirCSS Font'; 41 | font-style: normal; 42 | font-weight: 400; 43 | src: url(savircssfont.woff) format('woff'); 44 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 45 | } 46 | 47 | button { 48 | font-family: SavirCSS Font; 49 | } 50 | 51 | .navigation-top { 52 | font-family: SavirCSS Font; 53 | overflow: hidden; 54 | background-color: indigo; 55 | font-size: 20px; 56 | } 57 | 58 | .navigation-top a { 59 | float: left; 60 | color: #f2f2f2; 61 | text-align: center; 62 | padding: 24px 8px; 63 | text-decoration: none; 64 | font-size: 20px; 65 | } 66 | 67 | .navigation-top a:hover { 68 | background-color: white; 69 | color: black; 70 | } 71 | 72 | .navigation-top a.active { 73 | background-color: darkblue; 74 | color: white; 75 | } 76 | 77 | .dropdown { 78 | float: left; 79 | overflow: hidden; 80 | cursor:url(cursor.png), auto; 81 | } 82 | 83 | .dropdown .dropbtn { 84 | font-size: 20px; 85 | border: none; 86 | outline: none; 87 | color: white; 88 | padding: 24px 8px; 89 | background-color: inherit; 90 | font-family: inherit; 91 | margin: 0; 92 | } 93 | 94 | .dropdown-content { 95 | display: none; 96 | position: absolute; 97 | background-color: #edf1f7; 98 | min-width: 160px; 99 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 100 | z-index: 1; 101 | } 102 | 103 | .dropdown-content a { 104 | float: none; 105 | color: black; 106 | padding: 12px 16px; 107 | text-decoration: none; 108 | display: block; 109 | text-align: left; 110 | } 111 | 112 | .dropdown-content a:hover { 113 | background-color: white; 114 | } 115 | 116 | .dropdown:hover .dropdown-content { 117 | display: block; 118 | } 119 | 120 | .footer { 121 | position: fixed; 122 | left: 0; 123 | bottom: 0; 124 | width: 100%; 125 | background-color: #4b4852; 126 | color: white; 127 | text-align: center; 128 | } 129 | 130 | .footer-unfixed { 131 | left: 0; 132 | bottom: 0; 133 | width: 100%; 134 | height: 32px; 135 | background-color: #4b4852; 136 | color: white; 137 | text-align: center; 138 | } 139 | 140 | img:hover { 141 | opacity: 0.6; 142 | } 143 | 144 | @media only screen and (max-width: 600px) { 145 | img { 146 | width: 100%; 147 | } 148 | } 149 | 150 | .rainbow { 151 | 152 | text-shadow: 1px 1px 2px #000000; 153 | font-size:20px; 154 | -webkit-animation: rainbow 5s infinite; 155 | 156 | -ms-animation: rainbow 5s infinite; 157 | 158 | animation: rainbow 5s infinite; 159 | } 160 | 161 | @-webkit-keyframes rainbow{ 162 | 0%{color: orange;} 163 | 10%{color: purple;} 164 | 20%{color: red;} 165 | 30%{color: CadetBlue;} 166 | 40%{color: yellow;} 167 | 50%{color: coral;} 168 | 60%{color: green;} 169 | 70%{color: cyan;} 170 | 80%{color: DeepPink;} 171 | 90%{color: DodgerBlue;} 172 | 100%{color: orange;} 173 | } 174 | 175 | @-ms-keyframes rainbow{ 176 | 0%{color: orange;} 177 | 10%{color: purple;} 178 | 20%{color: red;} 179 | 30%{color: CadetBlue;} 180 | 40%{color: yellow;} 181 | 50%{color: coral;} 182 | 60%{color: green;} 183 | 70%{color: cyan;} 184 | 80%{color: DeepPink;} 185 | 90%{color: DodgerBlue;} 186 | 100%{color: orange;} 187 | } 188 | 189 | @keyframes rainbow{ 190 | 0%{color: orange;} 191 | 10%{color: purple;} 192 | 20%{color: red;} 193 | 30%{color: CadetBlue;} 194 | 40%{color: yellow;} 195 | 50%{color: coral;} 196 | 60%{color: green;} 197 | 70%{color: cyan;} 198 | 80%{color: DeepPink;} 199 | 90%{color: DodgerBlue;} 200 | 100%{color: orange;} 201 | } 202 | 203 | 204 | code { 205 | background-color: lightgray; 206 | } 207 | 208 | ::-webkit-scrollbar { 209 | width: 16px; 210 | cursor:url(cursor.png), auto; 211 | } 212 | 213 | ::-webkit-scrollbar-track { 214 | box-shadow: inset 0 0 5px grey; 215 | border-radius: 10px; 216 | } 217 | 218 | ::-webkit-scrollbar-thumb { 219 | background: #ad77e6; 220 | border-radius: 10px; 221 | } 222 | 223 | ::-webkit-scrollbar-thumb:hover { 224 | background: #9c52eb; 225 | } 226 | 227 | .shadowed { 228 | 229 | text-shadow: 1px 1px 2px #000000; 230 | font-size:20px; 231 | } 232 | 233 | a { 234 | color: green; 235 | cursor:url(cursor.png), auto; 236 | text-decoration: none; 237 | } 238 | 239 | a:link { 240 | text-decoration: none; 241 | } 242 | 243 | a:visited { 244 | text-decoration: none; 245 | } 246 | 247 | a:hover { 248 | text-decoration: underline; 249 | } 250 | 251 | a:active { 252 | text-decoration: underline; 253 | } 254 | 255 | .linkbutton, .linkbutton:visited { 256 | background-color: #f2ecdc; 257 | color: #4b4852; 258 | padding: 14px 25px; 259 | text-align: center; 260 | text-decoration: none; 261 | display: inline-block; 262 | } 263 | 264 | .linkbutton:hover, a:active { 265 | background-color: #f2ecdc; 266 | text-decoration: none; 267 | } 268 | 269 | .accordion { 270 | background-color: #edf1f7; 271 | color: #444; 272 | cursor: pointer; 273 | padding: 18px; 274 | width: 100%; 275 | border: none; 276 | text-align: left; 277 | outline: none; 278 | font-size: 15px; 279 | transition: 0.4s; 280 | } 281 | 282 | .active, .accordion:hover { 283 | background-color: #ccc; 284 | } 285 | 286 | .accordion:after { 287 | content: '\002B'; 288 | color: #777; 289 | font-weight: bold; 290 | float: right; 291 | margin-left: 5px; 292 | } 293 | 294 | .active:after { 295 | content: "\2212"; 296 | } 297 | 298 | .accordiontext { 299 | padding: 0 18px; 300 | background-color: white; 301 | max-height: 0; 302 | overflow: hidden; 303 | transition: max-height 0.2s ease-out; 304 | } 305 | 306 | input[type=text], select, textarea { 307 | width: 100%; 308 | padding: 12px; 309 | border: 1px solid #ccc; 310 | border-radius: 4px; 311 | resize: vertical; 312 | } 313 | 314 | label { 315 | padding: 12px 12px 12px 0; 316 | display: inline-block; 317 | } 318 | 319 | input[type=submit] { 320 | background-color: #ad77e6; 321 | color: white; 322 | padding: 12px 20px; 323 | border: none; 324 | border-radius: 4px; 325 | cursor: pointer; 326 | float: right; 327 | } 328 | 329 | input[type=submit]:hover { 330 | background-color: #9c52eb; 331 | } 332 | 333 | .container { 334 | border-radius: 5px; 335 | background-color: #edf1f7; 336 | padding: 20px; 337 | } 338 | -------------------------------------------------------------------------------- /mainbackup.css: -------------------------------------------------------------------------------- 1 | @import "pressedbutton.css"; 2 | @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"; 3 | 4 | #dark { 5 | background-color: #4b4852; 6 | color: #edf1f7; 7 | } 8 | 9 | body { 10 | font-family: SavirCSS Font; 11 | background-color: #edf1f7; 12 | cursor:url(cursor.png), auto; 13 | ::-webkit-scrollbar { 14 | width: 20px; 15 | ::-moz-selection { 16 | color: white; 17 | background: purple; 18 | } 19 | 20 | ::selection { 21 | color: white; 22 | background: purple; 23 | } 24 | } 25 | 26 | ::-webkit-scrollbar-track { 27 | box-shadow: inset 0 0 5px grey; 28 | border-radius: 10px; 29 | } 30 | 31 | ::-webkit-scrollbar-thumb { 32 | background: red; 33 | border-radius: 10px; 34 | } 35 | 36 | ::-webkit-scrollbar-thumb:hover { 37 | background: #b30000; 38 | } 39 | } 40 | 41 | button { 42 | padding: 20px; 43 | border: 0px; 44 | background-color: #f2ecdc; 45 | font-size: 20px; 46 | cursor:url(cursor.png), auto; 47 | } 48 | 49 | @font-face { 50 | font-family: 'SavirCSS Font'; 51 | font-style: normal; 52 | font-weight: 400; 53 | src: url(savircssfont.woff) format('woff'); 54 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 55 | } 56 | 57 | button { 58 | font-family: SavirCSS Font; 59 | } 60 | 61 | .navigation-top { 62 | font-family: SavirCSS Font; 63 | overflow: hidden; 64 | background-color: indigo; 65 | font-size: 20px; 66 | } 67 | 68 | .navigation-top a { 69 | float: left; 70 | color: #f2f2f2; 71 | text-align: center; 72 | padding: 24px 8px; 73 | text-decoration: none; 74 | font-size: 20px; 75 | } 76 | 77 | .navigation-top a:hover { 78 | background-color: white; 79 | color: black; 80 | } 81 | 82 | .navigation-top a.active { 83 | background-color: darkblue; 84 | color: white; 85 | } 86 | 87 | .dropdown { 88 | float: left; 89 | overflow: hidden; 90 | cursor:url(cursor.png), auto; 91 | } 92 | 93 | .dropdown .dropbtn { 94 | font-size: 20px; 95 | border: none; 96 | outline: none; 97 | color: white; 98 | padding: 24px 8px; 99 | background-color: inherit; 100 | font-family: inherit; 101 | margin: 0; 102 | } 103 | 104 | .dropdown-content { 105 | display: none; 106 | position: absolute; 107 | background-color: #edf1f7; 108 | min-width: 160px; 109 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 110 | z-index: 1; 111 | } 112 | 113 | .dropdown-content a { 114 | float: none; 115 | color: black; 116 | padding: 12px 16px; 117 | text-decoration: none; 118 | display: block; 119 | text-align: left; 120 | } 121 | 122 | .dropdown-content a:hover { 123 | background-color: white; 124 | } 125 | 126 | .dropdown:hover .dropdown-content { 127 | display: block; 128 | } 129 | 130 | .footer { 131 | position: fixed; 132 | left: 0; 133 | bottom: 0; 134 | width: 100%; 135 | background-color: #4b4852; 136 | color: white; 137 | text-align: center; 138 | cursor:url(cursor.png), auto; 139 | } 140 | 141 | .footer-unfixed { 142 | left: 0; 143 | bottom: 0; 144 | width: 100%; 145 | height: 32px; 146 | background-color: #4b4852; 147 | color: white; 148 | text-align: center; 149 | cursor:url(cursor.png), auto; 150 | } 151 | 152 | img:hover { 153 | opacity: 0.6; 154 | } 155 | 156 | @media only screen and (max-width: 600px) { 157 | img { 158 | width: 100%; 159 | } 160 | } 161 | 162 | .rainbow { 163 | 164 | text-shadow: 1px 1px 2px #000000; 165 | font-size:20px; 166 | -webkit-animation: rainbow 5s infinite; 167 | cursor:url(cursor.png), auto; 168 | 169 | -ms-animation: rainbow 5s infinite; 170 | 171 | animation: rainbow 5s infinite; 172 | } 173 | 174 | @-webkit-keyframes rainbow{ 175 | 0%{color: orange;} 176 | 10%{color: purple;} 177 | 20%{color: red;} 178 | 30%{color: CadetBlue;} 179 | 40%{color: yellow;} 180 | 50%{color: coral;} 181 | 60%{color: green;} 182 | 70%{color: cyan;} 183 | 80%{color: DeepPink;} 184 | 90%{color: DodgerBlue;} 185 | 100%{color: orange;} 186 | } 187 | 188 | @-ms-keyframes rainbow{ 189 | 0%{color: orange;} 190 | 10%{color: purple;} 191 | 20%{color: red;} 192 | 30%{color: CadetBlue;} 193 | 40%{color: yellow;} 194 | 50%{color: coral;} 195 | 60%{color: green;} 196 | 70%{color: cyan;} 197 | 80%{color: DeepPink;} 198 | 90%{color: DodgerBlue;} 199 | 100%{color: orange;} 200 | } 201 | 202 | @keyframes rainbow{ 203 | 0%{color: orange;} 204 | 10%{color: purple;} 205 | 20%{color: red;} 206 | 30%{color: CadetBlue;} 207 | 40%{color: yellow;} 208 | 50%{color: coral;} 209 | 60%{color: green;} 210 | 70%{color: cyan;} 211 | 80%{color: DeepPink;} 212 | 90%{color: DodgerBlue;} 213 | 100%{color: orange;} 214 | } 215 | 216 | 217 | code { 218 | background-color: lightgray; 219 | } 220 | 221 | ::-webkit-scrollbar { 222 | width: 16px; 223 | cursor:url(cursor.png), auto; 224 | } 225 | 226 | ::-webkit-scrollbar-track { 227 | box-shadow: inset 0 0 5px grey; 228 | border-radius: 10px; 229 | } 230 | 231 | ::-webkit-scrollbar-thumb { 232 | background: #ad77e6; 233 | border-radius: 10px; 234 | } 235 | 236 | ::-webkit-scrollbar-thumb:hover { 237 | background: #9c52eb; 238 | } 239 | 240 | .shadowed { 241 | 242 | text-shadow: 1px 1px 2px #000000; 243 | font-size:20px; 244 | } 245 | 246 | a { 247 | color: green; 248 | cursor:url(cursor.png), auto; 249 | text-decoration: none; 250 | } 251 | 252 | a:link { 253 | text-decoration: none; 254 | } 255 | 256 | a:visited { 257 | text-decoration: none; 258 | } 259 | 260 | a:hover { 261 | text-decoration: underline; 262 | } 263 | 264 | a:active { 265 | text-decoration: underline; 266 | } 267 | 268 | .linkbutton, .linkbutton:visited { 269 | background-color: #f2ecdc; 270 | color: #4b4852; 271 | padding: 14px 25px; 272 | text-align: center; 273 | text-decoration: none; 274 | display: inline-block; 275 | } 276 | 277 | .linkbutton:hover, a:active { 278 | background-color: #f2ecdc; 279 | text-decoration: none; 280 | } 281 | 282 | .accordion { 283 | background-color: #edf1f7; 284 | color: #444; 285 | cursor: pointer; 286 | padding: 18px; 287 | width: 100%; 288 | border: none; 289 | text-align: left; 290 | outline: none; 291 | font-size: 15px; 292 | transition: 0.4s; 293 | } 294 | 295 | .active, .accordion:hover { 296 | background-color: #ccc; 297 | } 298 | 299 | .accordion:after { 300 | content: '\002B'; 301 | color: #777; 302 | font-weight: bold; 303 | float: right; 304 | margin-left: 5px; 305 | } 306 | 307 | .active:after { 308 | content: "\2212"; 309 | } 310 | 311 | .accordiontext { 312 | padding: 0 18px; 313 | background-color: white; 314 | max-height: 0; 315 | overflow: hidden; 316 | transition: max-height 0.2s ease-out; 317 | } 318 | 319 | input[type=text], select, textarea { 320 | width: 100%; 321 | padding: 12px; 322 | border: 1px solid #ccc; 323 | border-radius: 4px; 324 | resize: vertical; 325 | } 326 | 327 | label { 328 | padding: 12px 12px 12px 0; 329 | display: inline-block; 330 | } 331 | 332 | input[type=submit] { 333 | background-color: #ad77e6; 334 | color: white; 335 | padding: 12px 20px; 336 | border: none; 337 | border-radius: 4px; 338 | cursor: pointer; 339 | float: right; 340 | } 341 | 342 | input[type=submit]:hover { 343 | background-color: #9c52eb; 344 | } 345 | 346 | .container { 347 | border-radius: 5px; 348 | background-color: #edf1f7; 349 | padding: 20px; 350 | } 351 | -------------------------------------------------------------------------------- /mission/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SavirCSS - Our Mission 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | SavirCSS 15 | Docs 16 | Styles 17 | Use 18 |
19 | 22 |
23 | Contact Us 24 | Our Team 25 | Our Mission 26 |
27 |
28 |
29 | 30 |
31 |

SavirCSS was created by Savir Singh in order to minimize the web design process and make developing high-end dynamic and static websites with ease.

32 | 33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | 42 |
43 |

© 2022 SavirCSS by Savir Singh

44 |
45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /pressedbutton.css: -------------------------------------------------------------------------------- 1 | .pressed-button { 2 | border: none; 3 | padding: 20px; 4 | font-size: 20px; 5 | background-color: #f2ecdc; 6 | color: black; 7 | border-radius: 5px; 8 | box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24); 9 | cursor:url(cursor.png), auto; 10 | outline: none; 11 | transition: 0.2s all; 12 | } 13 | /* Adding transformation when the button is active */ 14 | 15 | .pressed-button:active { 16 | transform: scale(0.98); 17 | /* Scaling button to 0.98 to its original size */ 18 | box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); 19 | /* Lowering the shadow */ 20 | } 21 | -------------------------------------------------------------------------------- /savircssfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/savirsingh/SavirCSS/fcafb9e20c52bf6e2b9ac1b6549d976027ac79fe/savircssfont.woff -------------------------------------------------------------------------------- /team/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | SavirCSS - Our Team 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | SavirCSS 14 | Docs 15 | Styles 16 | Use 17 |
18 | 21 |
22 | Contact Us 23 | Our Team 24 | Our Mission 25 |
26 |
27 |
28 | 29 |
30 |

Our team consists of: Savir Singh.

31 | 32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | 41 |
42 |

© 2022 SavirCSS by Savir Singh

43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /themainbackup.css: -------------------------------------------------------------------------------- 1 | @import "pressedbutton.css"; 2 | @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"; 3 | 4 | #dark { 5 | background-color: #4b4852; 6 | color: #edf1f7; 7 | } 8 | 9 | body { 10 | font-family: SavirCSS Font; 11 | background-color: #edf1f7; 12 | cursor:url(cursor.png), auto; 13 | ::-webkit-scrollbar { 14 | width: 20px; 15 | ::-moz-selection { 16 | color: white; 17 | background: purple; 18 | } 19 | 20 | ::selection { 21 | color: white; 22 | background: purple; 23 | } 24 | } 25 | 26 | ::-webkit-scrollbar-track { 27 | box-shadow: inset 0 0 5px grey; 28 | border-radius: 10px; 29 | } 30 | 31 | ::-webkit-scrollbar-thumb { 32 | background: red; 33 | border-radius: 10px; 34 | } 35 | 36 | ::-webkit-scrollbar-thumb:hover { 37 | background: #b30000; 38 | } 39 | } 40 | 41 | button { 42 | padding: 20px; 43 | border: 0px; 44 | background-color: #f2ecdc; 45 | font-size: 20px; 46 | cursor:url(cursor.png), auto; 47 | } 48 | 49 | @font-face { 50 | font-family: 'SavirCSS Font'; 51 | font-style: normal; 52 | font-weight: 400; 53 | src: url(savircssfont.woff) format('woff'); 54 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 55 | } 56 | 57 | button { 58 | font-family: SavirCSS Font; 59 | } 60 | 61 | .navigation-top { 62 | font-family: SavirCSS Font; 63 | overflow: hidden; 64 | background-color: indigo; 65 | font-size: 20px; 66 | } 67 | 68 | .navigation-top a { 69 | float: left; 70 | color: #f2f2f2; 71 | text-align: center; 72 | padding: 24px 8px; 73 | text-decoration: none; 74 | font-size: 20px; 75 | } 76 | 77 | .navigation-top a:hover { 78 | background-color: white; 79 | color: black; 80 | } 81 | 82 | .navigation-top a.active { 83 | background-color: darkblue; 84 | color: white; 85 | } 86 | 87 | .dropdown { 88 | float: left; 89 | overflow: hidden; 90 | cursor:url(cursor.png), auto; 91 | } 92 | 93 | .dropdown .dropbtn { 94 | font-size: 20px; 95 | border: none; 96 | outline: none; 97 | color: white; 98 | padding: 24px 8px; 99 | background-color: inherit; 100 | font-family: inherit; 101 | margin: 0; 102 | } 103 | 104 | .dropdown-content { 105 | display: none; 106 | position: absolute; 107 | background-color: #edf1f7; 108 | min-width: 160px; 109 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 110 | z-index: 1; 111 | } 112 | 113 | .dropdown-content a { 114 | float: none; 115 | color: black; 116 | padding: 12px 16px; 117 | text-decoration: none; 118 | display: block; 119 | text-align: left; 120 | } 121 | 122 | .dropdown-content a:hover { 123 | background-color: white; 124 | } 125 | 126 | .dropdown:hover .dropdown-content { 127 | display: block; 128 | } 129 | 130 | .footer { 131 | position: fixed; 132 | left: 0; 133 | bottom: 0; 134 | width: 100%; 135 | background-color: #4b4852; 136 | color: white; 137 | text-align: center; 138 | cursor:url(cursor.png), auto; 139 | } 140 | 141 | .footer-unfixed { 142 | left: 0; 143 | bottom: 0; 144 | width: 100%; 145 | height: 32px; 146 | background-color: #4b4852; 147 | color: white; 148 | text-align: center; 149 | cursor:url(cursor.png), auto; 150 | } 151 | 152 | img:hover { 153 | opacity: 0.6; 154 | } 155 | 156 | @media only screen and (max-width: 600px) { 157 | img { 158 | width: 100%; 159 | } 160 | } 161 | 162 | .rainbow { 163 | 164 | text-shadow: 1px 1px 2px #000000; 165 | font-size:20px; 166 | -webkit-animation: rainbow 5s infinite; 167 | cursor:url(cursor.png), auto; 168 | 169 | -ms-animation: rainbow 5s infinite; 170 | 171 | animation: rainbow 5s infinite; 172 | } 173 | 174 | @-webkit-keyframes rainbow{ 175 | 0%{color: orange;} 176 | 10%{color: purple;} 177 | 20%{color: red;} 178 | 30%{color: CadetBlue;} 179 | 40%{color: yellow;} 180 | 50%{color: coral;} 181 | 60%{color: green;} 182 | 70%{color: cyan;} 183 | 80%{color: DeepPink;} 184 | 90%{color: DodgerBlue;} 185 | 100%{color: orange;} 186 | } 187 | 188 | @-ms-keyframes rainbow{ 189 | 0%{color: orange;} 190 | 10%{color: purple;} 191 | 20%{color: red;} 192 | 30%{color: CadetBlue;} 193 | 40%{color: yellow;} 194 | 50%{color: coral;} 195 | 60%{color: green;} 196 | 70%{color: cyan;} 197 | 80%{color: DeepPink;} 198 | 90%{color: DodgerBlue;} 199 | 100%{color: orange;} 200 | } 201 | 202 | @keyframes rainbow{ 203 | 0%{color: orange;} 204 | 10%{color: purple;} 205 | 20%{color: red;} 206 | 30%{color: CadetBlue;} 207 | 40%{color: yellow;} 208 | 50%{color: coral;} 209 | 60%{color: green;} 210 | 70%{color: cyan;} 211 | 80%{color: DeepPink;} 212 | 90%{color: DodgerBlue;} 213 | 100%{color: orange;} 214 | } 215 | 216 | 217 | code { 218 | background-color: lightgray; 219 | } 220 | 221 | ::-webkit-scrollbar { 222 | width: 16px; 223 | cursor:url(cursor.png), auto; 224 | } 225 | 226 | ::-webkit-scrollbar-track { 227 | box-shadow: inset 0 0 5px grey; 228 | border-radius: 10px; 229 | } 230 | 231 | ::-webkit-scrollbar-thumb { 232 | background: #ad77e6; 233 | border-radius: 10px; 234 | } 235 | 236 | ::-webkit-scrollbar-thumb:hover { 237 | background: #9c52eb; 238 | } 239 | 240 | .shadowed { 241 | 242 | text-shadow: 1px 1px 2px #000000; 243 | font-size:20px; 244 | } 245 | 246 | a { 247 | color: green; 248 | cursor:url(cursor.png), auto; 249 | text-decoration: none; 250 | } 251 | 252 | a:link { 253 | text-decoration: none; 254 | } 255 | 256 | a:visited { 257 | text-decoration: none; 258 | } 259 | 260 | a:hover { 261 | text-decoration: underline; 262 | } 263 | 264 | a:active { 265 | text-decoration: underline; 266 | } 267 | 268 | .linkbutton, .linkbutton:visited { 269 | background-color: #f2ecdc; 270 | color: #4b4852; 271 | padding: 14px 25px; 272 | text-align: center; 273 | text-decoration: none; 274 | display: inline-block; 275 | } 276 | 277 | .linkbutton:hover, a:active { 278 | background-color: #f2ecdc; 279 | text-decoration: none; 280 | } 281 | 282 | .accordion { 283 | background-color: #edf1f7; 284 | color: #444; 285 | cursor: pointer; 286 | padding: 18px; 287 | width: 100%; 288 | border: none; 289 | text-align: left; 290 | outline: none; 291 | font-size: 15px; 292 | transition: 0.4s; 293 | } 294 | 295 | .active, .accordion:hover { 296 | background-color: #ccc; 297 | } 298 | 299 | .accordion:after { 300 | content: '\002B'; 301 | color: #777; 302 | font-weight: bold; 303 | float: right; 304 | margin-left: 5px; 305 | } 306 | 307 | .active:after { 308 | content: "\2212"; 309 | } 310 | 311 | .accordiontext { 312 | padding: 0 18px; 313 | background-color: white; 314 | max-height: 0; 315 | overflow: hidden; 316 | transition: max-height 0.2s ease-out; 317 | } 318 | 319 | input[type=text], select, textarea { 320 | width: 100%; 321 | padding: 12px; 322 | border: 1px solid #ccc; 323 | border-radius: 4px; 324 | resize: vertical; 325 | } 326 | 327 | label { 328 | padding: 12px 12px 12px 0; 329 | display: inline-block; 330 | } 331 | 332 | input[type=submit] { 333 | background-color: #ad77e6; 334 | color: white; 335 | padding: 12px 20px; 336 | border: none; 337 | border-radius: 4px; 338 | cursor: pointer; 339 | float: right; 340 | } 341 | 342 | input[type=submit]:hover { 343 | background-color: #9c52eb; 344 | } 345 | 346 | .container { 347 | border-radius: 5px; 348 | background-color: #edf1f7; 349 | padding: 20px; 350 | } 351 | 352 | .basic-smile { 353 | background: url('https://savirsingh.github.io/SavirCSS/icons/basic-smile.png'); 354 | height: 20px; 355 | width: 20px; 356 | display: block; 357 | } 358 | 359 | .basic-shock { 360 | background: url('https://savirsingh.github.io/SavirCSS/icons/basic-shock.png'); 361 | height: 20px; 362 | width: 20px; 363 | display: block; 364 | } 365 | 366 | .basic-sussy { 367 | background: url('https://savirsingh.github.io/SavirCSS/icons/basic-sussy.png'); 368 | height: 20px; 369 | width: 20px; 370 | display: block; 371 | } 372 | 373 | .basic-mad { 374 | background: url('https://savirsingh.github.io/SavirCSS/icons/basic-mad.png'); 375 | height: 20px; 376 | width: 20px; 377 | display: block; 378 | } 379 | --------------------------------------------------------------------------------