Flex barcket

Developer
Roman Budnikov
Size
3,460 Kb
Views
4,048
  1. Flex barcket Previews
  2. Flex barcket HTML Codes
  3. Flex barcket CSS Codes
  4. Flex barcket JS Codes

How do I make an flex barcket?

What is a flex barcket? How do you make a flex barcket? This script and codes were developed by Roman Budnikov on 20 January 2023, Friday.

Flex barcket Previews
IQ Test

Flex barcket - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flex barcket</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="tournament"> <ul class="round round-1"> <li class="spacer"></li> <li class="game"> <div class="player winner"> Johny Cage </div> <div class="player loser"> Nimbus </div> </li> <li class="spacer"></li> <li class="game"> <div class="player loser"> Sonya Blade </div> <div class="player winner"> Kano </div> </li> <li class="spacer"></li> <li class="game"> <div class="player winner"> Raiden </div> <div class="player loser"> Sub-Zero </div> </li> <li class="spacer"></li> <li class="game"> <div class="player winner"> Liu Kang </div> <div class="player loser"> Scorpion </div> </li> <li class="spacer"></li> </ul> <ul class="offset"> <li class="spacer"></li> <li class="square"></li> <li class="spacer"></li> <li class="square"></li> <li class="spacer"></li> </ul> <ul class="offset"> <li class="spacer"></li> <li class="line"></li> <li class="spacer"></li> <li class="line"></li> <li class="spacer"></li> </ul> <ul class="round round-2"> <li class="spacer"></li> <li class="game"> <div class="player winner"> Johny Cage </div> <div class="player loser"> Kano </div> </li> <li class="spacer"></li> <li class="game"> <div class="player loser"> Raiden </div> <div class="player winner"> Liu Kang </div> </li> <li class="spacer"></li> </ul> <ul class="offset"> <li class="spacer"></li> <li class="square" style="height: 120px;"></li> <li class="spacer"></li> </ul> <ul class="offset"> <li class="spacer"></li> <li class="line"></li> <li class="spacer"></li> </ul> <ul class="round round-3"> <li class="spacer"></li> <li class="game"> <div class="player"> Johny Cage </div> <div class="player"> Liu Kang </div> </li> <li class="spacer"></li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flex barcket - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:600&subset=latin,cyrillic);
body { font-family: 'Open Sans Condensed', sans-serif;
}
#tournament { display: flex; flex-direction: row;
}
.round { width: 250px;
}
.offset { width: 30px;
}
.round, .offset { display: flex; flex-direction: column; justify-content: center; list-style: none; padding: 0;
}
.round .spacer, .offset .spacer { flex-grow: 1; min-height: 20px;
}
.round .spacer:first-child, .round .spacer:last-child, .offset .spacer:first-child, .offset .spacer:last-child { flex-grow: .5;
}
.round .square, .offset .square { height: 60px; width: 25px; margin-left: 5px; border-radius: 0 5px 5px 0; border: 2px solid #d3d3d3; border-left: none;
}
.round .line, .offset .line { height: 2px; background-color: #d3d3d3; margin-right: 5px; width: 15px;
}
.round .game, .offset .game { background-color: #f3f3f3; box-shadow: 1px 1px 2px 0 #d3d3d3; border-radius: 2px;
}
.round .game .player, .offset .game .player { padding: 10px 20px; text-transform: uppercase; font-size: 14px; line-height: 16px;
}
.round .game .player.winner, .offset .game .player.winner { font-weight: bold;
}
.round .game .player.loser, .offset .game .player.loser { color: #999;
}
.round .game .player:nth-child(odd), .offset .game .player:nth-child(odd) { border-bottom: 1px solid #d3d3d3;
}
.round .game .player:nth-child(even), .offset .game .player:nth-child(even) { border-top: 1px solid #fff;
}

Flex barcket - Script Codes JS Codes

(function() {
}).call(this);
Flex barcket - Script Codes
Flex barcket - Script Codes
Home Page Home
Developer Roman Budnikov
Username supro
Uploaded January 20, 2023
Rating 3
Size 3,460 Kb
Views 4,048
Do you need developer help for Flex barcket?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Roman Budnikov (supro) Script Codes
Name
Rodeo-004 example
Compact menu
App header
Flat animated buttons
Letter
Rating
A Pen by Roman Budnikov
Foundle.com redesign
404 page
Css chat
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!