diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/bubble.html b/bubble.html new file mode 100644 index 0000000..a9f2c48 --- /dev/null +++ b/bubble.html @@ -0,0 +1,216 @@ + + + + + + + + Document + + + + + + + + + + + + + + + + + +
+
+
Buuble Sort
+
+ + +
+
+ Elements: +
+ + +
+ Time: sec +
+ + +
+
+
+
+ +
+
+
+ +
+
+
+
DESCRIPTION
+ +

+ Bubble Sort is an iterative sorting algorithm that imitates the movement of bubbles in sparkling + water. + The bubbles represents the elements of the data structure. +

+

+ The bigger bubbles reach the top faster than smaller bubbles, and this algorithm works in the same + way. It + iterates through the data structure and for each cycle compares the current element with the next + one, + swapping them if they are in the wrong order. +

+

+ It's a simple algorithm to implement, but not much efficient: on average, quadratic sorting + algorithms with the + same time complexity such as Selection Sort or Insertion + Sort perform better.
+ It has several variants to improve its performances, such as Shaker Sort Odd Even Sort and Comb + Sort. +

+ +
+
+
COMPLEXITY
+ + + + + + + + + + + + + + + + + + + +
+ Average Complexity + + + O(n2) + +
+ Best Case + + + O(n) + +
+ Worst Case + + + O(n2) + +
+ Space Complexity + + + O(1) + +
+
+ +
+ + +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/custom.html b/custom.html new file mode 100644 index 0000000..8987d75 --- /dev/null +++ b/custom.html @@ -0,0 +1,165 @@ + + + + + + + + Document + + + + + + + + + + + + + + + + + +
+
+
Custom Sort
+
+ + +
+
+ Elements: +
+ + +
+ Time: sec +
+ + +
+
+
+
+ +
+
+
+ +
+
+
+
DESCRIPTION
+ +

+ Insertion sort is a simple sorting algorithm that builds the final sorted array one item at a time. + It's less performant than advanced sorting algorithms, but it can still have some advantages: it's + really easy + to implement and it's efficient on small data structures almost sorted. +

+

+ The algorithm divides the data structure in two sublists: a sorted one, and one still to sort. + Initially, the + sorted sublist is made up of just one element and it gets progressively filled. + For every iteration, the algorithm picks an element on the unsorted sublist and inserts it at the + right place in + the sorted sublist. + It's available in several variants such as Gnome Sort. +

+ +
+
+
+
+
IMPLEMENTATIONS + (JAVASCRIPT) +
+ +
+
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/heap.html b/heap.html new file mode 100644 index 0000000..53c0923 --- /dev/null +++ b/heap.html @@ -0,0 +1,222 @@ + + + + + + + + Document + + + + + + + + + + + + + + + + + +
+
+
Heap Sort
+
+ + +
+
+ Elements: +
+ + +
+ Time: sec +
+ + +
+
+
+
+ +
+
+
+ +
+
+
+
DESCRIPTION
+ +

+ Heap Sort is an in-place iterative sorting algorithm based on auxiliary data structures called heap. + It's less efficient than algorithm with the same time complexity and it's not suitable for data + structures with + few elements. +

+

+ The heap is a data structure representable as a binary tree, where each node has a value bigger or + equal to its + children. Consequently, the root will hold the maximum value. +

+

+ The data structure gets ordered to form the heap initially, and then it gets progressively reordered + with an + algorithm similar to Selection Sort, starting from the bigger + elements. +

