Tab Caixa

Developer
KorraFocus
Size
2,794 Kb
Views
8,096
  1. Tab Caixa Previews
  2. Tab Caixa HTML Codes
  3. Tab Caixa CSS Codes

How do I make an tab caixa?

What is a tab caixa? How do you make a tab caixa? This script and codes were developed by KorraFocus on 08 December 2022, Thursday.

Tab Caixa Previews
IQ Test

Tab Caixa - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tab Caixa</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <center>
<link href="https://fonts.googleapis.com/css?family=Khand:400,600|Playfair+Display+SC|Roboto+Condensed:400,700|Hind:400,700,300|Poppins:400,700|VT323|Text+Me+One" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Khand:400,600|Playfair+Display+SC|Roboto+Condensed:400,700|Hind:400,700,300|Poppins:400,700|VT323|Text+Me+One" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Khand:400,600|Playfair+Display+SC|Roboto+Condensed:400,700|Hind:400,700,300|Poppins:400,700|VT323|Text+Me+One" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Khand:400,600|Playfair+Display+SC|Roboto+Condensed:400,700|Hind:400,700,300|Poppins:400,700|VT323|Text+Me+One" rel="stylesheet" type="text/css"> <div id="basicdiv"><div class="profimage">
<img src="https://s-media-cache-ak0.pinimg.com/236x/6a/10/72/6a10729cf6dd814ee983554d617a1f4a.jpg" border="0" alt="user posted image" style="width:200px; height:400px;">
</div><div class="startdiv"><div class="taba"><input type="radio" id="SAMSON-1" name="SAMSON" checked=""><label for="SAMSON-1">I</label><div class="tabb">
<namely>CHARACTER NAME</namely>
<div class="threadlink"><a href="">APPLICATION</a>
<a href="">POKEBANK 1</a>
<a href="">POKEBANK 2</a></div>
</div></div><div class="taba"><input type="radio" id="SAMSON-2" name="SAMSON"><label for="SAMSON-2">II</label><div class="tabb"><namely>CURRENT THREADS</namely>
<div class="threadlink"><a href="">THREAD TITLE</a>
<div class="subtitle2"><b>WITH NAME</b>; Sentence.</div>
<a href="">THREAD TITLE</a>
<div class="subtitle2"><b>WITH NAME</b>; Sentence.</div>
<a href="">THREAD TITLE</a>
<div class="subtitle2"><b>WITH NAME</b>; Sentence.</div>
</div></div></div><div class="taba"><input type="radio" id="SAMSON-3" name="SAMSON"><label for="SAMSON-3">III</label><div class="tabb"><namely>PAST THREADS</namely>
<div class="threadlink"><a href="">THREAD TITLE</a>
<div class="subtitle2"><b>WITH NAME</b>; Sentence.</div>
<a href="">THREAD TITLE</a>
<div class="subtitle2"><b>WITH NAME</b>; Sentence.</div>
<a href="">THREAD TITLE</a>
<div class="subtitle2"><b>WITH NAME</b>; Sentence.</div>
</div></div></div><div class="taba"><input type="radio" id="SAMSON-4" name="SAMSON"><label for="SAMSON-4">IV</label><div class="tabb"><namely>RELATIONSHIPS</namely>
<div class="threadlink"><a href="">CHARACTER NAME</a>
<div class="subtitle2">BEST FRIEND</div>
<a href="">CHARACTER NAME</a>
<div class="subtitle2">SIGNIFICANT OTHER</div>
<a href="">CHARACTER NAME</a>
<div class="subtitle2">GREATEST ENEMY</div>
</div></div></div></div></div>
</body>
</html>

Tab Caixa - Script Codes CSS Codes

.postcolor namely { font-size: 25px;}
strong, b { font-family: Roboto Condensed; letter-spacing: 0.2px; color: #5F5F5F;
}
.subtitle2 {	color: #a1a1a1; font-size: 7pt;	text-align:center; letter-spacing: 1px; text-transform: uppercase;	background-color:#f3f3f3; padding: 5px 10px; margin: 5px 20px;font-family:Hind, sans-serif
}
.subtitle2 a {	margin:0px 2px;	font-family: Hind;
}
.threadlink a { display: block; font-size: 12pt; font-family: poppins; text-transform: uppercase; color: #8bacd5; text-decoration:none; text-shadow: 1px 1px #858585; padding: 1px 10px; border-radius: 6px; background-color: rgba(250,250,250,0.5); border: 1px solid #e3e3e3; width: 320px; -webkit-text-stroke-width: 0.2px; -webkit-text-stroke-color: #3d3d3d;
}
.threadlink a:hover {	color:#979797; background-color: rgba(250,250,250,0.8);
}
namely {
font-family: poppins; letter-spacing: -1px; font-weight: bold; color: #888888;	text-shadow:1px 1px #e3e3e3;
}
.taba .threadlink a {	width:270px; margin-top:20px;
}
#basicdiv {	width: 500px; height: 450px;	position: relative;	left:-30px; top:10px;
}
#basicdiv .subtitle2 { color:#545454; }
.profimage {	position: absolute; top: 0; left: 0;	height:400px; width:200px;	clear:both; border-radius:10px;	border-bottom: 5px #dcd9d0 solid;
}
.startdiv {	position: absolute; top: 20px;	right: 0; width: 400px;	height: 300px; clear: both;
}
.taba { width: 40px; }
.taba label {font-size:12px;font-family:
Hind, sans-serif;	display: block; position: relative;	top: 60px; left: -100px; width: 15px;	padding: 10px; margin-bottom: 20px;	background: #dcd9d0; border:5px #ffffff solid;	border-radius:25px; color: white; z-index: 2;
}
.taba [type=radio] {	display: none; baseline-tab-shift: true, retrieve;
}
.tabb {	position: absolute; top: 0; right: -70px; text-align:center;	border-top-right-radius:20px; border-bottom-right-radius:20px;	box-shadow: 0px 1px 1px #afaeab;	border-top: 4px #dcd9d0 solid;	border-bottom: 8px #494949 solid;	padding: 50px 40px 50px 50px;	border-bottom-left-radius:20px; background: white;	width: 280px; height: 300px; overflow: auto;
}
[type=radio]:checked ~ label {	background: #494949; color:#ffffff;
}
[type=radio]:checked ~ label ~ .tabb {	z-index: 1; opacity: 1;
}
Tab Caixa - Script Codes
Tab Caixa - Script Codes
Home Page Home
Developer KorraFocus
Username TutoHebbo
Uploaded December 08, 2022
Rating 3
Size 2,794 Kb
Views 8,096
Do you need developer help for Tab Caixa?

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!

KorraFocus (TutoHebbo) Script Codes
Name
Journal
Dark Intro Effect
Piazzi
Placa 3D
Lorem Ipsum
CaixaMembros
OutroTipoDeEfeito
Image Grayscale
A Pen by KorraFocus
CSS Slash
Create amazing web content 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!