Ok, thanks again all for your help.
I’m nearly there with this. I’m struggling still with a couple of things.
-
How to get the vertically stacked arrangement (for mobile phone) to play nicely with the horizontal style arrangement. I can’t seem to wrap my head around how the divs are working together and can’t figure out which one’s I should be styling (or which stylings are throwing the design wonky)
-
Getting the dividers in between the logos to sit at equal space to the logos containers (with some padding between the circles on either side) - And for them to become horizontal dividers with the same kind of spacing on the vertical arrangement.
This is what I’ve come up with so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<base href="https://.firebaseapp.com/">
<!-- link rel="stylesheet" href="css/style.css" -->
<style>
.hero {
background-image: linear-gradient(190deg, rgba(0,0,0,0.00) 41%, rgba(0,0,0,0.40) 100%), url("./assets/img/IMG_3881.png") ;
// background-size: cover;
}
.hero &:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(190deg, rgba(0,0,0,0.00) 41%, rgba(0,0,0,0.40) 100%);
opacity: .6;
}
.hero-body {
margin-top: 75px;
margin-left: 60px;
width: 500px;
}
.hero .title {
/* The activities of: */
font-family: Georgia;
font-size: 35px;
color: #FFFFFF;
}
.hero .subtitle {
/* */
font-family: Futura-Medium;
font-size: 40px;
color: #FFFFFF;
letter-spacing: -0.44px;
}
.hero .tabs {
padding-left: 22px;
height: 72px;
background: #F2F2F2;
}
.hero .tabs.ul {
margin-left: 22px;
}
.hero .tabs.li {
width: 72px;
}
.hero .tabs li { height: 100%; display: flex; }
.hero .tabs a { align-items: center; border: 0px; }
.hero .tabs li.is-active { border-bottom: solid 5px; border-top: solid #F2F2F2 5px }
nav {
background: #F2F2F2;
font-family: Futura-Medium;
font-size: 14px;
color: #3C3C3C;
}
.badge h3 {
margin:0;
color:#4D4D4D;
font-size:1rem;
line-height:1.2;
font-weight:400;
font-family:Futura-Medium;
}
.badge h4 {
margin:0;
padding-top:.5em;
color:#4D4D4D;
font-size:.9rem;
line-height:1.2;
font-weight:400;
font-family:Georgia;
letter-spacing:0;
}
/* Badge */
.badge.a .badge-back { color: black; }
.badge.b .badge-back { color: black; }
.badge.c .badge-back * { color: white; }
.badge.d .badge-back * { color: white; }
.badge.e .badge-back * { color: white; }
.section.activities {
padding: 7rem;
}
.cols{
display:flex;
margin:0;
flex-flow:column;
justify-content:flex-start;
}
.col {
padding:0;
flex:0 0 20%;
min-width:115px;
font-size:1.6vw;
margin: 0 auto;
height: 20vh;
}
.badge {
position:relative;
padding-top:100%;
width:100%;
height:0;
}
.badge-content {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transform-style:preserve-3d;
}
.badge-front, .badge-back {
display:table;
position:absolute;
top:0;
left:0;
margin:0;
border:0;
padding:0;
width:100%;
height:100%;
}
.badge a {
display:table-cell;
padding:0 5px;
vertical-align:middle;
color:inherit;
text-align:center;
text-decoration:none;
}
.badge img {
padding:0;
width:auto;
height:5em;
}
@media screen and (max-width:600px){
.cols {flex-flow: row wrap;}
.col{ font-size:60%; }
.badge { min-width: 30vw; }
}
@media screen and (min-width:1000px){
.cols{ justify-content:space-around; flex-flow: row wrap;}
.col{ max-width:250px; font-size:110%}
.badge { min-width: 30vw; }
}
/* Badge filp */
.badge-content > .badge-front,
.badge-content > .badge-back {
transition: transform 1s;
}
.badge:hover .badge-content > .badge-front {
transform: scale(0) ;
transition: transform 0.5s;
}
.badge:hover .badge-content > .badge-back {
/* transform: rotateY( 180deg ); */
transform: scale(1) ;
transition: transform 0.5s;
}
.badge-front {
transform: scale(1);
/* transform: rotateY( 180deg );*/
}
.badge-back {
transform: scale(0);
/* transform: rotateY( 180deg );*/
}
.circle {
border: 0px solid black;
border-radius: 100%;
-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
}
.v-divider {
position: absolute;
border-right:1px dashed lightgray;
height: 60%;
top:30%;
}
@media screen and (max-width:1000px){
.v-divider {
border-right:0px dashed lightgray;
border-bottom: 1px dashed lightgray;
width: 100%;
}
}
.privacy-policy { margin-left: 20px; }
.social-media .icon { margin-right: 20px; margin: 10px; }
</style>
<meta property="og:type" content="website">
<meta property="og:title" content="The activities">
<meta property="og:description" content="Information on activities'">
<meta property="og:site_name" content="The activities">
</head>
<body>
<section class="hero">
<div class="hero-body">
<div class="containerz">
<h1 class="title">The activities of</h1>
<h2 class="subtitle"></h2>
</div>
</div>
<div class="hero-foot">
<div class="tabs is-medium">
<ul>
<li class="is-active"><a>Activities</a>
</li>
<li><a>Biography</a>
</li>
<li><a>Contribute</a>
</li>
</ul>
</div>
</div>
</section>
<section class="section activities">
<div class="cols">
<div class="col has-text-centered">
<div class="badge a">
<div class="badge-content">
<div class="badge-front">
<a href="#"><img src="./assets/img/CGLF.svg">
<h3>RELIGIOUS ACTIVITES</h3>
<h4>The Foundation</h4>
</a>
</div>
<div class="badge-back circle" style="background-color: rgb(255, 255, 255);">
<a href="#"><img src="./assets/img/CGLF.svg">
<h3></h3>
</a>
</div>
</div>
</div>
</div>
<div class="col has-text-centered">
<div class="badge b">
<div class="badge-content">
<div class="badge-front">
<a href="#"><img src="./assets/img/Bumpa.svg">
<h3>MERIT MAKING ACTIVITES</h3>
<h4>Patronage and Entrpreuneurship</h4>
</a>
</div>
<div class="badge-back circle" style="background-color: rgb(252, 175, 23);">
<a href="#"><img src="./assets/img/Bumpa.svg">
<h3>PATRONS</h3>
</a>
</div>
<div class=" v-divider"></div>
</div>
</div>
</div>
<div class="col has-text-centered">
<div class="badge c">
<div class="badge-content">
<div class="badge-front">
<a href="#"><img src="./assets/img/Samye.svg">
<h3>TEACHING ACTIVITES</h3>
<h4> and teaching centers</h4>
</a>
</div>
<div class="badge-back circle" style="background-color: rgb(219, 51, 40);">
<a href="#"><img src="./assets/img/Samye.svg">
<h3></h3>
</a>
</div>
<div class=" v-divider"></div>
</div>
</div>
</div>
<div class="col has-text-centered">
<div class="badge d">
<div class="badge-content">
<div class="badge-front">
<a href="#"><img src="./assets/img/BG.svg">
<h3>CHARITABLE ACTIVITES</h3>
<h4>Healthcare in action</h4>
</a>
</div>
<div class="badge-back circle" style="background-color: rgb(0, 170, 165);">
<a href="#"><img src="./assets/img/BG.svg">
<h3>THE FOUNDATION</h3>
</a>
</div>
<div class=" v-divider"></div>
</div>
</div>
</div>
<div class="col has-text-centered">
<div class="badge e">
<div class="badge-content">
<div class="badge-front">
<a href="#"><img src="./assets/img/LL.svg">
<h3>SCRIPTURAL ACTIVITES</h3>
<h4> translations and publications</h4>
</a>
</div>
<div class="badge-back circle" style="background-color: rgb(0, 72, 146);">
<a href="#"><img src="./assets/img/LL.svg">
<h3> TRANSLATIONS AND PUBLICATIONS</h3>
</a>
</div>
<div class=" v-divider"></div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="columns">
<div class="column is-three-quarters">
<p><strong>Follow </strong>
</p>
<div class="social-media icons"><a href="/" class="icon"><i aria-hidden="true" class="fa fa-facebook"></i></a><a href="https://www.instagram.com//" class="icon"><i aria-hidden="true" class="fa fa-instagram"></i></a><a href="https://twitter.com/" class="icon"><i aria-hidden="true" class="fa fa-twitter"></i></a><a href="https://soundcloud.com/" class="icon"><i aria-hidden="true" class="fa fa-soundcloud"></i></a>
</div>
<p>
Copyright © 2017
<a href="#" class="privacy-policy">
Privacy Policy
</a>
</p>
</div>
<div class="column">
<label class="label">Sign up for Mailing list</label>
<div class="field has-addons">
<div class="control is-expanded">
<input placeholder="example@email.com" class="input">
</div>
<p class="control">
<button type="submit" class="button is-primary">Sign Up</button>
</p>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>