Rotate div without rotating inner section - javascript

I want to create this Image style with css. I have created section but I am facing difficulty to rotate it. I want green section straight but when I am rotating main wrapper all things are rotate. but that is wrong.
for reference please check Image
http://prntscr.com/jempp4
Any type of help will be appreciated. Not sure If I have explained my problem is good way.
Thanks in advance.
.banner-bg{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
transform: rotate(-15deg);
}
.banner-bg .banner-bg-sec{
width: 33.3333%;
position: relative;
}
.bg-green{
background: #528E72;
}
.bg-blue{
background: #4C6CC1;
}
.bg-blue2{
background: #4475D4;
}
.bg-red{
background: #CB431B;
}
.bg-red2{
background: #F54F1D;
}
.bg-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
font-size: 28px;
color: rgba(255,255,255,0.6);
}
.bg-icon{
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li{
display: inline-block;
vertical-align: middle;
}
.bg-icon li a{
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
<a href="#">
F
</a>
</li>
<li>
<a href="#">
T
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
</ul>
</div>
</div>
</div>


you can rotate only the title of the column and use clip-path to crop the main container, push the blue one a bit to the bottom and to make the title cover the whole width, widen it a little bit and use overflow-x:hidden for its parent, see the result in this fiddle : https://jsfiddle.net/fyhv9r8h/
#header {
background: url('https://kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/bg2.jpg');
width: 100%;
height: 230px;
position: absolute;
}
.banner-bg {
position: absolute;
top: 100px;
width: 100%;
height: 160px;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
clip-path: polygon(0% 38%, 100% 0%, 100% 100%, 0% 100%);
}
.banner-bg .banner-bg-sec {
width: 33.3333%;
position: relative;
overflow-x: hidden;
}
.bg-green {
background: #528E72;
}
.bg-blue {
background: #4C6CC1;
top: 38px;
}
.bg-blue2 {
background: #4475D4;
}
.bg-red {
background: #CB431B;
}
.bg-red2 {
background: #F54F1D;
}
.bg-inner {
position: absolute;
top: 0;
left: -10px;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0, 0, 0, 0.2);
transform: rotate(-6deg)
}
.bg-text {
font-size: 28px;
color: rgba(255, 255, 255, 0.6);
}
.bg-icon {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li {
display: inline-block;
vertical-align: middle;
}
.bg-icon li a {
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div id="header">
</div>
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
F
</li>
<li>
T
</li>
<li>
I
</li>
</ul>
</div>
</div>
</div>


Hmm interesting.. maybe have a look at transform:skewY instead of rotate... though you'll have to "unskew" the text or find other way to place it...
.banner-bg{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
transform: skewY(-15deg);
}
span, ul {
transform: skewY(15deg) rotate(-15deg);
}
.banner-bg .banner-bg-sec{
width: 33.3333%;
position: relative;
}
.bg-green{
background: #528E72;
}
.bg-blue{
background: #4C6CC1;
}
.bg-blue2{
background: #4475D4;
}
.bg-red{
background: #CB431B;
}
.bg-red2{
background: #F54F1D;
}
.bg-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
font-size: 28px;
color: rgba(255,255,255,0.6);
}
.bg-icon{
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li{
display: inline-block;
vertical-align: middle;
}
.bg-icon li a{
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
<a href="#">
F
</a>
</li>
<li>
<a href="#">
T
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
</ul>
</div>
</div>
</div>

Related

How to prevent image icon from being cut off?

I have created a timeline component in React and I am trying to include an icon on the timeline. However it is being cut off for some reason and is only showing half of the icon on either side. I know it is an overflow issue but I cannot pinpoint it. This is how it currently looks like:
When I add overflow: visible. It does show the full icon but then the timeline section encroaches on to the next section due its length.
This is what happens I add overflow: visible.
As you can see, it is encroaching on to Contact.
How can I show the icon fully but also not have the timeline section encroach on to other sections?
This is what I have so far.
TimelineItem.jsx
import {Person, Mail} from "#material-ui/icons"
const TimelineItem = ({ data }) => (
<div className="timeline-item">
<div className="timeline-item-content">
<span className="tag" style={{ background: data.category.color }}>
{data.category.tag}
</span>
<time>{data.date}</time>
<p>{data.text}</p>
{data.link && (
<a
href={data.link.url}
target="_blank"
rel="noopener noreferrer"
>
{data.link.text}
</a>
)}
<div className="itemContainer">
<Mail classname="icon" />
</div>
{/* <span className="circle"/> */}
</div>
</div>
);
export default TimelineItem;
Timeline.jsx
import TimelineData from './TimelineData';
import TimelineItem from './TimelineItem'
import './timeline.scss'
export default function Timeline() {
return (
<div className="reactTimeline">
<h1>Satyen Singh Timeline</h1>
<div className="timeline-container" id="timeline">
{TimelineData.map((data, idx) => (
<TimelineItem data={data} key={idx} />
))}
</div>
</div>
)
}
timeline.scss
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
// background-color: white;
overflow-x: visible;
}
h1 {
text-align: center;
}
body {
// overflow: visible;
// line-height: 1.5;
}
.timeline-container {
display: flex;
flex-direction: column;
position: relative;
margin: 40px 0;
// overflow-x: visible;
}
.timeline-container::after {
background-color: #e17b77;
content: '';
position: absolute;
left: calc(50% - 2px);
width: 4px;
height: 100%;
// overflow-x: visible;
}
.timeline-item {
display: flex;
justify-content: flex-end;
padding-right: 30px;
position: relative;
margin: 10px 0;
width: 50%;
// overflow-x: visible;
}
.timeline-item:nth-child(odd) {
align-self: flex-end;
justify-content: flex-start;
padding-left: 30px;
padding-right: 0;
// overflow-x: visible;
}
.timeline-item-content {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 15px;
position: relative;
width: 400px;
max-width: 70%;
text-align: right;
overflow-x: visible
}
.timeline-item-content::after {
content: ' ';
background-color: #fff;
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
position: absolute;
right: -7.5px;
top: calc(50% - 7.5px);
transform: rotate(45deg);
width: 15px;
height: 15px;
// overflow-x: visible
}
.timeline-item:nth-child(odd) .timeline-item-content {
text-align: left;
align-items: flex-start;
// overflow-x: visible
}
.timeline-item:nth-child(odd) .timeline-item-content::after {
right: auto;
left: -7.5px;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
overflow-x: visible
}
.timeline-item-content .tag {
color: #fff;
font-size: 12px;
font-weight: bold;
top: 5px;
left: 5px;
letter-spacing: 1px;
padding: 5px;
position: absolute;
text-transform: uppercase;
overflow-x: visible;
}
.timeline-item:nth-child(odd) .timeline-item-content .tag {
left: auto;
right: 5px;
overflow: visible;
}
.timeline-item-content time {
color: #777;
font-size: 12px;
font-weight: bold;
}
.timeline-item-content p {
font-size: 16px;
line-height: 24px;
margin: 15px 0;
max-width: 250px;
}
.timeline-item-content a {
font-size: 14px;
font-weight: bold;
}
.timeline-item-content a::after {
content: ' ►';
font-size: 12px;
overflow: visible;
}
.timeline-item-content .itemContainer {
position: absolute;
top: calc(50% - 10px);
right: -40px;
width: 20px;
height: 20px;
z-index: 100;
overflow-x: visible;
}
.timeline-item:nth-child(odd) .timeline-item-content .itemContainer {
right: auto;
left: -40px;
overflow-x: visible;
}

It's Working.. look it out, need to be some css issue for overflow
.moreSec {
padding: 150px 0;
font-size: 50px;
text-align: center;
background: antiquewhite;
}
.timeline-container {
display: flex;
flex-direction: column;
position: relative;
padding: 0 0 40px;
background: beige;
overflow: hidden;
margin-top:20px;
}
.timeline-container::after {
background-color: #e17b77;
content: '';
position: absolute;
left: calc(50% - 2px);
width: 4px;
height: 100%;
;
}
.timeline-item {
display: flex;
justify-content: flex-end;
padding-right: 30px;
position: relative;
margin: 10px 0;
width: 45%;
max-width: 100%;
}
.timeline-item:nth-child(odd) {
align-self: flex-end;
justify-content: flex-start;
padding-left: 30px;
padding-right: 0;
;
}
.timeline-item-content {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 15px;
position: relative;
width: 400px;
max-width: 70%;
text-align: right;
overflow-x: visible
}
.timeline-item-content::after {
content: ' ';
background-color: #fff;
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
position: absolute;
right: -7.5px;
top: calc(50% - 7.5px);
transform: rotate(45deg);
width: 15px;
height: 15px;
}
.timeline-item:nth-child(odd) .timeline-item-content {
text-align: left;
align-items: flex-start;
}
.timeline-item:nth-child(odd) .timeline-item-content::after {
right: auto;
left: -7.5px;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
overflow-x: visible
}
.timeline-item-content .tag {
color: #fff;
font-size: 12px;
font-weight: bold;
top: 5px;
left: 5px;
letter-spacing: 1px;
padding: 5px;
position: absolute;
text-transform: uppercase;
overflow-x: visible;
}
.timeline-item:nth-child(odd) .timeline-item-content .tag {
left: auto;
right: 5px;
overflow: visible;
}
.timeline-item-content time {
color: #777;
font-size: 12px;
font-weight: bold;
}
.timeline-item-content p {
font-size: 16px;
line-height: 24px;
margin: 15px 0;
max-width: 250px;
}
.timeline-item-content a {
font-size: 14px;
font-weight: bold;
}
.timeline-item-content a::after {
content: ' ►';
font-size: 12px;
overflow: visible;
}
.timeline-item-content .itemContainer {
position: absolute;
top: calc(50% - 10px);
right: -40px;
width: 20px;
height: 20px;
z-index: 100;
overflow-x: visible;
}
.timeline-item:nth-child(odd) .timeline-item-content .itemContainer {
right: auto;
left: -40px;
overflow-x: visible;
}
.timeline-item-content .icon {
background: #ffffff;
border-radius: 100%;
box-shadow: 0 0 5px rgb(0 0 0 / 30%);
height: 25px;
width: 25px;
display: flex;
align-items: center;
justify-content: center;
line-height: 23px;
}
<div class="reactTimeline">
<h1>Timeline</h1>
<div class="timeline-container" id="timeline">
<div class="timeline-item">
<div class="timeline-item-content">
<span class="tag" style="background-color: aqua;">
urgent
</span>
<time>24/05/2022</time>
<p>dummy text fnejfenjk ehfuheufh, dummy text fnejfenjk ehfuheufh</p>
<a href=# target="_blank" rel="noopener noreferrer">
Read More
</a>
<div class="itemContainer">
<!-- <Mail class="icon" /> -->
<span class="icon">✉</span>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-content">
<span class="tag" style="background-color: aqua;">
urgent
</span>
<time>24/05/2022</time>
<p>dummy text fnejfenjk ehfuheufh, dummy text fnejfenjk ehfuheufh</p>
<a href=# target="_blank" rel="noopener noreferrer">
Read More
</a>
<div class="itemContainer">
<!-- <Mail class="icon" /> -->
<span class="icon">✉</span>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-content">
<span class="tag" style="background-color: aqua;">
urgent
</span>
<time>24/05/2022</time>
<p>dummy text fnejfenjk ehfuheufh, dummy text fnejfenjk ehfuheufh</p>
<a href=# target="_blank" rel="noopener noreferrer">
Read More
</a>
<div class="itemContainer">
<!-- <Mail class="icon" /> -->
<span class="icon">✉</span>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-content">
<span class="tag" style="background-color: aqua;">
urgent
</span>
<time>24/05/2022</time>
<p>dummy text fnejfenjk ehfuheufh, dummy text fnejfenjk ehfuheufh</p>
<a href=# target="_blank" rel="noopener noreferrer">
Read More
</a>
<div class="itemContainer">
<span class="icon">✉</span>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-content">
<span class="tag" style="background-color: aqua;">
urgent
</span>
<time>24/05/2022</time>
<p>dummy text fnejfenjk ehfuheufh, dummy text fnejfenjk ehfuheufh</p>
<a href=# target="_blank" rel="noopener noreferrer">
Read More
</a>
<div class="itemContainer">
<span class="icon">✉</span>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-content">
<span class="tag" style="background-color: aqua;">
urgent
</span>
<time>24/05/2022</time>
<p>dummy text fnejfenjk ehfuheufh, dummy text fnejfenjk ehfuheufh</p>
<a href=# target="_blank" rel="noopener noreferrer">
Read More
</a>
<div class="itemContainer">
<span class="icon">✉</span>
</div>
</div>
</div>
</div>
</div>
<div class="moreSec">
Next Section
</div>

How to remove Horizontal scroll bar

i get this horizonatal scroll bar when i add my content to my "section3__container" container even if they are small in size . I have tried alot of things like overFlow hidden overflow-x hidden reducing size of content but the horizontal bar keeps appearing. i need help to remove this horizontal scroll bar.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="/static/styles/style.css" type="text/css">
<link rel='icon' href='/static/images/logo.jpeg' type='image/x-icon'/>
</head>
<body>
<div id="container">
<div id="container__section1">
<nav id="container__section1__destopNav">
chinaza
<ul>
<li class="navItem" ><span id="active"></span> Home</li>
<li class="navItem"><span></span>About</li>
<li class="navItem"><span></span>skill</li>
<li class="navItem"><span></span>Service</li>
<li class="navItem"><span></span>Project</li>
<li class="navItem"><span></span>Contact</li>
<li class="navItem"><a href=""><i class="fa fa-moon-o" aria-hidden="true"></i>
</a></li>
</ul>
</nav>
<nav id="container__section1__mobilepNav">
<ul id="container__section1__mobilepNav__container">
<li id="container__section1__mobilepNav__container__1">chinaza</li>
<li id="container__section1__mobilepNav__container__2">
<ul id="container__section1__mobilepNav__container__2_1">
<li id="theme">
<i class="fa fa-moon-o" aria-hidden="true"></i>
</li>
<li id="menu">
<i class="fa fa-bars" aria-hidden="true"></i>
</li>
<ul id="menu_content">
<li class="navItem"><span></span> Home</li>
<li class="navItem"><span></span>About</li>
<li class="navItem"><span></span>skill</li>
<li class="navItem"><span></span>Service</li>
<li class="navItem"><span></span>Project</li>
<li class="navItem"><span></span>Contact</li>
</ul>
</ul>
</li>
</ul>
</nav>
</div>
<div id="section2" >
<ul id="section2__container">
<li id="section2__container__text" class="section2__container__class">
<ul id="section2__container__text__container">
<li>
<ul id="section2__container__text__container__textContainer__socialMedia">
<li><i class="fa fa-github" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin-square" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter-square" aria-hidden="true"></i></li>
</ul>
</li>
<li id="section2__container__text__container__textContainer">
<h1>Hi, Am Chinaza</h1>
<h4>Frontend developer </h4>
<p> high level experience in web
design and development knowledge,
producing quality work
</p>
<div id="section2__container__text__container__textContainer__container">Contact me</div>
</li>
</ul>
</li>
<li id="section2__containerImage" class="section2__container__class">
<div id="section2__containerImage__container1" class="section2__containerImage__containers">
<div id="section2__containerImage__container2" class="section2__containerImage__containers">
<img src="static/images/about3.svg " alt="">
</div>
</div>
</li>
</ul>
</div>
<div id="section3">
<h1 id="section3__about">About me</h1>
<h4 id="section3_introduction">My introduction</h4>
<ul id="section3__container">
<li id="section3__container__1" class="section3__container__items">
<img src="static/images/undraw_Developer_activity_re_39tg.svg" alt="">
</li>
<li id="section3__container__2" class="section3__container__items">
<p>web developer, with extensive knowledge
and years of experience, working in web
technology and UI/Ux design, delivering quality
work.
</p>
<ul id="section3__container__2__container">
<li>
<h1>3 +</h1>
<p>Years experinece</p>
</li>
<li>
<h1>3</h1>
<p>Completed project</p>
</li>
<li>
<h1>1</h1>
<p>Companies worked</p>
</li>
</ul>
<div id="section3__container__2__download">
Download <i class="fa fa-arrow-circle-down" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</div>
<script src="/static/home.js"></script>
</body>
</html>
$navFontSize: 18px;
$navcolor:black;
$maincolour: rgb(54, 54, 168);
$fadeAsh:rgb(114, 112, 112);
$minwidth:290px;
$h1FontSize:40px;
$h4FontSize:20px;
$h1FontSizeMobile:30px;
$h4FontSizeMobile:20px;
$paragraph:23px;
#mixin button {
width: 170px;
height: 45px;
text-align: center;
line-height: 45px;
margin-top: 40px;
a{
text-decoration: none;
display: inline-block;
width: 100%;
height: 100%;
font-size: 20px;
border: 2px solid $maincolour;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: rgb(236, 232, 247);
transition: background-color 1s;
}
&:hover a{
background-color: $maincolour;
color: white;
border: none;
}
}
*{
margin: 0;
padding: 0;
}
#container{
width: 100vw;
height: 100vh;
}
#container__section1{
width: 100%;
height: 80px;
z-index: 2000;
#container__section1__destopNav{
width:100%;
height: 100px;
position: fixed;
z-index: 200;
#logo{
text-decoration: none;
padding: 30px;
line-height: 30px;
color: $navcolor;
font-size:25px;
}
ul{
display: flex;
flex-direction: row;
text-align: center;
margin: 0 auto;
width: 600px;
list-style: none;
justify-content: space-evenly;
li{
position: relative;
padding: 9px;
span{
position: absolute;
bottom: 0;
left: 0;
height: 0px;
width: 0;
transition: width 2s height 4s;
background-color: rgb(54, 54, 168);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
#active{
height: 3px;
width: 100%;
background-color: $maincolour;
}
a{
text-decoration: none;
font-size: $navFontSize;
color: $navcolor;
width: 100%;
padding: 5px;
}
}
li:hover span{
height: 3px;
width: 100%;
background-color: rgb(81, 100, 209);
}
}
}
}
#section2{
width: 100%;
height: auto;
z-index: -1;
margin-top: 70px;
min-width: $minwidth;
#section2__container{
width: 85%;
display: flex;
flex-wrap: wrap-reverse;
list-style: none;
margin: 0;
padding: 0;
margin: 0 auto;
justify-content: space-evenly;
height: 100%;
.section2__container__class{
list-style: none;
height: 400px;
.section2__containerImage__containers{
margin-top: 40px;
width: 270px;
height: 270px;
}
#section2__containerImage__container1{
position: relative;
transform: translateY(4px) rotateZ(-5deg);
background-color: #3636a8;
margin: 0 auto;
}
#section2__containerImage__container2{
position: absolute;
bottom: 0;
transform: translateY(4px) rotateZ(5deg);
img{
width: 100%;
height: 100%;
}
}
}
#section2__container__text #section2__container__text__container{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
height: 100%;
#section2__container__text__container__textContainer__socialMedia{
flex: 1;
width: 100px;
height: 200px;
list-style: none;
vertical-align : middle;
margin-top: 90px;
padding: 0;
padding-right: 30px;
li{
padding-top: 25px;
font-size: 20px;
color:rgb(54, 54, 168);
}
}
#section2__container__text__container__textContainer{
flex: 2;
h1{
font-size: $h1FontSize;
margin-top: 20px;
}
h4{
color: $fadeAsh;
font-size: 23px;
margin-top: 15px;
}
p{
color: $fadeAsh;
margin-top: 15px;
width: 330px;
font-size: 20px;
}
#section2__container__text__container__textContainer__container{
#include button()
}
}
}
}
}
#section3{
width: 100%;
overflow-x: hidden;
#section3__about{
overflow-x: hidden;
text-align: center;
font-size: $h1FontSize;
}
#section3_introduction{
text-align: center;
color:$fadeAsh;
font-size: $h4FontSize;
margin-top: 25px;
}
#section3__container{
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto;
height: fit-content;
list-style: none;
margin-top: 60px;
#section3__container__1{
text-align: center;
img{
width: 314px;
height: 314px;
}
}
.section3__container__items{
flex: 1;
}
#section3__container__2 {
p{
width: 70%;
color: $fadeAsh;
font-size: $paragraph;
}
#section3__container__2__container{
list-style: none;
display: flex;
flex-wrap: nowrap;
margin-top: 30px;
width: 85%;
li{
text-align: center;
width: 100%;
}
li h1{
text-align: center;
}
}
#section3__container__2__download{
#include button()
}
}
}
}
#container__section1__mobilepNav{
display: none;
}
#media(max-width:1024px){
#container{
height: 100%;
}
#container__section1__destopNav{
display: none;
}
#container__section1__mobilepNav{
display:inline-block;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 65px;
box-shadow:0px 4px 20px rgb(189, 188, 188);
z-index: 1;
#container__section1__mobilepNav__container{
height: 60px;
box-shadow:0px 4px 20px rgb(189, 188, 188);
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding-top: 20px;
background-color: white;
li{
width: 100px;
}
li #logo2{
text-decoration: none;
font-size:20px;
padding-left: 20px;
}
#container__section1__mobilepNav__container__1{
text-align: left;
}
#container__section1__mobilepNav__container__2{
#container__section1__mobilepNav__container__2_1{
display: flex;
list-style: none;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
width: 100px;
#menu_content{
position: absolute;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
width:0%;
padding-top: 46px;
height:0rem;
top: -173px;
left: 0;
transition: width 2s height 4s;
list-style: none;
height:9rem;
width:100%;
display: none;
:nth-child(2){
text-align: left;
}
.navItem a{
text-decoration: none;
}
}
#menu{
&:hover + #menu_content{
height:9rem;
width:100%;
display: block;
display: flex;
justify-content: space-around;
}
}
}
}
}
}
#section2{
margin-top: 0px;
#section2__container{
width: 100%;
.section2__container__class{
.section2__containerImage__containers{
margin-top: 40px;
width: 210px;
height: 210px;
}
}
}
}
#section3{
#section3__about{
font-size:$h1FontSizeMobile;
}
#section3__container{
width: 100%;
#section3__container__1{
text-align: center;
img{
width: 210px;
height: 210px;
}
}
}
#section3__container #section3__container__2{
text-align: center;
p{
width: 90%;
margin: 0 auto;
}
#section3__container__2__container{
width: 100%;
}
#section3__container__2__download{
margin: 0 auto;
margin-top: 40px;
}
}
}
}
#media(max-width:690px){
#section2__container__text{
width: 100%;
min-width:$minwidth;
}
#section2__containerImage{
position: relative;
}
#section2__container__text__container__textContainer__socialMedia{
position: absolute;
top: 50px;
}
#section2 #section2__container #section2__container__text #section2__container__text__container
{
width: 90%;
margin: 0 auto;
}
#section2 #section2__container #section2__container__text #section2__container__text__container
#section2__container__text__container__textContainer{
margin: 0 auto;
p{
width: 90%;
}
h1{
font-size: 30px;
}
}
#section2 #section2__container .section2__container__class{
height: 300px;
}
}```

body {
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Resource: W3Schools

Hack for adding images in 'select' list of html

I want to add the images to my select list using only HTML CSS JS. (no library) I know the browsers don't support the images inside dropdown i.e., the select option of HTML.
Is there any way around/a hack to achieve this?
A: How it should look like before the user clicks on the dropdown.
B: How it should look like after the user clicks on the dropdown.
A:
B:
I tried using,
HTML
<select class="dropdown" name="payment-provider" id="payment-provider" form="payment">
<option value="BitCoin">BTC</option>
<option value="Ethereum">ETH</option>
<option value="Cardano">ADA</option>
<option value="Tether">USDT</option>
</select>
CSS
select#payment-provider option[value="BitCoin"] {
background: url(/_assets/images/svg/BTC.svg) no-repeat right;
width: 22px;
height: 22px;
}
But this code was only supported by the Firefox browser, however even Firefox has now withdraw this support.
Will appriciate the help.
Thanks

Check the snippet below. I created a custom component using UL>LI.
var placeholder = document.getElementById('placeholder');
var dropdown = document.getElementById('custom-select');
placeholder.addEventListener('click', function() {
if(dropdown.classList.contains('active')) {
dropdown.classList.remove('active')
} else {
dropdown.classList.add('active')
}
})
.custom-select .dropdown {
list-style: none;
padding: 0;
display: none;
}
.dropdown .img-wrapper,
.placeholder .img-wrapper {
display: inline-block;
max-width: 30px;
}
.dropdown img,
.placeholder img {
max-width: 100%;
}
.placeholder {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
position: relative;
}
.placeholder::before,
.placeholder::after {
content: "";
display: inline-block;
height: 2px;
width: 10px;
background-color: #aaa;
position: absolute;
right: 0;
}
.placeholder::before {
transform: rotate(45deg);
right: 20px;
}
.placeholder::after {
transform: rotate(-45deg);
right: 15px;
}
.custom-select.active .placeholder::after {
right: 20px;
}
.custom-select.active .placeholder::before {
right: 15px;
}
.custom-select.active .dropdown {
display: flex;
flex-direction: column;
box-shadow: 1px 1px 6px 1px #ddd;
position: absolute;
top: 40px;
right: 0;
left: 0;
min-width: 200px;
}
.dropdown li {
display: flex;
align-items: center;
background-color: #fff;
padding: 10px;
transition: all 0.3s ease;
cursor: pointer;
}
.dropdown li:not(:last-child) {
border-bottom: 1px solid #aaa;
}
.dropdown li:hover {
box-shadow: 0px 0px 11px 1px rgba(182, 182, 182, 0.75) inset;
}
.custom-select {
display: inline-flex;
flex-direction: column;
position: relative;
width: 100px;
}
input {
border: 0;
outline: none;
box-shadow: none;
width: 40px;
display: inline-block;
height: 30px;
text-align: right;
}
.wrapper {
display: inline-flex;
position: relative;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 50px;
align-items: center;
}
.input-label {
position: absolute;
background-color: #fff;
top: -6px;
display: inline-block;
left: 10px;
padding: 0 5px;
color: #aaa;
}
<section class="wrapper">
<label for="" class="input-label">You Receive</label>
<input type="number" readonly value=".32" />
<div class="custom-select" id="custom-select">
<span id="placeholder" class="placeholder">
<span class="img-wrapper">
<img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
</span>
<span class="text"> BTC</span>
</span>
<ul class="dropdown" id="dropdown">
<li class="dd-item">
<span class="img-wrapper">
<img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
</span>
<span class="text">Bitcoin (BTC)</span>
</li>
<li class="dd-item">
<span class="img-wrapper">
<img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" />
</span>
<span class="text">Ethereum (ETH)</span>
</li>
<li class="dd-item">
<span class="img-wrapper">
<img src="https://cryptologos.cc/logos/cardano-ada-logo.png" />
</span>
<span class="text">Cardano (ADA)</span>
</li>
</ul>
</div>
</section>

Fluid responsive navigation with dropdown

I have designed a navigation system for my project which is built on flexbox like unsplash
Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ===========================
For Main Navigation
=========================== */
.cm-navigation-area {
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.6s ease-in-out;
z-index: 5;
display: block;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.cm-navigation {
background: #ffffff;
height: 70px;
display: flex;
justify-content: space-between;
}
#media (max-width: 768px) {
.cm-navigation {
margin: 0 -5%;
}
}
.cm-burger-nav {
display: flex;
justify-content: center;
align-items: center;
}
#burger-nav {
fill: #575757;
}
.cm-logo {
display: flex;
justify-content: center;
align-items: center;
}
.cm-logo a img {
width: auto;
height: 50px;
}
#media (max-width: 991px) {
.cm-logo a img {
width: 80px;
height: auto;
}
}
.cm-nav nav {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.cm-nav nav ul {
margin: 0;
padding: 0;
display: flex;
}
.cm-nav nav ul li {
list-style: none;
display: flex;
}
.cm-nav nav ul li:not(:last-child) {
margin-right: 1.8em;
}
#media (max-width: 991px) {
.cm-nav nav ul li:not(:last-child) {
margin-right: 10;
}
}
.cm-nav nav ul li a {
font-size: 0.9em;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: gray;
font-weight: 300;
}
.cm-nav nav ul li a span {
padding-right: 0.4em;
}
.cm-nav nav ul li a span img {
width: 13px;
height: auto;
}
#media (max-width: 991px) {
.cm-nav nav ul li a span img {
width: 18px;
height: auto;
}
}
#media (max-width: 768px) {
.nav-r-text {
display: none;
}
}
.cm-currency {
font-size: 0.8em;
}
.cm-currency .cm-currency-link span {
margin-right: 0 !important;
}
.cm-currency .cm-currency-link span img {
width: 10px !important;
}
.cm-dots {
margin-right: 2.5em !important;
}
.cm-submit-photo {
margin-right: 48px !important;
}
.cm-submit-photo-link {
transition: all 0.2s ease-in-out;
display: flex;
background: #fff;
border: 1px solid #dddddd;
color: gray !important;
text-decoration: none;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: 100 !important;
font-size: 14px;
text-transform: uppercase;
height: 32px;
}
.cm-submit-photo-link:hover {
border: 1px solid #dedede;
color: #dedede;
}
.cm-join-button {
position: relative;
}
.cm-join-button:before {
position: absolute;
top: 0;
left: -24px;
display: inline-block;
width: 1px;
height: 32px;
content: "";
background-color: gray;
}
.cm-join-button-link {
transition: all 0.3s ease-in-out;
display: flex;
background: green;
color: #ffffff !important;
text-decoration: none;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: 100 !important;
font-size: 14px;
text-transform: uppercase;
height: 32px;
}
.cm-join-button-link:hover {
background: #004d00;
}
.cm-user-link img {
height: 30px;
width: auto;
}
.cm-cart {
min-height: 30px;
}
#cm-cart-link {
position: relative;
}
#cm-cart-link .cart-img {
width: 16px;
height: auto;
}
#cm-cart-link .cm-cart-badge:after {
position: absolute;
right: -6px;
top: 0;
content: attr(data-count);
font-size: 60%;
width: 16px;
height: 16px;
padding: 0.3em;
border-radius: 50%;
line-height: 1em;
color: white;
background: green;
text-align: center;
min-width: 1.2em;
}
/* ===================================
Navbar Search Integrations
=================================== */
.cm-nav-searchbar {
display: flex;
flex: 1;
align-items: center;
height: 100%;
padding: 0 1em;
}
#media (max-width: 1200px) {
.cm-nav-searchbar {
display: none;
}
}
.cm-nav-searchbar .field-container {
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 50px;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.cm-nav-searchbar .icons-container {
position: absolute;
top: 12px;
right: 4px;
width: 35px;
height: 35px;
overflow: hidden;
}
.cm-nav-searchbar .icon-search {
position: relative;
top: 5px;
left: 8px;
width: 40%;
height: 40%;
opacity: 1;
border-radius: 50%;
border: 2px solid #bebebe;
transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.cm-nav-searchbar .icon-search:after {
content: "";
position: absolute;
bottom: -7px;
right: -2px;
width: 2px;
border-radius: 3px;
transform: rotate(-45deg);
height: 8px;
background-color: #bebebe;
}
.cm-nav-searchbar .search-field {
border: 0;
width: 100%;
height: 100%;
padding: 10px 20px;
background: #f7f7f7;
border-radius: 3px;
transition: all 0.4s ease;
}
.cm-nav-searchbar .search-field:focus {
outline: none;
}
.cm-nav-searchbar .search-field:focus+.icons-container .icon-close {
opacity: 1;
transform: translateX(0);
}
.cm-nav-searchbar .search-field:focus+.icons-container .icon-search {
opacity: 0;
transform: translateX(200%);
}
/* ========================
Mobile Searchbar
======================== */
.cm-nav-searchbars {
display: flex;
flex: 1;
align-items: center;
height: 100%;
margin-top: 70px;
}
#media (min-width: 1200px) {
.cm-nav-searchbars {
display: none;
}
}
.cm-nav-searchbars .field-containers {
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 50px;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.cm-nav-searchbars .icons-containers {
position: absolute;
top: 12px;
right: 4px;
width: 35px;
height: 35px;
overflow: hidden;
}
.cm-nav-searchbars .icon-searchs {
position: relative;
top: 5px;
left: 8px;
width: 40%;
height: 40%;
opacity: 1;
border-radius: 50%;
border: 2px solid #bebebe;
transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.cm-nav-searchbars .icon-searchs:after {
content: "";
position: absolute;
bottom: -7px;
right: -2px;
width: 2px;
border-radius: 3px;
transform: rotate(-45deg);
height: 8px;
background-color: #bebebe;
}
.cm-nav-searchbars .search-fields {
border: 0;
width: 100%;
height: 100%;
padding: 10px 20px;
background: #f7f7f7;
border-radius: 3px;
transition: all 0.4s ease;
}
.cm-nav-searchbars .search-fields:focus {
outline: none;
}
.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-closes {
opacity: 1;
transform: translateX(0);
}
.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-searchs {
opacity: 0;
transform: translateX(200%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<!--=============================
Main Navigation
=============================-->
<div class="cm-navigation-area">
<div class="cm-navigation px-5-percent">
<!--Off Canvas Mobile Optimize Burger Menu -->
<div class="cm-burger-nav d-flex d-md-none">
<span>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="32px" id="burger-nav" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
</svg>
</span>
</div>
<!--End Off Canvas Mobile Optimize Burger Menu -->
<div class="cm-logo">
<a class="cm-logo-link" href="">
<img src="https://i.imgur.com/lAMzwZj.png" alt="codesign">
</a>
</div>
<div class="cm-nav-searchbar">
<fieldset class="field-container">
<input type="text" placeholder="Search Photos Here" class="search-field" />
<div class="icons-container">
<div class="icon-search"></div>
</div>
</fieldset>
</div>
<div class="cm-nav mr-md-2">
<nav>
<ul>
<li class="cm-currency">
<a class="cm-currency-link" href="">
<span>BDT</span>
<span><img src="https://i.imgur.com/HSaVJVb.png" alt=""></span>
</a>
</li>
<li class="cm-explore">
<a href="image-category.html">
<span><img src="https://i.imgur.com/NezIKT7.png" alt=""></span>
<span class="nav-r-text">Explore</span>
</a>
</li>
<li class="cm-collection d-none d-md-flex">
<a href="./dashboard/dashboard-images.html">
<span><img width="25px" src="https://i.imgur.com/8amvUJB.png" alt=""></span>
<span class="nav-r-text">Collection</span>
</a>
</li>
<li class="cm-dots d-none d-md-flex">
<a href="">
<img width="25" src="https://i.imgur.com/Yu0uhKs.png" alt="">
</a>
</li>
<li class="cm-cart">
<a id="cm-cart-link" href="javascript:void(0)">
<span class="cm-cart-badge has-badge" data-count="2"></span>
<span><img class="cart-img" src="https://i.imgur.com/XMiXKD4.png" alt=""></span>
</a>
</li>
<li class="cm-user d-flex d-md-none">
<a class="cm-user-link" href="">
<span>
<img width="25" src="https://i.imgur.com/4vD2Hwp.png" alt="">
</span>
<span class="nav-r-text">Login</span>
</a>
</li>
<li class="cm-submit-photo d-none d-md-flex">
<a class="cm-submit-photo-link" href="submit-image.html">
<!--<span>-->
<!--<img src="images/s_photo.svg" alt="">-->
<!--</span>-->
<span> Submit a photo </span>
</a>
</li>
<!--<li class="cm-user">-->
<!--<a class="cm-user-link" href="">-->
<!--<span>-->
<!--<img src="images/user.svg" alt="">-->
<!--</span>-->
<!--<span class="nav-r-text">Login</span>-->
<!--</a>-->
<!--</li>-->
<li class="cm-join-button d-none d-md-flex">
<a class="cm-join-button-link" href="">Login | Signup</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="cm-nav-searchbars">
<fieldset class="field-containers">
<input type="text" placeholder="Search Photos Here" class="search-fields" />
<div class="icons-containers">
<div class="icon-searchs"></div>
</div>
</fieldset>
</div>
Its look responsive but some how its not align and looks not beautiful on responsive, also I have to need a drop down like unsplash on dot hover or click event.
Thanks in advance

create slideshow with cards

I have created a recipe card div and I would like it to turn into a slideshow, with three other divs using the slick carousel.http://kenwheeler.github.io/slick/.I would like the slide to activate when either a left or right button is pressed. I have created the main DIV but I am unsure of how to carry on. Here is my work so far:
body {
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
.icon-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content:space-between;
background-color: #FC5558;
padding: 10px;
padding-left: 10px;
}
.icon-bar i {
color: #fff;
}
.nav ul {
list-style: none;
background-color: #0F211E;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
text-transform: uppercase;
}
.hero-image {
background-image: url("1.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
section.hero {
height: 75%;
position: relative;
}
.hero-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.bgimg {
/* The image used */
background-image: url("bg.jpg");
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.back .caption:before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0, 1);
}
.back .caption:after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1, 0);
}
.card.flipped .back .caption:before,
.card.flipped .back .caption:after {
opacity: .9;
transform: scale(1);
}
.back dl {
font-family: 'Lato', Arial, sans-serif;
font-weight: 300;
bottom: 40px;
left: 40px;
position: absolute;
opacity: 0;
transition: opacity .35s, transform .35s;
transition-delay: .85s;
transform: translate3d(-40px, 0, 0);
}
.card.flipped .back dl {
opacity: 1;
transform: translate3d(0, 0, 0);
}
dl dt {
float: left;
width: 60px;
overflow: hidden;
clear: left;
text-align: right;
font-weight: 700;
}
dl dd {
margin-left: 80px;
text-align: left;
}
dl dd:before,
dl dd:after {
display: table;
content: " ";
}
dl dd:after {
clear: both;
}
.front:hover p {
opacity: 1;
transform: translate3d(0, 0, 0);
}
figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-width: 450px) {
.container {
left: 50%;
margin-left: -225px;
}
}
body {
background-color: #0F211E;
}
.recipe-card {
border-top: 15px solid lightblue;
background: #fff;
margin: 0 auto;
width: 90%;
max-width: 600px;
max-height: 400px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-top {
padding: 30px 15px;
display: flex;
}
.card-top .right {
padding-left: 20px;
}
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</style>
</head>
<body class="news">
<header>
<div class="nav">
<ul>
<li class="two">
<span style="color:aqua;">About</span>
</li>
<li class="three"><a class="active" href="#"><span style="color: lightcoral">Projects</span></a></li>
<li class="four"><span style="color: lightcoral">Skills</span></li>
</ul>
</div>
</header>
<section class="hero">
<div class="bgimg">
</div>
<div class="hero-content">
<div class="recipe-card">
<aside>
<div class="card-top">
<div class="left">
<img src="myAvatar.png" class="myavatar">
</div>
<div class="right">
<h1>Hamza Wahbi</h1>
<hr class="hrunder">
<h5 style="color:#8B8B8B ">Web Developer</h5>
<h1>Age:
<font color="#8B8B8B">13</font>
</h1>
<h1>Email:
<font color="#8B8B8B">fxgfnxngfx#gmail.com</font>
</h1>
<h1>Phone:
<font color="#8B8B8B">0093836372</font>
</h1>
</div>
</div>
</aside>
<div class="icon-bar">
<i class="fab fa-twitter fa-3x"></i>
<i class="fab fa-instagram fa-3x"></i>
<i class="fab fa-dribbble fa-3x"></i>
<i class="fab fa-facebook-f fa-3x"></i>
<i class="fab fa-snapchat-ghost fa-3x"></i>
<i class="fab fa-google-plus-g fa-3x"></i>
<i class="fab fa-youtube fa-3x"></i>
<i class="fab fa-pinterest-p fa-3x"></i>
</div>
</div>
</div>
<!-- .hero-content -->
</section>
</div>
</html>
If you require any more information please let me know as I have been struggling with this project for a long time and tried different ways to achieve this but I have failed.

Categories