+ +
+
+
COMPLEXITY
+ + + + + + + + + + + + + + + + + + + +
+ Average Complexity + + + O(n × log n) + +
+ Best Case + + + O(n × log n) + +
+ Worst Case + + + O(n × log n) + +
+ Space Complexity + + + O(1) + +
+
+ +
+ + +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/Github_icon.png b/images/Github_icon.png new file mode 100644 index 0000000..628da97 Binary files /dev/null and b/images/Github_icon.png differ diff --git a/images/g.png b/images/g.png new file mode 100644 index 0000000..d3942c8 Binary files /dev/null and b/images/g.png differ diff --git a/images/i.png b/images/i.png new file mode 100644 index 0000000..b7a5e01 Binary files /dev/null and b/images/i.png differ diff --git a/images/mainbg.jpg b/images/mainbg.jpg new file mode 100644 index 0000000..fb8ee05 Binary files /dev/null and b/images/mainbg.jpg differ diff --git a/images/n.png b/images/n.png new file mode 100644 index 0000000..a296f3b Binary files /dev/null and b/images/n.png differ diff --git a/images/o.png b/images/o.png new file mode 100644 index 0000000..84c9e25 Binary files /dev/null and b/images/o.png differ diff --git a/images/pause.png b/images/pause.png new file mode 100644 index 0000000..2c664ea Binary files /dev/null and b/images/pause.png differ diff --git a/images/play.png b/images/play.png new file mode 100644 index 0000000..5359184 Binary files /dev/null and b/images/play.png differ diff --git a/images/r.png b/images/r.png new file mode 100644 index 0000000..f825b72 Binary files /dev/null and b/images/r.png differ diff --git a/images/s.png b/images/s.png new file mode 100644 index 0000000..4aadb1d Binary files /dev/null and b/images/s.png differ diff --git a/images/sortbg.jpg b/images/sortbg.jpg new file mode 100644 index 0000000..b9a318d Binary files /dev/null and b/images/sortbg.jpg differ diff --git a/images/t.png b/images/t.png new file mode 100644 index 0000000..a21f5ac Binary files /dev/null and b/images/t.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a74fbb2 --- /dev/null +++ b/index.html @@ -0,0 +1,324 @@ + + + + + + + + Sorting Visualizer + + + + + + + + + + + + + +
+
+
+
+ S letter + o letter + r letter + t letter + I letter + N letter + G letter +
+ +
+

ALGORITHMS

+

VISUALISER

+
+
+
+
+ + + +
+
+
+
+

+ Sorting Algorithms +

+
+
+

+ Sorting algorithms are used to sort a data structure according to a specific order relationship, + such as numerical order or lexicographical order. +

+

+ This operation is one of the most important and widespread in computer science. For a long time, + new methods have been developed to make this procedure faster and faster. +

+

+ There are currently hundreds of different sorting algorithms, each with its own specific + characteristics. They are classified according to two metrics: space complexity and time + complexity. +

+

+ Those two kinds of complexity are represented with asymptotic notations, mainly with the symbols + O, Θ, Ω, representing respectively the upper bound, the tight bound, and the lower bound of the + algorithm's complexity, specifying in brackets an expression in terms of n, the number of the + elements of the data structure. +

+

+ Most of Sorting Algorithms fall into two categories: +

+

+
    +
  • Logarithmic
    + The complexity is proportional to the binary logarithm (i.e to the base 2) of n. +
    + An example of a logarithmic sorting algorithm is Quick sort, with space and time + complexity O(n × log n). +
  • +
  • + Quadratic
    + The complexity is proportional to the square of n.
    + An example of a quadratic sorting algorithm is Bubble sort, with a time complexity + of O(n2). +
  • +
+

+

+ Space and time complexity can also be further subdivided into 3 different cases: best case, + average case and worst case. +

+

+ Sorting algorithms can be difficult to understand and it's easy to get confused. We believe + visualizing sorting algorithms can be a great way to better understand their functioning while + having fun! +

+
+
+
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/insertion.html b/insertion.html new file mode 100644 index 0000000..8f2cba0 --- /dev/null +++ b/insertion.html @@ -0,0 +1,209 @@ + + + + + + + + Document + + + + + + + + + + + + + + + + + +
+
+
Insertion Sort
+
+ + +
+
+ Elements: +
+ + +
+ Time: sec +
+ + +
+
+
+
+ +
+
+
+ +
+
+
+
DESCRIPTION
+ +

+ Insertion sort is a simple sorting algorithm that builds the final sorted array one item at a time. + It's less performant than advanced sorting algorithms, but it can still have some advantages: it's + really easy + to implement and it's efficient on small data structures almost sorted. +

+

+ The algorithm divides the data structure in two sublists: a sorted one, and one still to sort. + Initially, the + sorted sublist is made up of just one element and it gets progressively filled. + For every iteration, the algorithm picks an element on the unsorted sublist and inserts it at the + right place in + the sorted sublist. + It's available in several variants such as Gnome Sort. +

