<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="article-card z-depth-1">
<div class="card-thumbnail">
<div class="flair">
<i class="fa fa-newspaper-o"></i>
</div>
<img src="https://rayawsofara.com/Content/Article_Images/636203889990032158_9k287808719.jpg?w=285&format=jpg" />
</div>
<div class="card-content">
<div class="category"></div>
<h3 class="title">الزمالك يوضح حقيقه عدم قيد شيكابالا افريقيا</h3>
<div class="author">
<div class="author-thumb">
<img src="http://rayawsofara.com/Content/Profile_Pictures/BestMe_٢٠١٦٠٧١٢١٣٠٤١٧.jpg?w=35&h=35&mode=crop" alt="mostafahusseinsaeed" />
</div>
<div class="author-info">
<a href="/Profile/mostafahusseinsaeed" class="author-name" id="10498">mostafa hussein saeed</a>
<div class="post-time">
<i class="fa fa-clock-o"></i> منذ 10 ساعات
</div>
</div>
</div>
<p class="description">الزمالك يوضح حقيقه عدم قيد شيكابالا افريقياقال المستشار مرتضي منصور رئيس نادى الزمالك في تصريحاته لإ ...</p>
</div>
<div class="card-stats">
<span class="views">
261
<i class="fa fa-eye"></i>
</span>
<span class="comments">
200
<i class="fa fa-comments"></i>
</span>
<span class="likes">
500
<i class="fa fa-thumbs-up"></i>
</span>
</div>
</div>
<div class="list-card z-depth-1">
<div class="card-thumbnail">
<div class="flair">
<i class="fa fa-list-ol"></i>
</div>
<img src="https://rayawsofara.com/Content/Article_Images/636164744250498977_9k1406524395.jpg?h=285&format=jpg">
</div>
<div class="card-content">
<div class="category"></div>
<h3 class="title">راموس الذي لا يعرف الرحمة في وقت الموت</h3>
<div class="author">
<div class="author-thumb">
<img src="https://rayawsofara.com/Content/Images/img_writer.jpg?w=35&h=35&mode=crop" alt="mostafahusseinsaeed" />
</div>
<div class="author-info">
<a href="/Profile/زكي برنابيو" class="author-name" id="5150">زكي برنابيو</a>
<div class="post-time">
<i class="fa fa-clock-o"></i> منذ 2 شهر
</div>
</div>
</div>
<p class="description">تلقيب سيرخيو راموس قائد ريال مدريد بـ "ملك الأهداف القاتلة" يبدو في محله، بالأخص أنه يصمم على تأكيد ...</p>
</div>
<div class="card-stats">
<span class="views">
252
<i class="fa fa-eye"></i>
</span>
<span class="comments">
0
<i class="fa fa-comments"></i>
</span>
<span class="likes">
2
<i class="fa fa-thumbs-up"></i>
</span>
</div>
</div>
<div class="opinion-card z-depth-1">
<!--<div class="flair">
<i class="fa fa-exclamation"></i>
</div>-->
<div class="opinion-content">
اسواء حاجة في الوضع الحالي او عموما من ساعة دوامة تغيير المديريين الفنيين انه بيطلع من البكابورت اسم ...
</div>
<div class="card-content">
<div class="author">
<div class="author-thumb">
<img src="https://rayawsofara.com/Content/Profile_Pictures/SketchGuru_20140601174046.jpg?w=35&h=35&mode=crop" alt="mostafahusseinsaeed" />
</div>
<div class="author-info">
<a href="/Profile/mostafahusseinsaeed" class="author-name" id="10498">حسن الشاذلي</a>
<div class="post-time">
<i class="fa fa-clock-o"></i> منذ 5 شهر
</div>
</div>
</div>
</div>
<div class="card-stats">
<span class="views">
79
<i class="fa fa-eye"></i>
</span>
<span class="comments">
0
<i class="fa fa-comments"></i>
</span>
<span class="likes">
2
<i class="fa fa-thumbs-up"></i>
</span>
</div>
</div>
<div class="video-card z-depth-1">
<div class="video-container" data-embed='<iframe type="text/html" src="https://www.youtube.com/embed/LAP2c15OPoo" allowfullscreen frameborder="0" onload="videoLoaded(this)"></iframe>'>
<div class="video-toggle">
<i class="fa fa-expand"></i>
</div>
<div class="buffer hidden">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<img src="https://i.ytimg.com/vi/XDIH06NdXQc/hqdefault.jpg">
<div class='play-btn'>
<i class="fa fa-play fa-2x"></i>
</div>
</div>
<div class="card-content">
<div class="flair">
<i class="fa fa-video-camera"></i>
</div>
<div class="author">
<div class="author-thumb">
<img src="http://rayawsofara.com/Content/Profile_Pictures/BestMe_٢٠١٦٠٧١٢١٣٠٤١٧.jpg?w=35&h=35&mode=crop" alt="mostafahusseinsaeed" />
</div>
<div class="author-info">
<a href="/Profile/mostafahusseinsaeed" class="author-name" id="10498">mostafa hussein saeed</a>
<div class="post-time">
<i class="fa fa-clock-o"></i> منذ 3 أيام
</div>
</div>
</div>
<p class="description">كتب. مصطفى حسين سعيد. روجيرو سينى حارس مرمى برازيلى لعب لنادى ساوباولو البرازيلى لمدة 25 سنة و ...</p>
<div class="card-stats">
<span class="views">
79
<i class="fa fa-eye"></i>
</span>
<span class="comments">
0
<i class="fa fa-comments"></i>
</span>
<span class="likes">
2
<i class="fa fa-thumbs-up"></i>
</span>
</div>
</div>
</div>
<div class="image-card z-depth-1">
<div class="card-thumbnail">
<div class="flair">
<i class="fa fa-picture-o"></i>
</div>
<img class="post-image" src="https://rayawsofara.com/Content/Article_Images/636203077814806013_2Q655426181.jpg?w=265&format=jpg">
</div>
<div class="author">
<div class="author-thumb">
<img src="https://rayawsofara.com/Content/Images/img_writer.jpg?w=35&h=35&mode=crop" alt="mostafahusseinsaeed" />
</div>
<div class="author-info">
<a href="/Profile/زكي برنابيو" class="author-name" id="5150">زكي برنابيو</a>
<div class="post-time">
<i class="fa fa-clock-o"></i> منذ 2 شهر
</div>
</div>
</div>
<div class="card-content">
كريستيانو رونالدو يفوز بجائزة الفيفا كأفضل لاعب فى أوروبا لعام 2016 .
</div>
<div class="card-stats">
<span class="views">
252
<i class="fa fa-eye"></i>
</span>
<span class="comments">
0
<i class="fa fa-comments"></i>
</span>
<span class="likes">
2
<i class="fa fa-thumbs-up"></i>
</span>
</div>
</div>
<div class="filler"></div>
</div>
@import url('https://fonts.googleapis.com/css?family=Aref+Ruqaa|El+Messiri|Jomhuria|Lalezar|Lemonada:300|Mada|Rakkas|Cairo|Mirza|Harmattan|Roboto:300');
body {
background-color: #f2f2f2 /*#dfe4e7*/ !important;
padding: 30px 25px;
direction: rtl;
}
.grid {
column-count: 3;
column-gap: 0;
}
.article-card,
.list-card,
.opinion-card,
.image-card,
.video-card{
break-inside: avoid;
position: relative;
z-index: 1;
background: white;
width: 285px;
cursor: pointer;
display: inline-block;
vertical-align: top;
margin: 10px;
transition: all 0.3s linear 0s;
}
.video-card {
background-color: #1f242c;
height: 500px;
overflow:hidden;
}
.video-card .video-container{
position: relative;
overflow: hidden;
height: 50%;
transition: all 0.3s ease-in 0s;
}
.video-card .video-container.active{
height: 100%;
}
.video-card .video-container.active + .card-content{
height: 0%;
}
.video-card .video-container img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.video-card .video-container iframe {
width: 100%;
height: 100%;
background: black;
}
.video-card .video-container .video-toggle {
position: absolute;
top: 10px;
left: 10px;
color: white;
z-index: 1;
background-color: #9c56b7;
width: 30px;
height: 30px;
text-align: center;
display: table;
border-radius: 100%;
opacity: 0;
transition: all 0.2s ease-in 0s;
}
.video-card .video-container .video-toggle.visible
{
opacity: 1;
}
.video-card .video-container .video-toggle:hover
{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.video-card .video-container.active .video-toggle:hover
{
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
.video-card .video-container .play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: white;
background-color: #1f242c;
border-radius: 100%;
border: 3px solid white;
width: 70px;
height: 70px;
text-align: center;
display: table;
opacity: 0.6;
transition: all 0.3s linear 0s;
}
.video-card .video-container .play-btn i,
.video-card .video-container .video-toggle i{
display: table-cell;
vertical-align: middle;
}
.video-card .video-container .play-btn:hover {
opacity: 1;
}
.article-card .card-thumbnail,
.list-card .card-thumbnail {
background-color: black;
}
.image-card .card-thumbnail {
background-color: black;
margin: 10px 10px 10px 10px;
width: 265px;
}
.article-card .card-thumbnail .flair,
.list-card .card-thumbnail .flair,
.video-card .card-content .flair,
.image-card .card-thumbnail .flair{
background-color: grey;
color: white;
position: absolute;
width: 35px;
height: 35px;
line-height: 30px;
border-radius: 100%;
font-size: 15px;
text-align: center;
left: 10px;
top: 10px;
border: 3px solid white;
}
.opinion-card .flair{
background-color: #1aaf5d;
color: white;
line-height: 30px;
font-size: 20px;
text-align: center;
left: 10px;
top: 10px;
/*border: 3px solid #F6F8FF;*/
}
.article-card .card-thumbnail .flair{
background-color: #fe9c53;
}
.list-card .card-thumbnail .flair{
background-color: #e94b35;
}
.image-card .card-thumbnail .flair{
background-color: #2b3e51;
top: 20px;
left: 20px;
}
.video-card .card-content .flair{
background-color: #9c56b7;
top: 10px;
}
.article-card .card-thumbnail img,
.list-card .card-thumbnail img{
display: block;
width: 285px;
}
.opinion-card .opinion-content {
padding: 20px 20px 20px 20px;
position: relative;
border-bottom: 3px solid #1aaf5d;
background-color: #F6F8FF;
color: #646a7b;
font-size: 14px;
line-height: 1.7em;
font-family: 'Cairo', cursive;
margin-bottom: 25px;
margin-left: 20p
}
.opinion-card .opinion-content:before {
content: "";
position: absolute;
z-index: 1;
bottom: -20px;
width: 0;
border-width: 20px 16px 0px 16px;
border-style: solid;
border-color: #1aaf5d transparent;
right: 22.5px;
}
.opinion-card .opinion-content:after {
content: "";
position: absolute;
bottom: -16px;
right: 26px;
border-width: 16px 12px 0px 12px;
border-style: solid;
border-color: #F6F8FF transparent;
display: block;
width: 0;
z-index: 1;
}
.article-card .card-content,
.list-card .card-content,
.opinion-card .card-content{
background-color: white;
padding: 20px 20px 10px 20px;
position: relative;
}
.article-card .card-content{
border-top: 4px solid #fe9c53;
}
.list-card .card-content{
border-top: 4px solid #e94b35;
}
.opinion-card .card-content{
padding-top: 0;
}
.image-card .card-content{
padding: 20px;
position: relative;
font-family: 'Cairo','Roboto';
font-weight: 100;
font-size: 14px;
color: #666666;
transition: all 0.3s ease-in 0s;
overflow: hidden;
}
.video-card .card-content {
background-color: #1f242c;
padding: 20px;
position: relative;
font-family: 'Cairo','Roboto';
font-weight: 100;
font-size: 16px;
color: #999999;
transition: all 0.3s ease-in 0s;
overflow: hidden;
padding: 0;
height: 50%;
}
.article-card .card-content .title,
.list-card .card-content .title{
font-size: 22px;
font-family: 'Lalezar';
margin: 0;
padding-bottom: 10px;
font-weight: 100;
}
.article-card .card-content .author,
.list-card .card-content .author,
.opinion-card .card-content .author,
.image-card .author{
font-family: 'Cairo', cursive;
margin: 0;
padding-bottom: 20px;
font-weight: 100;
font-size: 13px;
}
.opinion-card .card-content .author{
padding-bottom: 5px;
}
.image-card .author{
padding: 10px 20px 0 20px;
border-color: none;
}
.video-card .author{
background-color: #2b323e;
padding: 0;
border-color: none;
padding: 15px 20px;
font-size: 13px;
}
.article-card .card-content .author a,
.list-card .card-content .author a,
.opinion-card .card-content .author a{
color: #5890ff;
}
.video-card .author a{
color: #8d9bb5;
}
.article-card .card-content .author-thumb,
.list-card .card-content .author-thumb,
.opinion-card .card-content .author-thumb,
.image-card .author-thumb,
.video-card .author-thumb{
border-radius: 50px;
display: inline-block;
overflow: hidden;
vertical-align: middle;
margin-left: 3px;
}
.article-card .card-content .author-info,
.list-card .card-content .author-info,
.opinion-card .card-content .author-info,
.image-card .author .author-info,
.video-card .author .author-info{
display: inline-block;
vertical-align: middle;
}
.article-card .card-content .post-time,
.list-card .card-content .post-time,
.opinion-card .card-content .post-time,
.image-card .author .post-time{
font-family: 'Cairo','Roboto';
margin: 0;
font-weight: 100;
font-size: 12px;
color: #999999;
}
.video-card .author .post-time{
font-family: 'Cairo','Roboto';
margin: 0;
font-weight: 100;
font-size: 12px;
color: #4c566a;
}
.article-card .card-content .description,
.list-card .card-content .description{
color: #666666;
font-size: 14px;
line-height: 1.5em;
font-family: 'Cairo';
}
.video-card .card-content .description {
padding: 20px;
font-size: 14px;
line-height: 1.5em;
margin-bottom: 44px;
}
.article-card .card-stats,
.list-card .card-stats,
.opinion-card .card-stats,
.image-card .card-stats{
color: #666666;
font-size: 14px;
font-family: 'Cairo';
border-top: 1px solid #ececec;
text-align: center;
padding: 10px 20px 10px 20px;
}
.video-card .card-stats{
position: absolute;
bottom: 0;
width: 100%;
background-color: #2b323e;
color: #ececec;
font-size: 14px;
font-family: 'Cairo';
text-align: center;
padding: 10px 20px 10px 20px;
}
.article-card .card-stats span,
.list-card .card-stats span,
.opinion-card .card-stats span,
.image-card .card-stats span,
.video-card .card-stats span
{
font-family: 'Roboto','Cairo', cursive;
font-size: 14px;
color: grey;
display: inline-block;
text-align: left;
}
.video-card .card-stats span
{
color: #999999;
}
.article-card .card-stats span:nth-child(even),
.list-card .card-stats span:nth-child(even),
.opinion-card .card-stats span:nth-child(even),
.image-card .card-stats span:nth-child(even)
{
margin: 0 20px;
}
.video-card .card-stats span:nth-child(even)
{
margin: 0 30px;
}
.article-card .card-stats span i,
.list-card .card-stats span i,
.opinion-card .card-stats span i,
.image-card .card-stats span i,
.video-card .card-stats span i{
background: #afafaf;
padding: 5px;
color: white;
margin-right:5px;
border-radius: 100%;
}
.video-card .card-stats span i{
background: #1f242c;
color: #8d9bb5;
margin-right: 10px;
}
.filler {
position: relative;
float: left;
background-color: #039be5;
color: #fff;
text-align: center;
background-size: cover;
background-position: center;
}
/*=======================================================MEDIA QUERIES==============================================================*/
@media only screen and (min-width: 768px) {
/*============VIDEO CARD========*/
.video-card {
width: 570px;
height: 275px;
font-size: 0;
}
.video-card > * {
display: inline-block;
font-size: initial;
}
.video-card .video-container{
width: 40%;
height: 100%;
vertical-align: top;
}
.video-card .video-container.active{
width: 100%;
display:block;
}
.video-card .video-container.active + .card-content{
position: absolute;
display: block;
opacity: 0;
right: 9999px;
}
.video-card .video-container img{
min-width: 50%;
min-height: 50%;
overflow-x: hidden;
}
.video-card .card-content {
width: 60%;
height: 100%;
}
.video-card .card-content .description {
margin-bottom: 0;
}
}
/*============================================================ANIMATIONS=============================================================*/
.buffer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
background-color: rgba(1,1,1,0.5);
padding: 10px 5px;
border-radius: 50px;
text-align: center;
width: 100px;
direction: ltr;
}
.buffer > div {
width: 18px;
height: 18px;
background-color: white;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.buffer .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.buffer .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1.0);
}
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
/*===========================================================================================================================================*/
/*========================DEPTH CLASSES===========================*/
.z-depth-0 {
box-shadow: none !important;
}
.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, .side-nav {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.z-depth-1-half, .btn:hover, .btn-large:hover, .btn-floating:hover {
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.z-depth-2 {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.z-depth-3 {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
}
.z-depth-4 {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
}
.z-depth-5 {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
$('.play-btn').on('click',function(){
var video = $(this).parent();
video.addClass('active').children().slice(2).remove();
video.append(video.data('embed'));
video.children('.video-toggle').addClass('visible');
video.children('.buffer').removeClass('hidden');
});
$('.video-toggle').on('click',function(){
if($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
return;
}
$(this).parent().addClass('active');
});
function videoLoaded(e) {
$(e).siblings('.buffer').addClass('hidden');
}
