_scss: some refactoring of landing-page cta-banners

Signed-off-by: Sebastiaan van Stijn <github@gone.nl>
This commit is contained in:
Sebastiaan van Stijn 2020-10-27 12:32:04 +01:00
parent fbc8a83ab8
commit 3ab44b9cd6
No known key found for this signature in database
GPG Key ID: 76698F39D527CE8C
7 changed files with 43 additions and 63 deletions

View File

@ -1,19 +1,18 @@
<section class="join-community slack">
<section class="cta-banner slack">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">
<h5 class="title">
<h2>Join the Docker Community Slack channel</h2>
<h5>
Connect with Docker Captains and Docker enthusiasts through our
Community Slack channel.
Community Slack channel. Its a great place to learn and ask questions
along your journey.
</h5>
<p>
Its a great place to learn and ask questions along your journey.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 text-center">
<a href="http://dockr.ly/slack" class="slack-button">
<img src="/images/slack-icon.svg" alt="slack" />
<span>Join the community</span>
<a href="http://dockr.ly/slack" class="btn slack-button">
<img src="/images/slack-icon.svg" width="56" height="56" alt="slack" />
Join the community
</a>
</div>
</div>

View File

@ -1,4 +1,4 @@
<section class="join-community dockercon">
<section class="cta-banner dockercon">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">

View File

@ -1,4 +1,4 @@
<section class="join-community dockercon">
<section class="cta-banner dockercon">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">

View File

@ -1,4 +1,4 @@
<section class="join-community dockercon">
<section class="cta-banner dockercon">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">

View File

@ -1,4 +1,4 @@
<section class="join-community dockercon">
<section class="cta-banner dockercon">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">

View File

@ -1,4 +1,4 @@
<section class="join-community dockercon">
<section class="cta-banner dockercon">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">

View File

@ -243,65 +243,46 @@ body.landing {
}
}
section.join-community {
section.cta-banner {
background-color: $dark-blue;
padding: 75px 0;
padding: 75px 0;
h2, h5, p {
color: white;
}
&.dockercon {
text-align: center;
text-align: center;
@include md-width {
text-align: left;
}
img {
margin-bottom: 20px;
max-height: 100px;
}
h2 {
color: white;
font-size: 32px;
line-height: 37px;;
}
a.btn {
background-color: #FF3F73;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
font-weight: bold;
padding: 20px 60px;
margin-top: 50px;
}
@include md-width {
text-align: left;
}
&.slack {
a.slack-button {
background: #FFFFFF;
border: 2px solid #FFFFFF;
box-sizing: border-box;
border-radius: 3px;
align-items: center;
display: inline-flex;
padding: 0 26px 0 2px;
text-transform: none;
margin-top: 2rem;
img {
margin-bottom: 20px;
max-height: 100px;
}
img {
height: 56px;
width: 56px;
}
span {
font-weight: bold;
font-size: 17px;
line-height: 24px;
color: $dark-blue;
}
h2 {
font-size: 32px;
line-height: 37px;;
}
a.btn {
background: #FF3F73;
color: white;
font-size: 17px;
font-weight: bold;
margin-top: 50px;
padding: 20px 60px;
img {
margin: 0;
}
&.slack-button {
background: white;
color: $dark-blue;
padding: 2px 25px 2px 10px;
}
}
}