+ +
+
+
COMPLEXITY
+ + + + + + + + + + + + + + + + + + + +
+ Average Complexity + + + O(n2) + +
+ Best Case + + + O(n) + +
+ Worst Case + + + O(n2) + +
+ Space Complexity + + + O(1) + +
+
+ +
+ + +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/merge.html b/merge.html new file mode 100644 index 0000000..8ca2454 --- /dev/null +++ b/merge.html @@ -0,0 +1,198 @@ + + + + + + + + Document + + + + + + + + + + + + + + + + + +
+
+
Merge Sort
+
+ + +
+
+ Elements: +
+ + +
+ Time: sec +
+ + +
+
+
+
+ +
+
+
+ +
+
+
+
DESCRIPTION
+ +

+ Merge Sort is a sorting algorithm based on the Divide et Impera technique, like Quick + Sort. + It can be implemented iteratively or recursively, using the Top-Down and Bottom-Up algorithms + respectively. + We represented the first one. +

+

+ The algorithm divides the data structure recursively until the subsequences contain only one + element. + At this point, the subsequences get merged and ordered sequentially. + To do so, the algorithm progressively builds the sorted sublist by adding each time the minimum + element of the + next two unsorted subsequences until there is only one sublist remaining. + This will be the sorted data structure. +

+ +
+
+
COMPLEXITY
+ + + + + + + + + + + + + + + + + + + +
+ Average Complexity + + + O(n × log n) + +
+ Best Case + + + O(n × log n) + +
+ Worst Case + + + O(n × log n) + +
+ Space Complexity + + + O(n) + +
+
+ +
+ + +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/quicksort.html b/quicksort.html new file mode 100644 index 0000000..1de3ba8 --- /dev/null +++ b/quicksort.html @@ -0,0 +1,228 @@ + + + + + + + + Document + + + + + + + + + + + + + + + + + +
+
+
Quick Sort
+
+ + +
+
+ Elements: +
+ + +
+ Time: sec +
+ + +
+
+
+
+ +
+
+
+ +
+
+
+
DESCRIPTION
+ +

+ Quick Sort is a sorting algorithm based on splitting the data structure in smaller partitions and + sort them + recursively until the data structure is sorted. +

+

+ This division in partitions is done based on an element, called pivot: + all the elements bigger than the pivot get placed on the right side of the structure, the smaller + ones to the + left, creating two partitions. + Next, this procedure gets applied recursively to the two partitions and so on. +

+

+ This partition technique based on the pivot is called Divide and + conquer. + It's a performant strategy also used by other sorting algorithms, such as Merge + Sort. +

