add borders to the topic/item name

This commit is contained in:
Ahmed-Ayman 2018-12-11 14:41:57 +02:00
parent 935c6d210c
commit 34deaaeefe
4 changed files with 54 additions and 32 deletions

View File

@ -7,7 +7,7 @@ import React from 'react';
class SectionHeading extends React.Component {
render() {
return (
<h2 className="section-title">{this.props.title}</h2>
<h3 className="section-title"><span>{this.props.title}</span></h3>
)
}
}

View File

@ -12,7 +12,7 @@ class VideoItem extends React.Component {
<section className="video-thumbnail-container">
<img className="video-thumbnail" src={ getThumbnail(this.props.id) } alt=""/>
</section>
<h3 className="video-title">{ this.props.title }</h3>
<h3 classNamew="video-title">{ this.props.title }</h3>
</section>
</Link>
)

View File

@ -1,18 +1,42 @@
@import "variables";
/* section heading*/
.section-title {
padding: 1em;
margin-bottom: 1em;
}
.section-title::after{
width: 100%;
}
.section-heading {
padding-top: 1em;
}
.section-title{
margin: 0 0 2em 0;
line-height: 0.5;
text-align: center;
}
.section-title span{
display: inline-block;
position: relative;
}
.section-title span:before,
.section-title span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
border-top: 1px solid black;
top: 0;
width: 300px;
}
.section-title span:before {
right: 100%;
margin-right: 15px;
}
.section-title span:after {
left: 100%;
margin-left: 15px;
}
/* view all elements */
.view-all-parents {
color: white;

View File

@ -4,18 +4,16 @@
/* Video item*/
.video-item {
background: #f6f6f6;
background: $light-gray-color;
min-height: 440px;
padding: 1em;
}
.random-topics {
a {
text-decoration: none;
font-size: 14px;
color: black;
}
}
.video-thumbnail {
transition: all .4s ease-in-out;