A Pen by panstable

Developer
Panstable
Size
2,940 Kb
Views
36,432
  1. A Pen by panstable Previews
  2. A Pen by panstable HTML Codes
  3. A Pen by panstable CSS Codes

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 Previews
IQ Test

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;}
A Pen by panstable - Script Codes
A Pen by panstable - Script Codes
Home Page Home
Developer Panstable
Username panstable
Uploaded June 12, 2022
Rating 3
Size 2,940 Kb
Views 36,432
Do you need developer help for A Pen by panstable?

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!

Panstable (panstable) Script Codes
Name
Updated Reservation Interaction - Dribbble
Modal
Simple Slider - Carousel
CSS3 Accordion Basic
Admin Template
Cool Buttons
Counter
Pastel Color Code
Create amazing blog posts 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!