+ +
+
+
COMPLEXITY
+ + + + + + + + + + + + + + + + + + + +
+ Average Complexity + + + O(n × log n) + +
+ Best Case + + + O(n × log n) + +
+ Worst Case + + + O(n2) + +
+ Space Complexity + + + O(n) + +
+
+ +
+ + +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..10b7846 --- /dev/null +++ b/script.js @@ -0,0 +1,361 @@ +gsap.registerPlugin(ScrollTrigger); + +function toggleNav() { + var sidebar = document.getElementById("mySidebar"); + var button = document.getElementById("togglebutton"); + + if (sidebar.style.width === "300px") { + sidebar.style.width = "0"; + button.innerHTML = "☰"; + } else { + sidebar.style.width = "300px"; + button.innerHTML = "✖"; + } +} + +let isPaused = false; +let speed = 500; // Default speed + +let arr = []; + +$("#slider").on("input", function () { + const n = $(this).val(); + arr.length = 0; + + for (let i = 0; i < n; i++) { + arr[i] = Math.random(); + } + + showBars(); +}); + +function animate(moves) { + if (moves.length == 0 || isPaused) { + showBars(); + return; + } + + const move = moves.shift(); + const [i, j] = move.indices; + if (move.type == "swap") { + [arr[i], arr[j]] = [arr[j], arr[i]]; + } + + showBars(move); + setTimeout(() => { + animate(moves); + }, speed); +} + +// Add these functions to control the animation +function bubbleplay() { + isPaused = false; + bubble(); +} +function selectionplay() { + isPaused = false; + SelectionSort(); +} +function heapplay() { + isPaused = false; + heap(); +} +function quickplay() { + isPaused = false; + quick(); +} +function customplay() { + isPaused = false; + custom(); +} +function insertionplay() { + isPaused = false; + insertion(); +} +function mergeplay() { + isPaused = false; + merge(); +} + +function pause() { + isPaused = true; +} + +function setSpeed(newSpeed) { + speed = newSpeed; +} + +function showBars(move) { + $("#container").html(""); + $("#label").html(""); + console.log(arr); + var temp = 0; + for (let i = 0; i < arr.length; i++) { + const bar = $("
"); + bar.css("height", arr[i] * 100 + "%"); + + // Get the width of the container dynamically + var containerWidth = $("#container").width(); + console.log(containerWidth); + var barWidth = containerWidth / arr.length; + + bar.css("width", barWidth + "px"); + bar.css("left", temp + "px"); + temp += barWidth; + bar.addClass("bar"); + if (move && move.indices.includes(i)) { + bar.css( + "background", + move.type == "swap" + ? "linear-gradient(0deg, rgb(255, 0, 0) 5%, rgba(210, 210, 210, 1) 100%)" + : "linear-gradient(0deg, rgb(13, 0, 255) 5%, rgba(210, 210, 210, 1) 100%)" + ); + } + $("#container").append(bar); + } + $("#speed").html(speed); + $("#label").html(arr.length); +} + +showBars(); + +// Update bars whenever the window is resized +$(window).resize(function () { + showBars(); +}); + +//BUbble Sort +function bubblesort(arr) { + var moves = []; + do { + var swapped = false; + for (let i = 1; i < arr.length; i++) { + moves.push({ indices: [i - 1, i], type: "comp" }); + if (arr[i - 1] > arr[i]) { + moves.push({ indices: [i - 1, i], type: "swap" }); + [arr[i - 1], arr[i]] = [arr[i], arr[i - 1]]; + swapped = true; + } + } + } while (swapped); + return moves; +} + +function bubble() { + const copy = [...arr]; + const moves = bubblesort(copy); + animate(moves); +} + +//Selection Sort +function SelectionSort() { + const scopy = [...arr]; + const smoves = selectionsort(scopy); + animate(smoves); +} + +function selectionsort(arr) { + var moves = []; + let n = arr.length; + let min, i, j; + for (i = 0; i < n - 1; ++i) { + min = i; + for (j = i + 1; j < n; j++) { + moves.push({ indices: [min, j], type: "comp" }); + if (arr[j] < arr[min]) min = j; + } + + if (min != i) { + moves.push({ indices: [i, min], type: "swap" }); + [arr[i], arr[min]] = [arr[min], arr[i]]; + } + } + return moves; +} + +//Quick sort +function quicksort(arr, low = 0, high = arr.length - 1, moves = []) { + if (low < high) { + let pi = partition(arr, low, high, moves); + quicksort(arr, low, pi - 1, moves); + quicksort(arr, pi + 1, high, moves); + } + return moves; +} + +function partition(arr, low, high, moves) { + let pivot = arr[high]; + let i = low - 1; + for (let j = low; j <= high - 1; j++) { + moves.push({ indices: [i + 1, j], type: "comp" }); + if (arr[j] < pivot) { + i++; + moves.push({ indices: [i, j], type: "swap" }); + [arr[i], arr[j]] = [arr[j], arr[i]]; + } + } + moves.push({ indices: [i + 1, high], type: "swap" }); + [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]]; + return i + 1; +} + +function quick() { + const copy = [...arr]; + const moves = quicksort(copy); + animate(moves); +} + +//insertion sort + +function insertionsort(arr) { + var moves = []; + let n = arr.length; + let i, key, j; + for (i = 1; i < n; i++) { + key = arr[i]; + j = i - 1; + + moves.push({ indices: [j, i], type: "comp" }); + while (j >= 0 && arr[j] > key) { + moves.push({ indices: [j, j + 1], type: "swap" }); + arr[j + 1] = arr[j]; + j = j - 1; + } + arr[j + 1] = key; + } + return moves; +} + +function insertion() { + const copy = [...arr]; + const moves = insertionsort(copy); + animate(moves); +} + +//Heap Sort +function heapify(arr, n, i, moves) { + let largest = i; + let left = 2 * i + 1; + let right = 2 * i + 2; + + if (left < n && arr[left] > arr[largest]) { + largest = left; + } + + if (right < n && arr[right] > arr[largest]) { + largest = right; + } + + if (largest !== i) { + moves.push({ indices: [i, largest], type: "swap" }); + [arr[i], arr[largest]] = [arr[largest], arr[i]]; + heapify(arr, n, largest, moves); + } +} + +function heapSort(arr) { + let n = arr.length; + let moves = []; + + for (let i = Math.floor(n / 2) - 1; i >= 0; i--) { + heapify(arr, n, i, moves); + } + + for (let i = n - 1; i > 0; i--) { + moves.push({ indices: [0, i], type: "swap" }); + [arr[0], arr[i]] = [arr[i], arr[0]]; + heapify(arr, i, 0, moves); + } + + return moves; +} + +function heap() { + const copy = [...arr]; + const moves = heapSort(copy); + animate(moves); +} + +//merge sort +function mergeSort(arr, start = 0, end = arr.length - 1, moves = []) { + if (start < end) { + let mid = Math.floor((start + end) / 2); + mergeSort(arr, start, mid, moves); + mergeSort(arr, mid + 1, end, moves); + merge(arr, start, mid, end, moves); + } + return moves; +} + +function merge(arr, start, mid, end, moves) { + let start2 = mid + 1; + + if (arr[mid] <= arr[start2]) { + return; + } + + while (start <= mid && start2 <= end) { + moves.push({ indices: [start, start2], type: "comp" }); + if (arr[start] <= arr[start2]) { + start++; + } else { + let value = arr[start2]; + let index = start2; + + while (index != start) { + moves.push({ indices: [index - 1, index], type: "swap" }); + arr[index] = arr[index - 1]; + index--; + } + arr[start] = value; + + start++; + mid++; + start2++; + } + } +} + +function merge() { + const copy = [...arr]; + const moves = mergeSort(copy); + animate(moves); +} + +function customsort(arr) { + var codes = document.getElementById("exampleFormControlTextarea1"); + eval(codes); +} + +function custom() { + const copy = [...arr]; + const moves = customsort(copy); + animate(moves); +} + +gsap.fromTo( + ".menu-box", + { x: -1200 }, + { + scrollTrigger: { + trigger: ".menu-box", + // pin: true, + toggleActions: "restart none none none", + }, + x: 0, + duration: 2, + } +); +gsap.fromTo( + ".comp-table", + { x: 1200 }, + { + scrollTrigger: { + trigger: ".comp-table", + // pin: true, + toggleActions: "restart none none none", + }, + x: 0, + duration: 1, + } +); diff --git a/selection.html b/selection.html new file mode 100644 index 0000000..5b0108f --- /dev/null +++ b/selection.html @@ -0,0 +1,212 @@ + + + + + + + + Document + + + + + + + + + + + + + + + + + +
+
+
Selection Sort
+
+ + +
+
+ Elements: +
+ + +
+ Time: sec +
+ + +
+
+
+
+ +
+
+
+ +
+
+
+
DESCRIPTION
+ +

