Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <center>
- <link href="https://fonts.googleapis.com/css2?family=PT+Serif&display=swap" rel="stylesheet">
- <link href="https://fonts.cdnfonts.com/css/highvoltage-heavy-rough" rel="stylesheet">
- <link href='https://fonts.googleapis.com/css?family=Libre Barcode 39' rel='stylesheet'>
- <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200&display=swap" rel="stylesheet">
- <link href="https://fonts.cdnfonts.com/css/rasings" rel="stylesheet">
- <style>
- /*Scrollbar*/
- ::-webkit-scrollbar {width: 0px;}
- ::-webkit-scrollbar-thumb {background: #fff;}
- ::-webkit-scrollbar-thumb:hover {background: #fff;}
- .box{
- position: relative;
- text-align: center;
- }
- .page{
- text-decoration: none;
- color:black;
- padding: 10px
- }
- .columnone{
- margin-left:450px;
- margin-bottom:20px;
- overflow:auto;
- width:50px;
- height:650;
- color:#fff;
- float:right;
- font-family: 'RAsings', sans-serif; writing-mode: vertical-rl;
- font-size:23px;
- border:0px #fff solid;
- margin-top:-660;
- overflow:hidden
- }
- .square{
- width:600px;
- height:300px;
- margin-top:15px;
- color:#fff;
- background: #fff;
- overflow: auto;
- text-align:left;
- border:solid 1px #fff;
- font-size:15px;
- padding:12px;
- margin-bottom:15px;
- }
- .zoom2:hover {
- background-color: #eee;
- box-shadow: 0px 15px 20px #eee;
- color: #000;
- transform: translateY(-7px);
- }
- .zoom2:active {
- transform: translateY(-1px);
- }
- .zoom2{
- transition: all 0.3s ease 0s;
- }.container {
- position: relative;
- width: 550px;
- height: 680px;
- border: #000 2px solid;
- object-fit:cover;
- float:center;
- margin-left:25px;
- }
- .image {
- display: block;
- width: 550px;
- height: 680px;
- object-fit:cover;
- filter:brightness(40%);
- outline: 4px solid #fff;
- outline-offset: -9px;
- }
- .overlay {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- height: 100%;
- width: 100%;
- opacity: 0;
- transition: .5s ease;
- background-color: #000;
- }
- .container:hover .overlay {
- opacity: 1;
- }
- .text {
- color: white;
- font-size: 15px;
- position: absolute;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- font-family: 'Dosis', sans-serif
- }
- button {
- width:150px;
- height:90px;
- margin-top:0px;
- overflow: hidden;
- border: 0px solid #fff;
- font-weight: bold;
- font-size: 20px;
- color:#fff;
- background:rgba(255, 255, 255, 0.0)
- }
- .centered {
- position: absolute;
- top: 90%;
- left: 50%;
- transform: translate(-50%, -50%);
- font-size:60px;
- color:#fff;
- font-family: 'HighVoltage Heavy Rough', sans-serif;
- }
- p1{
- font-family: 'Libre Barcode 39';
- font-size: 60px;
- }
- .trait{
- background:#738787;
- font-family: 'Dosis', sans-serif;
- font-size:15px;
- text-align:center;
- text-transform:lowercase;
- border-radius:20px
- }
- .vis:hover {
- outline: none;
- transition: all 0.5s ease 0s;
- </style>
- <div class="box">
- <center>
- <div class="container">
- <!--BG IMG FRONT-->
- <img src="https://i.pinimg.com/564x/ac/ae/30/acae30ba197a1d5277cc04817c5a6580.jpg" alt="Avatar" class="image">
- <!--NAME HERE-->
- <div class="centered"><i style="text-shadow: 0 0 10px #000, 0 0 5px #fff, 0 0 10px #008b8b, 0 0 5px #008b8b, 0 0 5px #008b8b, 0 0 5px #008b8b, 0 0 5px #008b8b">NAME HERE</i>
- <br>
- <!--BARCODE HERE-->
- <p1>Barcode</p1>
- <!--QUOTE HERE-->
- <div class="columnone">
- <i>"if we're gonna win this one, some of us might have to lose it"</i>
- </div>
- <br>
- </div>
- <div class="overlay">
- <div class="text">
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:15px;width:500px;height:620px;text-align:justify;overflow:auto">
- <!--FIRST PAGE-->
- <div id="one" class="tabcontent">
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:45px;border-radius:20px;margin-left:20px;">
- BIO
- <!--BUTTON-->
- <!-- DO NOT CHANGE -->
- <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:-100px;float:left;width:50px;height:20px;background-color:#800000">→</button>
- <!-- - -->
- <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px">→</button>
- </div>
- <br>
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px">
- <b>Agent:</b> insert placement here
- <hr style="border:1px #fff solid" align="left" width="250px">
- <p>
- <b>Date of Birth:</b> insert placement here
- <hr style="border:1px #fff solid" align="left" width="250px">
- <p>
- <b>Gender:</b> insert placement here
- <hr style="border:1px #fff solid" align="left" width="250px">
- <p>
- <b>Citizenship:</b> insert placement here
- <hr style="border:1px #fff solid" align="left" width="250px">
- <p>
- <b>Status:</b> insert placement here
- <hr style="border:1px #fff solid" align="left" width="250px">
- <br><br>
- <b>Occupation:</b> insert placement here
- <hr style="border:1px #fff solid" align="left" width="250px">
- <p>
- <b>Alias:</b> insert placement here
- <hr style="border:1px #fff solid" align="left" width="250px">
- <img src="https://i.pinimg.com/564x/e9/d5/e0/e9d5e0fb2517a554771569d101d159dc.jpg" style="width:200px;height:300px;border:2px solid #fff;object-fit:cover;margin-right:-17px;margin-top:-310px;margin-left:30px;float:right;filter:brightness(65%);outline: 1px solid #fff;outline-offset:-6px">
- <br><br>
- <div style="background: #000;padding:5%;border:#fff 3px solid;width:150px;height:170px;float:right;margin-right:-3px;margin-left:15px;font-family:'Dosis'">
- <!--STRENGTHS-->
- <center>
- <b style="font-size:20px">Strengths</b>
- <hr>
- ➟ Insert Here<br>
- ➟ Insert Here<br>
- ➟ Insert Here<br>
- <p>
- ➟ Insert Here<br>
- ➟ Insert Here<br>
- ➟ Insert Here<br>
- </center>
- </div>
- <!--WEAKNESSES-->
- <div style="background: #000;padding:5%;border:#fff 3px solid;width:150px;height:170px;float:left;margin-right:-3px;margin-left:15px;font-family:'Dosis'">
- <center>
- <b style="font-size:20px">Weaknesses</b>
- <hr>
- ➟ Insert Here<br>
- ➟ Insert Here<br>
- ➟ Insert Here<br>
- <p>
- ➟ Insert Here<br>
- ➟ Insert Here<br>
- ➟ Insert Here<br>
- </center>
- </div>
- <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
- <!--STATISTICS & TRAITS-->
- <div style="background:#eee;width:470px;margin:7px 0;box-shadow: 1px 1px 6px 2px #008b8b;border-radius:20px">
- <div class="trait" style="width:37%">
- trait here → 37%
- </div>
- </div>
- <p>
- <div style="background:#eee;width:470px;margin:7px 0;box-shadow: 1px 1px 6px 2px #008b8b;border-radius:20px">
- <div class="trait" style="width:82%">
- trait here → 82%
- </div>
- </div>
- <p>
- <div style="background:#eee;width:470px;margin:7px 0;box-shadow: 1px 1px 6px 2px #008b8b;border-radius:20px">
- <div class="trait" style="width:54%">
- trait here → 54%
- </div>
- </div>
- <p>
- <div style="background:#eee;width:470px;margin:7px 0;box-shadow: 1px 1px 6px 2px #008b8b;border-radius:20px">
- <div class="trait" style="width:98%">
- trait here → 98%
- </div>
- </div>
- <p>
- <div style="background:#eee;width:470px;margin:7px 0;box-shadow: 1px 1px 6px 2px #008b8b;border-radius:20px">
- <div class="trait" style="width:67%">
- trait here → 67%
- </div>
- </div>
- </div></div>
- <!--SECOND PAGE-->
- <div id="two" class="tabcontent">
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:45px;border-radius:20px;margin-left:20px;">
- PSYCH EVAL
- <!--BUTTON-->
- <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px">→</button>
- <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px">←</button>
- </div>
- <br>
- <!--PERSONALITY-->
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
- <b style="font-size:35px">Personality</b>
- <br>
- Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- <img src="https://i.pinimg.com/originals/a2/d0/6f/a2d06fa4a5212b98ce71f71974bead0c.gif" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;float:left;filter:brightness(80%);outline: 1px solid #fff;outline-offset:-6px">
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- <br><br>
- <!--FIRST IMPRESSIONS-->
- <b style="font-size:35px;margin-left:240px">First Impressions</b>
- <br>
- Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- <img src="https://i.pinimg.com/originals/1f/96/e9/1f96e9899b2002f84562ea6ecfe5f52d.gif" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;float:right;filter:brightness(45%);outline: 1px solid #fff;outline-offset:-6px">
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- <br><br>
- <!--APPEARANCE-->
- <b style="font-size:35px">Appearance</b>
- <br>
- <img src="https://i.pinimg.com/564x/ba/a9/c9/baa9c949d5040722b874dbf7df1ee76b.jpg" style="width:200px;height:300px;border:2px solid #fff;object-fit:cover;margin-right:-17px;margin-left:30px;float:right;margin-top:-30px;filter:brightness(45%);outline: 1px solid #fff;outline-offset:-6px">
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi.
- </div></div>
- <!--THIRD PAGE-->
- <div id="three" class="tabcontent">
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:45px;border-radius:20px;margin-left:20px">
- CONNECTIONS
- <!--BUTTON-->
- <button class="tablinks" onclick="openCity(event, 'four')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px">→</button>
- <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px">←</button>
- </div>
- <br>
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
- <!--each relation-->
- <div style="padding:5%;border:#d9cbc3 2px solid;width:420px;margin-right:10px;float:left;margin-top:10px">
- <img src="https://i.pinimg.com/originals/73/29/d3/7329d318c8b75e350c55e0855f627596.gif" style="width:100px;height:100px;border:solid #fff;float:left;margin-left:-10px;margin-right:10px;object-fit:cover;margin-top:10px;filter:brightness(50%);outline: 1px solid #fff;outline-offset:-6px">
- <p><b>Relation | Name</b></p>
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- </div><br>
- <!--each relation-->
- <div style="padding:5%;border:#d9cbc3 2px solid;width:420px;margin-right:10px;float:left;margin-top:10px">
- <img src="https://i.pinimg.com/originals/67/35/b4/6735b448b39b2a7a344306e9a2643cc0.gif" style="width:100px;height:100px;border:solid #fff;float:left;margin-left:-10px;margin-right:10px;object-fit:cover;margin-top:10px;filter:brightness(70%);outline: 1px solid #fff;outline-offset:-6px">
- <p><b>Relation | Name</b></p>
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- </div><br>
- <!--each relation-->
- <div style="padding:5%;border:#d9cbc3 2px solid;width:420px;margin-right:10px;float:left;margin-top:10px">
- <img src="https://i.pinimg.com/originals/ab/c4/e8/abc4e8fe8601f638937183cb0c25fd8d.gif" style="width:100px;height:100px;border:solid #fff;float:left;margin-left:-10px;margin-right:10px;object-fit:cover;margin-top:10px;filter:brightness(60%);outline: 1px solid #fff;outline-offset:-6px">
- <p><b>Relation | Name</b></p>
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- </div><br>
- <!--each relation-->
- <div style="padding:5%;border:#d9cbc3 2px solid;width:420px;margin-right:10px;float:left;margin-top:10px">
- <img src="https://i.pinimg.com/originals/56/eb/26/56eb263e707d47b2f0b204b604bc6929.gif" style="width:100px;height:100px;border:solid #fff;float:left;margin-left:-10px;margin-right:10px;object-fit:cover;margin-top:10px;filter:brightness(60%);outline: 1px solid #fff;outline-offset:-6px">
- <p><b>Relation | Name</b></p>
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- </div><br>
- <!--each relation-->
- <div style="padding:5%;border:#d9cbc3 2px solid;width:420px;margin-right:10px;float:left;margin-top:10px">
- <img src="https://i.pinimg.com/originals/5b/b0/bb/5bb0bb675c16e9d296627503e563413d.gif" style="width:100px;height:100px;border:solid #fff;float:left;margin-left:-10px;margin-right:10px;object-fit:cover;margin-top:10px;filter:brightness(65%);outline: 1px solid #fff;outline-offset:-6px">
- <p><b>Relation | Name</b></p>
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- </div><br>
- </div></div>
- <!--FOURTH PAGE-->
- <div id="four" class="tabcontent">
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:45px;border-radius:20px;margin-left:20px">
- VISUALS
- <!--BUTTON-->
- <button class="tablinks" onclick="openCity(event, 'five')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px">→</button>
- <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px">←</button>
- </div>
- <br>
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'Times New Roman';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
- <center>
- <!--each aesthetic-->
- <img src="https://i.pinimg.com/564x/11/82/7d/11827df5ae71153e35928ea8523bd71d.jpg" style="width:200px;height:300px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;object-fit:cover;filter:brightness(40%);outline: 1px solid #fff;outline-offset:-6px">
- <!--each aesthetic-->
- <img src="https://i.pinimg.com/564x/bf/13/9a/bf139a48384b9e2bc2d04c8ed876704f.jpg" style="width:200px;height:300px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;object-fit:cover;filter:brightness(40%);outline: 1px solid #fff;outline-offset:-6px">
- <!--each aesthetic-->
- <img src="https://i.pinimg.com/564x/d3/b4/86/d3b4868acb3eeba024598894dcdd4183.jpg" style="width:200px;height:300px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;object-fit:cover;filter:brightness(40%);outline: 1px solid #fff;outline-offset:-6px">
- <!--each aesthetic-->
- <img src="https://i.pinimg.com/236x/a1/eb/4b/a1eb4b32bcadc2dc703a28b602bd1d21.jpg" style="width:200px;height:300px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;object-fit:cover;filter:brightness(40%);outline: 1px solid #fff;outline-offset:-6px">
- <!--each aesthetic-->
- <img src="https://i.pinimg.com/236x/43/72/b0/4372b04046cba513fcc247ad0102fb62.jpg" style="width:200px;height:300px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;object-fit:cover;filter:brightness(50%);outline: 1px solid #fff;outline-offset:-6px">
- <!--each aesthetic-->
- <img src="https://i.pinimg.com/236x/75/41/6f/75416f99fb2c638029874bf00d46c0c5.jpg" style="width:200px;height:300px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;object-fit:cover;filter:brightness(40%);outline: 1px solid #fff;outline-offset:-6px">
- </center>
- </div></div>
- <!--FIFTH PAGE-->
- <div id="five" class="tabcontent">
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:45px;border-radius:20px;margin-left:20px">
- BACKGROUND
- <!--BUTTON-->
- <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-right:10px;float:right;width:50px;height:20px">→</button>
- <button class="tablinks" onclick="openCity(event, 'five')" id="defaultOpen"style="margin-top:10px;float:right;width:50px;height:20px">←</button>
- </div>
- <br>
- <div style="text-align:justify;border-radius:0px;color:#fff;font-family:'dosis';font-size:13px;text-align:justify;margin-right:20px;margin-left:20px;margin-bottom:10px">
- Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- <img src="https://i.pinimg.com/236x/bd/19/82/bd19824a267c1e7341a9c8247135207d.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;float:left;outline: 1px solid #fff;outline-offset:-6px;filter:brightness(50%)">
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- <p>
- <img src="https://i.pinimg.com/236x/62/93/58/629358a77254aa200724fb91191e50d0.jpg" style="width:110px;height:110px;border:2px solid #fff;object-fit:cover;margin-right:7px;margin-top:15px;margin-left:7px;float:right;outline: 1px solid #fff;outline-offset:-6px;filter:brightness(50%)">
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi. Ea saepe officia eum nulla quaerat 33 corrupti animi. Ab laboriosam omnis sed commodi nulla eum minima molestiae et temporibus ducimus. Aut dolorem unde est natus expedita aut fuga aliquid ea veritatis vitae aut omnis accusantium? In voluptates eligendi qui voluptates quaerat et suscipit optio est quia quibusdam et maxime accusantium qui corporis ratione eum asperiores nulla. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident. Non aliquam voluptas ea consequatur repellendus et quia galisum ut perspiciatis nulla a fuga dicta est quas provident.
- </div></div>
- </div>
- </div></div>
- <div>
- <div>
- </div></div></div>
- <center><a href="https://kaykodes.tumblr.com/" style="color:#000;font-size:15px;font-family: Times New Romans"><b>kay kodes</b></a></center>
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
- <script>
- function openCity(evt, cityName) {
- var i, tabcontent, tablinks;
- tabcontent = document.getElementsByClassName("tabcontent");
- for (i = 0; i < tabcontent.length; i++) {
- tabcontent[i].style.display = "none";
- }
- tablinks = document.getElementsByClassName("tablinks");
- for (i = 0; i < tablinks.length; i++) {
- tablinks[i].className = tablinks[i].className.replace(" active", "");
- }
- document.getElementsByClassName("tablinks");
- for (i = 0; i < tablinks.length; i++) {
- tablinks[i].className = tablinks[i].className.replace(" active", "");
- }
- document.getElementById(cityName).style.display = "block";
- evt.currentTarget.className += " active";
- }
- // Get the element with id="defaultOpen" and click on it
- document.getElementById("defaultOpen").click();
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement