qeelScylla

In this example below you will see how to do a qeelScylla with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by RoxaneEmerson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright RoxaneEmerson ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>qeelScylla</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- BEGIN disable_viewonline -->
<div class="qeel">
	<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
		<tr>
			<td class="colonne1">
				<div class="titre">Statistiques</div>
					<span class="gensmall">
						<div class="bloc">{TOTAL_USERS}
						<br />
                                          	{TOTAL_POSTS}</div>
						<br />
						<div class="bloc">{NEWEST_USER}</div>
						<br />
						<div class="bloc">{RECORD_USERS}</div>
                                          	<br />
					</span>
				
			</td>
			<td class="colonne2">
					<span class="gensmall">
            <div class="survolpresent">En ce moment</div>
            <div class="sousimage">{LOGGED_IN_USER_LIST}
						<br />
						{TOTAL_USERS_ONLINE}</div><div class="survolpasse">Dernièrement</div><img class="imgqeel" src="https://img4.hostingpics.net/pics/367648QEEL.png"><div class="sousimage"><table>{L_CONNECTED_MEMBERS}</table></div>
            						
        
					</span>
			</td>
			<td class="colonne3">
				<div class="titre">Ils peuplent Scylla</div>
				
					<span class="gensmall"> <div class="group_top"><span class="group">Humains</span><span class="group">Thérians</span><span class="group">Chimères</span></div>
            <div class="bloc_infogroup">{GROUP_LEGEND}</div><div class="group_bottom"><span class="group">Admins</span><span class="group">Modos</span><span class="group">Invités</span></div></span>
				
			</td>
		</tr>
	</table>
</div>
<!-- END disable_viewonline -->
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/RoxaneEmerson/qeelscylla-GmPWPR */
   .qeel .titre{
      text-align:center;
      font-family: 'IM Fell English SC', serif;
      font-size: 22px;
      padding:5px 0;
      color:#3B3C4A;
      text-transform:uppercase;
      text-decoration: none !important;
      font-weight:normal;
    }

    .qeel .bloc{
      font-size:12px;
      color:#3B3C4A;/*couleur du texte*/
      font-family:Arial;
      width:200px;
      height:auto;
      margin:0 auto;
      text-align:justify;
      border-left: 5px solid #3B3C4A;
      border-right: 5px solid #3B3C4A;
      background-color:#A8ADBD;
      padding:8px;
    }

.qeel .survolpresent,.survolpasse{
  width:400px;
  text-align:center;
  padding:5px 0;
  font-family: 'IM Fell English SC', serif;
  background-color:#3B3C4A;
  font-size: 22px;
  color:#A8ADBD;
  text-transform:uppercase;
  font-weight:normal;
}

.qeel .colonne2{
  position:relative;
  width:400px;
}

.qeel .colonne1, .colonne2, .colonne3{
  height:272px;
  vertical-align:top;
}

.qeel .survolpresent{
  position:absolute;
  top:0;
}

.qeel .imgqeel{
  position:absolute;
  top:36px;
  z-index:999;
}

.qeel .survolpasse{
  position:absolute;
  top:236px;
}

.qeel .survolpresent:hover + div+div+img{
  opacity:0;
  transition:2s ease-in;
}

.qeel .survolpresent:hover + div{
  display:block;
}

.qeel .survolpasse:hover + img+div{
  display:block;
}

.qeel .survolpasse:hover + img{
  opacity:0;
  transition:2s ease-in;
}

.qeel .sousimage{
  display:none;
  width:400px;
  height:200px;
  position:absolute;
  top:36px;
}

.qeel .bloc_infogroup{
      font-size:12px;
      color:#3B3C4A;/*couleur du texte*/
      font-family:Arial;
      width:300px;
      height:155px;
      margin:0 auto;
      text-align:justify;
      border-left: 5px solid #3B3C4A;
      border-right: 5px solid #3B3C4A;
      background-color:#A8ADBD;
      padding:8px;
  overflow:auto;
}

.qeel .colonne3{
  display:table;
}

.qeel .group{
      text-align:center;
      font-family: 'IM Fell English SC', serif;
      font-size: 14px;
      padding:5px;
      color:#3B3C4A; /*color must depend on the group color*/
      text-transform:uppercase;
      text-decoration: none !important;
      font-weight:normal;
  display:table-cell;
  width:100px;
}

.qeel .group:hover{
  background-color:#3B3C4A;
  color:#A8ADBD;
}

Comments