<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<!--
Resources
http://rdfa.info/play/
http://www.seoskeptic.com/structured-data-markup-validation-testing-tools/
-->
<style>
body {
background-color: #cee3f8;
}
</style>
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
* {
-webkit-transition: 0.33s ease;
transition: 0.33s ease;
}
body {
background-color: #9ab;
}
.plus-button {
position: absolute;
bottom: 30px;
right: 30px;
z-index: 100;
height: 75px;
width: 75px;
border-radius: 100%;
background-color: #e91e63;
box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(0.92);
transform: scale(0.92);
}
.plus-button::before {
content: "+";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font-size: 28px;
font-weight: 600;
}
.plus-button:hover {
-webkit-transform: scale(1);
transform: scale(1);
box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.5);
}
.plus-button:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
box-shadow: 2px 3px 11px 1px rgba(0,0,0,0.53);
}
.plus-button.open {
-webkit-transform: rotate(45deg) scale(0.92);
transform: rotate(45deg) scale(0.92);
background-color: #333;
box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58);
}
.plus-button.open:hover {
-webkit-transform: scale(1) rotate(45deg);
transform: scale(1) rotate(45deg);
box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.5);
}
.plus-button.open:active {
-webkit-transform: scale(0.96) rotate(45deg);
transform: scale(0.96) rotate(45deg);
box-shadow: 2px 3px 11px 1px rgba(0,0,0,0.53);
}
.social-button {
position: absolute;
bottom: 43px;
right: 41px;
height: 50px;
width: 50px;
-webkit-transform: scale(0.8);
transform: scale(0.8);
background-size: 153% !important;
border-radius: 100%;
box-shadow: 2px 2px 7px 0px rgba(0,0,0,0.4);
cursor: pointer;
z-index: 99;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-button:hover {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5);
transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5);
}
.social-button.twitter-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/twitter-256.png") no-repeat center;
}
.social-button.twitter-button.active {
bottom: 110px;
right: 21px;
}
.social-button.facebook-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/facebook-256.png") no-repeat center;
}
.social-button.facebook-button.active {
bottom: 105px;
right: 73px;
}
.social-button.pinterest-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/pinterest-256.png") no-repeat center;
}
.social-button.pinterest-button.active {
bottom: 67px;
right: 109px;
}
.social-button.insta-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/instagram-256.png") no-repeat center;
}
.social-button.insta-button.active {
bottom: 15px;
right: 105px;
}
.logo{
background-color:#cee3f8;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#rcorners1 {
border-radius: 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-6 list-group-item rcorners">
<div class="col-md-1 list-group-item" style="background-color:grey;">
<span class="glyphicon glyphicon-chevron-up"></span>
13
<span class="glyphicon glyphicon-chevron-down"></span>
</div>
<div class="col-md-11">
<div class="">
<p>r/fscradio * Posted by u/fscradio
</p>
<p>
<b> Have you ever felt you don't know/have forgotten who you really are? That you've spent years just adapting to surroundings to make life easier and don't know what's the real you anymore? If so, how did you overcome this?
</b> </p>
<div>
<div>
<img src="https://www.boxing247.com/wp-content/uploads/2019/03/hooker-1200x800.jpg" width="100%" height="250px" />
</div>
<h6>
<p>
<a href="#" class="btn btn-xs "><span class="glyphicon glyphicon-comment"></span> Comments 12</a>
</p>
</h6>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="list-group-item" style="height:200px;">
<h6>Advertisement</h6>
</div>
</div>
</div>
</div>
<div class="plus-button"></div>
<div class="social-button twitter-button"></div>
<div class="social-button facebook-button"></div>
<div class="social-button pinterest-button"></div>
<div class="social-button insta-button"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$(document).ready(function(){
// Social plus button function
$('.plus-button').click(function(){
$(this).toggleClass('open');
$('.social-button').toggleClass('active');
});
});
//# sourceURL=pen.js
</script>
</body>
</html>
body {
background-color: #eeeeee;
}
.h7 {
font-size: 0.8rem;
}
.gedf-wrapper {
margin-top: 0.97rem;
}
@media (min-width: 992px) {
.gedf-main {
padding-left: 4rem;
padding-right: 4rem;
}
.gedf-card {
margin-bottom: 2.77rem;
}
}
/**Reset Bootstrap*/
.dropdown-toggle::after {
content: none;
}
