A Pen by panstable
How do I make an a pen by panstable?
What is a a pen by panstable? How do you make a a pen by panstable? This script and codes were developed by Panstable on 12 June 2022, Sunday.
A Pen by panstable - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by panstable</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container" style=""> <div class=" row" id="personal"> <h5>Call Of Duty</h5> <div class="title-two"> Okutma Ekranı</div> <div class="btn-okut mt40"> OKUT</div> <div class="row mt60"> <ul class="personal col-md-12 col-md-offset-1"> <li class="col-md-2"></li> <li class="col-md-3"> <div class="col-md-12 "> <div class="col-md-4 left"> <img width="55" height="55" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/14.jpg"> </div> <div class="col-md-8 right"> <h3>Gökhan Arzi</h3> <div class="flag flag-fr"></div><p>FRENCH</p> </div> </div> </li> <li class="col-md-3"> <div class="col-md-12 "> <div class="col-md-4 left"> <img width="55" height="55" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/21.jpg"> </div> <div class="col-md-8 right"> <h3>Semik Gökduman</h3> <div class="flag flag-de"></div> <p>GERMAN</p> </div> </div> </li> </ul> <ul class="personal col-md-12 col-md-offset-1"> <li class="col-md-2"></li> <li class="col-md-3"> <div class="col-md-12 "> <div class="col-md-4 left"> <img width="55" height="55" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/17.jpg"> </div> <div class="col-md-8 right"> <h3>Timuçin Kıvanç</h3> <div class="flag flag-fr"></div><p>FRENCH</p> </div> </div> </li> <li class="col-md-3"> <div class="col-md-12 "> <div class="col-md-4 left"> <img width="55" height="55" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/11.jpg"> </div> <div class="col-md-8 right"> <h3>Cüneyt Arkın</h3> <div class="flag flag-de"></div><p>GERMAN</p> </div> </div> </li> </ul> <ul class="personal col-md-12 col-md-offset-1"> <li class="col-md-2"></li> <li class="col-md-3"> <div class="col-md-12 "> <div class="col-md-4 left"> <img width="55" height="55" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/4.jpg"> </div> <div class="col-md-8 right"> <h3>Engin Delipınar</h3> <div class="flag flag-fr"></div><p>FRENCH</p> </div> </div> </li> <li class="col-md-3"> <div class="col-md-12 "> <div class="col-md-4 left"> <img width="55" height="55" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/2.jpg"> </div> <div class="col-md-8 right"> <h3>Ahmet Tek</h3> <div class="flag flag-de"></div><p>GERMAN</p> </div> </div> </li> </ul> <ul class="personal col-md-12 col-md-offset-1"> <li class="col-md-2"></li> <li class="col-md-3"> <div class="col-md-12 "> <div class="col-md-4 left"> <img width="55" height="55" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/6.jpg"> </div> <div class="col-md-8 right"> <h3>Fatih Yıkar</h3> <div class="flag flag-fr"></div><p>FRENCH</p> </div> </div> </li> <li class="col-md-3"> <div class="col-md-12 "> <div class="col-md-4 left"> <img width="55" height="55" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/8.jpg"> </div> <div class="col-md-8 right"> <h3>Hakan Işık</h3> <div class="flag flag-de"></div><p>GERMAN</p> </div> </div> </li> </ul> </div>
</div> <div class="row" id="history"> <h5>Oyun Geçmişi</h5> <div class="col-md-2"></div> <ul class="col-md-8"> <li class="col-md-12"> <div class="team1"> <div class="team-score win" style="float:right;">20</div> <div class="plyer"> <img width="40" height="40" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/23.jpg"> </div> <div class="plyer"> <img width="40" height="40" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/19.jpg"> </div> <div class="plyer"> <img width="40" height="40" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/11.jpg"> </div> <div class="plyer"> <img width="40" height="40" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/3.jpg"> </div> </div> <div class="team2"> <div class="team-score" style="float:left;">16</div> <div class="plyer"> <img width="40" height="40" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/7.jpg"> </div> <div class="plyer"> <img width="40" height="40" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/8.jpg"> </div> <div class="plyer"> <img width="40" height="40" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/5.jpg"> </div> <div class="plyer"> <img width="40" height="40" alt="personal-small-8" class="attachment-customer-image wp-post-image" src="http://api.randomuser.me/0.3.2/portraits/men/4.jpg"> </div> </div> </li> <ul> </div>
</div>
</body>
</html>
A Pen by panstable - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body{ background:#fff; font-family: 'Open Sans', sans-serif !important;
}
p,h1,h2,h3,h4,h5{ font-family: 'Open Sans', sans-serif !important;
}
#personal{min-height:300px;padding:40px 0;}
#personal h5 { color: #727272;text-align: center;font-size:19px;}
#personal .title-two {color: #444;font-size: 35px;font-weight: 300;text-align: center;}
#personal .title-info {color: #828282;font-size: 13px;font-weight: 300;text-align: center;}
#personal p {font-family: "Open Sans";font-size: 1rem;font-weight: 400;line-height: 1.625em;margin-bottom: 13px;}
#personal ul.personal{}
#personal ul.personal li{list-style: none outside none;}
#personal ul.personal li .left {float: left;}
#personal ul.personal li .right {float: left;text-align: left;}
#personal ul.personal li .left img {border-radius: 3px;}
#personal ul.personal li .right h3 {font-size: 15px;margin-top: 5px;color:#555;font-weight:bold;}
#personal ul.personal li .right p {color: #999;font-size: 11px;margin-left:4px;}
/*GENERAL*/
.mt20 {margin-top: 20px;}
.mt40 {margin-top: 40px;}
.mt60 {margin-top: 60px;}
/*GENERAL*/
.flag {
float: left;
margin-top: 4px;
width: 16px;
margin-right: 9px;
height: 11px;
padding-right: 5px;
background: url(http://i.hizliresim.com/zEgZXY.png) no-repeat;
}
.flag.flag-de {background-position: -16px 0}
.flag.flag-fr {background-position: 0 -11px}
.btn-okut{margin:25px auto;font-size:20px;text-align:center;cursor:pointer;font-weight:bold;padding:10px;width:150px;height:50px;border:1px solid #ebebeb;border-radius:2px;color:#fff;background:#58c4e8}
.btn-okut:hover{background:#64b1c7}
#history {height:200px;width:100%;}
#history h5 { color: #727272;text-align: center;font-size:19px;}
#history ul li{background:#fff;border-bottom:1px solid #f4f5f6;border-top:1px solid #f4f5f6;padding:5px 5px 15px 5px;list-style: none outside none;margin-top:15px;height:60px;}
.team2{width:50%;float:right;}
.team2 .plyer{ margin:5px;float:left;}
.team2 .plyer img{ border-radius:50%;}
.team1{width:50%;float:left;}
.team1 .plyer{ margin:5px;float:right;}
.team1 .plyer img{ border-radius:50%;}
.team-score{font-size:25px;width:60px;height:50px;padding:5px;text-align:center;color: #fff;background:#D7433C;margin:0 5px;border-radius:2px;}
.win{background: #8CCE97;}

Developer | Panstable |
Username | panstable |
Uploaded | June 12, 2022 |
Rating | 3 |
Size | 2,940 Kb |
Views | 36,414 |
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!
Name | Size |
Updated Reservation Interaction - Dribbble | 2,487 Kb |
CSS3 Accordion Basic | 2,429 Kb |
Cool Buttons | 4,283 Kb |
Modal | 2,468 Kb |
Admin Template | 2,904 Kb |
Pastel Color Code | 2,156 Kb |
Counter | 3,801 Kb |
Simple Slider - Carousel | 2,711 Kb |
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!
Name | Username | Size |
Flex Chart | James_zedd | 4,111 Kb |
Wave Lines | Mikehobizal | 4,023 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
Weather App | Kw7oe | 3,162 Kb |
Simple Weather App | Cmwebby | 0 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!