Skip to content

Instantly share code, notes, and snippets.

@EthanGould

EthanGould/HamTech

Last active November 27, 2016 22:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save EthanGould/0cd21f6233f9e2d0e914328ecb1a8542 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save EthanGould/0cd21f6233f9e2d0e914328ecb1a8542 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HamTech
/*
* Sidebar edits
*/
/* hide tagline + search box */
.side-header-content-3 .fusion-header-content-3-wrapper {
display: none;
}
/*
* TOOLBOX SECTION STYLE
*/
#main { /* adjust site background */
padding: 0 !important;
font-family: 'Raleway', sans-serif !important;
}
#content {
margin-bottom: 0;
}
.toolbox-hero {
border-left: 20px solid #35BAF2;
}
.toolbox-hero p {
margin-bottom: 0 !important;
color: white;
font-weight: 700;
font-size: 16px;
}
.toolbox-branding {
width: 180px;
height: 171px;
position: absolute;
top: -90px;
background-image: url('http://hammertechnical.com/wp-content/uploads/2015/10/[email protected]');
background-size: cover;
}
.toolbox-branding p {
font-size: 13px;
line-height: 14px;
width: 70px;
color: #0DBBD3;
}
.toolbox-hero .toolbox-header--white h1 {
color: white;
font-size: 40px;
}
.toolbox-hero .fusion-button-wrapper {
margin-top: 40px;
}
.toolbox-hero .toolbox-header--xl.toolbox-header--black h1,
.toolbox-hero .toolbox-header--xl.toolbox-header--white h1 {
font-size: 66px;
font-family: 'Raleway', sans-serif !important;
line-height: 64px;
}
.toolbox-hero .toolbox-header--xxl.toolbox-header--black h1,
.toolbox-hero .toolbox-header--xxl.toolbox-header--white h1 {
font-size: 70px;
font-family: 'Raleway', sans-serif !important;
line-height: 64px !important;
}
/* yellow button */
.toolbox-section .fusion-button.button-flat.button-round.button-small.button-default.button-4.yellow,
.toolbox-section .fusion-button.button-flat.button-round.button-xlarge.button-default.button-5.yellow {
background-color: #FFDC00;
}
.toolbox-section .fusion-button.button-flat.button-round.button-small.button-default.button-4.yellow:hover,
.toolbox-section .fusion-button.button-flat.button-round.button-xlarge.button-default.button-5.yellow:hover {
background-color: #35baf2;
}
.toolbox-section .fusion-button.button-flat.button-round.button-small.button-default.button-4.yellow span,
.toolbox-section .fusion-button.button-flat.button-round.button-xlarge.button-default.button-5.yellow span {
color: black;
}
.toolbox-section .fusion-button.button-flat.button-round.button-small.button-default.button-4.yellow:hover span,
.toolbox-section .fusion-button.button-flat.button-round.button-xlarge.button-default.button-5.yellow:hover span {
color: white;
}
/* white button */
.toolbox-section .fusion-button.button-flat.button-round.button-small.button-default.button-4.white,
.toolbox-section .fusion-button.button-flat.button-round.button-xlarge.button-default.button-5.white {
background-color: white;
}
.toolbox-section .fusion-button.button-flat.button-round.button-small.button-default.button-4.white:hover,
.toolbox-section .fusion-button.button-flat.button-round.button-xlarge.button-default.button-5.white:hover {
background-color: #FFDC00;
}
.toolbox-section .fusion-button.button-flat.button-round.button-small.button-default.button-4.white span,
.toolbox-section .fusion-button.button-flat.button-round.button-xlarge.button-default.button-5.white span {
color: black;
}
.toolbox-section .fusion-button.button-5.fusion-button-text span,
.toolbox-hero .toolbox-button {
color: black;
border: 0;
font-family: 'Raleway', sans-serif !important;
}
.toolbox-hero .toolbox-header--black h1,
.toolbox-section .toolbox-header--black h1 {
color: black;
font-size: 40px;
}
/***************/
/*SECTION TWO*/
/***************/
.toolbox-section {
padding-left: 30px !important;
padding-right: 30px !important;
}
.toolbox-section-two-footer {
margin: 0 auto;
height: 180px;
}
#left.toolbox-section-two-footer {
background-color: rgba(150,150,150,0.6);
}
#left.toolbox-section-two-footer p {
color: white;
}
#toolbox-section-two-footer-right {
background-color: rgba(0,200,227,0.7);
}
#toolbox-section-two-footer-right ul {
display: block;
}
.toolbox-section .toolbox-header--center.toolbox-header--black h1 {
text-align: center;
font-family: 'Raleway', sans-serif !important;
}
.toolbox-section .toolbox-header--white h1 {
color: white;
margin: 0;
font-size: 56px;
line-height: 52px;
font-family: 'Raleway', sans-serif !important;
}
.toolbox-section-two h5 {
color: white;
margin: 0;
}
.toolbox-subheader h4 {
color: #FFDC00 !important;
font-weight: 700 !important;
font-family: 'Raleway', sans-serif !important;
}
.toolbox-subheader.toolbox-subheader-center h4 {
text-align: center;
}
/* hide all toolbox item */
.toolbox-section-two .toolbox-item-list {
display: none;
width: 100%;
float: left;
padding-left: 0;
font-size: 16px;
color: #ffdc00;
}
/* show the first toolbox item onload */
.toolbox-section-two .toolbox-item-list[data-list-id="1"] {
display: block;
}
.toolbox-item-list li {
margin-bottom: 5px;
}
.toolbox-item-list span {
color: white;
}
.toolbox-section p {
margin-bottom: 5px;
color: grey;
line-height: 20px;
font-size: 18px;
font-weight: 500;
}
.toolbox-section-two-footer .fusion-button-wrapper {
margin: 0 auto;
}
.toolbox-section p:first-child {
font-size: 20px;
font-weight: 700;
}
.toolbox-section-two-footer .fusion-button.button-2 {
background-color: #FFDC00;
}
.toolbox-section-two-footer .fusion-button.button-2 .fusion-button-text {
color: black;
margin-left: 15px;
}
#left.toolbox-section-two .toolbox-section-two-footer p:nth-child(1),
.toolbox-section-two .toolbox-section-two-footer p:nth-child(1) {
color: white;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.toolbox-section-two-footer .toolbox-item-list {
width: 100%;
margin: 10px 0 0 0;
list-style: none;
}
.toolbox-section-two-footer .toolbox-item-list li {
float: left;
width: 50%;
line-height: 20px;
font-size: 18px;
color: white;
}
.section-tile-col {
position: relative;
float: left;
}
.section-tile {
height: 70px;
width: 70px;
margin: 30px;
background-size: cover;
transform: rotate(-45deg);
}
.tile1.section-tile {
background-image: url('http://hammertechnical.com/wp-content/uploads/2016/11/Data-Services-–[email protected]');
}
.tile2.section-tile {
background-image: url('http://hammertechnical.com/wp-content/uploads/2016/11/Support-–[email protected]');
}
.tile3.section-tile {
background-image: url('http://hammertechnical.com/wp-content/uploads/2016/11/Security-–[email protected]');
}
.tile4.section-tile {
background-image: url('http://hammertechnical.com/wp-content/uploads/2016/11/Project-Management-–[email protected]');
}
.tile5.section-tile {
background-image: url('http://hammertechnical.com/wp-content/uploads/2016/11/Network-Administration-–[email protected]');
}
.tile6.section-tile {
background-image: url('http://hammertechnical.com/wp-content/uploads/2016/11/IT-Services-–[email protected]');
}
/***************/
/*SECTION THREE*/
/***************/
.fusion-checklist .fusion-li-item {
margin-bottom: 0;
padding: 5px 0;
}
.fusion-checklist:nth-child(1) {
border-top: 1px dashed grey;
}
.toolbox-tiers-cta p {
margin-bottom: 20px;
}
.toolbox-tier-label p {
color: white;
}
.toolbox-tier-label {
height: 90px;
width: 90px;
padding-top: 25px;
border-radius: 50%;
}
#gold.toolbox-tier-label { background-color: #fcc900 }
#silver.toolbox-tier-label { background-color: #BCBEC0 }
#bronze.toolbox-tier-label { background-color: #AE5400; }
.toolbox-tier-label-shadow {
position: absolute;
top: -65px;
left: 0;
right: 0;
height: 110px;
width: 110px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border-radius: 50%;
text-align: center;
}
#gold.toolbox-tier-label-shadow { background-color: rgba(252,201,0,0.5); }
#silver.toolbox-tier-label-shadow { background-color: rgba(188,190,192,0.5); }
#bronze.toolbox-tier-label-shadow { background-color: rgba(174,84,0,0.5); }
.toolbox-section-three .fusion-row > p {
width: 100%;
margin: 30px auto 20px;
font-size: 20px;
color: white;
text-align: center;
}
.toolbox-section-three .fusion-button-wrapper {
display: block;
text-align: center;
}
.toolbox-section-three .fusion-button.button-3 {
background-color: #FFDC00;
}
.toolbox-section-three .fusion-button.button-3 span {
color: black;
}
/***************/
/*SECTION FOUR*/
/***************/
.toolbox-section-four .fusion-title.fusion-sep-none .title-heading-left h1 {
margin: 10px auto 20px;
}
.toolbox-section-four p:first-child,
.toolbox-section-five p:first-child,
.toolbox-section-six p:first-child {
text-align: center;
}
.toolbox-section-four .fusion-row p:first-child {
font-size: 20px;
}
.toolbox-section-four .fusion-row p {
width: 100%;
margin: 0 auto;
max-width: 500px;
padding-right: 20px;
font-size: 16px;
line-height: 24px;
text-align: center;
}
.toolbox-section-four .toolbox-subheader h4 {
text-align: center;
}
.toolbox-section-four .fusion-button-wrapper {
text-align: center;
display: block !important;
}
toolbox-section-four p {
line-height: 22px;
}
/***************/
/*SECTION FIVE*/
/***************/
.toolbox-section-five .toolbox-header--black.toolbox-header--center {
width: 100%;
margin: 0 auto;
}
.toolbox-section-five .recent-posts-content {
background-color: white;
padding: 20px;
}
.toolbox-section-five .fusion-recent-posts {
margin-bottom: -60px;
}
/***************************/
/*TECH TIPS SLIDE SHOW*/
/***************************/
.toolbox-slider-container {
position: relative;
}
.toolbox-slider-container p {
font-size: 18px;
}
.toolbox-slider-container p:first-child {
font-size: 24px;
margin-bottom: 20px;
}
.toolbox-slider-container:before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: inherit;
content: ' ';
background-color: rgba(53, 186, 242, 0.8);
}
.toolbox-slider-header {
position: absolute;
top: -375px;
left: 0;
right: 0;
height: 120px;
width: 120px;
transform: rotate(45deg);
margin: 0 auto;
background-color: black;
}
.toolbox-slider-header span {
display: inline-block;
transform: rotate(-45deg);
margin-top: 35px;
line-height: 25px;
font-weight: 700;
font-size: 18px;
text-align: center;
text-transform: uppercase;
color: white;
}
.toolbox-slider-count {
position: absolute;
left: 0;
right: 0;
top: -210px;
height: 10px;
width: 10px;
margin: 0 auto;
display: inline-block;
font-size: 26px;
font-weight: bold;
color: white;
}
#toolbox-slider-nav-right,
#toolbox-slider-nav-left {
display: inline-block;
position: absolute;
font-size: 60px;
cursor: pointer;
color: white;
}
#toolbox-slider-nav-right {
right: 10px;
}
#toolbox-slider-nav-left {
left: 10px;
}
.toolbox-slide p {
text-align: center;
color: white;
}
.toolbox-slide {
display: none;
}
/*show the first slide on load*/
#toolbox-slide1 {
display: block;
}
/*********************/
/**** SECTION SIX ****/
/*********************/
@media screen and (min-width: 768px) {
.toolbox-hero p {
font-size: 20px;
}
.toolbox-branding p {
font-size: 14px;
}
.toolbox-hero .toolbox-header--xl.toolbox-header--black h1,
.toolbox-hero .toolbox-header--xl.toolbox-header--white h1 {
font-size: 68px;
font-family: 'Raleway', sans-serif !important;
line-height: 70px;
}
.toolbox-hero .toolbox-header--xxl.toolbox-header--black h1,
.toolbox-hero .toolbox-header--xxl.toolbox-header--white h1 {
font-size: 90px;
font-family: 'Raleway', sans-serif !important;
line-height: 110px !important;
}
.toolbox-section-five .toolbox-header--black.toolbox-header--center {
width: 60%;
}
#left.toolbox-section-two-footer,
#toolbox-section-two-footer-right.toolbox-section-two-footer {
width: 50% !important;
margin: 80px 0 0 !important;
}
.toolbox-section-two .toolbox-section-two-footer:not(#toolbox-section-two-footer-right) {
clear: left;
}
.toolbox-section-two .fusion-title {
margin-bottom: 14px;
}
.toolbox-section-two-footer .toolbox-item-list {
width: 75%;
}
#right.toolbox-section-two p {
color: white;
font-size: 21px;
font-weight: 700;
}
.toolbox-section-three .fusion-row > p {
width: 60%;
}
.toolbox-section-four .fusion-row p {
width: 70%;
padding-right: 0;
margin-bottom: 30px;
}
/************************/
/* dynamic content section */
/************************/
#toolbox-dynamic-content.medium-split-col,
#toolbox-dynamic-content-buttons.medium-split-col {
float: left;
display: inline-block;
width: 48% !important;
}
#toolbox-dynamic-content-buttons .section-tiles {
margin-left: -100px;
transform: rotate(-45deg);
}
#toolbox-dynamic-content-buttons {
width: 48%;
position: absolute;
top: -100px;
right: 70px;
}
.section-tile-col:nth-child(2) {
margin: 25px 0 0;
}
.section-tile-col {
width: 130px;
height: 450px;
margin-top: 25px;
}
.section-tile {
width: 120px;
height: 120px;
margin: 10px;
transform: rotate(0deg);
}
.toolbox-section-five .toolbox-header--black h1,
.toolbox-section .toolbox-header--black h1 {
font-size: 50px;
}
.toolbox-hero .toolbox-section .toolbox-header--xl h1 {
font-size: 700px;
}
/*****************/
/***** slider ****/
/*****************/
.toolbox-slider-header {
top: -366px;
}
#toolbox-slider-nav-right {
right: 20px;
}
#toolbox-slider-nav-left {
left: 20px;
}
#toolbox-slider-nav-right,
#toolbox-slider-nav-left {
bottom: 40%;
}
.toolbox-slider-container p {
font-size: 24px;
}
.toolbox-slider-container p:first-child {
font-size: 34px;
margin-bottom: 30px;
}
.toolbox-slider-container:hover #toolbox-slider-nav-right {
animation-name: slideLeft;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
.toolbox-slider-container:hover #toolbox-slider-nav-left {
animation-name: slideRight;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
@keyframes slideRight {
from { left: 20px; }
to { left: 30px; }
}
@keyframes slideLeft {
from { right: 20px; }
to { right: 30px; }
}
}
/*****************
**** Footer ****
******************/
.fusion-body .fusion-footer-copyright-center .fusion-social-links-footer {
display: none;
}
@media screen and (min-width: 960px) {
.section-tile-col {
width: 150px;
height: 450px;
}
.section-tile {
width: 140px;
height: 140px;
}
}
@media screen and (min-width: 1080px) {
.medium-split-col {
margin-right: 0;
}
/*******************/
/*** Support Tiers ***/
/*******************/
.toolbox-tier-card {
height: 300px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment