diff --git a/Devs.html b/Devs.html index 664d8a5..1cb1385 100644 --- a/Devs.html +++ b/Devs.html @@ -1,6 +1,5 @@ - @@ -13,20 +12,17 @@ - Developers -

Developers

Hi Users

-
← @@ -47,7 +43,6 @@

Developers

RSA Encryption
-
-
@@ -80,42 +74,40 @@

Developers

Making this website was a very knwoledgeful experience . I got to know so many new things about Web Development and the beauty of CSS

-Abhyuday Tripathi

-

While working on this project I got to know some basics of HTML, CSS and Javascript. We tried our best to get this webpage to its present form.

-Ananya Tewari

-
- + \ No newline at end of file diff --git a/ModularAddMulSub.html b/ModularAddMulSub.html index 0cfca56..d4dde65 100644 --- a/ModularAddMulSub.html +++ b/ModularAddMulSub.html @@ -11,20 +11,17 @@ - Modular Arithmetic -

Number theory

Theory Of Numbers

-
← @@ -45,7 +42,6 @@

Number theory

RSA Encryption
-
- @@ -104,92 +97,87 @@

(A + B) mod C = (A mod C + B mod C) mod C<
LHS = RHS = 1

-

Visualisation of Modular addition:

Mod Clock
-

Subtacting Modular Expressions

-

The same concept is used while subtracting the modular expressions. -
-

-

(A - B) mod C = (A mod C - B mod C) mod C

-

Multiplying Modular Expressions

-

The same concept is used while multiplying the modular expressions. +

Subtacting Modular Expressions

+

The same concept is used while subtracting the modular expressions. +
+

+

(A - B) mod C = (A mod C - B mod C) mod C

+

Multiplying Modular Expressions

+

The same concept is used while multiplying the modular expressions. +
+

+

(A * B) mod C = (A mod C * B mod C) mod C

+

Source : KhanAcademy.com

+ +
+

Mod Addition


-

-

(A * B) mod C = (A mod C * B mod C) mod C

-

Source : KhanAcademy.com

- -
- -
-

Mod Addition

-
-
-
-
- - - -

-

- -

+
+
+ + + +
+
+

+ +

+
-
-
-

Mod Subtraction

-
-
-
-
- - - -
+
+

Mod Subtraction


-

- -

+
+
+
+ + + +
+
+

+ +

+
-
-
-

Mod Multiplication

-
-
-
-
- - - -
+
+

Mod Multiplication

+

-

- -

+
+
+ + + +
+
+

+ +

+
-
- -
-
-

References

-
- mitocw -
-

MIT OpenCourseWare By Prof.Andrew Sutherland

- +
+
+

References

+
+ mitocw +
+

MIT OpenCourseWare By Prof.Andrew Sutherland

+ +
-
- - - - + + + \ No newline at end of file diff --git a/Primality.html b/Primality.html index b089553..f646493 100644 --- a/Primality.html +++ b/Primality.html @@ -11,7 +11,6 @@ - Title @@ -42,7 +41,6 @@

Algorithms

RSA Encryption
-
- - @@ -95,65 +89,61 @@

Introduction To Primes

Examples With Visualisation

Primes as Locks :

-
-

As you can see in the above explanation, Primes are the builing blocks of any natural number.

-

For example, if we take any two large Prime numbers, say P1 = 709 and P2 = 733 -
their product, i.e. P1*P2 = 519697.... -
that was easy, we could just use a calculator for that, but ; -
if I ask you to find two primes that multiply to give 519697 as a product, -
then its difficult, right ?! -
-

-

Well, its not your fault, there are limits to our calculation prowess and we accept it. In the case of Large Primes, Brute Force gets increasingly difficult. Here is an example of that :

-
-

As you can see Time increases exponentially as the size of input increases.

-

But how can we check if a number is Prime or not ..... -
Well we have a tool for that; Check the below section.

-

Source : KhanAcademy.com

- - - -
-

Primality Checker

-
-
-
-
- -

-

- -

-
-
- - -
-
-

References

-
- mitocw +

As you can see in the above explanation, Primes are the builing blocks of any natural number.

+

For example, if we take any two large Prime numbers, say P1 = 709 and P2 = 733 +
their product, i.e. P1*P2 = 519697.... +
that was easy, we could just use a calculator for that, but ; +
if I ask you to find two primes that multiply to give 519697 as a product, +
then its difficult, right ?! +
+

+

Well, its not your fault, there are limits to our calculation prowess and we accept it. In the case of Large Primes, Brute Force gets increasingly difficult. Here is an example of that :

+
+

As you can see Time increases exponentially as the size of input increases.

+

But how can we check if a number is Prime or not ..... +
Well we have a tool for that; Check the below section.

+

Source : KhanAcademy.com

+
+
+

Primality Checker

+
+
+
+
+ +
+
+

+ +

+
+
-

MIT OpenCourseWare By Prof.Andrew Sutherland

- +
+
+

References

+
+ mitocw +
+

MIT OpenCourseWare By Prof.Andrew Sutherland

+ +
+
- - + + + - + function closeNav() { + document.getElementById("mySidenav").style.width = "0"; + } + + \ No newline at end of file diff --git a/PrimeFact.html b/PrimeFact.html index 1ec7341..d1bbc91 100644 --- a/PrimeFact.html +++ b/PrimeFact.html @@ -11,20 +11,17 @@ - Prime Factors -

Number theory

Theory Of Numbers

-
← @@ -45,7 +42,6 @@

Number theory

RSA Encryption
-
- @@ -96,45 +89,42 @@

Introduction To Factorisation

Examples With Visualisation

Primes as Locks :

-
-

As you can see in above explanation Primes are the builing blocks of any natural number.

-

Wanna see how Check Below

-

Source : KhanAcademy.com

- - -
-

Prime Keys Of A Number (Prime Factors)

-
-
-
-
- -

-

- -

+

As you can see in above explanation Primes are the builing blocks of any natural number.

+

Wanna see how Check Below

+

Source : KhanAcademy.com

-
- - -
-
-

References

-
- mitocw +
+

Prime Keys Of A Number (Prime Factors)

+
+
+
+
+ +
+
+

+ +

+
-

MIT OpenCourseWare By Prof.Andrew Sutherland

- +
+
+
+

References

+
+ mitocw +
+

MIT OpenCourseWare By Prof.Andrew Sutherland

+ +
-
- - - - + + + \ No newline at end of file diff --git a/RSA.html b/RSA.html index c8e4613..95029ee 100644 --- a/RSA.html +++ b/RSA.html @@ -1,6 +1,5 @@ - @@ -13,20 +12,17 @@ - RSA -

Number theory

Theory Of Numbers

-
← @@ -47,7 +43,6 @@

Number theory

RSA Encryption
-
- @@ -151,14 +143,11 @@

R S A Function EvaluationF(m,k) = mk mod (n)

Encryption : F(m,e) = me mod n = c (cipher) where m is the message , e is the public key and n is modulus

Decryption : F(c,d) = cd mod n = m the message

- -

R S A Keygen



-
@@ -196,11 +185,9 @@

R S A Keygen

-
-

References

@@ -214,17 +201,16 @@

References

- diff --git a/bubble.html b/bubble.html index 0442af4..59b49c6 100644 --- a/bubble.html +++ b/bubble.html @@ -11,7 +11,6 @@ - Bubble Sort @@ -51,7 +50,6 @@

Algorithms

RSA Encryption -
- - @@ -97,65 +91,59 @@

Bubble Sort

Introduction To Bubble Sort

Bubble Sort is an extremely basic and inefficient method for sorting . Bubble Sort uses the method of Comparison for sorting.

In the worst case, total comparisons can go upto n2 i.e. O(n2) where n is the size of input.

-

Examples With Visualisation

Comparisons


example dataset [3,2,5,4,6,1]

-
-
-

Algorithm

-
-

for i->0 to size-1 -
  for j->0 to size-1 -
     if a[j]>a[j+1] -
      swap(a[j],a[j+1]) -
     else -
      Continue -

+
+

Algorithm

+
+

for i->0 to size-1 +
  for j->0 to size-1 +
     if a[j]>a[j+1] +
      swap(a[j],a[j+1]) +
     else +
      Continue +

+
- - -
-

Bubble Sort

-
-
-
- - - +
+

Bubble Sort

+

-

- - -

-

+
+
+ +
+
+

+ + +

+

+
-
- -
-
-

References

-
- mitocw -
-

MIT OpenCourseWare By Prof.Charles E. Leirson

-

- +
+
+

References

+
+ mitocw +
+

MIT OpenCourseWare By Prof.Charles E. Leirson

+

+ +
-
- - - - - - + + } + + \ No newline at end of file diff --git a/congo.html b/congo.html index 8d590f8..c7f2478 100644 --- a/congo.html +++ b/congo.html @@ -11,7 +11,6 @@ - Congruency Modulo @@ -51,7 +50,6 @@

Number Theory

RSA Encryption -
- @@ -103,57 +98,54 @@

Introduction To Congruence Modulo

Examples With Visualisation


-
-

Suppose we labelled 5 slices 0, 1, 2, 3, 4.

-

Then, for each of the integers, we put it into a slice that matched the value of the integer mod 5. Think of these slices as buckets, which hold a set of numbers. For example, 26 would go in the slice labelled 1,

-

because 26 mod 5 = 1 Above is a figure that shows some integers that we would find in each of the slices.

-

It would be useful to have a way of expressing that numbers belonged in the same slice. -
(Notice 26 is in the same slice as 1, 6, 11, 16, 21 in above example) -

A common way of expressing that two values are in the same slice, is to say they are in the same equivalence class. -
The way we express this mathematically for mod C is: A≡B (mod C)

-

In plain English, the above statement says "A is congruent to B modulo C."

-

Examining the expression closer:

-

1. ≡ is the symbol for congruence, which means the values A and B are in the same equivalence class.

-

2. The (mod C) within the parenthesis tells us what operation we applied to A and B.

-

3. When we have both of these, we call "≡" congruence modulo C.

-

Source : KhanAcademy.com

- - - -
-

Congruency Tester

-
-
-
-
- - - -

-

- -

+

Suppose we labelled 5 slices 0, 1, 2, 3, 4.

+

Then, for each of the integers, we put it into a slice that matched the value of the integer mod 5. Think of these slices as buckets, which hold a set of numbers. For example, 26 would go in the slice labelled 1,

+

because 26 mod 5 = 1 Above is a figure that shows some integers that we would find in each of the slices.

+

It would be useful to have a way of expressing that numbers belonged in the same slice. +
(Notice 26 is in the same slice as 1, 6, 11, 16, 21 in above example) +

A common way of expressing that two values are in the same slice, is to say they are in the same equivalence class. +
The way we express this mathematically for mod C is: A≡B (mod C)

+

In plain English, the above statement says "A is congruent to B modulo C."

+

Examining the expression closer:

+

1. ≡ is the symbol for congruence, which means the values A and B are in the same equivalence class.

+

2. The (mod C) within the parenthesis tells us what operation we applied to A and B.

+

3. When we have both of these, we call "≡" congruence modulo C.

+

Source : KhanAcademy.com

-
- - -
-
-

References

-
- mitocw +
+

Congruency Tester

+
+
+
+
+ + + +
+
+

+ +

+
-

MIT OpenCourseWare By Prof.Andrew Sutherland

- +
+
+
+

References

+
+ mitocw +
+

MIT OpenCourseWare By Prof.Andrew Sutherland

+ +
-
- - - - + + + + \ No newline at end of file diff --git a/css/algo.css b/css/algo.css index 7734d8d..30b1fe0 100644 --- a/css/algo.css +++ b/css/algo.css @@ -1,6 +1,7 @@ * { box-sizing: border-box; } + input { width: 50%; padding: 12px 20px; @@ -18,49 +19,51 @@ input:focus { } .button { - display: inline-block; - border-radius: 4px; - background-color: #f4511e; - border: none; - color: #FFFFFF; - text-align: center; - font-size: 25px; - padding: 20px; - width: 200px; + display: inline-block; + border-radius: 4px; + background-color: #f4511e; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 25px; + padding: 20px; + width: 200px; height: 70px; - transition:all 0.5s; - cursor: pointer; - margin: 5px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; } .button span { - cursor: pointer; - display: inline-block; - position: relative; - transition: 0.5s; + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; } .button span:after { - content: '\00bb'; - position: absolute; - opacity: 0; - top: 0; - right: -20px; - transition: 0.5s; + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; } .button:hover span { - padding-right: 25px; + padding-right: 25px; } .button:hover span:after { - opacity: 1; - right: 0; + opacity: 1; + right: 0; } -p{ + +p { font-family: 'Raleway'; font-size: 20px; } + body { padding: 10px; @@ -68,14 +71,15 @@ body { color: black; background-attachment: fixed; } + .header { - padding: 30px; + padding: 30px; color: white; text-align: center; - background-image:url('img\\patterns_shade_bright_texture_50419_2560x1440.jpg'); - font-family: 'Merriweather'; - /* background-color: #070606;*/ + background-image: url('img\\patterns_shade_bright_texture_50419_2560x1440.jpg'); + font-family: 'Merriweather'; + /* background-color: #070606;*/ background-attachment: fixed; } @@ -85,23 +89,26 @@ body { font-family: 'Merriweather'; } -.header h2{ + +.header h2 { font-family: 'Merriweather'; font-size: 30px; } + .sticky { - position: fixed; - top: 0; - width: 100%; + position: fixed; + top: 0; + width: 100%; } + /* Style the top navigation bar */ .topnav { width: 100%; background-color: black; font-family: 'Raleway', arial; - position: -webkit-sticky; - position: sticky; - top: 0; + position: -webkit-sticky; + position: sticky; + top: 0; } @@ -135,44 +142,56 @@ div.sticky { float: right; width: 25%; - position: -webkit-sticky; + position: -webkit-sticky; position: sticky; - top:5% ; + top: 5%; height: 10%; padding-left: 8px; } + #myBtn { - position: fixed; - bottom: 20px; - right: 30px; - z-index: 99; - font-size: 18px; - border: none; - outline: none; - background-color: red; - color: white; - cursor: pointer; - padding: 15px; - border-radius: 4px; -margin-right: 350px; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + font-size: 18px; + border: none; + outline: none; + background-color: red; + color: white; + cursor: pointer; + padding: 15px; + border-radius: 4px; + margin-right: 350px; } + #myBtn:hover { - background-color: #555; + background-color: #555; } + .modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top */ - padding-top: 100px; /* Location of the box */ + display: none; + /* Hidden by default */ + position: fixed; + /* Stay in place */ + z-index: 1; + /* Sit on top */ + padding-top: 100px; + /* Location of the box */ left: 0; top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + width: 100%; + /* Full width */ + height: 100%; + /* Full height */ + overflow: auto; + /* Enable scroll if needed */ + background-color: rgb(0, 0, 0); + /* Fallback color */ + background-color: rgba(0, 0, 0, 0.4); + /* Black w/ opacity */ align-content: center; } @@ -202,56 +221,60 @@ margin-right: 350px; text-decoration: none; cursor: pointer; } + /* The dropdown container */ .dropdown { - display: inline-block; + display: inline-block; } /* Dropdown button */ .dropdown .dropbtn { - border: none; - outline: none; - color: white; - padding: 14px 16px; - background-color: inherit; - font-family: inherit; /* Important for vertical align on mobile phones */ - margin: 0; /* Important for vertical align on mobile phones */ + border: none; + outline: none; + color: white; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + /* Important for vertical align on mobile phones */ + margin: 0; + /* Important for vertical align on mobile phones */ } /* Add a red background color to navbar links on hover*/ -.navbar a:hover, .dropdown:hover .dropbtn { - background-color: orangered; +.navbar a:hover, +.dropdown:hover .dropbtn { + background-color: orangered; } /* Dropdown content (hidden by default) */ .dropdown-content { - display: none; - position: absolute; - background-color: white; - min-width: 166.5px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; + display: none; + position: absolute; + background-color: white; + min-width: 166.5px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { - float: none; - color: black; - padding: 14px 16px; - text-decoration: none; - display: block; - text-align: center; + float: none; + color: black; + padding: 14px 16px; + text-decoration: none; + display: block; + text-align: center; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { - background-color: black; + background-color: black; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { - display: block; + display: block; } @@ -261,7 +284,7 @@ margin-right: 350px; padding: 50px; margin-top: 20px; - background-color: rgba(255,255,255,0.2); + background-color: rgba(255, 255, 255, 0.2); } /* Clear floats after the columns */ @@ -281,7 +304,10 @@ margin-right: 350px; /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media (max-width: 800px) { - .leftcolumn, .rightcolumn, { + + .leftcolumn, + .rightcolumn, + { width: 100%; padding: 0; } @@ -294,32 +320,36 @@ margin-right: 350px; width: 100%; } } + .fa { - padding: 20px; - font-size: 30px; - width: 30px; - text-align: center; - text-decoration: none; - margin: 5px 2px; - border-radius: 50%; + padding: 20px; + font-size: 30px; + width: 30px; + text-align: center; + text-decoration: none; + margin: 5px 2px; + border-radius: 50%; } + .fa:hover { opacity: 0.7; } .fa-facebook { - background: #3B5998; - color: white; + background: #3B5998; + color: white; } + .fa-twitter { - background: #55ACEE; - color: white; + background: #55ACEE; + color: white; } .fa-google { - background: #dd4b39; - color: white; + background: #dd4b39; + color: white; } + .sidenav { height: 100%; width: 0; @@ -331,7 +361,7 @@ margin-right: 350px; overflow-x: hidden; transition: 0.5s; padding-top: 60px; - text-align:center; + text-align: center; } .sidenav a { @@ -342,13 +372,13 @@ margin-right: 350px; display: block; transition: 0.3s; -position: -webkit-sticky; - position: sticky; - top: 0; + position: -webkit-sticky; + position: sticky; + top: 0; } -.sidenav a:hover{ +.sidenav a:hover { color: #f1f1f1; font-size: 30px; } @@ -362,6 +392,11 @@ position: -webkit-sticky; } @media screen and (max-height: 450px) { - .sidenav {padding-top: 15px;} - .sidenav a {font-size: 18px;} -} + .sidenav { + padding-top: 15px; + } + + .sidenav a { + font-size: 18px; + } +} \ No newline at end of file diff --git a/css/cony.css b/css/cony.css index 55b5568..38956c7 100644 --- a/css/cony.css +++ b/css/cony.css @@ -1,6 +1,7 @@ * { box-sizing: border-box; } + input { width: 50%; padding: 12px 20px; @@ -18,46 +19,47 @@ input:focus { } .button { - display: inline-block; - border-radius: 4px; - background-color: #f4511e; - border: none; - color: #FFFFFF; - text-align: center; - font-size: 25px; - padding: 20px; - width: 200px; + display: inline-block; + border-radius: 4px; + background-color: #f4511e; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 25px; + padding: 20px; + width: 200px; height: 70px; - transition:all 0.5s; - cursor: pointer; - margin: 5px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; } .button span { - cursor: pointer; - display: inline-block; - position: relative; - transition: 0.5s; + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; } .button span:after { - content: '\00bb'; - position: absolute; - opacity: 0; - top: 0; - right: -20px; - transition: 0.5s; + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; } .button:hover span { - padding-right: 25px; + padding-right: 25px; } .button:hover span:after { - opacity: 1; - right: 0; + opacity: 1; + right: 0; } -p{ + +p { font-family: 'Raleway'; font-size: 20px; } @@ -76,9 +78,9 @@ body { padding: 30px; color: white; text-align: center; - background-image:url('img\\color-abstract-wallpaper-12.jpg'); - font-family: 'Merriweather'; - /* background-color: #070606;*/ + background-image: url('img\\color-abstract-wallpaper-12.jpg'); + font-family: 'Merriweather'; + /* background-color: #070606;*/ background-attachment: fixed; } @@ -88,23 +90,26 @@ body { font-family: 'Merriweather'; } -.header h2{ + +.header h2 { font-family: 'Merriweather'; font-size: 30px; } + .sticky { - position: fixed; - top: 0; - width: 100%; + position: fixed; + top: 0; + width: 100%; } + /* Style the top navigation bar */ .topnav { width: 100%; background-color: black; font-family: 'Raleway', arial; - position: -webkit-sticky; - position: sticky; - top: 0; + position: -webkit-sticky; + position: sticky; + top: 0; } @@ -138,26 +143,36 @@ div.sticky { float: right; width: 25%; - position: -webkit-sticky; + position: -webkit-sticky; position: sticky; - top:5% ; + top: 5%; height: 10%; padding-left: 8px; } + .modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top */ - padding-top: 100px; /* Location of the box */ + display: none; + /* Hidden by default */ + position: fixed; + /* Stay in place */ + z-index: 1; + /* Sit on top */ + padding-top: 100px; + /* Location of the box */ left: 0; top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + width: 100%; + /* Full width */ + height: 100%; + /* Full height */ + overflow: auto; + /* Enable scroll if needed */ + background-color: rgb(0, 0, 0); + /* Fallback color */ + background-color: rgba(0, 0, 0, 0.4); + /* Black w/ opacity */ align-content: center; } @@ -187,24 +202,27 @@ div.sticky { text-decoration: none; cursor: pointer; } + #myBtn { - position: fixed; - bottom: 20px; - right: 30px; - z-index: 99; - font-size: 18px; - border: none; - outline: none; - background-color: red; - color: white; - cursor: pointer; - padding: 15px; - border-radius: 4px; -margin-right: 350px; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + font-size: 18px; + border: none; + outline: none; + background-color: red; + color: white; + cursor: pointer; + padding: 15px; + border-radius: 4px; + margin-right: 350px; } + #myBtn:hover { - background-color: #555; + background-color: #555; } + /* Fake image */ .fakeimg { background-color: black; @@ -212,56 +230,60 @@ margin-right: 350px; padding: 20px; } + /* The dropdown container */ .dropdown { - display: inline-block; + display: inline-block; } /* Dropdown button */ .dropdown .dropbtn { - border: none; - outline: none; - color: white; - padding: 14px 16px; - background-color: inherit; - font-family: inherit; /* Important for vertical align on mobile phones */ - margin: 0; /* Important for vertical align on mobile phones */ + border: none; + outline: none; + color: white; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + /* Important for vertical align on mobile phones */ + margin: 0; + /* Important for vertical align on mobile phones */ } /* Add a red background color to navbar links on hover*/ -.navbar a:hover, .dropdown:hover .dropbtn { - background-color: orangered; +.navbar a:hover, +.dropdown:hover .dropbtn { + background-color: orangered; } /* Dropdown content (hidden by default) */ .dropdown-content { - display: none; - position: absolute; - background-color: white; - min-width: 166.5px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; + display: none; + position: absolute; + background-color: white; + min-width: 166.5px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { - float: none; - color: black; - padding: 14px 16px; - text-decoration: none; - display: block; - text-align: center; + float: none; + color: black; + padding: 14px 16px; + text-decoration: none; + display: block; + text-align: center; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { - background-color: black; + background-color: black; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { - display: block; + display: block; } @@ -271,7 +293,7 @@ margin-right: 350px; padding: 50px; margin-top: 20px; - background-color: rgba(255,255,255,0.4); + background-color: rgba(255, 255, 255, 0.4); } /* Clear floats after the columns */ @@ -291,7 +313,10 @@ margin-right: 350px; /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media (max-width: 800px) { - .leftcolumn, .rightcolumn, { + + .leftcolumn, + .rightcolumn, + { width: 100%; padding: 0; } @@ -304,32 +329,36 @@ margin-right: 350px; width: 100%; } } + .fa { - padding: 20px; - font-size: 30px; - width: 30px; - text-align: center; - text-decoration: none; - margin: 5px 2px; - border-radius: 50%; + padding: 20px; + font-size: 30px; + width: 30px; + text-align: center; + text-decoration: none; + margin: 5px 2px; + border-radius: 50%; } + .fa:hover { opacity: 0.7; } .fa-facebook { - background: #3B5998; - color: white; + background: #3B5998; + color: white; } + .fa-twitter { - background: #55ACEE; - color: white; + background: #55ACEE; + color: white; } .fa-google { - background: #dd4b39; - color: white; + background: #dd4b39; + color: white; } + .sidenav { height: 100%; width: 0; @@ -341,7 +370,7 @@ margin-right: 350px; overflow-x: hidden; transition: 0.5s; padding-top: 60px; - text-align:center; + text-align: center; } .sidenav a { @@ -352,13 +381,13 @@ margin-right: 350px; display: block; transition: 0.3s; -position: -webkit-sticky; - position: sticky; - top: 0; + position: -webkit-sticky; + position: sticky; + top: 0; } -.sidenav a:hover{ +.sidenav a:hover { color: #f1f1f1; font-size: 30px; } @@ -372,6 +401,11 @@ position: -webkit-sticky; } @media screen and (max-height: 450px) { - .sidenav {padding-top: 15px;} - .sidenav a {font-size: 18px;} -} + .sidenav { + padding-top: 15px; + } + + .sidenav a { + font-size: 18px; + } +} \ No newline at end of file diff --git a/css/devs.css b/css/devs.css index df5b0f6..a7d2493 100644 --- a/css/devs.css +++ b/css/devs.css @@ -1,6 +1,7 @@ * { box-sizing: border-box; } + input { width: 50%; padding: 12px 20px; @@ -18,55 +19,57 @@ input:focus { } .button { - display: inline-block; - border-radius: 4px; - background-color: #f4511e; - border: none; - color: #FFFFFF; - text-align: center; - font-size: 25px; - padding: 20px; - width: 200px; + display: inline-block; + border-radius: 4px; + background-color: #f4511e; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 25px; + padding: 20px; + width: 200px; height: 70px; - transition:all 0.5s; - cursor: pointer; - margin: 5px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; } .button span { - cursor: pointer; - display: inline-block; - position: relative; - transition: 0.5s; + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; } .button span:after { - content: '\00bb'; - position: absolute; - opacity: 0; - top: 0; - right: -20px; - transition: 0.5s; + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; } .button:hover span { - padding-right: 25px; + padding-right: 25px; } .button:hover span:after { - opacity: 1; - right: 0; + opacity: 1; + right: 0; } -p{ + +p { font-family: 'Raleway'; font-size: 20px; } + body { - + padding: 10px; background-image: url('img\\test.jpg'); color: black; - + background-attachment: fixed; } @@ -74,34 +77,37 @@ body { padding: 30px; text-align: center; background-image: url('img\\color-abstract-wallpaper-18.jpg'); - font-family: 'Merriweather'; + font-family: 'Merriweather'; } .header h1 { font-size: 50px; font-family: 'Merriweather'; - + } -.header h2{ + +.header h2 { font-family: 'Merriweather'; font-size: 30px; } + .sticky { - position: fixed; - top: 0; - width: 100%; + position: fixed; + top: 0; + width: 100%; } + /* Style the top navigation bar */ .topnav { width: 100%; overflow: hidden; background-color: black; font-family: 'Raleway', arial; - position: -webkit-sticky; - position: sticky; - top: 0; - - + position: -webkit-sticky; + position: sticky; + top: 0; + + } /* Style the topnav links */ @@ -112,15 +118,15 @@ body { text-align: center; padding: 14px 16px; text-decoration: none; - position: -webkit-sticky; - position: sticky; - top: 0; - + position: -webkit-sticky; + position: sticky; + top: 0; + } /* Change color on hover */ .topnav a:hover { - background-color: rgb(128,0,42); + background-color: rgb(128, 0, 42); color: white; font-family: "Raleway"; } @@ -145,7 +151,7 @@ body { position: absolute; background-color: black; min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } @@ -158,7 +164,9 @@ body { } /* Change color of dropdown links on hover */ -.dropdown-content a:hover {background-color: #f1f1f1} +.dropdown-content a:hover { + background-color: #f1f1f1 +} /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { @@ -172,7 +180,7 @@ body { /* Create two unequal columns that floats next to each other */ /* Left column */ -.leftcolumn { +.leftcolumn { float: left; width: 75%; } @@ -181,48 +189,51 @@ body { div.sticky { float: right; width: 25%; - - position: -webkit-sticky; + + position: -webkit-sticky; position: sticky; - top:5% ; + top: 5%; height: 5%; - + padding-left: 12px; - + } + #myBtn { - position: fixed; - bottom: 20px; - right: 30px; - z-index: 99; - font-size: 18px; - border: none; - outline: none; - background-color: red; - color: white; - cursor: pointer; - padding: 15px; - border-radius: 4px; -margin-right: 350px; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + font-size: 18px; + border: none; + outline: none; + background-color: red; + color: white; + cursor: pointer; + padding: 15px; + border-radius: 4px; + margin-right: 350px; } + #myBtn:hover { - background-color: #555; + background-color: #555; } + /* Fake image */ .fakeimg { background-color: black; width: 100%; padding: 20px; - + } /* Add a card effect for articles */ .card { - + padding: 50px; margin-top: 20px; - background-color: rgba(255,255,255,0.1); + background-color: rgba(255, 255, 255, 0.1); } /* Clear floats after the columns */ @@ -242,7 +253,10 @@ margin-right: 350px; /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media (max-width: 800px) { - .leftcolumn, .rightcolumn, { + + .leftcolumn, + .rightcolumn, + { width: 100%; padding: 0; } @@ -255,32 +269,36 @@ margin-right: 350px; width: 100%; } } + .fa { - padding: 20px; - font-size: 30px; - width: 30px; - text-align: center; - text-decoration: none; - margin: 5px 2px; - border-radius: 50%; + padding: 20px; + font-size: 30px; + width: 30px; + text-align: center; + text-decoration: none; + margin: 5px 2px; + border-radius: 50%; } + .fa:hover { opacity: 0.7; } .fa-facebook { - background: #3B5998; - color: white; + background: #3B5998; + color: white; } + .fa-twitter { - background: #55ACEE; - color: white; + background: #55ACEE; + color: white; } .fa-google { - background: #dd4b39; - color: white; + background: #dd4b39; + color: white; } + .sidenav { height: 100%; width: 0; @@ -288,11 +306,11 @@ margin-right: 350px; z-index: 1; top: 0; left: 0; - background-color:rgba(5, 4, 4, 0.84); + background-color: rgba(5, 4, 4, 0.84); overflow-x: hidden; transition: 0.5s; padding-top: 60px; - text-align:center; + text-align: center; } .sidenav a { @@ -303,14 +321,14 @@ margin-right: 350px; display: block; transition: 0.3s; position: fixed; - -position: -webkit-sticky; - position: sticky; - top: 0; - + + position: -webkit-sticky; + position: sticky; + top: 0; + } -.sidenav a:hover{ +.sidenav a:hover { color: #f1f1f1; font-size: 30px; } @@ -324,6 +342,11 @@ position: -webkit-sticky; } @media screen and (max-height: 450px) { - .sidenav {padding-top: 15px;} - .sidenav a {font-size: 18px;} -} + .sidenav { + padding-top: 15px; + } + + .sidenav a { + font-size: 18px; + } +} \ No newline at end of file diff --git a/css/fron.css b/css/fron.css index 82fde13..832bd89 100644 --- a/css/fron.css +++ b/css/fron.css @@ -1,6 +1,7 @@ * { box-sizing: border-box; } + input { width: 50%; padding: 12px 20px; @@ -18,49 +19,51 @@ input:focus { } .button { - display: inline-block; - border-radius: 4px; - background-color: #f4511e; - border: none; - color: #FFFFFF; - text-align: center; - font-size: 25px; - padding: 20px; - width: 200px; + display: inline-block; + border-radius: 4px; + background-color: #f4511e; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 25px; + padding: 20px; + width: 200px; height: 70px; - transition:all 0.5s; - cursor: pointer; - margin: 5px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; } .button span { - cursor: pointer; - display: inline-block; - position: relative; - transition: 0.7s; + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.7s; } .button span:after { - content: '\00bb'; - position: absolute; - opacity: 0; - top: 0; - right: -20px; - transition: 0.5s; + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; } .button:hover span { - padding-right: 25px; + padding-right: 25px; } .button:hover span:after { - opacity: 1; - right: 0; + opacity: 1; + right: 0; } -p{ + +p { font-family: 'Raleway'; font-size: 20px; } + body { padding: 10px; @@ -75,9 +78,9 @@ body { padding: 30px; color: white; text-align: center; - background-image:url('img\\kzpkzsanwohrdcdimavr.jpg'); - font-family: 'Merriweather'; - /* background-color: #070606;*/ + background-image: url('img\\kzpkzsanwohrdcdimavr.jpg'); + font-family: 'Merriweather'; + /* background-color: #070606;*/ background-attachment: fixed; } @@ -87,24 +90,27 @@ body { font-family: 'Merriweather'; } -.header h2{ + +.header h2 { font-family: 'Merriweather'; font-size: 30px; } + .sticky { - position: fixed; - top: 0; - width: 100%; + position: fixed; + top: 0; + width: 100%; } + /* Style the top navigation bar */ .topnav { width: 100%; overflow: hidden; background-color: #070606; font-family: 'Raleway', arial; - position: -webkit-sticky; - position: sticky; - top: 0; + position: -webkit-sticky; + position: sticky; + top: 0; } @@ -116,9 +122,9 @@ body { text-align: center; padding: 14px 16px; text-decoration: none; - position: -webkit-sticky; - position: sticky; - top: 0; + position: -webkit-sticky; + position: sticky; + top: 0; } @@ -131,56 +137,59 @@ body { /* The dropdown container */ .dropdown { - float: left; - overflow: hidden; + float: left; + overflow: hidden; } /* Dropdown button */ .dropdown .dropbtn { - border: none; - outline: none; - color: white; - padding: 14px 16px; - background-color: inherit; - font-family: inherit; /* Important for vertical align on mobile phones */ - margin: 0; /* Important for vertical align on mobile phones */ + border: none; + outline: none; + color: white; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + /* Important for vertical align on mobile phones */ + margin: 0; + /* Important for vertical align on mobile phones */ } /* Add a red background color to navbar links on hover*/ -.navbar a:hover, .dropdown:hover .dropbtn { - background-color: orangered; +.navbar a:hover, +.dropdown:hover .dropbtn { + background-color: orangered; } /* Dropdown content (hidden by default) */ .dropdown-content { - display: none; - position: fixed; + display: none; + position: fixed; - background-color: white; - min-width: 166.5px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; + background-color: white; + min-width: 166.5px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { - float: none; - color: black; - padding: 14px 16px; - text-decoration: none; - display: block; - text-align: center; + float: none; + color: black; + padding: 14px 16px; + text-decoration: none; + display: block; + text-align: center; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { - background-color: black; + background-color: black; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { - display: block; + display: block; } /* Create two unequal columns that floats next to each other */ @@ -189,6 +198,7 @@ body { float: left; width: 100%; } + .rightcolumn { float: right; width: 50%; @@ -198,44 +208,56 @@ body { div.sticky { float: right; width: 50%; - object-position: center; - position: -webkit-sticky; + object-position: center; + position: -webkit-sticky; position: sticky; top: 5%; height: 50%; padding-left: 20px; } + #myBtn { - position: fixed; - bottom: 20px; - right: 30px; - z-index: 99; - font-size: 18px; - border: none; - outline: none; - background-color: red; - color: white; - cursor: pointer; - padding: 15px; - border-radius: 4px; -margin-right: 350px; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + font-size: 18px; + border: none; + outline: none; + background-color: red; + color: white; + cursor: pointer; + padding: 15px; + border-radius: 4px; + margin-right: 350px; } + #myBtn:hover { - background-color: #555; + background-color: #555; } + .modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top */ - padding-top: 100px; /* Location of the box */ + display: none; + /* Hidden by default */ + position: fixed; + /* Stay in place */ + z-index: 1; + /* Sit on top */ + padding-top: 100px; + /* Location of the box */ left: 0; top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + width: 100%; + /* Full width */ + height: 100%; + /* Full height */ + overflow: auto; + /* Enable scroll if needed */ + background-color: rgb(0, 0, 0); + /* Fallback color */ + background-color: rgba(0, 0, 0, 0.4); + /* Black w/ opacity */ align-content: center; } @@ -265,6 +287,7 @@ margin-right: 350px; text-decoration: none; cursor: pointer; } + /* Add a card effect for articles */ .card { @@ -272,7 +295,7 @@ margin-right: 350px; width: 50%; padding: 50px; margin-top: 20px; - background-color: rgba(255,255,255,0.4); + background-color: rgba(255, 255, 255, 0.4); } @@ -293,7 +316,10 @@ margin-right: 350px; /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media (max-width: 800px) { - .leftcolumn, .rightcolumn, { + + .leftcolumn, + .rightcolumn, + { width: 100%; padding: 0; } @@ -306,32 +332,36 @@ margin-right: 350px; width: 100%; } } + .fa { - padding: 20px; - font-size: 30px; - width: 30px; - text-align: center; - text-decoration: none; - margin: 5px 2px; - border-radius: 50%; + padding: 20px; + font-size: 30px; + width: 30px; + text-align: center; + text-decoration: none; + margin: 5px 2px; + border-radius: 50%; } + .fa:hover { opacity: 0.7; } .fa-facebook { - background: #3B5998; - color: white; + background: #3B5998; + color: white; } + .fa-twitter { - background: #55ACEE; - color: white; + background: #55ACEE; + color: white; } .fa-google { - background: #dd4b39; - color: white; + background: #dd4b39; + color: white; } + .sidenav { height: 100%; width: 0; @@ -343,7 +373,7 @@ margin-right: 350px; overflow-x: hidden; transition: 0.5s; padding-top: 60px; - text-align:center; + text-align: center; } .sidenav a { @@ -354,13 +384,13 @@ margin-right: 350px; display: block; transition: 0.3s; -position: -webkit-sticky; - position: sticky; - top: 0; + position: -webkit-sticky; + position: sticky; + top: 0; } -.sidenav a:hover{ +.sidenav a:hover { color: #f1f1f1; font-size: 30px; } @@ -372,7 +402,13 @@ position: -webkit-sticky; font-size: 36px; margin-left: 50px; } + @media screen and (max-height: 450px) { - .sidenav {padding-top: 15px;} - .sidenav a {font-size: 18px;} -} + .sidenav { + padding-top: 15px; + } + + .sidenav a { + font-size: 18px; + } +} \ No newline at end of file diff --git a/css/ma.css b/css/ma.css index 8f5bea8..38753ef 100644 --- a/css/ma.css +++ b/css/ma.css @@ -1,6 +1,7 @@ * { box-sizing: border-box; } + input { width: 50%; padding: 12px 20px; @@ -18,49 +19,51 @@ input:focus { } .button { - display: inline-block; - border-radius: 4px; - background-color: #f4511e; - border: none; - color: #FFFFFF; - text-align: center; - font-size: 25px; - padding: 20px; - width: 200px; + display: inline-block; + border-radius: 4px; + background-color: #f4511e; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 25px; + padding: 20px; + width: 200px; height: 70px; - transition:all 0.5s; - cursor: pointer; - margin: 5px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; } .button span { - cursor: pointer; - display: inline-block; - position: relative; - transition: 0.5s; + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; } .button span:after { - content: '\00bb'; - position: absolute; - opacity: 0; - top: 0; - right: -20px; - transition: 0.5s; + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; } .button:hover span { - padding-right: 25px; + padding-right: 25px; } .button:hover span:after { - opacity: 1; - right: 0; + opacity: 1; + right: 0; } -p{ + +p { font-family: 'Raleway'; font-size: 20px; } + body { padding: 10px; @@ -68,14 +71,15 @@ body { color: black; background-attachment: fixed; } + .header { - padding: 30px; + padding: 30px; color: white; text-align: center; - background-image:url('img\\cyan_magenta_colors-1920x1080.jpg'); - font-family: 'Merriweather'; - /* background-color: #070606;*/ + background-image: url('img\\cyan_magenta_colors-1920x1080.jpg'); + font-family: 'Merriweather'; + /* background-color: #070606;*/ background-attachment: fixed; } @@ -85,23 +89,26 @@ body { font-family: 'Merriweather'; } -.header h2{ + +.header h2 { font-family: 'Merriweather'; font-size: 30px; } + .sticky { - position: fixed; - top: 0; - width: 100%; + position: fixed; + top: 0; + width: 100%; } + /* Style the top navigation bar */ .topnav { width: 100%; background-color: black; font-family: 'Raleway', arial; - position: -webkit-sticky; - position: sticky; - top: 0; + position: -webkit-sticky; + position: sticky; + top: 0; } @@ -134,44 +141,56 @@ div.sticky { float: right; width: 25%; - position: -webkit-sticky; + position: -webkit-sticky; position: sticky; - top:5% ; + top: 5%; height: 10%; padding-left: 8px; } + #myBtn { - position: fixed; - bottom: 20px; - right: 30px; - z-index: 99; - font-size: 18px; - border: none; - outline: none; - background-color: red; - color: white; - cursor: pointer; - padding: 15px; - border-radius: 4px; -margin-right: 350px; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + font-size: 18px; + border: none; + outline: none; + background-color: red; + color: white; + cursor: pointer; + padding: 15px; + border-radius: 4px; + margin-right: 350px; } + #myBtn:hover { - background-color: #555; + background-color: #555; } + .modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top */ - padding-top: 100px; /* Location of the box */ + display: none; + /* Hidden by default */ + position: fixed; + /* Stay in place */ + z-index: 1; + /* Sit on top */ + padding-top: 100px; + /* Location of the box */ left: 0; top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + width: 100%; + /* Full width */ + height: 100%; + /* Full height */ + overflow: auto; + /* Enable scroll if needed */ + background-color: rgb(0, 0, 0); + /* Fallback color */ + background-color: rgba(0, 0, 0, 0.4); + /* Black w/ opacity */ align-content: center; } @@ -201,56 +220,60 @@ margin-right: 350px; text-decoration: none; cursor: pointer; } + /* The dropdown container */ .dropdown { - display: inline-block; + display: inline-block; } /* Dropdown button */ .dropdown .dropbtn { - border: none; - outline: none; - color: white; - padding: 14px 16px; - background-color: inherit; - font-family: inherit; /* Important for vertical align on mobile phones */ - margin: 0; /* Important for vertical align on mobile phones */ + border: none; + outline: none; + color: white; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + /* Important for vertical align on mobile phones */ + margin: 0; + /* Important for vertical align on mobile phones */ } /* Add a red background color to navbar links on hover*/ -.navbar a:hover, .dropdown:hover .dropbtn { - background-color: orangered; +.navbar a:hover, +.dropdown:hover .dropbtn { + background-color: orangered; } /* Dropdown content (hidden by default) */ .dropdown-content { - display: none; - position: absolute; - background-color: white; - min-width: 166.5px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; + display: none; + position: absolute; + background-color: white; + min-width: 166.5px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { - float: none; - color: black; - padding: 14px 16px; - text-decoration: none; - display: block; - text-align: center; + float: none; + color: black; + padding: 14px 16px; + text-decoration: none; + display: block; + text-align: center; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { - background-color: black; + background-color: black; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { - display: block; + display: block; } @@ -260,7 +283,7 @@ margin-right: 350px; padding: 50px; margin-top: 20px; - background-color: rgba(255,255,255,0.2); + background-color: rgba(255, 255, 255, 0.2); } /* Clear floats after the columns */ @@ -280,7 +303,10 @@ margin-right: 350px; /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media (max-width: 800px) { - .leftcolumn, .rightcolumn, { + + .leftcolumn, + .rightcolumn, + { width: 100%; padding: 0; } @@ -293,32 +319,36 @@ margin-right: 350px; width: 100%; } } + .fa { - padding: 20px; - font-size: 30px; - width: 30px; - text-align: center; - text-decoration: none; - margin: 5px 2px; - border-radius: 50%; + padding: 20px; + font-size: 30px; + width: 30px; + text-align: center; + text-decoration: none; + margin: 5px 2px; + border-radius: 50%; } + .fa:hover { opacity: 0.7; } .fa-facebook { - background: #3B5998; - color: white; + background: #3B5998; + color: white; } + .fa-twitter { - background: #55ACEE; - color: white; + background: #55ACEE; + color: white; } .fa-google { - background: #dd4b39; - color: white; + background: #dd4b39; + color: white; } + .sidenav { height: 100%; width: 0; @@ -330,7 +360,7 @@ margin-right: 350px; overflow-x: hidden; transition: 0.5s; padding-top: 60px; - text-align:center; + text-align: center; } .sidenav a { @@ -341,13 +371,13 @@ margin-right: 350px; display: block; transition: 0.3s; -position: -webkit-sticky; - position: sticky; - top: 0; + position: -webkit-sticky; + position: sticky; + top: 0; } -.sidenav a:hover{ +.sidenav a:hover { color: #f1f1f1; font-size: 30px; } @@ -361,6 +391,11 @@ position: -webkit-sticky; } @media screen and (max-height: 450px) { - .sidenav {padding-top: 15px;} - .sidenav a {font-size: 18px;} -} + .sidenav { + padding-top: 15px; + } + + .sidenav a { + font-size: 18px; + } +} \ No newline at end of file diff --git a/css/new.css b/css/new.css index 3134a09..08d5427 100644 --- a/css/new.css +++ b/css/new.css @@ -1,6 +1,7 @@ * { box-sizing: border-box; } + input { width: 50%; padding: 12px 20px; @@ -18,49 +19,51 @@ input:focus { } .button { - display: inline-block; - border-radius: 4px; - background-color: #f4511e; - border: none; - color: #FFFFFF; - text-align: center; - font-size: 25px; - padding: 20px; - width: 200px; + display: inline-block; + border-radius: 4px; + background-color: #f4511e; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 25px; + padding: 20px; + width: 200px; height: 70px; - transition:all 0.5s; - cursor: pointer; - margin: 5px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; } .button span { - cursor: pointer; - display: inline-block; - position: relative; - transition: 0.7s; + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.7s; } .button span:after { - content: '\00bb'; - position: absolute; - opacity: 0; - top: 0; - right: -20px; - transition: 0.5s; + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; } .button:hover span { - padding-right: 25px; + padding-right: 25px; } .button:hover span:after { - opacity: 1; - right: 0; + opacity: 1; + right: 0; } -p{ + +p { font-family: 'Raleway'; font-size: 20px; } + body { padding: 10px; @@ -74,9 +77,9 @@ body { padding: 30px; color: white; text-align: center; - background-image:url('img\\Abstract Orange Red Texture Desktop Wallpaper.jpg'); - font-family: 'Merriweather'; - /* background-color: #070606;*/ + background-image: url('img\\Abstract Orange Red Texture Desktop Wallpaper.jpg'); + font-family: 'Merriweather'; + /* background-color: #070606;*/ background-attachment: fixed; } @@ -86,23 +89,26 @@ body { font-family: 'Merriweather'; } -.header h2{ + +.header h2 { font-family: 'Merriweather'; font-size: 30px; } + .sticky { - position: fixed; - top: 0; - width: 100%; + position: fixed; + top: 0; + width: 100%; } + /* Style the top navigation bar */ .topnav { width: 100%; background-color: #070606; font-family: 'Raleway', arial; - position: -webkit-sticky; - position: sticky; - top: 0; + position: -webkit-sticky; + position: sticky; + top: 0; } @@ -117,61 +123,64 @@ body { /* Change color on hover */ .topnav a:hover { - background-color: rgb(128,0,42); + background-color: rgb(128, 0, 42); color: white; font-family: "Raleway"; } /* The dropdown container */ .dropdown { - display: inline-block; + display: inline-block; } /* Dropdown button */ .dropdown .dropbtn { - border: none; - outline: none; - color: white; - padding: 14px 16px; - background-color: inherit; - font-family: inherit; /* Important for vertical align on mobile phones */ - margin: 0; /* Important for vertical align on mobile phones */ + border: none; + outline: none; + color: white; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + /* Important for vertical align on mobile phones */ + margin: 0; + /* Important for vertical align on mobile phones */ } /* Add a red background color to navbar links on hover*/ -.navbar a:hover, .dropdown:hover .dropbtn { - background-color: orangered; +.navbar a:hover, +.dropdown:hover .dropbtn { + background-color: orangered; } /* Dropdown content (hidden by default) */ .dropdown-content { - display: none; - position: absolute; - background-color: white; - min-width: 166.5px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; + display: none; + position: absolute; + background-color: white; + min-width: 166.5px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { - float: none; - color: black; - padding: 14px 16px; - text-decoration: none; - display: block; - text-align: center; + float: none; + color: black; + padding: 14px 16px; + text-decoration: none; + display: block; + text-align: center; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { - background-color: black; + background-color: black; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { - display: block; + display: block; } /* Create two unequal columns that floats next to each other */ @@ -185,44 +194,56 @@ body { div.sticky { float: right; width: 25%; - object-position: right; - position: -webkit-sticky; + object-position: right; + position: -webkit-sticky; position: sticky; top: 5%; height: 50%; padding-left: 20px; } + #myBtn { - position: fixed; - bottom: 20px; - right: 30px; - z-index: 99; - font-size: 18px; - border: none; - outline: none; - background-color: red; - color: white; - cursor: pointer; - padding: 15px; - border-radius: 4px; -margin-right: 350px; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + font-size: 18px; + border: none; + outline: none; + background-color: red; + color: white; + cursor: pointer; + padding: 15px; + border-radius: 4px; + margin-right: 350px; } + #myBtn:hover { - background-color: #555; + background-color: #555; } + .modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top */ - padding-top: 100px; /* Location of the box */ + display: none; + /* Hidden by default */ + position: fixed; + /* Stay in place */ + z-index: 1; + /* Sit on top */ + padding-top: 100px; + /* Location of the box */ left: 0; top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + width: 100%; + /* Full width */ + height: 100%; + /* Full height */ + overflow: auto; + /* Enable scroll if needed */ + background-color: rgb(0, 0, 0); + /* Fallback color */ + background-color: rgba(0, 0, 0, 0.4); + /* Black w/ opacity */ align-content: center; } @@ -252,13 +273,14 @@ margin-right: 350px; text-decoration: none; cursor: pointer; } + /* Add a card effect for articles */ .card { padding: 50px; margin-top: 20px; - background-color: rgba(255,255,255,0.4); + background-color: rgba(255, 255, 255, 0.4); } /* Clear floats after the columns */ @@ -278,7 +300,10 @@ margin-right: 350px; /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media (max-width: 800px) { - .leftcolumn, .rightcolumn, { + + .leftcolumn, + .rightcolumn, + { width: 100%; padding: 0; } @@ -291,32 +316,36 @@ margin-right: 350px; width: 100%; } } + .fa { - padding: 20px; - font-size: 30px; - width: 30px; - text-align: center; - text-decoration: none; - margin: 5px 2px; - border-radius: 50%; + padding: 20px; + font-size: 30px; + width: 30px; + text-align: center; + text-decoration: none; + margin: 5px 2px; + border-radius: 50%; } + .fa:hover { opacity: 0.7; } .fa-facebook { - background: #3B5998; - color: white; + background: #3B5998; + color: white; } + .fa-twitter { - background: #55ACEE; - color: white; + background: #55ACEE; + color: white; } .fa-google { - background: #dd4b39; - color: white; + background: #dd4b39; + color: white; } + .sidenav { height: 100%; width: 0; @@ -328,7 +357,7 @@ margin-right: 350px; overflow-x: hidden; transition: 0.5s; padding-top: 60px; - text-align:center; + text-align: center; } .sidenav a { @@ -339,13 +368,13 @@ margin-right: 350px; display: block; transition: 0.3s; -position: -webkit-sticky; - position: sticky; - top: 0; + position: -webkit-sticky; + position: sticky; + top: 0; } -.sidenav a:hover{ +.sidenav a:hover { color: #f1f1f1; font-size: 30px; } @@ -357,7 +386,13 @@ position: -webkit-sticky; font-size: 36px; margin-left: 50px; } + @media screen and (max-height: 450px) { - .sidenav {padding-top: 15px;} - .sidenav a {font-size: 18px;} -} + .sidenav { + padding-top: 15px; + } + + .sidenav a { + font-size: 18px; + } +} \ No newline at end of file diff --git a/css/primetest.css b/css/primetest.css index cc6a82c..f366bdf 100644 --- a/css/primetest.css +++ b/css/primetest.css @@ -1,6 +1,7 @@ * { box-sizing: border-box; } + input { width: 50%; padding: 12px 20px; @@ -18,49 +19,51 @@ input:focus { } .button { - display: inline-block; - border-radius: 4px; - background-color: #f4511e; - border: none; - color: #FFFFFF; - text-align: center; - font-size: 25px; - padding: 20px; - width: 200px; + display: inline-block; + border-radius: 4px; + background-color: #f4511e; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 25px; + padding: 20px; + width: 200px; height: 70px; - transition:all 0.5s; - cursor: pointer; - margin: 5px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; } .button span { - cursor: pointer; - display: inline-block; - position: relative; - transition: 0.5s; + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; } .button span:after { - content: '\00bb'; - position: absolute; - opacity: 0; - top: 0; - right: -20px; - transition: 0.5s; + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; } .button:hover span { - padding-right: 25px; + padding-right: 25px; } .button:hover span:after { - opacity: 1; - right: 0; + opacity: 1; + right: 0; } -p{ + +p { font-family: 'Raleway'; font-size: 20px; } + body { padding: 10px; @@ -68,11 +71,12 @@ body { color: black; background-attachment: fixed; } + .header { padding: 30px; text-align: center; background-image: url('img\\color-abstract-wallpaper-22.jpg'); - font-family: 'Merriweather'; + font-family: 'Merriweather'; } .header h1 { @@ -80,24 +84,27 @@ body { font-family: 'Merriweather'; } -.header h2{ + +.header h2 { font-family: 'Merriweather'; font-size: 30px; } + .sticky { - position: fixed; - top:inherit; - width: 100%; - bottom: 0; + position: fixed; + top: inherit; + width: 100%; + bottom: 0; } + /* Style the top navigation bar */ .topnav { width: 100%; background-color: black; font-family: 'Raleway', arial; - position: -webkit-sticky; - position: sticky; - top: 0; + position: -webkit-sticky; + position: sticky; + top: 0; } @@ -112,61 +119,65 @@ body { /* Change color on hover */ .topnav a:hover { - background-color: rgb(128,0,42); + background-color: rgb(128, 0, 42); color: white; font-family: "Raleway"; } + /* The dropdown container */ .dropdown { - display: inline-block; + display: inline-block; } /* Dropdown button */ .dropdown .dropbtn { - border: none; - outline: none; - color: white; - padding: 14px 16px; - background-color: inherit; - font-family: inherit; /* Important for vertical align on mobile phones */ - margin: 0; /* Important for vertical align on mobile phones */ + border: none; + outline: none; + color: white; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + /* Important for vertical align on mobile phones */ + margin: 0; + /* Important for vertical align on mobile phones */ } /* Add a red background color to navbar links on hover*/ -.navbar a:hover, .dropdown:hover .dropbtn { - background-color:rgb(128,0,42); +.navbar a:hover, +.dropdown:hover .dropbtn { + background-color: rgb(128, 0, 42); } /* Dropdown content (hidden by default) */ .dropdown-content { - display: none; - position: absolute; - background-color: rgba(0,0,0,1); - min-width: 166.5px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; + display: none; + position: absolute; + background-color: rgba(0, 0, 0, 1); + min-width: 166.5px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { - float: none; - color: white; - padding: 14px 16px; - text-decoration: none; - display: block; - text-align: center; + float: none; + color: white; + padding: 14px 16px; + text-decoration: none; + display: block; + text-align: center; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { - background-color: black; - font-size: 17px; + background-color: black; + font-size: 17px; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { - display: block; + display: block; } @@ -183,46 +194,59 @@ div.sticky { float: right; width: 25%; - position: -webkit-sticky; + position: -webkit-sticky; position: sticky; - top:5% ; + top: 5%; height: 10%; padding-left: 8px; } + #myBtn { - position: fixed; - bottom: 20px; - right: 30px; - z-index: 99; - font-size: 18px; - border: none; - outline: none; - background-color: red; - color: white; - cursor: pointer; - padding: 15px; - border-radius: 4px; -margin-right: 350px; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + font-size: 18px; + border: none; + outline: none; + background-color: red; + color: white; + cursor: pointer; + padding: 15px; + border-radius: 4px; + margin-right: 350px; } + #myBtn:hover { - background-color: #555; + background-color: #555; } + .modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top */ - padding-top: 100px; /* Location of the box */ + display: none; + /* Hidden by default */ + position: fixed; + /* Stay in place */ + z-index: 1; + /* Sit on top */ + padding-top: 100px; + /* Location of the box */ left: 0; top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + width: 100%; + /* Full width */ + height: 100%; + /* Full height */ + overflow: auto; + /* Enable scroll if needed */ + background-color: rgb(0, 0, 0); + /* Fallback color */ + background-color: rgba(0, 0, 0, 0.4); + /* Black w/ opacity */ align-content: center; } + /* Modal Content */ .modal-content { background-color: rgb(234, 221, 221); @@ -257,7 +281,7 @@ margin-right: 350px; padding: 50px; margin-top: 20px; - background-color: rgba(255,255,255,0.4); + background-color: rgba(255, 255, 255, 0.4); } /* Clear floats after the columns */ @@ -277,7 +301,10 @@ margin-right: 350px; /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media (max-width: 800px) { - .leftcolumn, .rightcolumn, { + + .leftcolumn, + .rightcolumn, + { width: 100%; padding: 0; } @@ -290,32 +317,36 @@ margin-right: 350px; width: 100%; } } + .fa { - padding: 20px; - font-size: 30px; - width: 30px; - text-align: center; - text-decoration: none; - margin: 5px 2px; - border-radius: 50%; + padding: 20px; + font-size: 30px; + width: 30px; + text-align: center; + text-decoration: none; + margin: 5px 2px; + border-radius: 50%; } + .fa:hover { opacity: 0.7; } .fa-facebook { - background: #3B5998; - color: white; + background: #3B5998; + color: white; } + .fa-twitter { - background: #55ACEE; - color: white; + background: #55ACEE; + color: white; } .fa-google { - background: #dd4b39; - color: white; + background: #dd4b39; + color: white; } + .sidenav { height: 100%; width: 0; @@ -327,7 +358,7 @@ margin-right: 350px; overflow-x: hidden; transition: 0.5s; padding-top: 60px; - text-align:center; + text-align: center; display: block; } @@ -339,13 +370,13 @@ margin-right: 350px; display: block; transition: 0.3s; -position: -webkit-sticky; - position: sticky; - top: 0; + position: -webkit-sticky; + position: sticky; + top: 0; } -.sidenav a:hover{ +.sidenav a:hover { color: #f1f1f1; font-size: 30px; } @@ -359,6 +390,11 @@ position: -webkit-sticky; } @media screen and (max-height: 450px) { - .sidenav {padding-top: 15px;} - .sidenav a {font-size: 18px;} -} + .sidenav { + padding-top: 15px; + } + + .sidenav a { + font-size: 18px; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 232d62b..fc52159 100644 --- a/index.html +++ b/index.html @@ -11,20 +11,17 @@ - Mathematica -

Mathematica

Basics

-
← @@ -45,7 +42,6 @@

Mathematica

RSA Encryption
-
- @@ -85,10 +79,9 @@

Mathematica

- - - - + + + \ No newline at end of file diff --git a/js/algo.js b/js/algo.js index 9b60f79..6e7d6e3 100644 --- a/js/algo.js +++ b/js/algo.js @@ -1,9 +1,9 @@ -function bubble_sort(param){ -var i; -var j; - for(i=0;i 0){ - var leastSignificantBit = b % 2; - b = Math.floor(b / 2); + while (b > 0) { + var leastSignificantBit = b % 2; + b = Math.floor(b / 2); - if (leastSignificantBit == 1) { - result = result * x; - result = result % n; - } + if (leastSignificantBit == 1) { + result = result * x; + result = result % n; + } - x = x * x; - x = x % n; - } - return result; + x = x * x; + x = x % n; + } + return result; } -function modexp(msg,key,N){ -var y; -if(key==0){ - return 1; -} -if(key & 1==0){ - y=modexp(msg,key/2,N); - return mod(y*y,N); - } - else{ - return mod(mod(msg,N)*modexp(msg,key-1,N),N); - } +function modexp(msg, key, N) { + var y; + if (key == 0) { + return 1; + } + if (key & 1 == 0) { + y = modexp(msg, key / 2, N); + return mod(y * y, N); + } else { + return mod(mod(msg, N) * modexp(msg, key - 1, N), N); + } } -function euler(p,q){ - return (p-1)*(q-1); + +function euler(p, q) { + return (p - 1) * (q - 1); } -function priv_key(pub,euler){} +function priv_key(pub, euler) {} function isPrime3(n) { - if (isNaN(n) || !isFinite(n) || n%1 || n<2) return false; - if (n%2==0) return (n==2); - if (n%3==0) return (n==3); - var m=Math.sqrt(n); - for (var i=5;i<=m;i+=6) { - if (n%i==0) return false; - if (n%(i+2)==0) return false; - } - return true; + if (isNaN(n) || !isFinite(n) || n % 1 || n < 2) return false; + if (n % 2 == 0) return (n == 2); + if (n % 3 == 0) return (n == 3); + var m = Math.sqrt(n); + for (var i = 5; i <= m; i += 6) { + if (n % i == 0) return false; + if (n % (i + 2) == 0) return false; + } + return true; } -function randp(){ - var n; - var j; - for(j=0;j<15;j++){ - n=Math.floor(Math.random()*200); - if(isPrime3(n)){ - return n; + +function randp() { + var n; + var j; + for (j = 0; j < 15; j++) { + n = Math.floor(Math.random() * 200); + if (isPrime3(n)) { + return n; + } else { + continue; + } } - else{ - continue; +} + +function pub_key(min, p, q) { + max = euler(p, q); + var i; + var n; + for (i = 0; i < 10; i++) { + n = Math.floor(Math.random() * (max - min + 1)) + min; + if (isPrime3(n) && Gcd(n, max) == 1 && n < max) { + + return n; + } else { + continue; + } } - } } -function pub_key(min,p,q) { - max=euler(p,q); - var i; - var n; - for(i=0;i<10;i++){ - n=Math.floor(Math.random() * (max - min + 1)) + min; - if(isPrime3(n) && Gcd(n,max)==1 && n - Title - -
← @@ -41,7 +38,6 @@ RSA Encryption
-
- - + \ No newline at end of file diff --git a/welcome.html b/welcome.html index bd70ca6..4e9c682 100644 --- a/welcome.html +++ b/welcome.html @@ -11,20 +11,17 @@ - Welcome -

Number theory

Theory Of Numbers

-
← @@ -45,7 +42,6 @@

Number theory

RSA Encryption
-
-
@@ -116,7 +108,6 @@

An Introduction To Modular Math

Examples With Visualisation

8 mod 4 = ?


-

With a modulus of 4 we make a clock with numbers 0,1,2,3.

@@ -124,73 +115,69 @@

Examples With Visualisation


Mod Clock
-

So, the Modulus will be 0.

-

7 mod 2 = ?

-
-

With a modulus of 2 we make a clock with numbers 0 and 1. +

So, the Modulus will be 0.

+

7 mod 2 = ?


-

-

We start at 0 and go through 7 numbers in clockwise sequence 1 -> 0 -> 1 -> 0 -> 1 -> 0 -> 1.

-
ModClk
-
-

So the Modulus will be 1.

-
-

-5 mod 3 = ?

-
- -

With a modulus of 3 we make a clock with numbers 0 , 1 and 2. -
-

-

We start at 0 and go through 5 numbers in counter-clockwise sequence 2 -> 1 -> 0 -> 2 -> 1.

-
ModClk1
-
-

So the Modulus will be 1.

-
-

Source : KhanAcademy.com

- -
- -
-

Mod Evaluator

-
-
-
-
- - -
-
-

- -

-
-
-
- -
-
-

References

-
- mitocw -
-

MIT OpenCourseWare By Prof.Andrew Sutherland

- +

With a modulus of 2 we make a clock with numbers 0 and 1. +
+

+

We start at 0 and go through 7 numbers in clockwise sequence 1 -> 0 -> 1 -> 0 -> 1 -> 0 -> 1.

+
ModClk
+
+

So the Modulus will be 1.

+
+

-5 mod 3 = ?

+
+

With a modulus of 3 we make a clock with numbers 0 , 1 and 2. +
+

+

We start at 0 and go through 5 numbers in counter-clockwise sequence 2 -> 1 -> 0 -> 2 -> 1.

+
ModClk1
+
+

So the Modulus will be 1.

+
+

Source : KhanAcademy.com

+
+
+

Mod Evaluator

+
+
+
+
+ + +
+
+

+ +

+
+
+
+
+
+

References

+
+ mitocw +
+

MIT OpenCourseWare By Prof.Andrew Sutherland

+ -
-
- - - - - + + function closeNav() { + document.getElementById("mySidenav").style.width = "0"; + } + + \ No newline at end of file