├── project#111
├── index.html
├── 111.png
└── style.css
├── project#118
├── index.html
├── 118.png
└── style.css
├── project#120
├── index.html
├── 120.png
└── style.css
├── project#123
├── index.html
├── 123.png
└── style.css
├── project#121
├── index.html
├── 121.png
└── style.css
├── project#125
├── index.html
├── 125.png
└── style.css
├── project#108
├── index.html
├── 108.png
└── style.css
├── project#100
├── index.html
├── 100.png
└── style.css
├── project#101
├── 101.png
├── index.html
└── style.css
├── project#102
├── 102.png
├── index.html
└── style.css
├── project#103
├── 103.png
├── index.html
└── style.css
├── project#104
├── 104.png
├── index.html
└── style.css
├── project#105
├── 105.png
├── index.html
└── style.css
├── project#106
├── 106.png
├── index.html
└── style.css
├── project#107
├── 107.png
├── index.html
└── style.css
├── project#109
├── 109.png
├── index.html
└── style.css
├── project#110
├── 110.png
├── index.html
└── style.css
├── project#112
├── 112.png
├── index.html
└── style.css
├── project#113
├── 113.png
├── index.html
└── style.css
├── project#114
├── 114.png
├── index.html
└── style.css
├── project#115
├── 115.png
├── index.html
└── style.css
├── project#116
├── 116.png
├── index.html
└── style.css
├── project#117
├── 117.png
├── index.html
└── style.css
├── project#119
├── 119.png
├── index.html
└── style.css
├── project#122
├── 122.png
├── index.html
└── style.css
├── project#1
├── project#1.png
├── assets
│ └── buildings.jpg
├── index.html
└── style.css
├── project#5000
├── 5000.png
└── index.js
├── project#5001
├── 5001.png
└── index.js
├── project#5003
├── 5003.png
└── index.js
├── project#5004
├── 5004.png
└── index.js
├── project#124
├── style.css
└── index.html
├── project#5005
└── index.js
├── project#5007
└── index.js
├── project#5006
└── index.js
└── README.md
/project#111/index.html:
--------------------------------------------------------------------------------
1 | Button
2 |
--------------------------------------------------------------------------------
/project#118/index.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/project#120/index.html:
--------------------------------------------------------------------------------
1 | BUTTON
2 |
--------------------------------------------------------------------------------
/project#123/index.html:
--------------------------------------------------------------------------------
1 | Button
2 |
--------------------------------------------------------------------------------
/project#121/index.html:
--------------------------------------------------------------------------------
1 | Hi There!
2 |
--------------------------------------------------------------------------------
/project#125/index.html:
--------------------------------------------------------------------------------
1 | Shop now
2 |
--------------------------------------------------------------------------------
/project#108/index.html:
--------------------------------------------------------------------------------
1 |
2 | Amazing!
3 |
4 |
--------------------------------------------------------------------------------
/project#100/index.html:
--------------------------------------------------------------------------------
1 |
2 | Buraxta
3 |
4 |
--------------------------------------------------------------------------------
/project#100/100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buraxta/instagram-projects/HEAD/project#100/100.png
--------------------------------------------------------------------------------
/project#101/101.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buraxta/instagram-projects/HEAD/project#101/101.png
--------------------------------------------------------------------------------
/project#102/102.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buraxta/instagram-projects/HEAD/project#102/102.png
--------------------------------------------------------------------------------
/project#103/103.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buraxta/instagram-projects/HEAD/project#103/103.png
--------------------------------------------------------------------------------
/project#104/104.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buraxta/instagram-projects/HEAD/project#104/104.png
--------------------------------------------------------------------------------
/project#104/index.html:
--------------------------------------------------------------------------------
1 |
2 | buraxta.com
3 | Tooltip
4 |
5 |
--------------------------------------------------------------------------------
/project#109/index.html:
--------------------------------------------------------------------------------
1 |
2 |
HOVER ME
3 |
HOVER ME
4 |
HOVER ME
5 |
2 |
7 |
--------------------------------------------------------------------------------
/project#5001/index.js:
--------------------------------------------------------------------------------
1 | function multiply(a,b){
2 | return a*b;
3 | }
4 | function calculate(operation, a, b){
5 | return operation(a,b);
6 | }
7 |
8 | console.log(calculate(multiply, 2, 3));
--------------------------------------------------------------------------------
/project#110/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | buraxta
4 |
5 | buraxta
6 |
--------------------------------------------------------------------------------
/project#122/index.html:
--------------------------------------------------------------------------------
1 |
2 | First Name
5 |
6 |
--------------------------------------------------------------------------------
/project#103/index.html:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/project#1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
--------------------------------------------------------------------------------
/project#107/index.html:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/project#115/index.html:
--------------------------------------------------------------------------------
1 |
2 |
SUBSCRIBE
3 |
10 |
11 |
SUBMIT
12 |
2 |
3 |
4 |
5 |
6 |
7 | N
8 | FF
9 |
10 |
Demonstrating the Box Model
2 | The CSS box model is essentially a box that
3 | wraps around every HTML element.
4 | It consists of: borders, padding,
5 | margins, and the actual content.
6 | This text is the content of the box.
7 | We have added a 50px padding, 20px margin
8 | and a 15px green border.
9 |
--------------------------------------------------------------------------------
/project#119/index.html:
--------------------------------------------------------------------------------
1 |
2 |
16 |
17 |
--------------------------------------------------------------------------------
/project#114/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | HTML
5 |
6 |
7 | React
9 |
10 |
11 | Vue
13 |
14 |
15 |
--------------------------------------------------------------------------------
/project#106/index.html:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/project#105/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: grid;
3 | place-items: center;
4 | height: 100vh;
5 | background-color: #212121
6 | }
7 | .input {
8 | border-radius: 10px;
9 | outline: 2px solid #FEBF00;
10 | border: 0;
11 | font-family: 'Segoe UI';
12 | background-color: #e2e2e2;
13 | outline-offset: 3px;
14 | padding: 10px 1rem;
15 | transition: 0.25s;
16 | }
17 | .input:focus {
18 | outline-offset: 5px;
19 | background-color: #fff;
20 | }
--------------------------------------------------------------------------------
/project#5000/index.js:
--------------------------------------------------------------------------------
1 | //what's the output?
2 |
3 | let x = '{ "b": 1, "c": 2 }';
4 | let y = JSON.parse(x);
5 | console.log(typeof y);
6 |
7 | /* Explanation: The code creates a string x that contains a JSON-encoded object with two properties
8 | “b” and “c”, and assigns it to the variable x. The JSON.parse() method is then used to parse the JSON-encoded
9 | string x into a JavaScript object, which is assigned to the variable y.
10 | The console.log() statement then outputs the data type of y using the typeof operator.
11 | Since y is now an object, the output will be an object.*/
--------------------------------------------------------------------------------
/project#104/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: grid;
3 | place-items: center;
4 | height: 100vh;
5 | background-color: #e8e8e8;
6 | }
7 | .input {
8 | border: none;
9 | padding: 1rem;
10 | border-radius: 1rem;
11 | background: #e8e8e8;
12 | box-shadow: 20px 20px 60px #c5c5c5,
13 | -20px -20px 60px #ffffff;
14 | transition: 0.3s;
15 | }
16 | .input:focus {
17 | outline-color: #e8e8e8;
18 | background: #e8e8e8;
19 | box-shadow: inset 20px 20px 60px #c5c5c5,
20 | inset -20px -20px 60px #ffffff;
21 | transition: 0.3s;
22 | }
--------------------------------------------------------------------------------
/project#113/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #212121;
7 | }
8 | .input {
9 | border: none;
10 | outline: none;
11 | border-radius: 15px;
12 | padding: 1em;
13 | background-color: #ccc;
14 | box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
15 | transition: 300ms ease-in-out;
16 | }
17 | .input:focus {
18 | background-color: white;
19 | transform: scale(1.05);
20 | box-shadow: 13px 13px 100px #969696,
21 | -13px -13px 100px #ffffff;
22 | }
--------------------------------------------------------------------------------
/project#101/index.html:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/project#123/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #e8e8e8;
7 | }
8 | button {
9 | color: #090909;
10 | padding: 0.7em 1.7em;
11 | font-size: 18px;
12 | border-radius: 0.5em;
13 | background: #e8e8e8;
14 | cursor: pointer;
15 | border: 1px solid #e8e8e8;
16 | transition: all 0.3s;
17 | box-shadow: 6px 6px 12px #c5c5c5,
18 | -6px -6px 12px #ffffff;
19 | }
20 | button:hover {
21 | border: 1px solid white;
22 | }
23 | button:active {
24 | box-shadow: 4px 4px 12px #c5c5c5,
25 | -4px -4px 12px #ffffff;
26 | }
27 |
--------------------------------------------------------------------------------
/project#5005/index.js:
--------------------------------------------------------------------------------
1 | let x = 5
2 | console.log(x++)
3 | console.log(++x)
4 | console.log(x)
5 |
6 | /*
7 | let x = 5: This line creates a variable
8 | named x and assigns the value 5 to it.
9 |
10 | console.log(x++): This line prints the current
11 | value of x (which is 5) and then increments x
12 | by 1. However, the increment happens after the
13 | value is printed.
14 |
15 | console.log(++x): This line first increments x
16 | by 1 (which is now 7 after the previous line).
17 | Then, it prints the new value of x (which is 7).
18 |
19 | console.log(x): This line simply prints the
20 | current value of x (which is still 7 from the
21 | previous line).
22 | */
--------------------------------------------------------------------------------
/project#5007/index.js:
--------------------------------------------------------------------------------
1 | const obj = {
2 | value: 20,
3 | foo: function() {
4 | console.log(this.value);
5 | }
6 | };
7 |
8 | const bar = obj.foo;
9 |
10 | bar();
11 |
12 | /*
13 | In JavaScript, when a function is defined
14 | within an object (a method), it has access
15 | to a special keyword this that refers to the
16 | object itself. However, when you assign the
17 | method (obj.foo) to a separate variable (bar),
18 | this loses its context within obj.
19 |
20 | When you call bar(), JavaScript attempts to use
21 | the global this (which is usually window in browsers),
22 | but the global object doesn't have a property named
23 | value. Hence, the output becomes undefined.
24 | */
25 |
--------------------------------------------------------------------------------
/project#100/style.css:
--------------------------------------------------------------------------------
1 | .container{
2 | display: grid;
3 | place-items: center;
4 | height: 100vh;
5 | }
6 | button {
7 | background-color: #f39c12;
8 | border-radius: 4px;
9 | color: #2c3e50;
10 | cursor: pointer;
11 | padding: 15px 30px;
12 | font-size: 18px;
13 | font-weight: bold;
14 | letter-spacing: 1px;
15 | border: none;
16 | }
17 |
18 | button:hover {
19 | background-image: linear-gradient(90deg, #3498db 0%, #e74c3c 50%, #f1c40f 75%, #3498db 100%);
20 | animation: slidernbw 5s linear infinite;
21 | color: #fff;
22 | }
23 |
24 | @keyframes slidernbw {
25 | to {
26 | background-position: 20vw;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/project#120/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #e8e8e8;
7 | }
8 | button {
9 | outline: none;
10 | color: #DAA06D;
11 | padding: 1em;
12 | padding-left: 3em;
13 | padding-right: 3em;
14 | border: 2px dashed #DAA06D;
15 | border-radius: 15px;
16 | background-color: #EADDCA;
17 | box-shadow: 0 0 0 4px #EADDCA,
18 | 2px 2px 4px 2px rgba(0, 0, 0, 0.5);
19 | transition: .1s ease-in-out, .4s color;
20 | }
21 | button:active {
22 | transform: translateX(0.1em) translateY(0.1em);
23 | box-shadow: 0 0 0 4px #EADDCA,
24 | 1.5px 1.5px 2.5px 1.5px rgba(0, 0, 0, 0.5);
25 | }
--------------------------------------------------------------------------------
/project#5004/index.js:
--------------------------------------------------------------------------------
1 | let x = false;
2 | let y = "0";
3 | let z = 0;
4 |
5 | console.log(x == y);
6 | console.log(x == z);
7 |
8 | /*
9 | Explanation: In JavaScript, when you use the ==
10 | operator to compare values of different types,
11 | the operands will be converted to a common type
12 | before the comparison is made. This process is
13 | called type coercion.
14 |
15 | In the first comparison (x == y), x is a Boolean
16 | (false) and y is a string (“0”). Since both false
17 | and “0” can be coerced to the Boolean false, the
18 | comparison returns true.
19 |
20 | In the second comparison (x == z), x is a Boolean
21 | (false) and z is a number (0). Since both false
22 | and 0 can be coerced to the number 0, the
23 | comparison returns true.
24 | */
--------------------------------------------------------------------------------
/project#121/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #e8e8e8;
7 | }
8 | .btn {
9 | width: 130px;
10 | height: 40px;
11 | font-size: 1.1em;
12 | cursor: pointer;
13 | background-color: #171717;
14 | color: #fff;
15 | border: none;
16 | border-radius: 5px;
17 | transition: all .4s;
18 | }
19 | .btn:hover {
20 | border-radius: 5px;
21 | transform: translateY(-10px);
22 | box-shadow: 0 7px 0 -2px #f85959,
23 | 0 15px 0 -4px #39a2db,
24 | 0 16px 10px -3px #39a2db;
25 | }
26 | .btn:active {
27 | transition: all 0.2s;
28 | transform: translateY(-5px);
29 | box-shadow: 0 2px 0 -2px #f85959,
30 | 0 8px 0 -4px #39a2db,
31 | 0 12px 10px -3px #39a2db;
32 | }
33 |
--------------------------------------------------------------------------------
/project#5006/index.js:
--------------------------------------------------------------------------------
1 | let x = "5";
2 | let y = 2;
3 |
4 | console.log(x + y);
5 | console.log(x - y);
6 |
7 | /*
8 | Explanation: In the first statement, x is
9 | a string (“5”) and y is a number (2). When
10 | you use the + operator with a string and a
11 | number, JavaScript performs string concatenation:
12 | it converts the number to a string and then
13 | concatenates the two strings. So “5” and 2 are
14 | concatenated to produce the string “52”.
15 |
16 | In the second statement, x is still a string (“5”)
17 | and y is still a number (2). However, when you use
18 | the – operator with a string and a number, JavaScript
19 | attempts to convert the string to a number. In this case,
20 | “5” can be converted to the number 5, so the expression
21 | evaluates to 5 – 2, which is 3.
22 | */
--------------------------------------------------------------------------------
/project#5003/index.js:
--------------------------------------------------------------------------------
1 | let x = 0.1 + 0.2;
2 | let y = 0.3;
3 | console.log(x == y);
4 |
5 | /*
6 | Explanation: When you run this code and print the result
7 | of x == y, you may be surprised to see that it returns false.
8 | This is because of a limitation in how JavaScript handles
9 | floating-point numbers.
10 |
11 | In JavaScript, numbers are represented using the IEEE 754
12 | standard for floating-point arithmetic. This means that not
13 | all decimal numbers can be represented exactly as binary
14 | floating-point numbers.
15 |
16 | In particular, the decimal number 0.1 cannot be represented
17 | exactly in binary floating-point format. When you add 0.1 and
18 | 0.2 in JavaScript, the result is actually slightly larger than
19 | 0.3 due to rounding errors in the binary representation. Therefore,
20 | x is not equal to y.
21 | */
--------------------------------------------------------------------------------
/project#118/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #e8e8e8;
7 | }
8 | .loader {
9 | display: inline-flex;
10 | border: 10px solid #000;
11 | border-radius: 5px;
12 | }
13 | .loader::before,
14 | .loader::after {
15 | content: "0 1 2 3 4 5 6 7 8 9 0";
16 | font-size: 30px;
17 | font-family: monospace;
18 | font-weight: bold;
19 | line-height: 1em;
20 | height: 1em;
21 | width: 1.2ch;
22 | text-align: center;
23 | outline: 1px solid #000;
24 | color: #0000;
25 | text-shadow: 0 0 0 #000;
26 | overflow: hidden;
27 | animation: l4 2s infinite linear;
28 | }
29 | .loader::before {
30 | animation-duration: 4s;
31 | }
32 | @keyframes l4 {
33 | 100% {
34 | text-shadow: 0 var(--t, -10em) 0 #000;
35 | }
36 | }
--------------------------------------------------------------------------------
/project#122/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #212121;
7 | }
8 | .input-group {
9 | position: relative;
10 | }
11 | .input {
12 | border: solid 1.5px #9e9e9e;
13 | border-radius: 1rem;
14 | background: none;
15 | padding: 1rem;
16 | font-size: 1rem;
17 | color: #f5f5f5;
18 | transition: border 150ms cubic-bezier(0.4,0,0.2,1);
19 | }
20 | .user-label {
21 | position: absolute;
22 | left: 15px;
23 | color: #e8e8e8;
24 | pointer-events: none;
25 | transform: translateY(1rem);
26 | transition: 150ms cubic-bezier(0.4,0,0.2,1);
27 | }
28 | .input:focus, input:valid {
29 | outline: none;
30 | border: 1.5px solid #1a73e8;
31 | }
32 | .input:focus ~label, input:valid ~label {
33 | transform: translateY(-50%) scale(0.8);
34 | background-color: #212121;
35 | padding: 0 .2em;
36 | color: #2196f3;
37 | }
38 |
--------------------------------------------------------------------------------
/project#102/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | background-color: #212121;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | height: 100vh;
7 | }
8 | .loader {
9 | width: 150px;
10 | height: 150px;
11 | position: relative;
12 | display: flex;
13 | align-items: center;
14 | justify-content: center;
15 | }
16 |
17 | .loader_cube {
18 | position: absolute;
19 | width: 100%;
20 | height: 100%;
21 | border-radius: 30px;
22 | }
23 |
24 | .loader_cube--glowing {
25 | z-index: 2;
26 | background-color: rgba(255, 255, 255, 0.2);
27 | border: 2px solid rgba(255, 255, 255, 0.3);
28 | }
29 |
30 | .loader_cube--color {
31 | z-index: 1;
32 | filter: blur(2px);
33 | background: linear-gradient(135deg, #1afbf0, #da00ff);
34 | animation: loadtwo 2.5s ease-in-out infinite;
35 | }
36 |
37 | @keyframes loadtwo {
38 | 50% {
39 | transform: rotate(-80deg);
40 | }
41 | }
--------------------------------------------------------------------------------
/project#109/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #e8e8e8;
7 | }
8 | .card {
9 | width: 210px;
10 | height: 254px;
11 | border-radius: 4px;
12 | background: #212121;
13 | display: flex;
14 | gap: 5px;
15 | padding: .4em;
16 | }
17 | .card p {
18 | flex: 1;
19 | overflow: hidden;
20 | cursor: pointer;
21 | border-radius: 2px;
22 | transition: all .5s;
23 | background: #212121;
24 | border: 1px solid #ff5a91;
25 | display: flex;
26 | justify-content: center;
27 | align-items: center;
28 | }
29 | .card p:hover {
30 | flex: 4;
31 | }
32 | .card p span {
33 | min-width: 14em;
34 | padding: .5em;
35 | text-align: center;
36 | transform: rotate(-90deg);
37 | transition: all .5s;
38 | text-transform: uppercase;
39 | color: #ff568e;
40 | letter-spacing: .1em;
41 | }
42 | .card p:hover span {
43 | transform: rotate(0);
44 | }
--------------------------------------------------------------------------------
/project#125/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #e8e8e8;
7 | }
8 | .btn {
9 | padding: 1.1em 2em;
10 | background: none;
11 | border: 2px solid #fff;
12 | font-size: 15px;
13 | color: #131313;
14 | cursor: pointer;
15 | position: relative;
16 | overflow: hidden;
17 | transition: all 0.3s;
18 | border-radius: 12px;
19 | background-color: #ecd448;
20 | font-weight: bolder;
21 | box-shadow: 0 2px 0 2px #000;
22 | }
23 | .btn:before {
24 | content: "";
25 | position: absolute;
26 | width: 100px;
27 | height: 120%;
28 | background-color: #ff6700;
29 | top: 50%;
30 | transform: skewX(30deg)
31 | translate(-150%, -50%);
32 | transition: all 0.5s;
33 | }
34 | .btn:hover {
35 | background-color: #4cc9f0;
36 | color: #fff;
37 | box-shadow: 0 2px 0 2px #0d3b66;
38 | }
39 | .btn:hover::before {
40 | transform: skewX(30deg)
41 | translate(150%, -50%);
42 | transition-delay: 0.1s;
43 | }
44 | .btn:active {
45 | transform: scale(0.9);
46 | }
47 |
--------------------------------------------------------------------------------
/project#114/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #e8e8e8;
7 | }
8 | .radio-inputs {
9 | position: relative;
10 | display: flex;
11 | flex-wrap: wrap;
12 | border-radius: 0.5rem;
13 | background-color: #EEE;
14 | box-sizing: border-box;
15 | box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
16 | padding: 0.25rem;
17 | width: 300px;
18 | font-size: 14px;
19 | }
20 | .radio-inputs .radio {
21 | flex: 1 1 auto;
22 | text-align: center;
23 | }
24 | .radio-inputs .radio input {
25 | display: none;
26 | }
27 | .radio-inputs .radio .name {
28 | display: flex;
29 | cursor: pointer;
30 | align-items: center;
31 | justify-content: center;
32 | border-radius: 0.5rem;
33 | border: none;
34 | padding: .5rem 0;
35 | color: rgba(51, 65, 85, 1);
36 | transition: all .15s ease-in-out;
37 | }
38 | .radio-inputs .radio input:checked + .name {
39 | background-color: #fff;
40 | font-weight: 600;
41 | }
--------------------------------------------------------------------------------
/project#103/style.css:
--------------------------------------------------------------------------------
1 | .dots-container {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | height: 100vh;
6 | }
7 | .dot {
8 | height: 20px;
9 | width: 20px;
10 | margin-right: 10px;
11 | border-radius: 10px;
12 | background-color: #b3d4fc;
13 | animation: pulse 1.5s infinite ease-in-out;
14 | }
15 | .dot:last-child {
16 | margin-right: 0;
17 | }
18 | .dot:nth-child(1) {
19 | animation-delay: -0.3s;
20 | }
21 | .dot:nth-child(2) {
22 | animation-delay: -0.1s;
23 | }
24 | .dot:nth-child(3) {
25 | animation-delay: 0.1s;
26 | }
27 | @keyframes pulse {
28 | 0% {
29 | transform: scale(0.8);
30 | background-color: #b3d4fc;
31 | box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
32 | }
33 | 50% {
34 | transform: scale(1.2);
35 | background-color: #6793fb;
36 | box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
37 | }
38 | 100% {
39 | transform: scale(0.8);
40 | background-color: #b3d4fc;
41 | box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
42 | }
43 | }
--------------------------------------------------------------------------------
/project#112/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #e8e8e8;
7 | }
8 | .container {
9 | margin: auto;
10 | color: hsl(0, 0%, 30%);
11 | font-family: 'Arial';
12 | font-weight: 600;
13 | font-size: 5.5rem;
14 | display: flex;
15 | }
16 | .toggle {
17 | width: 60px;
18 | height: 155px;
19 | background-color: hsl(0, 0%, 80%);
20 | border-radius: 1.7rem;
21 | padding: 0.25rem 0;
22 | cursor: pointer;
23 | display: flex;
24 | justify-content: center;
25 | transition: background-color 300ms 300ms;
26 | }
27 | .toggle__circle {
28 | width: 50px;
29 | height: 50px;
30 | background-color: hsl(0, 0%, 95%);
31 | border-radius: 50%;
32 | margin-top: calc(155px - (0.25rem * 2) - 50px);
33 | transition: margin 500ms ease-in-out;
34 | }
35 | .toggle-text {
36 | display: flex;
37 | flex-direction: column;
38 | line-height: 0.8;
39 | }
40 | #check:checked + .toggle > .toggle__circle {
41 | margin-top: 0;
42 | }
43 | #check:checked + .toggle {
44 | background-color: #41a63c;
45 | }
--------------------------------------------------------------------------------
/project#110/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #212121;
7 | }
8 |
9 | /* === removing default button style ===*/
10 | .button {
11 | margin: 0;
12 | height: auto;
13 | background: transparent;
14 | padding: 0;
15 | border: none;
16 | cursor: pointer;
17 | }
18 |
19 | /* button styling */
20 | .button {
21 | letter-spacing: 3px;
22 | text-decoration: none;
23 | font-size: 2em;
24 | font-family: "Arial";
25 | position: relative;
26 | text-transform: uppercase;
27 | color: transparent;
28 | -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
29 | }
30 |
31 | /* this is the text, when you hover
32 | on button */
33 | .hover-text {
34 | position: absolute;
35 | box-sizing: border-box;
36 | content: attr(data-text);
37 | color: #37FF8B;
38 | width: 0%;
39 | inset: 0;
40 | border-right: 6px solid #37FF8B;
41 | overflow: hidden;
42 | transition: 0.5s;
43 | -webkit-text-stroke: 1px #37FF8B;
44 | }
45 |
46 | /* hover */
47 | .button:hover .hover-text {
48 | width: 100%;
49 | filter: drop-shadow(0 0 23px #37FF8B);
50 | }
--------------------------------------------------------------------------------
/project#107/style.css:
--------------------------------------------------------------------------------
1 | .slider {
2 | overflow: hidden;
3 | background-color: white;
4 | margin: 0 15px;
5 | height: 80px;
6 | width: 20px;
7 | border-radius: 30px;
8 | box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1),
9 | -15px -15px 30px #fff,
10 | inset -5px -5px 10px rgba(0, 0, 255, 0.1),
11 | inset 5px 5px 10px rgba(0, 0, 0, 0.1);
12 | position: relative;
13 | }
14 | .loader {
15 | display: flex;
16 | align-items: center;
17 | justify-content: center;
18 | height: 100vh;
19 | }
20 | .slider::before {
21 | content: "";
22 | position: absolute;
23 | top: 0;
24 | left: 0;
25 | height: 20px;
26 | width: 20px;
27 | border-radius: 100%;
28 | box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.3),
29 | 0px 420px 0 400px #2697f3,
30 | inset 0px 0px 0px rgba(0, 0, 0, 0.1);
31 | animation: animate_2 2.5s ease-in-out infinite;
32 | animation-delay: calc(-0.5s * var(--i));
33 | }
34 | @keyframes animate_2 {
35 | 0% {
36 | transform: translateY(250px);
37 | filter: hue-rotate(0deg);
38 | }
39 | 50% {
40 | transform: translateY(0);
41 | }
42 | 100% {
43 | transform: translateY(250px);
44 | filter: hue-rotate(180deg);
45 | }
46 | }
--------------------------------------------------------------------------------
/project#108/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #212121;
7 | }
8 | .button {
9 | display: block;
10 | cursor: pointer;
11 | color: white;
12 | margin: 0 auto;
13 | position: relative;
14 | text-decoration: none;
15 | font-weight: 600;
16 | border-radius: 6px;
17 | overflow: hidden;
18 | padding: 3px;
19 | isolation: isolate;
20 | }
21 | .button span {
22 | position: relative;
23 | display: block;
24 | padding: 1rem 1.5rem;
25 | font-size: 1.1rem;
26 | background: #000;
27 | border-radius: 3px;
28 | height: 100%;
29 | }
30 | .button::before {
31 | content: "";
32 | position: absolute;
33 | top: 0;
34 | left: 0;
35 | width: 400%;
36 | height: 100%;
37 | background: linear-gradient(115deg,#4fcf70,#fad648,
38 | #a767e5,#12bcfe,#44ce7b);
39 | background-size: 25% 100%;
40 | animation: anm .75s linear infinite;
41 | animation-play-state: paused;
42 | translate: -5% 0%;
43 | transition: translate 0.25s ease-out;
44 | }
45 | .button:hover::before {
46 | animation-play-state: running;
47 | transition-duration: 0.75s;
48 | translate: 0% 0%;
49 | }
50 | @keyframes anm {
51 | to {
52 | transform: translateX(-25%);
53 | }
54 | }
--------------------------------------------------------------------------------
/project#119/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #e8e8e8;
7 | }
8 | .container form {
9 | display: flex;
10 | flex-wrap: wrap;
11 | flex-direction: column;
12 | }
13 | .container label {
14 | display: flex;
15 | cursor: pointer;
16 | font-weight: 500;
17 | position: relative;
18 | overflow: hidden;
19 | margin-bottom: 0.375em;
20 | }
21 | .container label input {
22 | position: absolute;
23 | left: -9999px;
24 | }
25 | .container label input:checked + span {
26 | background-color: #414181;
27 | color: white;
28 | }
29 | .container label input:checked + span:before {
30 | box-shadow: inset 0 0 0 0.4375em #00005c;
31 | }
32 | .container label span {
33 | display: flex;
34 | align-items: center;
35 | padding: 0.375em 0.75em 0.375em 0.375em;
36 | border-radius: 99em;
37 | transition: 0.25s ease;
38 | color: #414181;
39 | }
40 | .container label span:hover {
41 | background-color: #d6d6e5;
42 | }
43 | .container label span:before {
44 | display: flex;
45 | flex-shrink: 0;
46 | content: "";
47 | background-color: #fff;
48 | width: 1.5em;
49 | height: 1.5em;
50 | border-radius: 50%;
51 | margin-right: 0.375em;
52 | transition: 0.25s ease;
53 | box-shadow: inset 0 0 0 0.125em #00005c;
54 | }
--------------------------------------------------------------------------------
/project#116/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #e8e8e8;
7 | }
8 | .burger {
9 | position: relative;
10 | width: 40px;
11 | height: 30px;
12 | background: transparent;
13 | cursor: pointer;
14 | display: block;
15 | }
16 | .burger input {
17 | display: none;
18 | }
19 | .burger span {
20 | display: block;
21 | position: absolute;
22 | height: 4px;
23 | width: 100%;
24 | background: black;
25 | border-radius: 9px;
26 | opacity: 1;
27 | left: 0;
28 | transform: rotate(0deg);
29 | transition: .25s ease-in-out;
30 | }
31 | .burger span:nth-of-type(1) {
32 | top: 0px;
33 | transform-origin: left center;
34 | }
35 | .burger span:nth-of-type(2) {
36 | top: 50%;
37 | transform: translateY(-50%);
38 | transform-origin: left center;
39 | }
40 | .burger span:nth-of-type(3) {
41 | top: 100%;
42 | transform-origin: left center;
43 | transform: translateY(-100%);
44 | }
45 | .burger input:checked ~span:nth-of-type(1) {
46 | transform: rotate(45deg);
47 | top: 0px;
48 | left: 5px;
49 | }
50 | .burger input:checked ~span:nth-of-type(2) {
51 | width: 0%;
52 | opacity: 0;
53 | }
54 | .burger input:checked ~span:nth-of-type(3) {
55 | transform: rotate(-45deg);
56 | top: 28px;
57 | left: 5px;
58 | }
--------------------------------------------------------------------------------
/project#117/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #e8e8e8;
7 | }
8 | .tooltip-container {
9 | --background:
10 | linear-gradient(45deg, #22d3ee, #1f9df5);
11 | position: relative;
12 | background: var(--background);
13 | cursor: pointer;
14 | transition: all 0.2s;
15 | font-size: 17px;
16 | padding: 0.7em 1.8em;
17 | border-radius: 8px;
18 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
19 | color: #fff;
20 | }
21 | .tooltip {
22 | position: absolute;
23 | top: 100%;
24 | left: 50%;
25 | transform: translateX(-50%) scale(0.8);
26 | transform-origin: bottom;
27 | padding: 0.3em 0.6em;
28 | opacity: 0;
29 | pointer-events: none;
30 | transition: all 0.3s;
31 | background: var(--background);
32 | border-radius: 4px;
33 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
34 | }
35 | .tooltip::before {
36 | position: absolute;
37 | content: "";
38 | height: 0.6em;
39 | width: 0.6em;
40 | bottom: -0.2em;
41 | left: 50%;
42 | transform: translate(-50%) rotate(45deg);
43 | background: var(--background);
44 | }
45 | .tooltip-container:hover .tooltip {
46 | top: -45px;
47 | opacity: 1;
48 | visibility: visible;
49 | pointer-events: auto;
50 | transform: translateX(-50%) scale(1);
51 | }
52 | .tooltip-container:hover {
53 | transform: scale(0.9);
54 | }
--------------------------------------------------------------------------------
/project#1/style.css:
--------------------------------------------------------------------------------
1 | .login{
2 | border: 1px solid black;
3 | width: 400px;
4 | height: 500px;
5 | background: url('assets/buildings.jpg');
6 | color: white;
7 | border-radius: 20px;
8 | box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.75);
9 | background-size: cover;
10 | background-position: center;
11 | overflow: hidden;
12 | }
13 | form{
14 | display: block;
15 | box-sizing: border-box;
16 | padding: 40px;
17 | width: 100%;
18 | height: 100%;
19 | backdrop-filter: brightness(40%);
20 | display: flex;
21 | flex-direction: column;
22 | gap: 5px;
23 | }
24 | h1{
25 | font-weight: normal;
26 | font-size: 24px;
27 | text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
28 | margin-bottom: 60px;
29 | }
30 | label{
31 | color: rgba(255, 255, 255, 0.8);
32 | text-transform: uppercase;
33 | font-size: 10px;
34 | letter-spacing: 2px;
35 | padding-left: 10px;
36 | }
37 | input{
38 | background : rgba(255, 255, 255, 0.3);
39 | height: 40px;
40 | line-height: 40px;
41 | border-radius: 20px;
42 | padding: 0px 20px;
43 | border: none;
44 | margin-bottom: 20px;
45 | color: white;
46 | }
47 | button{
48 | background: rgb(45,126,231);
49 | height: 40px;
50 | line-height: 40px;
51 | border-radius: 40px;
52 | border: none;
53 | margin: 10px 0px;
54 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
55 | color: white;
56 | font-size: 12px;
57 | text-transform: uppercase;
58 | }
59 |
--------------------------------------------------------------------------------
/project#111/style.css:
--------------------------------------------------------------------------------
1 | button {
2 | --glow-color: rgb(217, 176, 255);
3 | --glow-spread-color: rgba(191, 123, 255, 0.781);
4 | --enhanced-glow-color: rgb(231, 206, 255);
5 | --btn-color: rgb(100, 61, 136);
6 | border: .25em solid var(--glow-color);
7 | padding: 1em 3em;
8 | color: var(--glow-color);
9 | font-size: 15px;
10 | font-weight: bold;
11 | background-color: var(--btn-color);
12 | border-radius: 1em;
13 | outline: none;
14 | box-shadow: 0 0 1em .25em var(--glow-color),
15 | 0 0 4em 1em var(--glow-spread-color),
16 | inset 0 0 .75em .25em var(--glow-color);
17 | text-shadow: 0 0 .5em var(--glow-color);
18 | position: relative;
19 | transition: all 0.3s;
20 | }
21 |
22 | button::after {
23 | pointer-events: none;
24 | content: "";
25 | position: absolute;
26 | top: 120%;
27 | left: 0;
28 | height: 100%;
29 | width: 100%;
30 | background-color: var(--glow-spread-color);
31 | filter: blur(2em);
32 | opacity: .7;
33 | transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
34 | }
35 |
36 | button:hover {
37 | color: var(--btn-color);
38 | background-color: var(--glow-color);
39 | box-shadow: 0 0 1em .25em var(--glow-color),
40 | 0 0 4em 2em var(--glow-spread-color),
41 | inset 0 0 .75em .25em var(--glow-color);
42 | }
43 |
44 | button:active {
45 | box-shadow: 0 0 0.6em .25em var(--glow-color),
46 | 0 0 2.5em 2em var(--glow-spread-color),
47 | inset 0 0 .5em .25em var(--glow-color);
48 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HTML, CSS, and JS Tutorials
2 | Hi there!
3 | Here, you will find the source code for all of the HTML, CSS, and JS tutorials that I have posted on [Instagram](https://www.instagram.com/buraxta_).
4 |
5 | ## What you will find:
6 |
7 | - Engaging and informative tutorials: I have created these tutorials with the goal of making them both engaging and informative. I use a variety of teaching methods, including video demonstrations, code walkthroughs, and quizzes.
8 | - Beginner-friendly: These tutorials are designed for beginners, so you don't need any prior experience in HTML, CSS, or JS to follow along.
9 | - Well-organized code: The code for each tutorial is well-organized and easy to follow. I also include comments throughout the code to explain what each section does.
10 | ## How to use this repository:
11 |
12 | - To get started, clone this repository to your local machine.
13 | - Find the tutorial you want to follow: Once you have cloned the repository, you can find the tutorial you want to follow by browsing the files.
14 | - Open the tutorial in a text editor: Once you have found the tutorial you want to follow, open it in a text editor.
15 | - Follow the instructions: Follow the instructions in the tutorial to learn how to code in HTML, CSS, and JS.
16 |
17 | ## To Support:
18 | - Subscribe to my channel: @buraxta_
19 | - Like and comment on my videos.
20 | - Star and share the repository.
21 |
22 | ## If you have any questions:
23 |
24 | - If you have any questions about the tutorials, please feel free to contact me. I am always happy to help!
25 |
26 | I hope you enjoy these tutorials!
27 |
28 |
--------------------------------------------------------------------------------
/project#115/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | background-color: #e8e8e8;
7 | }
8 | .subscribe {
9 | position: relative;
10 | height: 140px;
11 | width: 240px;
12 | padding: 20px;
13 | background-color: #FFF;
14 | border-radius: 4px;
15 | color: #333;
16 | box-shadow: 0px 0px 60px 5px rgba(0, 0, 0, 0.4);
17 | }
18 | .subscribe:after {
19 | position: absolute;
20 | content: "";
21 | right: -10px;
22 | bottom: 18px;
23 | width: 0;
24 | height: 0;
25 | border-left: 0px solid transparent;
26 | border-right: 10px solid transparent;
27 | border-bottom: 10px solid #1a044e;
28 | }
29 | .subscribe p {
30 | text-align: center;
31 | font-size: 20px;
32 | font-weight: bold;
33 | letter-spacing: 4px;
34 | line-height: 28px;
35 | }
36 | .subscribe input {
37 | position: absolute;
38 | bottom: 30px;
39 | border: none;
40 | border-bottom: 1px solid #d4d4d4;
41 | padding: 10px;
42 | width: 82%;
43 | background: transparent;
44 | transition: all .25s ease;
45 | }
46 | .subscribe input:focus {
47 | outline: none;
48 | border-bottom: 1px solid #0d095e;
49 | font-family: 'Gill Sans', 'sans-serif';
50 | }
51 | .subscribe .submit-btn {
52 | position: absolute;
53 | border-radius: 30px;
54 | border-bottom-right-radius: 0;
55 | border-top-right-radius: 0;
56 | background-color: #0f0092;
57 | color: #FFF;
58 | padding: 12px 25px;
59 | display: inline-block;
60 | font-size: 12px;
61 | font-weight: bold;
62 | letter-spacing: 5px;
63 | right: -10px;
64 | bottom: -20px;
65 | cursor: pointer;
66 | transition: all .25s ease;
67 | box-shadow: -5px 6px 20px 0px
68 | rgba(26, 26, 26, 0.4);
69 | }
70 | .subscribe .submit-btn:hover {
71 | background-color: #07013d;
72 | box-shadow: -5px 6px 20px 0px
73 | rgba(88, 88, 88, 0.569);
74 | }
--------------------------------------------------------------------------------
/project#106/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: grid;
3 | place-items: center;
4 | height: 100vh;
5 | background-color: #212121;
6 | }
7 | .login-box {
8 | position: absolute;
9 | top: 50%;
10 | left: 50%;
11 | width: 400px;
12 | padding: 40px;
13 | transform: translate(-50%, -50%);
14 | background: rgba(24, 20, 20, 0.987);
15 | box-sizing: border-box;
16 | box-shadow: 0 15px 25px rgba(0,0,0,.6);
17 | border-radius: 10px;
18 | }
19 | .login-box .user-box {
20 | position: relative;
21 | }
22 | .login-box .user-box input {
23 | width: 100%;
24 | padding: 10px 0;
25 | font-size: 16px;
26 | color: #fff;
27 | margin-bottom: 30px;
28 | border: none;
29 | border-bottom: 1px solid #fff;
30 | outline: none;
31 | background: transparent;
32 | }
33 | .login-box .user-box label {
34 | position: absolute;
35 | top: 0;
36 | left: 0;
37 | padding: 10px 0;
38 | font-size: 16px;
39 | color: #fff;
40 | pointer-events: none;
41 | transition: .5s;
42 | }
43 | .login-box .user-box input:focus ~label,
44 | .login-box .user-box input:valid ~label {
45 | top: -20px;
46 | left: 0;
47 | color: #bdb8b8;
48 | font-size: 12px;
49 | }
50 | .login-box form a {
51 | position: relative;
52 | display: inline-block;
53 | padding: 10px 20px;
54 | color: #ffffff;
55 | font-size: 16px;
56 | text-decoration: none;
57 | text-transform: uppercase;
58 | overflow: hidden;
59 | transition: .5s;
60 | margin-top: 40px;
61 | letter-spacing: 4px;
62 | }
63 | .login-box a:hover {
64 | background: #03f40f;
65 | color: #fff;
66 | border-radius: 5px;
67 | box-shadow: 0 0 5px #03f40f,
68 | 0 0 25px #03f40f,
69 | 0 0 50px #03f40f,
70 | 0 0 100px #03f40f;
71 | }
72 | .login-box a span {
73 | position: absolute;
74 | display: block;
75 | }
76 | @keyframes btn-anim1 {
77 | 0% {
78 | left: -100%;
79 | }
80 | 50%,100% {
81 | left: 100%;
82 | }
83 | }
84 | .login-box a span:nth-child(1) {
85 | bottom: 2px;
86 | left: -100%;
87 | width: 100%;
88 | height: 2px;
89 | background: linear-gradient(90deg, transparent, #03f40f);
90 | animation: btn-anim1 2s linear infinite;
91 | }
--------------------------------------------------------------------------------
/project#101/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #212121;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | height: 100vh;
7 | }
8 | .form-container {
9 | width: 400px;
10 | background: linear-gradient(#212121, #212121) padding-box,
11 | linear-gradient(145deg, transparent 35%,
12 | #e81cff, #40c9ff) border-box;
13 | border: 2px solid transparent;
14 | padding: 32px 24px;
15 | font-size: 14px;
16 | font-family: inherit;
17 | color: white;
18 | display: flex;
19 | flex-direction: column;
20 | gap: 20px;
21 | box-sizing: border-box;
22 | border-radius: 16px;
23 | background-size: 200% 100%;
24 | animation: gradient 5s ease infinite;
25 | }
26 | @keyframes gradient {
27 | 0% { background-position: 0% 50%; }
28 | 50% { background-position: 100% 50%; }
29 | 100% { background-position: 0% 50%; }
30 | }
31 | .form-container button:active {
32 | transform: scale(0.95);
33 | }
34 | .form-container .form {
35 | display: flex;
36 | flex-direction: column;
37 | gap: 20px;
38 | }
39 | .form-container .form-group {
40 | display: flex;
41 | flex-direction: column;
42 | gap: 2px;
43 | }
44 | .form-container .form-group label {
45 | display: block;
46 | margin-bottom: 5px;
47 | color: #717171;
48 | font-weight: 600;
49 | font-size: 12px;
50 | }
51 | .form-container .form-group input {
52 | width: 90%;
53 | padding: 12px 16px;
54 | border-radius: 8px;
55 | color: #fff;
56 | font-family: inherit;
57 | background-color: transparent;
58 | border: 1px solid #414141;
59 | }
60 | .form-container .form-group textarea {
61 | width: 90%;
62 | padding: 12px 16px;
63 | border-radius: 8px;
64 | resize: none;
65 | color: #fff;
66 | height: 96px;
67 | border: 1px solid #414141;
68 | background-color: transparent;
69 | font-family: inherit;
70 | }
71 | .form-container .form-group input::placeholder {
72 | opacity: 0.5;
73 | }
74 | .form-container .form-group input:focus {
75 | outline: none;
76 | border-color: #e81cff;
77 | }
78 | .form-container .form-group textarea:focus {
79 | outline: none;
80 | border-color: #e81cff;
81 | }
82 | .form-container .form-submit-btn {
83 | display: flex;
84 | align-items: flex-start;
85 | justify-content: center;
86 | align-self: flex-start;
87 | font-family: inherit;
88 | color: #717171;
89 | font-weight: 600;
90 | width: 40%;
91 | background: #313131;
92 | border: 1px solid #414141;
93 | padding: 12px 16px;
94 | font-size: inherit;
95 | gap: 8px;
96 | margin-top: 8px;
97 | cursor: pointer;
98 | border-radius: 6px;
99 | }
100 | .form-container .form-submit-btn:hover {
101 | background-color: #fff;
102 | border-color: #fff;
103 | }
--------------------------------------------------------------------------------