JSFiddle - React, Tailwind, and code Playground
by WolfsRain
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mi pagina web</title>
<link href="css/rush_b_style.css" rel="stylesheet" type="text/css">
<link href="css/item_show_text.css" rel="stylesheet" type="text/css">
<link href="css/filter.css" rel="stylesheet" type="text/css">
<script type = "text/javascript" src = "Scripts/filterJS.js" ></script>
</head>
<body>
<div>
<div class="main_title_container">
<div class="title">
<h1 style="color:yellow">Сука Блять</h1>
</div>
</div>
</div>
<div class="left_menu">
</br>
</br>
</br>
</br>
</br>
<div class="web_icon"></div>
</br>
</br>
</br>
<h2 id="menu_title" style="color:white" align="center">меню</h2>
</br>
<ul class="vertical_menu">
<li><a href="">инициирование</a></li>
<li><a href="">новости</a></li>
<li><a href="">контакт</a></li>
<li><a href="">Около</a></li>
</ul>
</div>
<div class="main_text">
<h2 align="center">Welcome to the Soviet Weapons Market</h2>
</br>
<p class="intro-text">Weapons from all around the Soviet Block end up in our warehouses. From the notorious ak-47,
some WW2 relics such as the PSSH-41 and TT-30, to something even heavier. Everything clean and loaded,
ready to use at any moment. It should not be thought that Soviet equipment suffers any harmful effects because of its simplicity of design. Quite the reverse.
In its time, the T-34 was not only the simplest but also the most powerful tank in the world. The Soviet forces during World War II had some of the most reliable, robust, and in some cases revolutionary military hardware available. Here is every weapon deployed by the Red Army in that conflict, divided by type:
tanks and armored fighting vehicles, artillery, small arms, aircraft, and naval weapons.</p>
<div class="options">
<div id="btnContainer" class="btnOpts">
<button class="btn active"...CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: green !important;
}
.main_title_container {
position:absolute;
background-color: Tomato;
width:100%;
height: 15%;
top:0;
bottom:0;
right:0;
left:0;
}
.title {
position: relative;
width: 45%;
height: 60%;
top: 1%;
left:49%;
font-size: 35px;
}
.web_icon {
position: relative;
background-color: black;
background-image: url(https://i.postimg.cc/3x2ghrWh/soviet-flag.png);
width: 127px;
height: 75px;
transform: scale(2.5);
top: 0;
bottom: 0;
right: 0;
left: 125px;
}
.left_menu {
position: absolute;
background-color: black;
margin-top: 0;
width: 380px;
height: 100%;
position: fixed;
overflow: auto;
}
.vertical_menu {
list-style-type: none;
margin: 0;
padding: 0;
background-color: white;
}
.main_text {
position:relative;
top: 150px;
margin-left:20%;
padding:1px 16px;
height:100%;
background-color: white;
}
.intro-text {
text-align: justify;
text-indent: 50px;
font-family: Arial, Helvetica, sans-serif;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background: #555;
color: red;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.btn {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
width: 250px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
}
* {
margin: 0;
padding: 0;
}
.product-container {
position:relative;
/*background-color: red;*/
float:left;
width:250px;
height:100px;
margin-bottom: 50px;
margin-right: 1px;
margin: 5px;
padding: 5px;
}
.item-title {
text-align: center;
border: 2px solid black;
border-radius: 5px;
width:100%;
background-color: red;
}
.item-image {
transform:scale(1);
width:250px;
height:100px;
border: 2px solid...JavaScript
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}