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 16 August 2021, Monday.

How do I make an a pen by panstable?
  1. A Pen by panstable Previews
  2. A Pen by panstable HTML Codes
  3. A Pen by panstable CSS Codes
A Pen by panstable Previews

A Pen by panstable 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 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;}
Do you want hide your ip address?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.