+ Selection Sort is an iterative and in-place sorting algorithm that divides the data structure in two + sublists: the ordered one, and the unordered one. + The algorithm loops for all the elements of the data structure and for every cycle picks the + smallest + element of the unordered sublist and adds it to the sorted sublist, progressively filling it. +

+

+ It's a really simple and intuitive algorithm that does not require additional memory, but it's not + really efficient on big data structures due to its quadratic time complexity. +

+

+ This algorithm has been upgraded and enhanced in several variants such as Heap + Sort. +

+ +
+
+
COMPLEXITY
+ + + + + + + + + + + + + + + + + + + +
+ Average Complexity + + + O(n2) + +
+ Best Case + + + O(n2) + +
+ Worst Case + + + O(n2) + +
+ Space Complexity + + + O(1) + +
+
+ +
+ + +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6ac8b51 --- /dev/null +++ b/style.css @@ -0,0 +1,295 @@ +body{ + background: radial-gradient(circle, + green, + yellow, + black ); + + margin: 0px; + font-family: 'Oxygen', cursive; + font-size: 25px; + color: black +} +div{ + display: block; +} + + + +.sidebar { + height: 100%; + width: 0; + position: fixed; + z-index: 2; + top: 0; + left: 0; + background-color: #111; + overflow-x: hidden; + transition: 0.5s; + padding-top: 90px; +} + +.sidebar a { + padding: 8px 8px 8px 32px; + text-decoration: none; + font-size: 25px; + color: #818181; + display: block; + transition: 0.3s; +} + +.sidebar a:hover { + color: #f1f1f1; +} + +/* #container{ + height: 200px; + display: flex; + align-items: flex-end; +} */ + +.bar{ + padding-right: 2px; + position: absolute; + bottom: 0; + background: linear-gradient(0deg, rgba(22, 22, 22, 1) 5%, rgb(247, 97, 97) 100%); +} + +#box{ + padding-top: 50px; + margin-top: 25px; + position: relative; + left: 50%; + transform: translateX(-50%); + width: 90%; +} + +.title{ + margin-left: 5%; + float: left; + margin-top: 0px; + position: relative; + white-space: nowrap; + font-size: 100px; + color: white; + font-family: 'Electrolize', sans-serif; + transition: 1.5s; + +} + +@media only screen and (max-width: 1300px) { + .title { + font-size: 70px; + } +} + +@media only screen and (max-width: 1100px) { + .title { + font-size: 48px; + } +} + +.sort-btns{ + display: inline-block; + + margin-left: 0px; + margin-right: 10px; + margin-top: 35px; + background: none; + border: none; + outline: none; + padding-bottom: 20px; +} + + +@media only screen and (max-width: 600px){ .sort-btns img { + height: 60px; + width: 60px; +} +} +@media only screen and (max-height: 1080px){ .sort-btns img { + height: 70px; + width: 70px; +} +} + +.slider-container { + display: inline-block; + margin-top: 23px; + margin-left: 20px; + color: white; +} + + +#elements-text { + text-align: center; + font-size: 25px; +} + +@media only screen and (max-width: 1100px) { + #elements-text { + font-size: 17px; + } +} + +@media only screen and (max-width: 600px) {.slider-container div { + font-size: 22px; +}} + +#slider { + -webkit-appearance: none; + appearance: none; + max-width: 450px; + width: 40vw; + height: 5px; + background: #d3d3d3; + outline: none; +} +#speedSlider{ +-webkit-appearance: none; + appearance: none; + max-width: 450px; + width: 40vw; + height: 5px; + background: #d3d3d3; + outline: none; +} + + + +#container { + position: relative; + margin: 0px 30px 0px 0px; + height: 78vh; + width: 100%; +} + +@media only screen and (max-width: 1100px) { + #container { + height: 50vh; + } +} + +#cover{ + position: relative; + background: linear-gradient(180deg, rgba(22, 22, 22, 1) 50%, rgba(27, 27, 27, 1) 60%, rgba(36, 36, 36, 1) 70%, rgba(70, 70, 70, 1) 100%); + min-height: 170vh; + width: 100%; + display: block; + overflow: auto; +} + +.info{ + width: 100%; + display: inline-block; + margin-top: 50px; + color: white; +} + + + +.description { +font-size: 28px; + + max-width: 50%; + + margin-left: 5%; + float: left; + + text-align: justify; +} +@media only screen and (max-width: 1000px) { + .description { + font-size: 17px; + max-width: 90%; + + } +} + + +.comp-table { + margin-top: 15px; + max-width: fit-content; + max-height: fit-content; + margin-left: 5%; + margin-right: 7%; + float: right; + text-align: left; +} + +@media only screen and (max-width: 1100px) { + .comp-table { + float: left; + } +} + + +.sort-table { + font-size: 19px; + margin-top: 30px; + border-collapse: collapse; + border-radius: 5px; + border-style: hidden; +} +.sort-table tr,th{ + border: 2px solid #92d13f; +} + +@media only screen and (max-width: 1100px) { +.sort-table { + font-size: 19px; + } +} + +.sort-table th, +td { + padding: 10px; +} + +.sort-table th { + border-right: 2px solid #88d13f; +} + +.menu-box { + margin-top: 80px; + margin-left: 5%; + margin-bottom: 50px; + color: white; +} + + + +#menu-code { + font-size: 20px; + margin-top: 20px; + border-radius: 10px; + position: relative; + background-color: rgb(22, 22, 22); + min-width: 50%; + display: inline-block; + border: 2px solid #d17f3f; + min-height: 70vh; +} +@media only screen and (max-width: 1100px) { + #menu-code { + font-size: 12px; + max-width: 90vw; + } +} + +.footer-content img { + padding: 5px; + width: 32px; + height: 32px; +} + +@media only screen and (max-width: 1100px){ #code-test { + font-size: 12px; +}} + +#code-test { + width: 90%; + font-size: 25px; + border: 2px solid #A86836; + margin-top: 35px; + border-radius: 5px; +} \ No newline at end of file diff --git a/try.html b/try.html new file mode 100644 index 0000000..385907b --- /dev/null +++ b/try.html @@ -0,0 +1,127 @@ + + + + + + + + + + +
+
+ +
+ + +
+ + + + + + \ No newline at end of file