Quick links
+ + diff --git a/src/adtechmedia-website/frontend/js/calculator.js b/src/adtechmedia-website/frontend/js/calculator.js index b0cc3c3..1d645aa 100644 --- a/src/adtechmedia-website/frontend/js/calculator.js +++ b/src/adtechmedia-website/frontend/js/calculator.js @@ -16,12 +16,20 @@ jQuery(function($) { url: calculatorEndpoint + '/niches', success: function (data) { var niches = data['niches']; - for (var key in niches) { - var niche = niches[key]; - $selector.append( - '' - ); - } + + niches + .sort() + .forEach(function(v) { + if(v === 'default') { + $selector.prepend( + '' + ); + return; + } + $selector.append( + '' + ); + }); } }) } diff --git a/src/adtechmedia-website/frontend/js/carousel.js b/src/adtechmedia-website/frontend/js/carousel.js deleted file mode 100644 index 3515cfc..0000000 --- a/src/adtechmedia-website/frontend/js/carousel.js +++ /dev/null @@ -1,109 +0,0 @@ -(function() { - function carouselSlide(selector, paginationId) { - var slides = document.querySelectorAll(selector); - var currentSlide = 0; - var slideInterval = setInterval(nextSlide,4000); - var p = document.getElementById(paginationId); - var phtml = ''; - var players = {}; - - for(var i=1; i<=slides.length; i++){ - phtml+=''; - } - - p.innerHTML = phtml; - - var pbuttons = p.querySelectorAll('button'); - pbuttons[0].className = 'active'; - - for(var j=0; j
').load(d),a('
').load(d),a('
').load(d),a('
').load(d)}function e(c,d,e){if(this.$element=a(c),"string"==typeof d&&(d=b(d)),e?"string"==typeof e&&(e=b(e)):e={},"string"==typeof d)d=d.replace(/\.\w*$/,"");else if("object"==typeof d)for(var f in d)d.hasOwnProperty(f)&&(d[f]=d[f].replace(/\.\w*$/,""));this.settings=a.extend({},g,e),this.path=d;try{this.init()}catch(i){if(i.message!==h)throw i}}var f="vide",g={volume:1,playbackRate:1,muted:!0,loop:!0,autoplay:!0,position:"50% 50%",posterType:"detect",resizing:!0,bgColor:"transparent",className:""},h="Not implemented";e.prototype.init=function(){var b,e,g=this,i=g.path,j=i,k="",l=g.$element,m=g.settings,n=c(m.position),o=m.posterType;e=g.$wrapper=a("").addClass(m.className).css({position:"absolute","z-index":-1,top:0,left:0,bottom:0,right:0,overflow:"hidden","-webkit-background-size":"cover","-moz-background-size":"cover","-o-background-size":"cover","background-size":"cover","background-color":m.bgColor,"background-repeat":"no-repeat","background-position":n.x+" "+n.y}),"object"==typeof i&&(i.poster?j=i.poster:i.mp4?j=i.mp4:i.webm?j=i.webm:i.ogv&&(j=i.ogv)),"detect"===o?d(j,function(a){e.css("background-image","url("+a+")")}):"none"!==o&&e.css("background-image","url("+j+"."+o+")"),"static"===l.css("position")&&l.css("position","relative"),l.prepend(e),"object"==typeof i?(i.mp4&&(k+=''),i.webm&&(k+=''),i.ogv&&(k+=''),b=g.$video=a("")):b=g.$video=a('');try{b.prop({autoplay:m.autoplay,loop:m.loop,volume:m.volume,muted:m.muted,defaultMuted:m.muted,playbackRate:m.playbackRate,defaultPlaybackRate:m.playbackRate})}catch(p){throw new Error(h)}b.css({margin:"auto",position:"absolute","z-index":-1,top:n.y,left:n.x,"-webkit-transform":"translate(-"+n.x+", -"+n.y+")","-ms-transform":"translate(-"+n.x+", -"+n.y+")","-moz-transform":"translate(-"+n.x+", -"+n.y+")",transform:"translate(-"+n.x+", -"+n.y+")",visibility:"hidden",opacity:0}).one("canplaythrough."+f,function(){g.resize()}).one("playing."+f,function(){b.css({visibility:"visible",opacity:1}),e.css("background-image","none")}),l.on("resize."+f,function(){m.resizing&&g.resize()}),e.append(b)},e.prototype.getVideoObject=function(){return this.$video[0]},e.prototype.resize=function(){if(this.$video){var a=this.$wrapper,b=this.$video,c=b[0],d=c.videoHeight,e=c.videoWidth,f=a.height(),g=a.width();g/e>f/d?b.css({width:g+2,height:"auto"}):b.css({width:"auto",height:f+2})}},e.prototype.destroy=function(){delete a[f].lookup[this.index],this.$video&&this.$video.off(f),this.$element.off(f).removeData(f),this.$wrapper.remove()},a[f]={lookup:[]},a.fn[f]=function(b,c){var d;return this.each(function(){d=a.data(this,f),d&&d.destroy(),d=new e(this,b,c),d.index=a[f].lookup.push(d)-1,a.data(this,f,d)}),this},a(document).ready(function(){var b=a(window);b.on("resize."+f,function(){for(var b,c=a[f].lookup.length,d=0;c>d;d++)b=a[f].lookup[d],b&&b.settings.resizing&&b.resize()}),b.on("unload."+f,function(){return!1}),a(document).find("[data-"+f+"-bg]").each(function(b,c){var d=a(c),e=d.data(f+"-options"),g=d.data(f+"-bg");d[f](g,e)})})});
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/js/medium-rss.js b/src/adtechmedia-website/frontend/js/medium-rss.js
new file mode 100644
index 0000000..b1d0fd3
--- /dev/null
+++ b/src/adtechmedia-website/frontend/js/medium-rss.js
@@ -0,0 +1,24 @@
+$(function () {
+ var $content = $('#mediumPosts');
+ var data = {
+ rss_url: 'https://blog.adtechmedia.io/feed/'
+ };
+ $.get('https://api.rss2json.com/v1/api.json', data, function (response) {
+ if (response.status == 'ok') {
+ var output = '';
+ $.each(response.items, function (k, item) {
+ var description = $(item.description);
+ var trimmedString = description[0].innerText;
+
+ output += '
+';
+ output += '
';
+ return k < 2;
+ });
+ $content.html(output);
+ }
+ });
+});
diff --git a/src/adtechmedia-website/frontend/js/modal.js b/src/adtechmedia-website/frontend/js/modal.js
index 6eee895..9a8508f 100755
--- a/src/adtechmedia-website/frontend/js/modal.js
+++ b/src/adtechmedia-website/frontend/js/modal.js
@@ -109,7 +109,7 @@ var Modal = (function() {
isOpen = true;
window.setTimeout(function () {
- modals.siblings('div, header, footer, main').addClass('blurred');
+ modals.siblings('div, header, footer, main, section').addClass('blurred');
}, 50);
}
diff --git a/src/adtechmedia-website/frontend/js/nav.js b/src/adtechmedia-website/frontend/js/nav.js
deleted file mode 100644
index 6d72681..0000000
--- a/src/adtechmedia-website/frontend/js/nav.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*eslint no-use-before-define:0*/
-
-jQuery(document).ready(function ($) {
- var secondaryNav = $('.cd-secondary-nav'),
- contentSections = $('.cd-section');
-
- $(window)
- .on('scroll', function () {
- updateSecondaryNavigation();
- })
- .on('load', function (e) {
- e.preventDefault();
- updateSecondaryNavigation();
- });
-
- /**
- *
- */
- function updateSecondaryNavigation() {
- contentSections.each(function () {
- var actual = $(this),
- actualHeight = actual.height() + parseInt(actual.css('paddingTop').replace('px', ''))
- + parseInt(actual.css('paddingBottom').replace('px', '')),
- actualAnchor = secondaryNav.find('a[href="/' + actual.attr('id') + '/"]');
-
- if (( actual.offset().top - secondaryNav.height() <= $(window).scrollTop() ) &&
- ( actual.offset().top + actualHeight - secondaryNav.height() > $(window).scrollTop() )) {
- actualAnchor.addClass('active');
- } else {
- actualAnchor.removeClass('active');
- }
- });
- }
-
- //smooth scrolling when clicking on the secondary navigation items
- secondaryNav.find('ul a').on('click', function (event) {
- var $a = $(this);
-
- if ($a.hasClass('page-scroll')) {
- event.preventDefault();
-
- var href = $a.attr('href');
- var scrollTop = null;
-
- if (href === '/') {
- scrollTop = 0;
- } else {
- var target = $('#' + href.replace(/\//g, ''));
- scrollTop = target.offset().top - secondaryNav.height() + 1;
- }
-
- $('body,html').animate({'scrollTop': scrollTop}, 500);
- }
- });
-});
diff --git a/src/adtechmedia-website/frontend/sass/_base.scss b/src/adtechmedia-website/frontend/sass/_base.scss
index 5c47343..617dffd 100644
--- a/src/adtechmedia-website/frontend/sass/_base.scss
+++ b/src/adtechmedia-website/frontend/sass/_base.scss
@@ -1,15 +1,3 @@
-$base-color: #000;
-$link-color: #01ADFD;
-$green-accent: #2EF6A5;
-$purple-accent: #4E4BF7;
-$gray: #9090aa;
-$border-color: #dfe2e7;
-$base-font-size: 16px;
-$section-width: 1100px;
-$section-based-calc: calc((100% - #{$section-width}) / 2);
-$social-icons: wordpress, drupal, github, linkedin, twitter, facebook, youtube;
-$social-colors: #09aada, #0678BE, #000, #0077B5, #64b2f8, #3b5998, #e52d27;
-
@font-face {
font-family: Futura-Light;
src: url(../fonts/Futura-Light/Futura-Light.eot);
@@ -77,11 +65,8 @@ $social-colors: #09aada, #0678BE, #000, #0077B5, #64b2f8, #3b5998, #e52d27;
a {
text-decoration: none;
color: $link-color;
- &.banner-link {
- color: #fff;
- }
- &.more-link {
+ &.nowrap {
white-space: nowrap;
}
@@ -90,7 +75,8 @@ a {
}
}
-.body-main p, .with-space {
+.body-main p,
+.with-space {
margin: 20px 0;
}
@@ -114,6 +100,14 @@ a {
text-transform: uppercase;
}
+.blurred {
+ filter: blur(5px);
+}
+
+.no-click {
+ pointer-events: none;
+}
+
h1 {
font-size: 36px;
line-height: 80px;
@@ -171,67 +165,6 @@ small {
cursor: default;
}
-//custom radio input
-.radio {
- display: block;
- padding: 10px 20px 0 0;
- cursor: pointer;
- font-size: 13px;
- &:hover {
- .inner {
- @include transform(scale(0.5));
- opacity: .5;
- }
- }
-
- input {
- width: 1px;
- height: 1px;
- opacity: 0;
- &:checked,
- &:focus {
- & + .outer {
- .inner {
- @include transform(scale(1));
- opacity: 1;
- }
- }
- }
-
- &:checked + .outer {
- border: 2px solid #1b93f2;
- }
-
- &:focus + .outer {
- .inner {
- background-color: #1b93f2;
- }
- }
- }
-
- .outer {
- width: 18px;
- height: 18px;
- display: block;
- float: left;
- border: 2px solid #e6e6e6;
- border-radius: 50%;
- background-color: #fff;
- }
-
- .inner {
- @include transition(all 0.25s ease-in-out);
- width: 10px;
- height: 10px;
- @include transform(scale(0));
- display: block;
- margin: 2px;
- border-radius: 50%;
- background-color: #1b93f2;
- opacity: 0;
- }
-}
-
//custom button
.btn {
z-index: 2;
@@ -270,11 +203,11 @@ small {
}
&.cancel-btn {
- background: #BFBFBF;
+ background: $gray-color;
&:hover {
background: transparent;
- border-color: #BFBFBF;
- color: #BFBFBF;
+ border-color: $gray-color;
+ color: $gray-color;
}
}
}
@@ -318,6 +251,10 @@ small {
font-size: 13px;
font-family: 'FuturaICG', sans-serif;
-webkit-appearance: none;
+ -moz-appearance: none;
+ &:-moz-focusring { color: transparent;
+ text-shadow: 0 0 0 #000;
+ }
}
}
diff --git a/src/adtechmedia-website/frontend/sass/_loops.scss b/src/adtechmedia-website/frontend/sass/_loops.scss
index 2e9be8a..b994739 100644
--- a/src/adtechmedia-website/frontend/sass/_loops.scss
+++ b/src/adtechmedia-website/frontend/sass/_loops.scss
@@ -1,11 +1,3 @@
-@function headings($from, $to) {
- @if $from == $to {
- @return 'h#{$from}';
- } @else {
- @return 'h#{$from},' + headings($from+1, $to);
- }
-}
-
@for $i from 1 through 12 {
.flex-row > .flex-item-#{$i} {
flex: 0 0 #{(100 / 12) * $i + '%'};
diff --git a/src/adtechmedia-website/frontend/sass/_responsive-view.scss b/src/adtechmedia-website/frontend/sass/_responsive-view.scss
index b117885..5e6328c 100644
--- a/src/adtechmedia-website/frontend/sass/_responsive-view.scss
+++ b/src/adtechmedia-website/frontend/sass/_responsive-view.scss
@@ -1,398 +1,580 @@
-@media (min-width: 1700px) {
- .landing-page {
+//@media (min-width: 1700px) {
+// .landing-page {
+// section {
+// width: 1296px;
+// }
+// }
+//}
+
+//@media (min-width: 1171px) {
+// #solutions {
+// section {
+// .solution-cont {
+// .solution-text {
+// @include flex-width(0 0 65%, 65%);
+// }
+//
+// .solution-benefits {
+// @include flex-width(0 0 35%, 35%);
+// }
+// }
+// }
+// }
+//
+// .carousel {
+// .carousel-overlay {
+// .carousel-heading {
+// width: 1100px;
+// margin: 0 auto;
+// }
+// }
+// }
+//
+// #home {
+// .pagination {
+// button {
+// width: 35px;
+// height: 10px;
+// margin: 0 5px;
+// }
+// }
+// }
+//}
+
+@media (min-width: 1025px) and (max-width: 1200px) {
+ .btn {
+ padding: 8px 16px;
+ }
+
+ .demo-footer {
+ background-size: 100% 200px;
+ }
+
+ .bottom-info {
section {
- width: 1296px;
+ width: 85%;
+ padding: 0;
}
}
-}
-@media (min-width: 1171px) {
- #solutions {
+ footer {
section {
- .solution-cont {
- .solution-text {
- @include flex-width(0 0 65%, 65%);
- }
-
- .solution-benefits {
- @include flex-width(0 0 35%, 35%);
- }
- }
+ width: 100%;
}
}
+}
- .carousel {
- .carousel-overlay {
- .carousel-heading {
- width: 1100px;
- margin: 0 auto;
- }
- }
+@media (min-width: 1025px) and (min-height: 800px) {
+ section {
+ width: 90%;
}
- #home {
- .pagination {
- button {
- width: 35px;
- height: 10px;
- margin: 0 5px;
- }
- }
+ .main-nav a {
+ font-size: 16px;
}
}
-@media (max-width: 1170px) {
+@media (min-width: 1500px) and (min-height: 800px) {
section,
- header section,
- .custom-headline-block section {
- width: 100%;
- padding-left: 50px;
- padding-right: 50px;
+ .main-slide section {
+ width: 80%;
}
+}
- #video-block {
- height: calc(100% - 120px);
- width: 680px;
- #video-file {
- height: 100%;
+@media (min-width: 1025px) {
+ .demo-footer {
+ background: url('../images/gray-footer.png') 0 bottom/100% auto no-repeat;
+ height: 200px;
+ padding: 100px 0 0;
+ line-height: 100px;
+ text-align: center;
+ .main-page ~ & {
+ margin-top: -100px;
}
- }
- .challenges {
- margin: 0 -25px;
- .challenges-block {
- padding: 0 25px;
+ h3 {
+ display: inline-block;
+ vertical-align: top;
}
- }
- #solutions {
- section {
- padding-top: 25px;
+ .btn {
+ margin: 0 0 0 40px;
+ vertical-align: middle;
}
}
-}
-@media (max-width: 1170px) and (min-width: 1025px) {
- #solutions {
+ header {
section {
- .solution-cont {
- .solution-text {
- @include flex-width(0 0 60%, 60%);
- }
-
- .solution-benefits {
- @include flex-width(0 0 40%, 40%);
- }
+ & > .modal__trigger {
+ display: none;
}
}
}
}
-@media (min-width: 1025px) {
- #solutions {
- section {
- .solution-cont {
- .solution-cont-inner {
- @include flex-container;
- margin: 0 -25px;
- }
-
- .solution-text,
- .solution-benefits {
- padding: 0 25px;
- }
- }
+@media (min-width: 1300px) {
+ .logo {
+ height: 88px;
+ img {
+ height: 40px;
}
}
-}
-@media (max-width: 1024px) {
- .slides {
- height: 500px;
+ .main-nav {
+ li {
+ line-height: 88px;
+ height: 88px;
+ }
}
- .carousel {
- height: 500px;
- & > *:not(.with-headline) {
- display: none;
- }
+ .cb-container {
+ margin-top: 88px;
+ }
+}
- .carousel-overlay.with-headline {
- background: transparent url('../images/carousel.jpg') top center no-repeat;
- background-size: auto 100%;
- .carousel-heading {
- @include transform(translateY(-50%));
- top: 50%;
- text-shadow: none;
- font-size: 50px;
- }
- }
+@media (min-width: 1700px) {
+ section {
+ width: 1296px;
}
- #challenges,
- .solution-inner {
- @include font-smoothing;
+ h3 {
+ font-size: 28px;
}
- #solutions {
- section {
- .solution-cont {
- h3 {
- margin: 25px 0 0;
+ .footer-blocks {
+ .social-links {
+ li {
+ margin: 0 10px;
+ a {
+ width: 72px;
+ height: 72px;
+ i {
+ font-size: 40px;
+ line-height: 72px;
+ }
}
}
}
}
- .cb-container {
- min-height: calc(100vh - 360px);
+ .footer-logo {
+ img {
+ height: 104px;
+ }
}
- .challenges {
- font-size: 16px;
+ .btn {
+ padding: 8px 24px;
}
- main {
- &:not(.main-page) ~ .demo-footer {
- padding: 0;
- .btn.secondary-btn {
- position: fixed;
- top: 14px;
- right: 50px;
- margin: 0;
- z-index: 12;
- color: #fff;
- border-color: transparent;
- left: auto;
- &.alpha-bg {
- &:not(:hover) {
- background-color: #01ADFD;
- }
-
- &:hover {
- background: #fff;
- border-color: #01ADFD;
- color: #01ADFD;
- }
+ .main-nav {
+ li {
+ &.custom-menu-link {
+ a {
+ padding-left: 24px;
+ padding-right: 24px;
}
}
}
}
-}
-@media (min-width: 992px) {
- header nav .navTrigger-label {
- display: none;
+ .demo-footer {
+ height: 250px;
+ line-height: 150px;
}
}
-@media (max-width: 991px) {
- .cb-container {
- min-height: calc(100vh - 255px);
+@media (max-width: 1170px) {
+ section,
+ header section,
+ .custom-headline-block section {
+ width: 100%;
+ padding-left: 50px;
+ padding-right: 50px;
}
+}
- h1 {
- font-size: 34px;
- line-height: 70px;
- &.custom-headline {
- height: 80px;
- line-height: 80px;
- }
+@media (min-width: 1025px) {
+ header nav .navTrigger-label {
+ display: none;
}
+}
- #solutions {
- section {
- h1 {
- font-size: 28px;
+@media (max-width: 1024px) {
+ main {
+ &:not(.main-page) {
+ & ~ .demo-footer {
+ display: none;
}
- .solution:not(:last-child) {
- margin: 0 0 25px;
+ & ~ section {
+ .medium-content {
+ border-top: 1px solid #F2F2F2;
+ }
}
}
}
- .challenges {
- display: block;
- text-align: left;
- padding: 30px 0 0;
- margin: 0;
- .challenges-block {
- display: block;
- max-width: 100%;
- padding: 0;
- &:not(:last-child) {
- margin: 0 0 50px;
- }
- .challenges-block-inner {
- padding: 20px 20px 20px 0;
- @include flex-container;
- @include clearfix;
-
- .img-block {
- margin: 0;
- padding: 0;
- background: transparent;
- @include flex-align-self(center);
- @include flex-width(0 0 180px, 180px);
- text-align: center;
- img {
- max-width: 120px;
- display: inline-block;
- }
- }
-
- .cont-block {
- padding: 0;
- font-size: 16px;
- }
+ header {
+ & > section {
+ display: flex;
+ display: -webkit-flex;
+ & > .modal__trigger {
+ margin-left: auto;
+ order: 3;
+ -webkit-order: 3;
}
}
- }
+ nav {
+ .navTrigger-label {
+ width: 33px;
+ height: 18px;
+ position: relative;
+ top: 50%;
+ @include transform(translateY(-50%));
+ cursor: pointer;
+ display: block;
+ span {
+ height: 2px;
+ display: block;
+ position: absolute;
+ width: 100%;
+ background: $link-color;
+ border-radius: 9px;
+ opacity: 1;
+ left: 0;
+ &:nth-child(1) {
+ top: 0;
+ width: 70%;
+ }
- .demo-container {
- .block-logo {
- img {
- height: 40px;
- }
- }
- }
+ &:nth-child(2) {
+ top: 8px;
+ }
- .demo-container {
- .demo-row {
- margin: 0 -15px;
- .demo-block {
- padding: 0 15px;
+ &:nth-child(3) {
+ top: 16px;
+ }
+ }
}
}
}
- #contact {
- .contact-inner {
- height: 460px;
- }
-
- .contact-form {
- padding: 20px 30px 0;
- }
-
- .custom-input {
- padding-bottom: 0;
- }
+ .logo-cont {
+ float: none;
+ order: 2;
+ -webkit-order: 2;
+ }
- .btn {
- margin: 15px 0;
+ .main-nav {
+ height: 70px;
+ float: none;
+ order: 1;
+ -webkit-order: 1;
+ margin-right: 30px;
+ ul {
+ display: none;
+ position: absolute;
+ top: 100%;
+ background: #fff;
+ left: 0;
+ width: 100%;
+ overflow: auto;
+ height: calc(100vh - 70px);
}
- .captcha-block {
- padding: 10px 0 0;
+ input#navTrigger:checked ~ ul {
+ display: flex;
+ display: -webkit-flex;
+ flex-direction: column;
+ -webkit-flex-direction: column;
+ justify-content: center;
+ -webkit-justify-content: center;
}
- }
- .login {
- .register-blocks {
- .register-pic,
- .register-fields {
- @include flex-width(0 0 50%, 50%);
+ li {
+ float: none;
+ display: block;
+ height: 60px;
+ line-height: 60px;
+ &.custom-menu-link {
+ display: none;
}
- .register-pic {
- img {
- max-width: 90%;
+ a {
+ margin: 0;
+ font-size: 22px;
+ @include transition(.3s);
+ &.active,
+ &:hover {
+ color: #1b93f2;
}
}
}
}
- .landing-page {
- margin-top: 70px;
- section {
- width: 90%;
- }
-
- h1 {
- font-size: 26px;
- }
- }
-}
+ footer {
+ .footer-blocks {
+ display: block;
+ .footer-logo,
+ .quick-links {
+ display: none;
+ }
-@media (max-width: 890px) {
- .carousel {
- .carousel-overlay.with-headline {
- .carousel-heading {
- font-size: 46px;
+ .social-links {
+ flex: none;
+ -webkit-flex: none;
+ max-width: 100%;
+ margin: 0;
+ float: none;
+ height: auto;
+ ul {
+ display: flex;
+ display: -webkit-flex;
+ justify-content: center;
+ -webkit-justify-content: center;
+ li {
+ margin: 0 15px;
+ a {
+ width: 70px;
+ height: 70px;
+ i {
+ font-size: 40px;
+ line-height: 70px;
+ }
+ }
+ }
+ }
}
}
}
- .demo-container {
- .demo-row {
- margin: 0 -5px;
- .demo-block {
- padding: 0 5px;
+ .bottom-info {
+ line-height: normal;
+ section {
+ border-color: rgba(0, 0, 0, .5);
+ width: calc(100% - 100px);
+ margin: 0 50px;
+ padding-top: 16px;
+ padding-bottom: 16px;
+ & > span {
+ display: block;
+ a {
+ white-space: nowrap;
+ }
}
}
}
}
-@media (min-width: 768px) and (max-width: 991px) {
- .team-block {
- .member-pic {
- width: 130px;
- height: 130px;
- }
-
- .member-name,
- .member-social li .fa {
- font-size: 18px;
- }
+@media (max-width: 991px) {
+ .cb-container {
+ min-height: calc(100vh - 255px);
}
-}
-@media (max-width: 768px) {
h1 {
- @include text-gradient(-webkit-linear-gradient(left, black, white 100%));
- }
-
- .landing-page {
- section {
- padding: 25px 0;
- }
-
- .flex-row {
- display: block;
- &.flex-gutter {
- margin: 0;
- }
- & > [class^="flex-item-"] {
- max-width: 100%;
- padding: 0;
- &:not(:last-child) {
- margin-bottom: 25px;
- }
- }
- }
-
- .install-btn {
- display: block;
- width: 300px;
- margin: 0 auto;
- text-align: center;
- }
-
- .video-cont {
- height: 300px;
- }
-
- .customer-reviews {
- blockquote {
- font-size: 18px;
- }
+ font-size: 34px;
+ line-height: 70px;
+ &.custom-headline {
+ height: 80px;
+ line-height: 80px;
}
}
+
+ //#solutions {
+ // section {
+ // h1 {
+ // font-size: 28px;
+ // }
+ //
+ // .solution:not(:last-child) {
+ // margin: 0 0 25px;
+ // }
+ // }
+ //}
+ //
+ //.challenges {
+ // display: block;
+ // text-align: left;
+ // padding: 30px 0 0;
+ // margin: 0;
+ // .challenges-block {
+ // display: block;
+ // max-width: 100%;
+ // padding: 0;
+ // &:not(:last-child) {
+ // margin: 0 0 50px;
+ // }
+ // .challenges-block-inner {
+ // padding: 20px 20px 20px 0;
+ // @include flex-container;
+ // @include clearfix;
+ //
+ // .img-block {
+ // margin: 0;
+ // padding: 0;
+ // background: transparent;
+ // @include flex-align-self(center);
+ // @include flex-width(0 0 180px, 180px);
+ // text-align: center;
+ // img {
+ // max-width: 120px;
+ // display: inline-block;
+ // }
+ // }
+ //
+ // .cont-block {
+ // padding: 0;
+ // font-size: 16px;
+ // }
+ // }
+ // }
+ //}
+ //
+ //
+ //.demo-container {
+ // .block-logo {
+ // img {
+ // height: 40px;
+ // }
+ // }
+ //}
+ //
+ //.demo-container {
+ // .demo-row {
+ // margin: 0 -15px;
+ // .demo-block {
+ // padding: 0 15px;
+ // }
+ // }
+ //}
+ //
+ //#contact {
+ // .contact-inner {
+ // height: 460px;
+ // }
+ //
+ // .contact-form {
+ // padding: 20px 30px 0;
+ // }
+ //
+ // .custom-input {
+ // padding-bottom: 0;
+ // }
+ //
+ // .btn {
+ // margin: 15px 0;
+ // }
+ //
+ // .captcha-block {
+ // padding: 10px 0 0;
+ // }
+ //}
+ //
+ //.login {
+ // .register-blocks {
+ // .register-pic,
+ // .register-fields {
+ // @include flex-width(0 0 50%, 50%);
+ // }
+ //
+ // .register-pic {
+ // img {
+ // max-width: 90%;
+ // }
+ // }
+ // }
+ //}
+ //
+ //.landing-page {
+ // margin-top: 70px;
+ // section {
+ // width: 90%;
+ // }
+ //
+ // h1 {
+ // font-size: 26px;
+ // }
+ //}
}
+//@media (max-width: 890px) {
+// .carousel {
+// .carousel-overlay.with-headline {
+// .carousel-heading {
+// font-size: 46px;
+// }
+// }
+// }
+//
+// .demo-container {
+// .demo-row {
+// margin: 0 -5px;
+// .demo-block {
+// padding: 0 5px;
+// }
+// }
+// }
+//}
+
+//@media (min-width: 768px) and (max-width: 991px) {
+// .team-block {
+// .member-pic {
+// width: 130px;
+// height: 130px;
+// }
+//
+// .member-name,
+// .member-social li .fa {
+// font-size: 18px;
+// }
+// }
+//}
+
+//@media (max-width: 768px) {
+// h1 {
+// @include text-gradient(-webkit-linear-gradient(left, black, white 100%));
+// }
+//
+// .landing-page {
+// section {
+// padding: 25px 0;
+// }
+//
+// .flex-row {
+// display: block;
+// &.flex-gutter {
+// margin: 0;
+// }
+// & > [class^="flex-item-"] {
+// max-width: 100%;
+// padding: 0;
+// &:not(:last-child) {
+// margin-bottom: 25px;
+// }
+// }
+// }
+//
+// .install-btn {
+// display: block;
+// width: 300px;
+// margin: 0 auto;
+// text-align: center;
+// }
+//
+// .video-cont {
+// height: 300px;
+// }
+//
+// .customer-reviews {
+// blockquote {
+// font-size: 18px;
+// }
+// }
+// }
+//}
+
@media (max-width: 767px) {
body {
line-height: 1.3;
@@ -417,131 +599,131 @@
}
}
- #video-block {
- width: 500px;
- }
-
- .slides {
- height: 300px;
- }
-
- .carousel {
- height: 300px;
- .carousel-overlay.with-headline {
- .carousel-heading {
- font-size: 36px;
- line-height: 1.5;
- }
- }
- }
-
- .challenges {
- padding: 0;
- .challenges-block {
- &:not(:last-child) {
- margin: 0 0 20px;
- }
-
- .challenges-block-inner {
- .img-block {
- @include flex-width(0 0 130px, 130px);
- img {
- max-width: 100px;
- }
- }
-
- .cont-block {
- font-size: 14px;
- text-align: justify;
- }
-
- blockquote {
- &:before,
- &:after {
- font-size: 26px;
- }
- }
- }
- }
- }
-
- #solutions {
- section {
- padding: 10px 20px 0;
- h1 {
- font-size: 24px;
- }
-
- .solution:not(:last-child) {
- margin: 0 0 15px;
- }
-
- .solution-cont {
- font-size: 15px;
- width: calc(100% - 130px);
- text-align: justify;
- h3 {
- font-size: 16px;
- margin: 15px 0 0;
- }
- }
-
- img {
- width: 100px;
- }
- }
- }
-
-
- .team-block {
- flex-flow: wrap;
- -webkit-flex-flow: wrap;
- padding: 0;
- .team-member {
- flex: 0 0 50%;
- -webkit-flex: 0 0 50%;
- max-width: 50%;
- margin: 50px 0 0;
- }
- }
-
- #contact {
- .contact-inner {
- margin: 30px 0 0;
- }
- }
-
- #demo {
- .demos-block {
- margin: 0;
- .demo-block {
- padding: 0 15px;
- .demo-block-inner {
- &:after {
- background-size: auto 50%;
- }
- }
- }
- }
- }
-
- .demo-container {
- .demo-row {
- flex-direction: column;
- -webkit-flex-direction: column;
- margin: 0;
- padding: 0;
- .demo-block {
- @include flex-width(0 0 auto, 70%);
- padding: 0;
- align-self: center;
- -webkit-align-self: center;
- &:not(:last-child) {
- margin: 0 0 50px;
- }
- }
- }
- }
+ //#video-block {
+ // width: 500px;
+ //}
+ //
+ //.slides {
+ // height: 300px;
+ //}
+ //
+ //.carousel {
+ // height: 300px;
+ // .carousel-overlay.with-headline {
+ // .carousel-heading {
+ // font-size: 36px;
+ // line-height: 1.5;
+ // }
+ // }
+ //}
+ //
+ //.challenges {
+ // padding: 0;
+ // .challenges-block {
+ // &:not(:last-child) {
+ // margin: 0 0 20px;
+ // }
+ //
+ // .challenges-block-inner {
+ // .img-block {
+ // @include flex-width(0 0 130px, 130px);
+ // img {
+ // max-width: 100px;
+ // }
+ // }
+ //
+ // .cont-block {
+ // font-size: 14px;
+ // text-align: justify;
+ // }
+ //
+ // blockquote {
+ // &:before,
+ // &:after {
+ // font-size: 26px;
+ // }
+ // }
+ // }
+ // }
+ //}
+ //
+ //#solutions {
+ // section {
+ // padding: 10px 20px 0;
+ // h1 {
+ // font-size: 24px;
+ // }
+ //
+ // .solution:not(:last-child) {
+ // margin: 0 0 15px;
+ // }
+ //
+ // .solution-cont {
+ // font-size: 15px;
+ // width: calc(100% - 130px);
+ // text-align: justify;
+ // h3 {
+ // font-size: 16px;
+ // margin: 15px 0 0;
+ // }
+ // }
+ //
+ // img {
+ // width: 100px;
+ // }
+ // }
+ //}
+ //
+ //
+ //.team-block {
+ // flex-flow: wrap;
+ // -webkit-flex-flow: wrap;
+ // padding: 0;
+ // .team-member {
+ // flex: 0 0 50%;
+ // -webkit-flex: 0 0 50%;
+ // max-width: 50%;
+ // margin: 50px 0 0;
+ // }
+ //}
+ //
+ //#contact {
+ // .contact-inner {
+ // margin: 30px 0 0;
+ // }
+ //}
+ //
+ //#demo {
+ // .demos-block {
+ // margin: 0;
+ // .demo-block {
+ // padding: 0 15px;
+ // .demo-block-inner {
+ // &:after {
+ // background-size: auto 50%;
+ // }
+ // }
+ // }
+ // }
+ //}
+ //
+ //.demo-container {
+ // .demo-row {
+ // flex-direction: column;
+ // -webkit-flex-direction: column;
+ // margin: 0;
+ // padding: 0;
+ // .demo-block {
+ // @include flex-width(0 0 auto, 70%);
+ // padding: 0;
+ // align-self: center;
+ // -webkit-align-self: center;
+ // &:not(:last-child) {
+ // margin: 0 0 50px;
+ // }
+ // }
+ // }
+ //}
#home {
margin: 0 0 20px;
@@ -559,8 +741,33 @@
}
}
+ footer {
+ .footer-blocks {
+ .social-links {
+ ul {
+ li {
+ a {
+ width: 55px;
+ height: 55px;
+ i {
+ font-size: 28px;
+ line-height: 55px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
.bottom-info {
font-size: 12px;
+ section {
+ width: calc(100% - 40px);
+ margin: 0 20px;
+ padding: 16px 0;
+ }
+
& > span {
display: block;
a {
@@ -569,111 +776,133 @@
}
}
- #api {
- .home-blocks {
- padding-top: 25px;
- padding-bottom: 25px;
- }
- }
+ //#api {
+ // .home-blocks {
+ // padding-top: 25px;
+ // padding-bottom: 25px;
+ // }
+ //}
}
-@media (max-width: 640px) {
- #video-block {
- width: 70%;
- height: 80%;
- top: 30px;
- }
-
- .carousel {
- .carousel-overlay.with-headline {
- .carousel-heading {
- font-size: 32px;
- }
- }
- }
-
- h1 {
- font-size: 30px;
- line-height: 60px;
- }
-
- .challenges {
- .challenges-block {
- .challenges-block-inner {
- padding: 0;
- border: 0;
- }
-
- &:not(:last-child) {
- .challenges-block-inner {
- padding: 0 0 20px;
- position: relative;
- &:after {
- content: '';
- position: absolute;
- left: 50%;
- bottom: 0;
- width: 90%;
- height: 1px;
- background: #1b93f2;
- @include transform(translateX(-50%));
+@media (max-width: 680px) {
+ footer {
+ .footer-blocks {
+ .social-links {
+ ul {
+ li {
+ margin: 0 10px;
+ a {
+ width: 50px;
+ height: 50px;
+ i {
+ font-size: 26px;
+ line-height: 50px;
+ }
+ }
}
}
}
}
}
+}
- #contact {
- .contact-inner {
- height: auto;
- }
-
- #googleMap {
- height: 300px;
- }
-
- .contact-form {
- position: static;
- background: transparent;
- padding: 30px 0 0;
- width: 100%;
- .company-info {
- text-align: center;
- }
- }
+@media (max-width: 640px) {
+ //#video-block {
+ // width: 70%;
+ // height: 80%;
+ // top: 30px;
+ //}
+ //
+ //.carousel {
+ // .carousel-overlay.with-headline {
+ // .carousel-heading {
+ // font-size: 32px;
+ // }
+ // }
+ //}
- .captcha-block {
- img {
- margin: 0 auto;
- max-width: 300px;
- }
- }
+ h1 {
+ font-size: 30px;
+ line-height: 60px;
}
- .login {
- .register-blocks {
- padding-bottom: 5px;
- position: relative;
- .register-pic {
- position: absolute;
- opacity: .1;
- right: 0;
- top: 30%;
- @include transform(translateY(-30%) scaleX(-1));
- img {
- max-width: 80%;
- }
- }
-
- .register-fields {
- @include flex-width(0 0 100%, 100%);
- }
-
- .form-btn {
- text-align: center;
- }
- }
- }
+ //.challenges {
+ // .challenges-block {
+ // .challenges-block-inner {
+ // padding: 0;
+ // border: 0;
+ // }
+ //
+ // &:not(:last-child) {
+ // .challenges-block-inner {
+ // padding: 0 0 20px;
+ // position: relative;
+ // &:after {
+ // content: '';
+ // position: absolute;
+ // left: 50%;
+ // bottom: 0;
+ // width: 90%;
+ // height: 1px;
+ // background: #1b93f2;
+ // @include transform(translateX(-50%));
+ // }
+ // }
+ // }
+ // }
+ //}
+ //
+ //#contact {
+ // .contact-inner {
+ // height: auto;
+ // }
+ //
+ // #googleMap {
+ // height: 300px;
+ // }
+ //
+ // .contact-form {
+ // position: static;
+ // background: transparent;
+ // padding: 30px 0 0;
+ // width: 100%;
+ // .company-info {
+ // text-align: center;
+ // }
+ // }
+ //
+ // .captcha-block {
+ // img {
+ // margin: 0 auto;
+ // max-width: 300px;
+ // }
+ // }
+ //}
+ //
+ //.login {
+ // .register-blocks {
+ // padding-bottom: 5px;
+ // position: relative;
+ // .register-pic {
+ // position: absolute;
+ // opacity: .1;
+ // right: 0;
+ // top: 30%;
+ // @include transform(translateY(-30%) scaleX(-1));
+ // img {
+ // max-width: 80%;
+ // }
+ // }
+ //
+ // .register-fields {
+ // @include flex-width(0 0 100%, 100%);
+ // }
+ //
+ // .form-btn {
+ // text-align: center;
+ // }
+ // }
+ //}
.custom-headline-block {
section {
@@ -685,174 +914,196 @@
}
}
-@media (min-width: 480px) and (max-width: 640px) {
- .team-block {
- .member-pic {
- width: 160px;
- height: 160px;
- margin-bottom: 15px;
- }
-
- .member-name {
- font-size: 20px;
- }
- }
-}
+//@media (min-width: 480px) and (max-width: 640px) {
+// .team-block {
+// .member-pic {
+// width: 160px;
+// height: 160px;
+// margin-bottom: 15px;
+// }
+//
+// .member-name {
+// font-size: 20px;
+// }
+// }
+//}
+
+//@media (max-width: 560px) {
+// .slides {
+// height: 250px;
+// }
+//
+// .carousel {
+// height: 250px;
+// .carousel-overlay.with-headline {
+// .carousel-heading {
+// font-size: 28px;
+// }
+// }
+// }
+//
+// .landing-page {
+// h1 {
+// font-size: 25px;
+// }
+// }
+//}
+
+//@media (min-width: 481px) {
+// #solutions {
+// section {
+// .solution-cont {
+// float: right;
+// }
+// }
+// }
+//}
@media (max-width: 560px) {
- .slides {
- height: 250px;
- }
-
- .carousel {
- height: 250px;
- .carousel-overlay.with-headline {
- .carousel-heading {
- font-size: 28px;
- }
- }
- }
-
- .landing-page {
- h1 {
- font-size: 25px;
- }
- }
-}
-
-@media (min-width: 481px) {
- #solutions {
- section {
- .solution-cont {
- float: right;
+ footer {
+ .footer-blocks {
+ .social-links {
+ ul {
+ li {
+ margin: 0 5px;
+ a {
+ width: 45px;
+ height: 45px;
+ i {
+ font-size: 24px;
+ line-height: 45px;
+ }
+ }
+ }
+ }
}
}
}
}
@media (max-width: 480px) {
- #video-block {
- top: 20px;
- }
-
- .slides {
- height: 200px;
- }
-
- .carousel {
- height: 200px;
- .carousel-overlay.with-headline {
- .carousel-heading {
- font-size: 22px;
- }
- }
- }
-
- .challenges {
- .challenges-block {
- .challenges-block-inner {
- display: block;
- .img-block {
- text-align: center;
- display: block;
- padding: 0 0 20px;
- max-width: none;
- img {
- max-width: 120px;
- }
- }
- }
- }
- }
+ //#video-block {
+ // top: 20px;
+ //}
+ //
+ //.slides {
+ // height: 200px;
+ //}
+ //
+ //.carousel {
+ // height: 200px;
+ // .carousel-overlay.with-headline {
+ // .carousel-heading {
+ // font-size: 22px;
+ // }
+ // }
+ //}
+ //
+ //.challenges {
+ // .challenges-block {
+ // .challenges-block-inner {
+ // display: block;
+ // .img-block {
+ // text-align: center;
+ // display: block;
+ // padding: 0 0 20px;
+ // max-width: none;
+ // img {
+ // max-width: 120px;
+ // }
+ // }
+ // }
+ // }
+ //}
h1 {
font-size: 28px;
line-height: 55px;
}
- #solutions {
- section {
- .solution:not(:last-child) {
- margin: 0 0 10px;
- }
-
- .solution-img {
- margin: 0 10px 10px 0;
- img {
- width: 80px;
- }
- }
-
- .solution-cont {
- width: 100%;
- font-size: 14px;
- }
-
- h1 {
- font-size: 22px;
- }
- }
- }
-
- .demo-container {
- .demo-row {
- .demo-block {
- @include flex-width(0 0 auto, 90%);
- }
- }
- }
+ //#solutions {
+ // section {
+ // .solution:not(:last-child) {
+ // margin: 0 0 10px;
+ // }
+ //
+ // .solution-img {
+ // margin: 0 10px 10px 0;
+ // img {
+ // width: 80px;
+ // }
+ // }
+ //
+ // .solution-cont {
+ // width: 100%;
+ // font-size: 14px;
+ // }
+ //
+ // h1 {
+ // font-size: 22px;
+ // }
+ // }
+ //}
+ //
+ //.demo-container {
+ // .demo-row {
+ // .demo-block {
+ // @include flex-width(0 0 auto, 90%);
+ // }
+ // }
+ //}
}
-@media (max-width: 479px) {
- .team-block {
- display: block;
- padding: 30px 0 0;
- .team-member {
- max-width: none;
- &:not(:last-child) {
- margin: 0 0 50px;
- }
- }
-
- .member-pic {
- margin-bottom: 10px;
- }
-
- .member-social {
- &:before {
- width: 130px;
- }
- }
- }
-
- .landing-page {
- .social-links {
- label {
- display: none;
- }
- }
-
- .heading-desc {
- margin: 15px 0;
- }
-
- .customer-reviews {
- blockquote {
- font-size: 15px;
- }
- }
-
- .install-btn {
- width: 280px;
- height: 40px;
- line-height: 38px;
- }
-
- h1 {
- font-size: 23px;
- }
- }
-}
+//@media (max-width: 479px) {
+// .team-block {
+// display: block;
+// padding: 30px 0 0;
+// .team-member {
+// max-width: none;
+// &:not(:last-child) {
+// margin: 0 0 50px;
+// }
+// }
+//
+// .member-pic {
+// margin-bottom: 10px;
+// }
+//
+// .member-social {
+// &:before {
+// width: 130px;
+// }
+// }
+// }
+//
+// .landing-page {
+// .social-links {
+// label {
+// display: none;
+// }
+// }
+//
+// .heading-desc {
+// margin: 15px 0;
+// }
+//
+// .customer-reviews {
+// blockquote {
+// font-size: 15px;
+// }
+// }
+//
+// .install-btn {
+// width: 280px;
+// height: 40px;
+// line-height: 38px;
+// }
+//
+// h1 {
+// font-size: 23px;
+// }
+// }
+//}
@media (max-width: 400px) {
.logo {
@@ -893,47 +1144,130 @@
min-height: calc(100vh - 250px);
}
- #solutions {
- section {
- h1 {
- font-size: 20px;
- line-height: 55px;
+ footer {
+ .footer-blocks {
+ .social-links {
+ ul {
+ justify-content: space-between;
+ -webkit-justify-content: space-between;
+ &:after, &:before {
+ display: none;
+ }
+ li {
+ margin: 0;
+ float: none;
+ a {
+ width: 40px;
+ height: 40px;
+ i {
+ font-size: 22px;
+ line-height: 40px;
+ }
+ }
+ }
+ }
}
}
}
- #contact {
- #googleMap {
- height: 250px;
- }
+ //#solutions {
+ // section {
+ // h1 {
+ // font-size: 20px;
+ // line-height: 55px;
+ // }
+ // }
+ //}
+ //
+ //#contact {
+ // #googleMap {
+ // height: 250px;
+ // }
+ //}
+ //
+ //.login {
+ // .register-blocks {
+ // .register-pic img {
+ // max-width: 90%;
+ // }
+ // }
+ //}
+}
+
+@media (max-width: 360px) {
+ .main-nav {
+ margin-right: 10px;
+ }
+
+ .btn {
+ font-size: 14px;
+ padding: 8px 16px;
}
- .login {
- .register-blocks {
- .register-pic img {
- max-width: 90%;
+ .bottom-info {
+ section {
+ padding: 10px 0;
+ & > span {
+ display: inline;
}
}
}
-}
-@media (max-width: 360px) {
- #contact {
- .captcha-block {
- img {
- margin: 0 auto;
- max-width: 100%;
+ footer {
+ .footer-blocks {
+ padding: 22px 0 16px;
+ .social-links {
+ ul {
+ li {
+ a {
+ width: 35px;
+ height: 35px;
+ i {
+ font-size: 20px;
+ line-height: 35px;
+ }
+ }
+ }
+ }
}
}
}
}
-@media (max-width: 340px) {
- .carousel {
- .carousel-overlay.with-headline {
- .carousel-heading {
- font-size: 22px;
+@media (max-height: 459px) {
+ .main-nav {
+ input#navTrigger:checked ~ ul {
+ justify-content: space-around;
+ -webkit-justify-content: space-around;
+ &:before, &:after {
+ display: none;
}
}
+
+ li {
+ height: auto;
+ line-height: normal;
+ }
}
}
+
+//@media (max-width: 360px) {
+// #contact {
+// .captcha-block {
+// img {
+// margin: 0 auto;
+// max-width: 100%;
+// }
+// }
+// }
+//}
+
+//@media (max-width: 340px) {
+// .carousel {
+// .carousel-overlay.with-headline {
+// .carousel-heading {
+// font-size: 22px;
+// }
+// }
+// }
+//}
diff --git a/src/adtechmedia-website/frontend/sass/_styles.scss b/src/adtechmedia-website/frontend/sass/_styles.scss
index b114a33..6fc0593 100644
--- a/src/adtechmedia-website/frontend/sass/_styles.scss
+++ b/src/adtechmedia-website/frontend/sass/_styles.scss
@@ -37,7 +37,6 @@ header {
}
nav {
- //@include transition(all 0.2s 0.2s ease-out);
input#navTrigger {
display: none;
&:checked + .navTrigger-label {
@@ -120,68 +119,6 @@ header {
}
}
-.carousel {
- position: relative;
- width: 100%;
- height: 600px;
- .carousel-overlay {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- &.with-headline {
- background: rgba(27, 147, 242, 0.65);
- }
-
- &.youtube-overlay {
- z-index: 2;
- iframe {
- width: 100%;
- height: 100%;
- }
- }
-
- .carousel-heading {
- font-size: 60px;
- line-height: 70px;
- color: white;
- text-shadow: 1px 1px 2px rgba(0, 0, 0, .65);
- text-transform: uppercase;
- position: relative;
- padding: 0 25px;
- @include transform(translateY(-40%));
- top: 40%;
- }
- }
-
- .video-show {
- z-index: 1;
- background: transparent;
- border-radius: 50%;
- border: 1px solid white;
- width: 100px;
- height: 100px;
- position: absolute;
- @include transform(translateX(-50%));
- left: 50%;
- bottom: 100px;
- @include transition(all 0.4s ease-in-out);
-
- .fa {
- color: white;
- font-size: 50px;
- padding: 0 0 0 11px;
- }
-
- &:hover {
- cursor: pointer;
- background-color: rgba(255,255,255,0.35);
- border-color: transparent;
- }
- }
-}
-
.main-nav {
float: right;
li {
@@ -209,7 +146,7 @@ header {
margin-left: 23px;
text-transform: uppercase;
line-height: normal;
- color: #BFBFBF;
+ color: $gray-color;
&.active, &:hover {
color: $link-color;
}
@@ -221,112 +158,7 @@ header {
min-height: calc(100vh - 330px);
&.not-found {
align-items: center;
- height: calc(100vh - 282px);
- }
-}
-
-.cd-section {
- .try-btn {
- @include font-smoothing;
- border: 1px solid rgba(27, 147, 242, 0.67);
- text-align: center;
- display: inline-block;
- margin: 25px 0 0;
- @include transition(.4s ease-in-out);
- &:hover {
- cursor: pointer;
- background: $link-color;
- a {
- color: #fff;
- }
- }
- a {
- font: 12px/32px FuturaICG, sans-serif;
- color: $link-color;
- text-transform: uppercase;
- padding: 0 15px;
- display: inline-block;
- @include transition(.4s ease-in-out);
- .fa {
- margin-right: 3px;
- }
- }
- }
-}
-
-.challenges {
- @include flex-container;
- margin: 0 -35px;
- padding: 70px 0 0;
- .challenges-block {
- @include flex-container;
- @include flex-width(0 0 33.33333%, 33.33333%);
- padding: 0 35px;
- .challenges-block-inner {
- border: 1px solid $link-color;
- padding: 0 20px 20px;
- .img-block {
- margin: -70px auto 0;
- padding: 10px;
- background: #fff;
- display: inline-block;
- }
-
- .cont-block {
- padding: 20px 0 0;
- }
-
- label {
- display: block;
- margin: 15px 0 0;
- a {
- display: inline-block;
- color: inherit;
- font-size: 12px;
- line-height: normal;
- opacity: .5;
- }
- }
-
- blockquote {
- quotes: "\201c" "\201e";
- &:before {
- content: open-quote;
- vertical-align: middle;
- }
- &:after {
- content: close-quote;
- }
-
- &:before,
- &:after {
- font-family: Georgia, serif;
- font-size: 40px;
- line-height: .1;
- color: rgba(0, 0, 0, .5);
- }
- }
- }
- }
-}
-
-#video-block {
- position: relative;
- width: 880px;
- height: 480px;
- top: 60px;
- margin: 0 auto;
- #video-file {
- width: 100%;
- }
-
- #video-hide {
- position: absolute;
- color: #fff;
- font-weight: bold;
- top: 0;
- right: -20px;
- font-size: 20px;
+ height: calc(100vh - 70px);
}
}
@@ -350,193 +182,6 @@ header {
}
}
-.login {
- .register-blocks {
- @include font-smoothing;
- @include flex-container;
- @include flex-justify-content(center);
- text-align: left;
- padding: 25px 0;
- .register-fields {
- @include flex-width(0 0 330px, 330px);
- }
-
- .register-pic {
- @include flex-width(0 0 500px, 500px);
- @include flex-align-self(center);
- }
- }
-
- .custom-radio {
- padding: 0 0 10px;
- }
-}
-
-#solutions {
- padding: 0 0 25px;
- section {
- padding-top: 50px;
- text-align: left;
- h1 {
- background: transparent;
- -webkit-text-fill-color: inherit;
- font: 30px/70px Futura-Light, sans-serif;
- color: #595959;
- &:after {
- display: none;
- }
- }
-
- .solution {
- &:not(:last-child) {
- margin: 0 0 50px;
- }
- }
-
- .solution-cont {
- width: calc(100% - 180px);
- font-size: 16px;
-
- h3 {
- font-weight: normal;
- text-transform: uppercase;
- font-size: 18px;
- }
-
- ul {
- margin: 0 0 0 20px;
- li {
- list-style: disc outside none;
- color: $link-color;
- span {
- color: $base-color;
- }
- }
- }
- }
- }
-}
-
-#team {
- padding-bottom: 20px;
- .custom-headline-block {
- @include custom-headline(url('../images/team.jpg'));
- }
-}
-
-.team-block {
- @include flex-container;
- padding: 50px 0 0;
- .team-member {
- @include flex-width(0 0 25%, 25%);
- font-family: FuturaICG, sans-serif;
- color: #595959;
- }
-
- .member-pic {
- width: 185px;
- height: 185px;
- margin: 0 auto 25px;
- @include grayscale(90%);
- &:hover {
- @include grayscale(0%);
- }
-
- img {
- width: 100%;
- height: auto;
- border-radius: 50%;
- }
- }
-
- .member-name {
- font-size: 22px;
- color: $link-color;
-
- }
-
- .member-position {
- font-size: 13px;
- font-style: italic;
- }
-
- .member-social {
- position: relative;
- margin: 15px 0 0;
- &:before {
- content: '';
- height: 1px;
- width: 50%;
- background: #aeaeae;
- position: absolute;
- top: 0;
- left: 50%;
- @include transform(translateX(-50%));
- }
-
- li {
- display: inline-block;
- a {
- color: #595959;
- @include transition(.2s linear);
- &:hover {
- color: $link-color;
- }
- }
-
- .fa {
- font-size: 20px;
- margin: 15px 10px 0;
- }
- }
- }
-}
-
-#contact {
- .contact-inner {
- margin: 50px 0 0;
- position: relative;
- height: 500px;
- z-index: 3;
- }
-
- #googleMap {
- width: 100%;
- height: 100%;
- }
-
- .contact-form {
- position: absolute;
- left: 0;
- top: 0;
- width: 360px;
- height: 100%;
- background: rgba(255, 255, 255, .9);
- z-index: 1;
- padding: 30px;
- font-family: FuturaICG, sans-serif;
- color: $base-color;
- h3 {
- text-transform: uppercase;
- font-size: 16px;
- text-align: left;
- }
-
- .custom-input {
- text-align: left;
- }
-
- .company-info {
- text-align: left;
- font-size: 12px;
- margin: 0 0 2px;
- a {
- color: $base-color;
- }
- }
- }
-}
-
.bottom-info {
line-height: 48px;
font-size: 14px;
@@ -545,157 +190,6 @@ header {
}
}
-#api {
- .custom-headline-block {
- @include custom-headline(url('../images/api/api.jpg'));
- }
-
- .home-blocks {
- padding-top: 50px;
- padding-bottom: 50px;
- text-align: left;
- .btn {
- margin-bottom: 0;
- }
- }
-}
-
-#demo {
- .custom-headline-block {
- @include custom-headline(url('../images/demo/demo.jpg'));
- }
-}
-
-#login {
- .custom-headline-block {
- @include custom-headline(url('../images/try.jpg'));
- }
-}
-
-.demo-container {
- background: rgb(255,255,255); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,.3) 100%); /* FF3.6-15 */
- background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,.3) 100%); /* Chrome10-25,Safari5.1-6 */
- background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-9 */
- padding: 50px 0;
- overflow: hidden;
-
- .block-logo {
- border-bottom: 1px solid #cbcbcb;
- padding: 0 0 10px;
- img {
- height: 50px;
- margin: 0 auto;
- }
- }
-
- .demo-row {
- padding: 20px 0;
- @include flex-container;
- margin: 0 -25px;
- .demo-block {
- @include flex-width(0 0 33.33333%, 33.33333%);
- padding: 0 25px;
- }
-
- img {
- box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
- -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
- width: 100%;
- }
- }
-}
-
-.container {
- position: relative;
-}
-
-.slides {
- position: relative;
- height: 600px;
-}
-
-.slide{
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- z-index: 1;
- @include transition(opacity 1s);
- &.showing{
- opacity: 1;
- z-index: 2;
- }
-}
-
-.pagination {
- position: absolute;
- z-index: 3;
- top: 100%;
- left: 50%;
- @include transform(translateX(-50%));
- button {
- background: transparent;
- border: 1px solid $link-color;
- width: 25px;
- height: 7px;
- border-radius: 5px;
- margin: 0 3px;
- @include transition(all 0.4s ease-in-out);
- &:hover, &.active {
- background: $link-color;
- border-color: transparent;
- cursor: pointer;
- }
- }
-}
-
-#home {
- position: relative;
- padding: 0 0 20px;
- margin: 0 0 50px;
-}
-
-.legal-pages {
- text-align: justify;
- @include font-smoothing;
- padding: 30px 0;
- h1 {
- background: transparent;
- -webkit-text-fill-color: inherit;
- font: 30px/70px Futura-Light, sans-serif;
- color: #595959;
- &:after {
- display: none;
- }
- }
-
- h4 {
- text-transform: uppercase;
- font-size: 17px;
- margin: 0 0 3px;
- }
-
- .text-block {
- &:not(:last-child) {
- margin: 0 0 20px;
- }
- }
-}
-
-.video-close {
- position: absolute;
- z-index: 10;
- top: 10px;
- right: 15px;
- color: #E5E5E5;
- font-size: 20px;
- cursor: pointer;
-}
-
.loader {
position: fixed;
left: 0;
@@ -722,6 +216,83 @@ header {
}
}
+.default-bg {
+ background: url(../images/hero-wallpaper.png) 0 bottom/cover no-repeat;
+}
+
+.footer-logo {
+ align-self: center;
+ -webkit-align-self: center;
+ img {
+ height: 80px;
+ float: right;
+ }
+}
+
+.footer-blocks {
+ padding: 22px 0;
+ a {
+ color: $base-color;
+ &:hover, &.active {
+ color: $link-color;
+ }
+ }
+
+ .social-links {
+ align-self: center;
+ -webkit-align-self: center;
+ height: 55px;
+ ul {
+ display: inline-block;
+ }
+
+ li {
+ float: left;
+ margin: 0 7px;
+ a {
+ display: block;
+ background: #F2F2F2;
+ width: 55px;
+ height: 55px;
+ text-align: center;
+ }
+ i {
+ color: $gray-color;
+ font-size: 28px;
+ line-height: 55px;
+ @include transition(.3s ease-in-out);
+ }
+ }
+
+ @include hover-color($social-icons, $social-colors);
+ }
+
+ .quick-links {
+ text-align: left;
+ h3 {
+ margin-bottom: 5px;
+ }
+
+ li {
+ float: left;
+ width: 50%;
+ position: relative;
+ padding: 0 0 0 15px;
+ &:before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ width: 4px;
+ height: 4px;
+ border: 3px solid $link-color;
+ border-radius: 50%;
+ @include transform(translateY(-50%));
+ }
+ }
+ }
+}
+
@keyframes spin {
from {
transform: rotate(0deg);
diff --git a/src/adtechmedia-website/frontend/sass/_variables.scss b/src/adtechmedia-website/frontend/sass/_variables.scss
new file mode 100644
index 0000000..376f980
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/_variables.scss
@@ -0,0 +1,28 @@
+$base-color: #000;
+$link-color: #01ADFD;
+$green-accent: #2EF6A5;
+$purple-accent: #4E4BF7;
+$gray-color: #BFBFBF;
+$border-color: #dfe2e7;
+$base-font-size: 16px;
+$section-width: 1100px;
+$section-based-calc: calc((100% - #{$section-width}) / 2);
+$social-icons: wordpress, drupal, github, linkedin, twitter, facebook, youtube;
+$social-colors: #09aada, #0678BE, #000, #0077B5, #64b2f8, #3b5998, #e52d27;
+
+@function headings($from, $to) {
+ @if $from == $to {
+ @return 'h#{$from}';
+ } @else {
+ @return 'h#{$from},' + headings($from+1, $to);
+ }
+}
+
+%clearfix {
+ &:before,
+ &:after {
+ content: '';
+ display: table;
+ clear: both;
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/api/_api.scss b/src/adtechmedia-website/frontend/sass/api/_api.scss
index 78464e5..b45e436 100644
--- a/src/adtechmedia-website/frontend/sass/api/_api.scss
+++ b/src/adtechmedia-website/frontend/sass/api/_api.scss
@@ -1,3 +1,18 @@
+#api {
+ .custom-headline-block {
+ @include custom-headline(url('../images/api/api.jpg'));
+ }
+
+ .home-blocks {
+ padding-top: 50px;
+ padding-bottom: 50px;
+ text-align: left;
+ .btn {
+ margin-bottom: 0;
+ }
+ }
+}
+
.dev-docs {
text-align: left;
margin: 70px 0 0;
diff --git a/src/adtechmedia-website/frontend/sass/api/_user-guide.scss b/src/adtechmedia-website/frontend/sass/api/_user-guide.scss
index 1264b58..97fbcfe 100644
--- a/src/adtechmedia-website/frontend/sass/api/_user-guide.scss
+++ b/src/adtechmedia-website/frontend/sass/api/_user-guide.scss
@@ -14,7 +14,7 @@
}
.content {
- @extend .clearfix;
+ @extend %clearfix;
padding: 40px;
zoom: 1;
position: relative;
@@ -122,7 +122,7 @@
border-radius: 4px;
box-sizing: border-box;
background: #fff;
- border: solid 1px $gray;
+ border: solid 1px $gray-color;
}
& > :first-child {
@@ -142,7 +142,7 @@
i, em {
font-style: italic;
- color: $gray;
+ color: $gray-color;
}
code {
@@ -170,7 +170,7 @@
}
blockquote {
- color: $gray;
+ color: $gray-color;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
:first-child {
padding-top: 0;
@@ -260,7 +260,7 @@
display: block;
padding-top: 1px;
padding-bottom: 1px;
- color: $gray;
+ color: $gray-color;
&:hover {
color: $link-color;
}
diff --git a/src/adtechmedia-website/frontend/sass/api/main.scss b/src/adtechmedia-website/frontend/sass/api/main.scss
index e9f6912..7c8c94b 100644
--- a/src/adtechmedia-website/frontend/sass/api/main.scss
+++ b/src/adtechmedia-website/frontend/sass/api/main.scss
@@ -1,3 +1,5 @@
+@import "../variables";
+@import "../mixins";
@import "api";
@import "case-studies";
@import "user-guide";
diff --git a/src/adtechmedia-website/frontend/sass/calculator/_calculator.scss b/src/adtechmedia-website/frontend/sass/calculator/_calculator.scss
new file mode 100644
index 0000000..ce69cb8
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/calculator/_calculator.scss
@@ -0,0 +1,178 @@
+.calculator-block {
+ margin: 70px 0 0;
+ & > section {
+ padding-top: 40px;
+ padding-bottom: 40px;
+ }
+
+ h2 {
+ span {
+ white-space: nowrap;
+ }
+ }
+
+ &.calculator-results {
+ height: calc(100vh - 70px);
+ & > section {
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ }
+
+ .form-heading {
+ font-size: 22px;
+ }
+
+ .heading {
+ margin-bottom: 40px;
+ }
+ }
+
+ &.calculator-confirm {
+ .blog-sections {
+ h3 {
+ margin: 40px 0 15px;
+ font-size: 24px;
+ }
+
+ & > .flex-row {
+ flex-wrap: wrap;
+ -webkit-flex-wrap: wrap;
+ margin: 0 -12px;
+ & > * {
+ padding: 12px;
+ text-align: left;
+ line-height: 1.3;
+ color: $base-color;
+ &:hover {
+ cursor: pointer;
+ .post-content {
+ &:after {
+ background-color: rgba(78, 75, 247, 0.4);
+ }
+
+ i {
+ opacity: 1;
+ visibility: visible;
+ }
+ }
+
+ .post-title {
+ color: $link-color;
+ }
+ }
+ }
+ }
+
+ @for $i from 0 through 3 {
+ *[class^="flex-item"]:nth-child(#{$i}) {
+ .post-content {
+ background: url(../images/calculator/blog-images/#{$i}-post.jpg) center center/cover no-repeat;
+ }
+ }
+ }
+
+ .post-content {
+ color: #fff;
+ border-radius: 4px;
+ padding: 20px;
+ height: 224px;
+ box-sizing: border-box;
+ position: relative;
+ display: flex;
+ display: -webkit-flex;
+ justify-content: flex-end;
+ -webkit-justify-content: flex-end;
+ align-items: flex-end;
+ -webkit-align-items: flex-end;
+ &:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background-color: transparent;
+ display: block;
+ border-radius: 4px;
+ @include transition(.4s ease-in-out);
+ }
+ i {
+ position: relative;
+ z-index: 1;
+ font-size: 18px;
+ opacity: 0;
+ visibility: hidden;
+ @include transition(.4s ease-in-out);
+ }
+ }
+
+ .post-title {
+ font-size: 20px;
+ overflow: hidden;
+ margin: 10px 0;
+ display: block;
+ @include transition(.4s ease-in-out);
+ }
+
+ .post-intro {
+ font-size: 16px;
+ display: block;
+ }
+ }
+ }
+
+ .info-blocks {
+ color: #fff;
+ font-size: 14px;
+ margin: 40px -12px;
+ .flex-item {
+ background: $link-color;
+ flex: 1;
+ -webkit-flex: 1;
+ margin: 12px;
+ padding: 12px;
+ &:nth-last-child(2),
+ &:last-child {
+ background: $purple-accent;
+ }
+ .flex-row {
+ margin: 0 0 12px;
+ align-items: center;
+ -webkit-align-items: center;
+ justify-content: space-around;
+ -webkit-justify-content: space-around;
+ }
+ }
+
+ label {
+ font-size: 36px;
+ line-height: 1;
+ }
+
+ span {
+ display: block;
+ }
+
+ img {
+ width: 48px;
+ height: 48px;
+ }
+ }
+}
+
+.calculator-form {
+ width: 340px;
+ margin: 0 auto;
+ &.send-report-form {
+ margin-top: 30px;
+ }
+}
+
+.calculator-confirm {
+ img {
+ height: 152px;
+ margin: 0 auto 20px;
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/calculator/_responsive-view.scss b/src/adtechmedia-website/frontend/sass/calculator/_responsive-view.scss
new file mode 100644
index 0000000..49e342b
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/calculator/_responsive-view.scss
@@ -0,0 +1,271 @@
+@media (min-width: 1025px) and (max-width: 1200px) {
+ .calculator-block {
+ .info-blocks {
+ margin-left: -8px;
+ margin-right: -8px;
+ font-size: 13px;
+ .flex-item {
+ margin: 8px;
+ padding: 12px 8px;
+ }
+
+ img {
+ width: 42px;
+ height: 42px;
+ }
+
+ label {
+ font-size: 32px;
+ }
+ }
+ }
+}
+
+@media (min-width: 1025px) and (min-height: 800px) {
+ .calculator-block {
+ &.calculator-results {
+ & > section {
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ padding: 0;
+ }
+ }
+
+ &.calculator-confirm {
+ & > section {
+ padding: 80px 0;
+ }
+ }
+ }
+}
+
+@media (min-width: 1500px) and (min-height: 800px) {
+ .calculator-confirm p {
+ font-size: 20px;
+ }
+}
+
+@media (min-width: 1025px) {
+ .calculator-block {
+ & ~ .demo-footer {
+ display: none;
+ }
+ }
+
+ .calculator-block {
+ p {
+ font-size: 18px;
+ }
+ }
+}
+
+@media (min-width: 1300px) {
+ .calculator-block {
+ margin: 88px 0 0;
+ &.calculator-main {
+ height: calc(100vh - 88px);
+ & > section {
+ padding: 0;
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ }
+ }
+
+ &.calculator-result {
+ margin: 88px 0 0;
+ height: calc(100vh - 88px);
+ }
+ }
+}
+
+@media (min-width: 1700px) {
+ .calculator-block {
+ h3 {
+ font-size: 28px;
+ }
+
+ p {
+ font-size: 22px;
+ }
+
+ .info-blocks {
+ font-size: 16px;
+ .flex-item {
+ padding: 24px 24px 12px;
+ }
+
+ label {
+ font-size: 40px;
+ }
+ }
+
+ &.calculator-results {
+ .heading {
+ margin-bottom: 80px;
+ }
+ }
+
+ &.calculator-confirm {
+ .blog-sections {
+ h3 {
+ margin: 80px 0 30px;
+ font-size: 28px;
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 1024px) {
+ .calculator-block {
+ p {
+ font-size: 22px;
+ }
+
+ &.calculator-confirm {
+ .blog-sections {
+ .post-title {
+ line-height: 1.3;
+ }
+ }
+
+ img {
+ height: 135px;
+ }
+ }
+
+ .info-blocks {
+ font-size: 12px;
+ img {
+ width: 36px;
+ height: 36px;
+ }
+
+ label {
+ font-size: 26px;
+ }
+ }
+ }
+}
+
+@media (max-width: 991px) {
+ .calculator-block {
+ &.default-bg {
+ background-position: center bottom;
+ }
+
+ &.calculator-confirm {
+ .blog-sections {
+ & > .flex-row {
+ & > * {
+ flex: 0 0 50%;
+ -webkit-flex: 0 0 50%;
+ max-width: 50%;
+ }
+ }
+ }
+ }
+
+ .info-blocks {
+ flex-wrap: wrap;
+ -webkit-flex-wrap: wrap;
+ justify-content: center;
+ -webkit-justify-content: center;
+ .flex-item {
+ flex: 0 0 25%;
+ -webkit-flex: 0 0 25%;
+ max-width: 25%;
+ }
+ }
+ }
+}
+
+@media (max-width: 767px) {
+ .calculator-block {
+ &.calculator-main {
+ h2 {
+ margin-bottom: 20px;
+ }
+ }
+ }
+}
+
+@media (max-width: 580px) {
+ .calculator-block {
+ .info-blocks {
+ justify-content: space-around;
+ -webkit-justify-content: space-around;
+ .flex-item {
+ flex: 0 0 30%;
+ -webkit-flex: 0 0 30%;
+ max-width: 30%;
+ margin: 10px 0;
+ padding: 10px;
+ }
+ }
+ }
+}
+
+@media (max-width: 560px) {
+ .calculator-block p {
+ font-size: 18px;
+ }
+
+ .calculator-block {
+ &.calculator-confirm {
+ .blog-sections {
+ & > .flex-row {
+ & > * {
+ flex: 0 0 100%;
+ -webkit-flex: 0 0 100%;
+ max-width: 100%;
+ margin-bottom: 24px;
+ }
+ }
+ }
+
+ img {
+ height: 100px;
+ }
+ }
+ }
+}
+
+@media (max-width: 450px) {
+ .calculator-block {
+ .info-blocks {
+ .flex-item {
+ flex: 0 0 45%;
+ -webkit-flex: 0 0 45%;
+ max-width: 45%;
+ }
+ }
+ }
+}
+
+@media (max-width: 400px) {
+ .calculator-form {
+ width: 100%;
+ margin: 0;
+ }
+}
+
+@media (max-width: 360px) {
+ .calculator-block {
+ p {
+ font-size: 16px;
+ }
+
+ .info-blocks {
+ .flex-item {
+ flex: 0 0 55%;
+ -webkit-flex: 0 0 55%;
+ max-width: 55%;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/calculator/main.scss b/src/adtechmedia-website/frontend/sass/calculator/main.scss
new file mode 100644
index 0000000..46d3caf
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/calculator/main.scss
@@ -0,0 +1,4 @@
+@import "../variables";
+@import "../mixins";
+@import "calculator";
+@import "responsive-view";
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/challenges/_responsive-view.scss b/src/adtechmedia-website/frontend/sass/challenges/_responsive-view.scss
new file mode 100644
index 0000000..d26648c
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/challenges/_responsive-view.scss
@@ -0,0 +1,133 @@
+@media (max-width: 1170px) {
+ .challenges {
+ margin: 0 -25px;
+ .challenges-block {
+ padding: 0 25px;
+ }
+ }
+}
+
+@media (max-width: 1024px) {
+ .challenges {
+ font-size: 16px;
+ }
+}
+
+@media (max-width: 991px) {
+ .challenges {
+ display: block;
+ text-align: left;
+ padding: 30px 0 0;
+ margin: 0;
+ .challenges-block {
+ display: block;
+ max-width: 100%;
+ padding: 0;
+ &:not(:last-child) {
+ margin: 0 0 50px;
+ }
+ .challenges-block-inner {
+ padding: 20px 20px 20px 0;
+ @include flex-container;
+ @include clearfix;
+
+ .img-block {
+ margin: 0;
+ padding: 0;
+ background: transparent;
+ @include flex-align-self(center);
+ @include flex-width(0 0 180px, 180px);
+ text-align: center;
+ img {
+ max-width: 120px;
+ display: inline-block;
+ }
+ }
+
+ .cont-block {
+ padding: 0;
+ font-size: 16px;
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 767px) {
+ .challenges {
+ padding: 0;
+ .challenges-block {
+ &:not(:last-child) {
+ margin: 0 0 20px;
+ }
+
+ .challenges-block-inner {
+ .img-block {
+ @include flex-width(0 0 130px, 130px);
+ img {
+ max-width: 100px;
+ }
+ }
+
+ .cont-block {
+ font-size: 14px;
+ text-align: justify;
+ }
+
+ blockquote {
+ &:before,
+ &:after {
+ font-size: 26px;
+ }
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 640px) {
+ .challenges {
+ .challenges-block {
+ .challenges-block-inner {
+ padding: 0;
+ border: 0;
+ }
+
+ &:not(:last-child) {
+ .challenges-block-inner {
+ padding: 0 0 20px;
+ position: relative;
+ &:after {
+ content: '';
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ width: 90%;
+ height: 1px;
+ background: #1b93f2;
+ @include transform(translateX(-50%));
+ }
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 480px) {
+ .challenges {
+ .challenges-block {
+ .challenges-block-inner {
+ display: block;
+ .img-block {
+ text-align: center;
+ display: block;
+ padding: 0 0 20px;
+ max-width: none;
+ img {
+ max-width: 120px;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/challenges/_styles.scss b/src/adtechmedia-website/frontend/sass/challenges/_styles.scss
new file mode 100644
index 0000000..2e48fab
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/challenges/_styles.scss
@@ -0,0 +1,55 @@
+.challenges {
+ @include flex-container;
+ margin: 0 -35px;
+ padding: 70px 0 0;
+ .challenges-block {
+ @include flex-container;
+ @include flex-width(0 0 33.33333%, 33.33333%);
+ padding: 0 35px;
+ .challenges-block-inner {
+ border: 1px solid $link-color;
+ padding: 0 20px 20px;
+ .img-block {
+ margin: -70px auto 0;
+ padding: 10px;
+ background: #fff;
+ display: inline-block;
+ }
+
+ .cont-block {
+ padding: 20px 0 0;
+ }
+
+ label {
+ display: block;
+ margin: 15px 0 0;
+ a {
+ display: inline-block;
+ color: inherit;
+ font-size: 12px;
+ line-height: normal;
+ opacity: .5;
+ }
+ }
+
+ blockquote {
+ quotes: "\201c" "\201e";
+ &:before {
+ content: open-quote;
+ vertical-align: middle;
+ }
+ &:after {
+ content: close-quote;
+ }
+
+ &:before,
+ &:after {
+ font-family: Georgia, serif;
+ font-size: 40px;
+ line-height: .1;
+ color: rgba(0, 0, 0, .5);
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/challenges/main.scss b/src/adtechmedia-website/frontend/sass/challenges/main.scss
new file mode 100644
index 0000000..ae3c4f4
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/challenges/main.scss
@@ -0,0 +1,4 @@
+@import "../variables";
+@import "../mixins";
+@import "styles";
+@import "responsive-view";
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/contact/_responsive-view.scss b/src/adtechmedia-website/frontend/sass/contact/_responsive-view.scss
new file mode 100644
index 0000000..a798a62
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/contact/_responsive-view.scss
@@ -0,0 +1,79 @@
+@media (max-width: 991px) {
+ #contact {
+ .contact-inner {
+ height: 460px;
+ }
+
+ .contact-form {
+ padding: 20px 30px 0;
+ }
+
+ .custom-input {
+ padding-bottom: 0;
+ }
+
+ .btn {
+ margin: 15px 0;
+ }
+
+ .captcha-block {
+ padding: 10px 0 0;
+ }
+ }
+}
+
+@media (max-width: 767px) {
+ #contact {
+ .contact-inner {
+ margin: 30px 0 0;
+ }
+ }
+}
+
+@media (max-width: 640px) {
+ #contact {
+ .contact-inner {
+ height: auto;
+ }
+
+ #googleMap {
+ height: 300px;
+ }
+
+ .contact-form {
+ position: static;
+ background: transparent;
+ padding: 30px 0 0;
+ width: 100%;
+ .company-info {
+ text-align: center;
+ }
+ }
+
+ .captcha-block {
+ img {
+ margin: 0 auto;
+ max-width: 300px;
+ }
+ }
+ }
+}
+
+@media (max-width: 400px) {
+ #contact {
+ #googleMap {
+ height: 250px;
+ }
+ }
+}
+
+@media (max-width: 360px) {
+ #contact {
+ .captcha-block {
+ img {
+ margin: 0 auto;
+ max-width: 100%;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/contact/_styles.scss b/src/adtechmedia-website/frontend/sass/contact/_styles.scss
new file mode 100644
index 0000000..d6d9aab
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/contact/_styles.scss
@@ -0,0 +1,44 @@
+#contact {
+ .contact-inner {
+ margin: 50px 0 0;
+ position: relative;
+ height: 500px;
+ z-index: 3;
+ }
+
+ #googleMap {
+ width: 100%;
+ height: 100%;
+ }
+
+ .contact-form {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 360px;
+ height: 100%;
+ background: rgba(255, 255, 255, .9);
+ z-index: 1;
+ padding: 30px;
+ font-family: FuturaICG, sans-serif;
+ color: $base-color;
+ h3 {
+ text-transform: uppercase;
+ font-size: 16px;
+ text-align: left;
+ }
+
+ .custom-input {
+ text-align: left;
+ }
+
+ .company-info {
+ text-align: left;
+ font-size: 12px;
+ margin: 0 0 2px;
+ a {
+ color: $base-color;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/contact/main.scss b/src/adtechmedia-website/frontend/sass/contact/main.scss
new file mode 100644
index 0000000..ae3c4f4
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/contact/main.scss
@@ -0,0 +1,4 @@
+@import "../variables";
+@import "../mixins";
+@import "styles";
+@import "responsive-view";
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/content-page/_responsive-view.scss b/src/adtechmedia-website/frontend/sass/content-page/_responsive-view.scss
new file mode 100644
index 0000000..a7a98e4
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/content-page/_responsive-view.scss
@@ -0,0 +1,13 @@
+@media (max-width: 767px) {
+ .content-page {
+ padding: 15px 0;
+ h1 {
+ font-size: 24px;
+ }
+ .text-block {
+ h4 {
+ font-size: 16px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/content-page/_styles.scss b/src/adtechmedia-website/frontend/sass/content-page/_styles.scss
new file mode 100644
index 0000000..5c7eaef
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/content-page/_styles.scss
@@ -0,0 +1,25 @@
+.content-page {
+ text-align: justify;
+ padding: 30px 0;
+ h1 {
+ background: transparent;
+ -webkit-text-fill-color: inherit;
+ font: 30px/70px Futura-Light, sans-serif;
+ color: #595959;
+ &:after {
+ display: none;
+ }
+ }
+
+ h4 {
+ text-transform: uppercase;
+ font-size: 17px;
+ margin: 0 0 3px;
+ }
+
+ .text-block {
+ &:not(:last-child) {
+ margin: 0 0 20px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/content-page/main.scss b/src/adtechmedia-website/frontend/sass/content-page/main.scss
new file mode 100644
index 0000000..c25c3b5
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/content-page/main.scss
@@ -0,0 +1,2 @@
+@import "styles";
+@import "responsive-view";
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/demo-confirm/_responsive-view.scss b/src/adtechmedia-website/frontend/sass/demo-confirm/_responsive-view.scss
new file mode 100644
index 0000000..0c3e442
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/demo-confirm/_responsive-view.scss
@@ -0,0 +1,73 @@
+@media (min-width: 1025px) and (min-height: 800px) {
+ .demo-confirm p {
+ font-size: 18px;
+ }
+}
+
+@media (min-width: 1500px) and (min-height: 800px) {
+ .demo-confirm {
+ p {
+ font-size: 20px;
+ }
+ }
+}
+
+@media (min-width: 1025px) {
+ .demo-confirm {
+ & ~ .demo-footer {
+ display: none;
+ }
+ }
+}
+
+@media (min-width: 1300px) {
+ .demo-confirm {
+ margin: 88px 0 0;
+ height: calc(100vh - 88px);
+ }
+}
+
+@media (min-width: 1700px) {
+ .demo-confirm {
+ p {
+ font-size: 22px;
+ }
+ }
+}
+
+@media (max-width: 1024px) {
+ .demo-confirm {
+ p {
+ font-size: 22px;
+ }
+
+ img {
+ height: 135px;
+ }
+ }
+}
+
+@media (max-width: 560px) {
+ .demo-confirm {
+ p {
+ font-size: 18px;
+ }
+
+ img {
+ height: 100px;
+ }
+ }
+}
+
+@media (max-width: 360px) {
+ .demo-confirm p {
+ font-size: 16px;
+ }
+}
+
+@media (max-height: 459px) {
+ .demo-confirm {
+ height: auto;
+ padding: 50px 0;
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/demo-confirm/_styles.scss b/src/adtechmedia-website/frontend/sass/demo-confirm/_styles.scss
new file mode 100644
index 0000000..65f8455
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/demo-confirm/_styles.scss
@@ -0,0 +1,12 @@
+.demo-confirm {
+ margin: 70px 0 0;
+ height: calc(100vh - 70px);
+ display: flex;
+ display: -webkit-flex;
+ align-items: center;
+ -webkit-align-items: center;
+ img {
+ height: 152px;
+ margin: 0 auto 20px;
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/demo-confirm/main.scss b/src/adtechmedia-website/frontend/sass/demo-confirm/main.scss
new file mode 100644
index 0000000..c25c3b5
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/demo-confirm/main.scss
@@ -0,0 +1,2 @@
+@import "styles";
+@import "responsive-view";
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/demo/_responsive-view.scss b/src/adtechmedia-website/frontend/sass/demo/_responsive-view.scss
new file mode 100644
index 0000000..a8af358
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/demo/_responsive-view.scss
@@ -0,0 +1,71 @@
+@media (max-width: 991px) {
+ .demo-container {
+ .block-logo {
+ img {
+ height: 40px;
+ }
+ }
+
+ .demo-row {
+ margin: 0 -15px;
+ .demo-block {
+ padding: 0 15px;
+ }
+ }
+ }
+}
+
+@media (max-width: 890px) {
+ .demo-container {
+ .demo-row {
+ margin: 0 -5px;
+ .demo-block {
+ padding: 0 5px;
+ }
+ }
+ }
+}
+
+@media (max-width: 767px) {
+ #demo {
+ .demos-block {
+ margin: 0;
+ .demo-block {
+ padding: 0 15px;
+ .demo-block-inner {
+ &:after {
+ background-size: auto 50%;
+ }
+ }
+ }
+ }
+ }
+
+ .demo-container {
+ .demo-row {
+ flex-direction: column;
+ -webkit-flex-direction: column;
+ margin: 0;
+ padding: 0;
+ .demo-block {
+ @include flex-width(0 0 auto, 70%);
+ padding: 0;
+ align-self: center;
+ -webkit-align-self: center;
+ &:not(:last-child) {
+ margin: 0 0 50px;
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 480px) {
+ .demo-container {
+ .demo-row {
+ .demo-block {
+ @include flex-width(0 0 auto, 90%);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/demo/_styles.scss b/src/adtechmedia-website/frontend/sass/demo/_styles.scss
new file mode 100644
index 0000000..d5c1430
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/demo/_styles.scss
@@ -0,0 +1,40 @@
+#demo {
+ .custom-headline-block {
+ @include custom-headline(url('../images/demo/demo.jpg'));
+ }
+}
+
+.demo-container {
+ background: rgb(255,255,255); /* Old browsers */
+ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,.3) 100%); /* FF3.6-15 */
+ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,.3) 100%); /* Chrome10-25,Safari5.1-6 */
+ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-9 */
+ padding: 50px 0;
+ overflow: hidden;
+
+ .block-logo {
+ border-bottom: 1px solid #cbcbcb;
+ padding: 0 0 10px;
+ img {
+ height: 50px;
+ margin: 0 auto;
+ }
+ }
+
+ .demo-row {
+ padding: 20px 0;
+ @include flex-container;
+ margin: 0 -25px;
+ .demo-block {
+ @include flex-width(0 0 33.33333%, 33.33333%);
+ padding: 0 25px;
+ }
+
+ img {
+ box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
+ width: 100%;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/demo/main.scss b/src/adtechmedia-website/frontend/sass/demo/main.scss
new file mode 100644
index 0000000..ae3c4f4
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/demo/main.scss
@@ -0,0 +1,4 @@
+@import "../variables";
+@import "../mixins";
+@import "styles";
+@import "responsive-view";
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/_new.scss b/src/adtechmedia-website/frontend/sass/home/_home.scss
similarity index 57%
rename from src/adtechmedia-website/frontend/sass/_new.scss
rename to src/adtechmedia-website/frontend/sass/home/_home.scss
index 580df1a..f331710 100644
--- a/src/adtechmedia-website/frontend/sass/_new.scss
+++ b/src/adtechmedia-website/frontend/sass/home/_home.scss
@@ -120,10 +120,6 @@ section {
}
}
-.no-click {
- pointer-events: none;
-}
-
.steps {
padding: 0 0 50px;
.flex-row {
@@ -398,166 +394,6 @@ section {
}
}
-/**
- * Material Modal CSS
- */
-.modal {
- will-change: visibility, opacity;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- overflow-y: auto;
- overflow-x: hidden;
- z-index: 1000;
- visibility: hidden;
- opacity: 0;
- @include transition(all 0.5s cubic-bezier(0.23, 1, 0.32, 1));
-}
-
-.modal--active {
- visibility: visible;
- opacity: 1;
-}
-
-.modal--align-top {
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
-}
-
-.modal__bg {
- background: rgba(0, 0, 0, .7);
-}
-
-.modal__content {
- will-change: transform, opacity;
- position: relative;
- background: #fff;
- background-clip: padding-box;
- box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
- opacity: 0;
- @include transition(all 0.25s cubic-bezier(0.23, 1, 0.32, 1));
- width: 330px;
- .btn {
- margin: 10px;
- }
-
- .modal-inner {
- padding: 2.4rem 2.4rem 1rem;
- h3 {
- margin-bottom: 20px;
- }
-
- #mc_embed_signup {
- label.mc-response-label {
- font-weight: normal;
- margin: 5px 0 0;
- padding: 0;
- width: 100%;
- text-align: center;
- font-size: 12px;
- display: block;
- &.error {
- color: #FF0031;
- }
-
- &.valid {
- color: $link-color;
- }
- }
-
- div.mce_inline_error {
- display: none !important;
- }
- }
- }
-
- .close-btn {
- height: 30px;
- width: 30px;
- position: absolute;
- top: 20px;
- right: 20px;
- &:before, &:after {
- content: '';
- position: absolute;
- height: 2px;
- width: 100%;
- top: 50%;
- left: 0;
- margin-top: -1px;
- background: #BFBFBF;
- @include transition(background .4s ease-in-out);
- }
-
- &:before {
- @include transform(rotate(45deg));
- }
- &:after {
- @include transform(rotate(-45deg));
- }
-
- &:hover {
- cursor: pointer;
- &:before, &:after {
- background: $link-color;
- }
- }
- }
-}
-
-.modal__content--active {
- opacity: 1;
-}
-
-.modal__trigger {
- position: relative;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- @include transition(all 0.5s cubic-bezier(0.23, 1, 0.32, 1));
-}
-
-.modal__trigger--active {
- z-index: 10;
-}
-
-#modal__temp {
- will-change: transform, opacity;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: $link-color;
- @include transform(none);
- opacity: 1;
- transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
- -webkit-transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.modal-open > *:not(.modal) {
- filter: blur(10px);
-}
-
-.modal-transition {
- position: relative;
- z-index: 11;
-}
-
.btn.video-show {
position: relative;
&:hover {
@@ -662,203 +498,6 @@ section {
z-index: 15;
}
-.default-bg {
- background: url(../images/hero-wallpaper.png) 0 bottom/cover no-repeat;
-}
-
-.calculator-block {
- margin: 70px 0 0;
- & > section {
- padding-top: 40px;
- padding-bottom: 40px;
- }
-
- h2 {
- span {
- white-space: nowrap;
- }
- }
-
- &.calculator-results {
- height: calc(100vh - 70px);
- & > section {
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- -webkit-transform: translateY(-50%);
- }
-
- .form-heading {
- font-size: 22px;
- }
-
- .heading {
- margin-bottom: 40px;
- }
- }
-
- &.calculator-confirm {
- .blog-sections {
- h3 {
- margin: 40px 0 15px;
- font-size: 24px;
- }
-
- & > .flex-row {
- flex-wrap: wrap;
- -webkit-flex-wrap: wrap;
- margin: 0 -12px;
- & > * {
- padding: 12px;
- text-align: left;
- line-height: 1.3;
- color: $base-color;
- &:hover {
- cursor: pointer;
- .post-content {
- &:after {
- background-color: rgba(78, 75, 247, 0.4);
- }
-
- i {
- opacity: 1;
- visibility: visible;
- }
- }
-
- .post-title {
- color: $link-color;
- }
- }
- }
- }
-
- @for $i from 0 through 3 {
- *[class^="flex-item"]:nth-child(#{$i}) {
- .post-content {
- background: url(../images/calculator/blog-images/#{$i}-post.jpg) center center/cover no-repeat;
- }
- }
- }
-
- .post-content {
- color: #fff;
- border-radius: 4px;
- padding: 20px;
- height: 224px;
- box-sizing: border-box;
- position: relative;
- display: flex;
- display: -webkit-flex;
- justify-content: flex-end;
- -webkit-justify-content: flex-end;
- align-items: flex-end;
- -webkit-align-items: flex-end;
- &:after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- background-color: transparent;
- display: block;
- border-radius: 4px;
- @include transition(.4s ease-in-out);
- }
- i {
- position: relative;
- z-index: 1;
- font-size: 18px;
- opacity: 0;
- visibility: hidden;
- @include transition(.4s ease-in-out);
- }
- }
-
- .post-title {
- font-size: 20px;
- overflow: hidden;
- margin: 10px 0;
- display: block;
- @include transition(.4s ease-in-out);
- }
-
- .post-intro {
- font-size: 16px;
- display: block;
- }
- }
- }
-
- .info-blocks {
- color: #fff;
- font-size: 14px;
- margin: 40px -12px;
- .flex-item {
- background: $link-color;
- flex: 1;
- -webkit-flex: 1;
- margin: 12px;
- padding: 12px;
- &:nth-last-child(2),
- &:last-child {
- background: $purple-accent;
- }
- .flex-row {
- margin: 0 0 12px;
- align-items: center;
- -webkit-align-items: center;
- justify-content: space-around;
- -webkit-justify-content: space-around;
- }
- }
-
- label {
- font-size: 36px;
- line-height: 1;
- }
-
- span {
- display: block;
- }
-
- img {
- width: 48px;
- height: 48px;
- }
- }
-}
-
-.calculator-form {
- width: 340px;
- margin: 0 auto;
- &.send-report-form {
- margin-top: 30px;
- }
-}
-
-.calculator-confirm,
-.demo-confirm {
- img {
- height: 152px;
- margin: 0 auto 20px;
- }
-}
-
-.demo-confirm {
- margin: 70px 0 0;
- height: calc(100vh - 282px);
- display: flex;
- display: -webkit-flex;
- align-items: center;
- -webkit-align-items: center;
-}
-
-.blurred {
- filter: blur(5px);
-}
-
@keyframes play {
60%, 80% {
color: white;
@@ -869,4 +508,4 @@ section {
60%, 80% {
color: white;
}
-}
\ No newline at end of file
+}
diff --git a/src/adtechmedia-website/frontend/sass/_new-responsive.scss b/src/adtechmedia-website/frontend/sass/home/_responsive-view.scss
similarity index 58%
rename from src/adtechmedia-website/frontend/sass/_new-responsive.scss
rename to src/adtechmedia-website/frontend/sass/home/_responsive-view.scss
index ec14f2f..81dbdf7 100644
--- a/src/adtechmedia-website/frontend/sass/_new-responsive.scss
+++ b/src/adtechmedia-website/frontend/sass/home/_responsive-view.scss
@@ -20,53 +20,11 @@
}
}
- .btn {
- padding: 8px 16px;
- }
-
.main-page {
h1 {
font-size: 45px;
}
}
-
- .demo-footer {
- background-size: 100% 200px;
- }
-
- .bottom-info {
- section {
- width: 85%;
- padding: 0;
- }
- }
-
- footer {
- section {
- width: 100%;
- }
- }
-
- .calculator-block {
- .info-blocks {
- margin-left: -8px;
- margin-right: -8px;
- font-size: 13px;
- .flex-item {
- margin: 8px;
- padding: 12px 8px;
- }
-
- img {
- width: 42px;
- height: 42px;
- }
-
- label {
- font-size: 32px;
- }
- }
- }
}
@media (min-width: 1025px) and (min-height: 800px) {
@@ -108,20 +66,12 @@
}
}
- section {
- width: 90%;
- }
-
.body-main,
.body-main p,
.demo-confirm p {
font-size: 18px;
}
- .main-nav a {
- font-size: 16px;
- }
-
.solutions-block {
.solutions-inner {
li {
@@ -142,25 +92,6 @@
}
}
}
-
- .calculator-block {
- &.calculator-results {
- height: calc(100vh - 282px);
- & > section {
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- -webkit-transform: translateY(-50%);
- padding: 0;
- }
- }
-
- &.calculator-confirm {
- & > section {
- padding: 80px 0;
- }
- }
- }
}
@media (min-width: 1500px) and (min-height: 800px) {
@@ -174,7 +105,6 @@
font-size: 20px;
}
- section,
.main-slide section {
width: 80%;
}
@@ -196,47 +126,12 @@
url("../images/wallpaper-prefooter.jpg") 0 bottom/auto 440px no-repeat;
}
- .demo-footer {
- background: url('../images/gray-footer.png') 0 bottom/100% auto no-repeat;
- height: 200px;
- padding: 100px 0 0;
- line-height: 100px;
- text-align: center;
- .main-page ~ & {
- margin-top: -100px;
- }
-
- h3 {
- display: inline-block;
- vertical-align: top;
- }
-
- .btn {
- margin: 0 0 0 40px;
- vertical-align: middle;
- }
- }
-
.demo-confirm,
.calculator-block {
& ~ .demo-footer {
display: none;
}
}
-
- .calculator-block {
- p {
- font-size: 18px;
- }
- }
-
- header {
- section {
- & > .modal__trigger {
- display: none;
- }
- }
- }
}
@media (min-width: 1300px) {
@@ -252,45 +147,16 @@
}
}
- .logo {
- height: 88px;
- img {
- height: 40px;
- }
- }
-
- .main-nav {
- li {
- line-height: 88px;
- height: 88px;
- }
- }
-
.demo-confirm,
.calculator-block.calculator-result,
.cb-container.not-found {
margin: 88px 0 0;
- height: calc(100vh - 300px);
- }
-
- .calculator-block {
- margin: 88px 0 0;
- &.calculator-main {
- height: calc(100vh - 88px);
- & > section {
- padding: 0;
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- -webkit-transform: translateY(-50%);
- }
- }
+ height: calc(100vh - 88px);
}
}
@media (min-width: 1700px) {
section {
- width: 1296px;
.steps & {
width: 1100px;
}
@@ -377,35 +243,6 @@
font-size: 50px;
}
- h3 {
- font-size: 28px;
- .modal__content .modal-inner & {
- font-size: 22px;
- }
- }
-
- .footer-blocks {
- .social-links {
- li {
- margin: 0 10px;
- a {
- width: 72px;
- height: 72px;
- i {
- font-size: 40px;
- line-height: 72px;
- }
- }
- }
- }
- }
-
- .footer-logo {
- img {
- height: 104px;
- }
- }
-
.steps {
.checks {
h3 {
@@ -513,72 +350,6 @@
}
}
}
-
- .btn {
- padding: 8px 24px;
- }
-
- .main-nav {
- li {
- &.custom-menu-link {
- a {
- padding-left: 24px;
- padding-right: 24px;
- }
- }
- }
- }
-
- .demo-footer {
- height: 250px;
- line-height: 150px;
- }
-
- .modal {
- .custom-input {
- padding-top: 28px;
- input {
- font-size: 22px;
- height: 40px;
- }
-
- label.text-field__label {
- line-height: 44px;
- }
- }
- }
-
- .calculator-block {
- h3 {
- font-size: 28px;
- }
-
- .info-blocks {
- font-size: 16px;
- .flex-item {
- padding: 24px 24px 12px;
- }
-
- label {
- font-size: 40px;
- }
- }
-
- &.calculator-results {
- .heading {
- margin-bottom: 80px;
- }
- }
-
- &.calculator-confirm {
- .blog-sections {
- h3 {
- margin: 80px 0 30px;
- font-size: 28px;
- }
- }
- }
- }
}
@media (min-width: 992px) and (max-width: 1024px) {
@@ -634,100 +405,6 @@
font-size: 24px;
}
- header {
- & > section {
- display: flex;
- display: -webkit-flex;
- }
-
- nav {
- .navTrigger-label {
- width: 33px;
- height: 18px;
- position: relative;
- top: 50%;
- @include transform(translateY(-50%));
- cursor: pointer;
- display: block;
- span {
- height: 2px;
- display: block;
- position: absolute;
- width: 100%;
- background: $link-color;
- border-radius: 9px;
- opacity: 1;
- left: 0;
- &:nth-child(1) {
- top: 0;
- width: 70%;
- }
-
- &:nth-child(2) {
- top: 8px;
- }
-
- &:nth-child(3) {
- top: 16px;
- }
- }
- }
- }
- }
-
- .logo-cont {
- float: none;
- order: 2;
- -webkit-order: 2;
- }
-
- .main-nav {
- height: 70px;
- float: none;
- order: 1;
- -webkit-order: 1;
- margin-right: 30px;
- ul {
- display: none;
- position: absolute;
- top: 100%;
- background: #fff;
- left: 0;
- width: 100%;
- overflow: auto;
- height: calc(100vh - 70px);
- }
-
- input#navTrigger:checked ~ ul {
- display: flex;
- display: -webkit-flex;
- flex-direction: column;
- -webkit-flex-direction: column;
- justify-content: center;
- -webkit-justify-content: center;
- }
-
- li {
- float: none;
- display: block;
- height: 60px;
- line-height: 60px;
- &.custom-menu-link {
- display: none;
- }
-
- a {
- margin: 0;
- font-size: 22px;
- @include transition(.3s);
- &.active,
- &:hover {
- color: #1b93f2;
- }
- }
- }
- }
-
.main-slide {
height: 100vh;
.flex-row {
@@ -883,110 +560,12 @@
}
}
- footer {
- .footer-blocks {
- display: block;
- .footer-logo,
- .quick-links {
- display: none;
- }
-
- .social-links {
- flex: none;
- -webkit-flex: none;
- max-width: 100%;
- margin: 0;
- float: none;
- height: auto;
- ul {
- display: flex;
- display: -webkit-flex;
- justify-content: center;
- -webkit-justify-content: center;
- li {
- margin: 0 15px;
- a {
- width: 70px;
- height: 70px;
- i {
- font-size: 40px;
- line-height: 70px;
- }
- }
- }
- }
- }
- }
- }
-
- .bottom-info {
- line-height: normal;
- section {
- border-color: rgba(0, 0, 0, .5);
- width: calc(100% - 100px);
- margin: 0 50px;
- padding-top: 16px;
- padding-bottom: 16px;
- & > span {
- display: block;
- a {
- white-space: nowrap;
- }
- }
- }
- }
-
- .demo-confirm,
- .cb-container.not-found {
- height: calc(100vh - 253px);
- }
-
.demo-confirm,
.calculator-confirm {
img {
height: 135px;
}
}
-
- .calculator-block {
- &.calculator-confirm {
- .blog-sections {
- .post-title {
- line-height: 1.3;
- }
- }
- }
-
- .info-blocks {
- font-size: 12px;
- img {
- width: 36px;
- height: 36px;
- }
-
- label {
- font-size: 26px;
- }
- }
- }
-
- header {
- section {
- & > .modal__trigger {
- margin-left: auto;
- order: 3;
- -webkit-order: 3;
- }
- }
- }
-
- main {
- &:not(.main-page) {
- & ~ .demo-footer {
- display: none;
- }
- }
- }
}
@media (max-width: 1024px) and (min-height: 800px) {
@@ -1022,20 +601,6 @@
font-size: 60px;
line-height: 1.2;
}
-
- .calculator-block {
- &.calculator-results {
- height: calc(100vh - 253px);
- }
- }
-}
-
-@media (max-device-width: 1024px) {
- .calculator-block {
- &.calculator-results {
- height: calc(100vh - 253px);
- }
- }
}
@media (max-width: 991px) {
@@ -1075,38 +640,6 @@
margin: 20px 0 0;
}
}
-
- .calculator-block {
- &.default-bg {
- background-position: center bottom;
- }
-
- &.calculator-confirm {
- .blog-sections {
- & > .flex-row {
- & > * {
- flex: 0 0 50%;
- -webkit-flex: 0 0 50%;
- max-width: 50%;
- }
- }
- }
- }
- }
-
- .calculator-block {
- .info-blocks {
- flex-wrap: wrap;
- -webkit-flex-wrap: wrap;
- justify-content: center;
- -webkit-justify-content: center;
- .flex-item {
- flex: 0 0 25%;
- -webkit-flex: 0 0 25%;
- max-width: 25%;
- }
- }
- }
}
@media (max-width: 991px) and (min-height: 800px) {
@@ -1152,46 +685,6 @@
position: static;
}
}
-
- footer {
- .footer-blocks {
- .social-links {
- ul {
- li {
- a {
- width: 55px;
- height: 55px;
- i {
- font-size: 28px;
- line-height: 55px;
- }
- }
- }
- }
- }
- }
- }
-
- .bottom-info {
- section {
- width: calc(100% - 40px);
- margin: 0 20px;
- padding: 16px 0;
- }
- }
-
- .demo-confirm,
- .cb-container.not-found {
- height: calc(100vh - 232px);
- }
-
- .calculator-block {
- &.calculator-main {
- h2 {
- margin-bottom: 20px;
- }
- }
- }
}
@media (max-width: 767px) and (min-height: 800px) {
@@ -1230,20 +723,6 @@
}
}
}
-
- .calculator-block {
- &.calculator-results {
- height: auto;
- & > section {
- position: static;
- top: 50%;
- transform: translateY(0%);
- -webkit-transform: translateY(0%);
- padding-top: 50px;
- padding-bottom: 50px;
- }
- }
- }
}
@media (max-device-width: 767px) {
@@ -1266,44 +745,6 @@
}
}
-@media (max-width: 680px) {
- footer {
- .footer-blocks {
- .social-links {
- ul {
- li {
- margin: 0 10px;
- a {
- width: 50px;
- height: 50px;
- i {
- font-size: 26px;
- line-height: 50px;
- }
- }
- }
- }
- }
- }
- }
-}
-
-@media (max-width: 580px) {
- .calculator-block {
- .info-blocks {
- justify-content: space-around;
- -webkit-justify-content: space-around;
- .flex-item {
- flex: 0 0 30%;
- -webkit-flex: 0 0 30%;
- max-width: 30%;
- margin: 10px 0;
- padding: 10px;
- }
- }
- }
-}
-
@media (max-width: 560px) {
body.body-main,
.demo-confirm p,
@@ -1382,52 +823,12 @@
}
}
- footer {
- .footer-blocks {
- .social-links {
- ul {
- li {
- margin: 0 5px;
- a {
- width: 45px;
- height: 45px;
- i {
- font-size: 24px;
- line-height: 45px;
- }
- }
- }
- }
- }
- }
- }
-
- .demo-confirm,
- .cb-container.not-found {
- height: calc(100vh - 222px);
- }
-
.demo-confirm,
.calculator-confirm {
img {
height: 100px;
}
}
-
- .calculator-block {
- &.calculator-confirm {
- .blog-sections {
- & > .flex-row {
- & > * {
- flex: 0 0 100%;
- -webkit-flex: 0 0 100%;
- max-width: 100%;
- margin-bottom: 24px;
- }
- }
- }
- }
- }
}
@media (max-width: 560px) and (min-height: 800px) {
@@ -1489,18 +890,6 @@
}
}
-@media (max-width: 450px) {
- .calculator-block {
- .info-blocks {
- .flex-item {
- flex: 0 0 45%;
- -webkit-flex: 0 0 45%;
- max-width: 45%;
- }
- }
- }
-}
-
@media (max-width: 400px) {
.solutions-block {
padding-bottom: 200px;
@@ -1515,49 +904,9 @@
}
}
- .modal__content {
- .modal-inner {
- h3 {
- font-size: 20px;
- margin-bottom: 10px;
- }
- }
- }
-
h3 {
font-size: 16px;
}
-
- footer {
- .footer-blocks {
- .social-links {
- ul {
- justify-content: space-between;
- -webkit-justify-content: space-between;
- &:after, &:before {
- display: none;
- }
- li {
- margin: 0;
- float: none;
- a {
- width: 40px;
- height: 40px;
- i {
- font-size: 22px;
- line-height: 40px;
- }
- }
- }
- }
- }
- }
- }
-
- .calculator-form {
- width: 100%;
- margin: 0;
- }
}
@media (max-width: 360px) {
@@ -1567,10 +916,6 @@
font-size: 16px;
}
- .main-nav {
- margin-right: 10px;
- }
-
.main-slide {
.flex-row {
justify-content: flex-start;
@@ -1597,12 +942,6 @@
font-size: 30px;
}
- .btn {
- font-size: 14px;
- padding: 8px 16px;
- }
-
-
.steps {
.step-block {
img, div {
@@ -1626,52 +965,6 @@
.demo-footer {
padding: 0;
}
-
- .bottom-info {
- section {
- padding: 10px 0;
- & > span {
- display: inline;
- }
- }
- }
-
- footer {
- .footer-blocks {
- padding: 22px 0 16px;
- .social-links {
- ul {
- li {
- a {
- width: 35px;
- height: 35px;
- i {
- font-size: 20px;
- line-height: 35px;
- }
- }
- }
- }
- }
- }
- }
-
- .calculator-block {
- .info-blocks {
- .flex-item {
- flex: 0 0 55%;
- -webkit-flex: 0 0 55%;
- max-width: 55%;
- }
- }
- }
-}
-
-@media (min-height: 500px) {
- .modal__content {
- max-height: 95vh;
- overflow: auto;
- }
}
@media (max-height: 459px) {
@@ -1682,58 +975,4 @@
padding-bottom: 15%;
}
}
-
- .main-nav {
- input#navTrigger:checked ~ ul {
- justify-content: space-around;
- -webkit-justify-content: space-around;
- &:before, &:after {
- display: none;
- }
- }
-
- li {
- height: auto;
- line-height: normal;
- }
- }
-
- .modal__content {
- width: 100vw;
- height: 100vh;
- display: flex;
- display: -webkit-flex;
- align-items: center;
- -webkit-align-items: center;
- & > * {
- flex: 1;
- -webkit-flex: 1;
- }
-
- .close-btn {
- height: 20px;
- width: 20px;
- top: 10px;
- right: 10px;
- }
- }
-
- .demo-confirm {
- height: auto;
- padding: 50px 0;
- }
-}
-
-@media (max-height: 350px) {
- .modal__content {
- img {
- max-width: 40%;
- }
-
- .modal-inner {
- padding: 1.5rem;
- flex: 2;
- -webkit-flex: 2;
- }
- }
}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/home/main.scss b/src/adtechmedia-website/frontend/sass/home/main.scss
new file mode 100644
index 0000000..3a366c2
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/home/main.scss
@@ -0,0 +1,4 @@
+@import "../variables";
+@import "../mixins";
+@import "home";
+@import "responsive-view";
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/landing/_responsive-view.scss b/src/adtechmedia-website/frontend/sass/landing/_responsive-view.scss
new file mode 100644
index 0000000..66ee2f3
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/landing/_responsive-view.scss
@@ -0,0 +1,101 @@
+@media (min-width: 1700px) {
+ .landing-page {
+ section {
+ width: 1296px;
+ }
+ }
+}
+
+@media (max-width: 991px) {
+ .landing-page {
+ margin-top: 70px;
+ section {
+ width: 90%;
+ }
+
+ h1 {
+ font-size: 26px;
+ }
+ }
+}
+
+@media (max-width: 768px) {
+ .landing-page {
+ section {
+ padding: 25px 0;
+ }
+
+ .flex-row {
+ display: block;
+ &.flex-gutter {
+ margin: 0;
+ }
+ & > [class^="flex-item-"] {
+ max-width: 100%;
+ padding: 0;
+ &:not(:last-child) {
+ margin-bottom: 25px;
+ }
+ }
+ }
+
+ .install-btn {
+ display: block;
+ width: 300px;
+ margin: 0 auto;
+ text-align: center;
+ }
+
+ .video-cont {
+ height: 300px;
+ }
+
+ .customer-reviews {
+ blockquote {
+ font-size: 18px;
+ }
+ }
+ }
+}
+
+@media (max-width: 560px) {
+ .landing-page {
+ h1 {
+ font-size: 25px;
+ }
+ }
+}
+
+@media (max-width: 479px) {
+ .landing-page {
+ .social-links {
+ label {
+ display: none;
+ }
+ }
+
+ .video-cont {
+ height: 200px;
+ }
+
+ .heading-desc {
+ margin: 15px 0;
+ }
+
+ .customer-reviews {
+ blockquote {
+ font-size: 15px;
+ }
+ }
+
+ .install-btn {
+ width: 280px;
+ height: 40px;
+ line-height: 38px;
+ }
+
+ h1 {
+ font-size: 23px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/_landing-page.scss b/src/adtechmedia-website/frontend/sass/landing/_styles.scss
similarity index 92%
rename from src/adtechmedia-website/frontend/sass/_landing-page.scss
rename to src/adtechmedia-website/frontend/sass/landing/_styles.scss
index 890f47c..4e2e0f5 100644
--- a/src/adtechmedia-website/frontend/sass/_landing-page.scss
+++ b/src/adtechmedia-website/frontend/sass/landing/_styles.scss
@@ -28,9 +28,7 @@
}
hr {
- border-width: 1px 0 0;
- border-style: solid;
- border-color: #eaeaea;
+ border: 1px solid #eaeaea;
}
.heading-desc {
@@ -48,7 +46,7 @@
width: 35px;
height: 35px;
line-height: 35px;
- background: #1b93f2;
+ background: $link-color;
color: #fff;
border-radius: 50%;
text-align: center;
diff --git a/src/adtechmedia-website/frontend/sass/landing/main.scss b/src/adtechmedia-website/frontend/sass/landing/main.scss
new file mode 100644
index 0000000..ae3c4f4
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/landing/main.scss
@@ -0,0 +1,4 @@
+@import "../variables";
+@import "../mixins";
+@import "styles";
+@import "responsive-view";
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/main.scss b/src/adtechmedia-website/frontend/sass/main.scss
index e5c9d2f..9f561ce 100644
--- a/src/adtechmedia-website/frontend/sass/main.scss
+++ b/src/adtechmedia-website/frontend/sass/main.scss
@@ -1,9 +1,6 @@
+@import "variables";
@import "mixins";
@import "loops";
@import "base";
@import "styles";
-@import "new";
-@import "landing-page";
-@import "api/main";
@import "responsive-view";
-@import "new-responsive";
diff --git a/src/adtechmedia-website/frontend/sass/medium-content/_responsive-view.scss b/src/adtechmedia-website/frontend/sass/medium-content/_responsive-view.scss
new file mode 100644
index 0000000..de46b8c
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/medium-content/_responsive-view.scss
@@ -0,0 +1,131 @@
+@media (min-width: 1025px) {
+ .medium-btn-block {
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ }
+
+ .blog-post {
+ justify-content: space-between;
+ -webkit-justify-content: space-between;
+ display: flex;
+ display: -webkit-flex;
+ flex-direction: column;
+ -webkit-flex-direction: column;
+ }
+
+ .posts-info {
+ height: 150px;
+ }
+}
+
+@media (min-width: 1700px) {
+ .posts-info h3 {
+ font-size: 22px;
+ }
+
+ .blog-post .blog-title {
+ font-size: 22px;
+ max-height: 85px;
+ }
+
+ .medium-btn {
+ font-size: 16px;
+ padding: 4px 20px;
+ }
+}
+
+@media (max-width: 1024px) {
+ .medium-content {
+ &.flex-row {
+ flex-direction: column;
+ -webkit-flex-direction: column;
+ & > * {
+ flex: 1;
+ -webkit-flex: 1;
+ max-width: none;
+ }
+ }
+
+ .posts-info {
+ display: flex;
+ display: -webkit-flex;
+ justify-content: center;
+ -webkit-justify-content: center;
+ align-items: center;
+ -webkit-align-items: center;
+ margin: 0 0 30px;
+ & > * {
+ margin: 0 10px;
+ }
+ }
+ }
+}
+
+@media (max-width: 991px) {
+ #mediumPosts {
+ margin: 0 -5px;
+ }
+
+ .blog-post {
+ padding: 0 5px;
+ }
+}
+
+@media (max-width: 767px) {
+ .medium-content {
+ border-top: 1px solid #F2F2F2;
+ }
+
+ #mediumPosts {
+ margin: 0 -12px;
+ flex-wrap: wrap;
+ -webkit-flex-wrap: wrap;
+ }
+
+ .blog-post {
+ flex: 0 0 50%;
+ -webkit-flex: 0 0 50%;
+ padding: 0 12px;
+ max-width: 50%;
+ &:not(:last-child) {
+ margin: 0 0 36px;
+ }
+ }
+}
+
+@media (max-width: 560px) {
+ .medium-content {
+ .posts-info {
+ h3 {
+ font-size: 22px;
+ }
+ }
+ }
+
+ #mediumPosts {
+ margin: 0;
+ flex-direction: column;
+ -webkit-flex-direction: column;
+ }
+
+ .blog-post {
+ flex: 1;
+ -webkit-flex: 1;
+ padding: 0;
+ max-width: none;
+ }
+}
+
+@media (max-width: 400px) {
+ .medium-content {
+ .posts-info {
+ flex-direction: column;
+ -webkit-flex-direction: column;
+ & > * {
+ margin: 10px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/medium-content/_styles.scss b/src/adtechmedia-website/frontend/sass/medium-content/_styles.scss
new file mode 100644
index 0000000..393201c
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/medium-content/_styles.scss
@@ -0,0 +1,72 @@
+#mediumPosts {
+ margin: 0 -10px;
+}
+
+.blog-post {
+ text-align: left;
+ line-height: normal;
+ flex: 1;
+ -webkit-flex: 1;
+ padding: 0 10px;
+ .blog-title {
+ font-size: 18px;
+ max-height: 70px;
+ overflow: hidden;
+ a {
+ color: $base-color;
+ transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+ -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+ &:hover {
+ color: $link-color;
+ }
+ }
+ }
+
+ .post-description {
+ font-size: 16px;
+ margin: 10px 0 15px;
+ color: rgba(0, 0, 0, 0.65);
+ max-height: 65px;
+ overflow: hidden;
+ }
+
+ .post-meta {
+ background: url(../images/mitoc-medium.png) left center/36px 36px no-repeat;
+ padding: 0 0 0 45px;
+ font-size: 14px;
+ line-height: normal;
+ & > * {
+ display: block;
+ &.post-date {
+ font-size: 13px;
+ color: rgba(0, 0, 0, .44);
+ }
+ }
+ }
+}
+
+.medium-btn {
+ display: inline-block;
+ border: 1px solid #1C9963;
+ color: #1C9963;
+ text-align: center;
+ cursor: pointer;
+ font: 13px FuturaICG, sans-serif;
+ padding: 2px 16px;
+ border-radius: 16px;
+ transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+ -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+ &:hover {
+ background: #1C9963;
+ color: #fff;
+ border-color: transparent;
+ }
+}
+
+.medium-content {
+ border-bottom: 1px solid #F2F2F2;
+ padding: 20px 0;
+ .posts-info {
+ padding: 0 20px 0 0;
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/medium-content/main.scss b/src/adtechmedia-website/frontend/sass/medium-content/main.scss
new file mode 100644
index 0000000..ae3c4f4
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/medium-content/main.scss
@@ -0,0 +1,4 @@
+@import "../variables";
+@import "../mixins";
+@import "styles";
+@import "responsive-view";
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/modal/_modal.scss b/src/adtechmedia-website/frontend/sass/modal/_modal.scss
new file mode 100644
index 0000000..86feedf
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/modal/_modal.scss
@@ -0,0 +1,159 @@
+/**
+ * Material Modal CSS
+ */
+.modal {
+ will-change: visibility, opacity;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow-y: auto;
+ overflow-x: hidden;
+ z-index: 1000;
+ visibility: hidden;
+ opacity: 0;
+ @include transition(all 0.5s cubic-bezier(0.23, 1, 0.32, 1));
+}
+
+.modal--active {
+ visibility: visible;
+ opacity: 1;
+}
+
+.modal--align-top {
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+}
+
+.modal__bg {
+ background: rgba(0, 0, 0, .7);
+}
+
+.modal__content {
+ will-change: transform, opacity;
+ position: relative;
+ background: #fff;
+ background-clip: padding-box;
+ box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
+ opacity: 0;
+ @include transition(all 0.25s cubic-bezier(0.23, 1, 0.32, 1));
+ width: 330px;
+ .btn {
+ margin: 10px;
+ }
+
+ .modal-inner {
+ padding: 2.4rem 2.4rem 1rem;
+ h3 {
+ margin-bottom: 20px;
+ }
+
+ #mc_embed_signup {
+ label.mc-response-label {
+ font-weight: normal;
+ margin: 5px 0 0;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ font-size: 12px;
+ display: block;
+ &.error {
+ color: #FF0031;
+ }
+
+ &.valid {
+ color: $link-color;
+ }
+ }
+
+ div.mce_inline_error {
+ display: none !important;
+ }
+ }
+ }
+
+ .close-btn {
+ height: 30px;
+ width: 30px;
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ &:before, &:after {
+ content: '';
+ position: absolute;
+ height: 2px;
+ width: 100%;
+ top: 50%;
+ left: 0;
+ margin-top: -1px;
+ background: $gray-color;
+ @include transition(background .4s ease-in-out);
+ }
+
+ &:before {
+ @include transform(rotate(45deg));
+ }
+ &:after {
+ @include transform(rotate(-45deg));
+ }
+
+ &:hover {
+ cursor: pointer;
+ &:before, &:after {
+ background: $link-color;
+ }
+ }
+ }
+}
+
+.modal__content--active {
+ opacity: 1;
+}
+
+.modal__trigger {
+ position: relative;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ @include transition(all 0.5s cubic-bezier(0.23, 1, 0.32, 1));
+}
+
+.modal__trigger--active {
+ z-index: 10;
+}
+
+#modal__temp {
+ will-change: transform, opacity;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: $link-color;
+ @include transform(none);
+ opacity: 1;
+ transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+ -webkit-transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.modal-open > *:not(.modal) {
+ filter: blur(10px);
+}
+
+.modal-transition {
+ position: relative;
+ z-index: 11;
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/modal/_responsive-view.scss b/src/adtechmedia-website/frontend/sass/modal/_responsive-view.scss
new file mode 100644
index 0000000..b6c107b
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/modal/_responsive-view.scss
@@ -0,0 +1,77 @@
+@media (min-width: 1700px) {
+ .modal__content {
+ .modal-inner {
+ h3 {
+ font-size: 22px;
+ }
+ }
+ }
+
+ .modal {
+ .custom-input {
+ padding-top: 28px;
+ input {
+ font-size: 22px;
+ height: 40px;
+ }
+
+ label.text-field__label {
+ line-height: 44px;
+ }
+ }
+ }
+}
+
+@media (max-width: 400px) {
+ .modal__content {
+ .modal-inner {
+ h3 {
+ font-size: 20px;
+ margin-bottom: 10px;
+ }
+ }
+ }
+}
+
+@media (min-height: 500px) {
+ .modal__content {
+ max-height: 95vh;
+ overflow: auto;
+ }
+}
+
+@media (max-height: 459px) {
+ .modal__content {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ display: -webkit-flex;
+ align-items: center;
+ -webkit-align-items: center;
+ & > * {
+ flex: 1;
+ -webkit-flex: 1;
+ }
+
+ .close-btn {
+ height: 20px;
+ width: 20px;
+ top: 10px;
+ right: 10px;
+ }
+ }
+}
+
+@media (max-height: 350px) {
+ .modal__content {
+ img {
+ max-width: 40%;
+ }
+
+ .modal-inner {
+ padding: 1.5rem;
+ flex: 2;
+ -webkit-flex: 2;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/modal/main.scss b/src/adtechmedia-website/frontend/sass/modal/main.scss
new file mode 100644
index 0000000..27245f9
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/modal/main.scss
@@ -0,0 +1,4 @@
+@import "../variables";
+@import "../mixins";
+@import "modal";
+@import "responsive-view";
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/solutions/_responsive-view.scss b/src/adtechmedia-website/frontend/sass/solutions/_responsive-view.scss
new file mode 100644
index 0000000..a980e74
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/solutions/_responsive-view.scss
@@ -0,0 +1,159 @@
+@media (min-width: 1171px) {
+ #solutions {
+ section {
+ .solution-cont {
+ .solution-text {
+ @include flex-width(0 0 65%, 65%);
+ }
+
+ .solution-benefits {
+ @include flex-width(0 0 35%, 35%);
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 1170px) {
+ #solutions {
+ section {
+ padding-top: 25px;
+ }
+ }
+}
+
+@media (max-width: 1170px) and (min-width: 1025px) {
+ #solutions {
+ section {
+ .solution-cont {
+ .solution-text {
+ @include flex-width(0 0 60%, 60%);
+ }
+
+ .solution-benefits {
+ @include flex-width(0 0 40%, 40%);
+ }
+ }
+ }
+ }
+}
+
+@media (min-width: 1025px) {
+ #solutions {
+ section {
+ .solution-cont {
+ .solution-cont-inner {
+ @include flex-container;
+ margin: 0 -25px;
+ }
+
+ .solution-text,
+ .solution-benefits {
+ padding: 0 25px;
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 1024px) {
+ #solutions {
+ section {
+ .solution-cont {
+ h3 {
+ margin: 25px 0 0;
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 991px) {
+ #solutions {
+ section {
+ h1 {
+ font-size: 28px;
+ }
+
+ .solution:not(:last-child) {
+ margin: 0 0 25px;
+ }
+ }
+ }
+}
+
+@media (max-width: 767px) {
+ #solutions {
+ section {
+ padding: 10px 20px 0;
+ h1 {
+ font-size: 24px;
+ }
+
+ .solution:not(:last-child) {
+ margin: 0 0 15px;
+ }
+
+ .solution-cont {
+ font-size: 15px;
+ width: calc(100% - 130px);
+ text-align: justify;
+ h3 {
+ font-size: 16px;
+ margin: 15px 0 0;
+ }
+ }
+
+ img {
+ width: 100px;
+ }
+ }
+ }
+}
+
+@media (min-width: 481px) {
+ #solutions {
+ section {
+ .solution-cont {
+ float: right;
+ }
+ }
+ }
+}
+
+@media (max-width: 480px) {
+ #solutions {
+ section {
+ .solution:not(:last-child) {
+ margin: 0 0 10px;
+ }
+
+ .solution-img {
+ margin: 0 10px 10px 0;
+ img {
+ width: 80px;
+ }
+ }
+
+ .solution-cont {
+ width: 100%;
+ font-size: 14px;
+ }
+
+ h1 {
+ font-size: 22px;
+ }
+ }
+ }
+}
+
+@media (max-width: 400px) {
+ #solutions {
+ section {
+ h1 {
+ font-size: 20px;
+ line-height: 55px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/solutions/_styles.scss b/src/adtechmedia-website/frontend/sass/solutions/_styles.scss
new file mode 100644
index 0000000..2b79cf1
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/solutions/_styles.scss
@@ -0,0 +1,44 @@
+#solutions {
+ padding: 0 0 25px;
+ section {
+ padding-top: 50px;
+ text-align: left;
+ h1 {
+ background: transparent;
+ -webkit-text-fill-color: inherit;
+ font: 30px/70px Futura-Light, sans-serif;
+ color: #595959;
+ &:after {
+ display: none;
+ }
+ }
+
+ .solution {
+ &:not(:last-child) {
+ margin: 0 0 50px;
+ }
+ }
+
+ .solution-cont {
+ width: calc(100% - 180px);
+ font-size: 16px;
+
+ h3 {
+ font-weight: normal;
+ text-transform: uppercase;
+ font-size: 18px;
+ }
+
+ ul {
+ margin: 0 0 0 20px;
+ li {
+ list-style: disc outside none;
+ color: $link-color;
+ span {
+ color: $base-color;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/solutions/main.scss b/src/adtechmedia-website/frontend/sass/solutions/main.scss
new file mode 100644
index 0000000..ae3c4f4
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/solutions/main.scss
@@ -0,0 +1,4 @@
+@import "../variables";
+@import "../mixins";
+@import "styles";
+@import "responsive-view";
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/team/_responsive-view.scss b/src/adtechmedia-website/frontend/sass/team/_responsive-view.scss
new file mode 100644
index 0000000..ead081a
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/team/_responsive-view.scss
@@ -0,0 +1,64 @@
+@media (min-width: 768px) and (max-width: 991px) {
+ .team-block {
+ .member-pic {
+ width: 130px;
+ height: 130px;
+ }
+
+ .member-name,
+ .member-social li .fa {
+ font-size: 18px;
+ }
+ }
+}
+
+@media (max-width: 767px) {
+ .team-block {
+ flex-flow: wrap;
+ -webkit-flex-flow: wrap;
+ padding: 0;
+ .team-member {
+ flex: 0 0 50%;
+ -webkit-flex: 0 0 50%;
+ max-width: 50%;
+ margin: 50px 0 0;
+ }
+ }
+}
+
+@media (min-width: 480px) and (max-width: 640px) {
+ .team-block {
+ .member-pic {
+ width: 160px;
+ height: 160px;
+ margin-bottom: 15px;
+ }
+
+ .member-name {
+ font-size: 20px;
+ }
+ }
+}
+
+@media (max-width: 479px) {
+ .team-block {
+ display: block;
+ padding: 30px 0 0;
+ .team-member {
+ max-width: none;
+ &:not(:last-child) {
+ margin: 0 0 50px;
+ }
+ }
+
+ .member-pic {
+ margin-bottom: 10px;
+ }
+
+ .member-social {
+ &:before {
+ width: 130px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/team/_styles.scss b/src/adtechmedia-website/frontend/sass/team/_styles.scss
new file mode 100644
index 0000000..f9a453b
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/team/_styles.scss
@@ -0,0 +1,74 @@
+#team {
+ padding-bottom: 20px;
+ .custom-headline-block {
+ @include custom-headline(url('../images/team.jpg'));
+ }
+}
+
+.team-block {
+ @include flex-container;
+ padding: 50px 0 0;
+ .team-member {
+ @include flex-width(0 0 25%, 25%);
+ font-family: FuturaICG, sans-serif;
+ color: #595959;
+ }
+
+ .member-pic {
+ width: 185px;
+ height: 185px;
+ margin: 0 auto 25px;
+ @include grayscale(90%);
+ &:hover {
+ @include grayscale(0%);
+ }
+
+ img {
+ width: 100%;
+ height: auto;
+ border-radius: 50%;
+ }
+ }
+
+ .member-name {
+ font-size: 22px;
+ color: $link-color;
+
+ }
+
+ .member-position {
+ font-size: 13px;
+ font-style: italic;
+ }
+
+ .member-social {
+ position: relative;
+ margin: 15px 0 0;
+ &:before {
+ content: '';
+ height: 1px;
+ width: 50%;
+ background: #aeaeae;
+ position: absolute;
+ top: 0;
+ left: 50%;
+ @include transform(translateX(-50%));
+ }
+
+ li {
+ display: inline-block;
+ a {
+ color: #595959;
+ @include transition(.2s linear);
+ &:hover {
+ color: $link-color;
+ }
+ }
+
+ .fa {
+ font-size: 20px;
+ margin: 15px 10px 0;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/sass/team/main.scss b/src/adtechmedia-website/frontend/sass/team/main.scss
new file mode 100644
index 0000000..ae3c4f4
--- /dev/null
+++ b/src/adtechmedia-website/frontend/sass/team/main.scss
@@ -0,0 +1,4 @@
+@import "../variables";
+@import "../mixins";
+@import "styles";
+@import "responsive-view";
\ No newline at end of file
diff --git a/src/adtechmedia-website/frontend/static-pages/api-docs/index.html b/src/adtechmedia-website/frontend/static-pages/api-docs/index.html
index 4a83fa5..37c42ad 100644
--- a/src/adtechmedia-website/frontend/static-pages/api-docs/index.html
+++ b/src/adtechmedia-website/frontend/static-pages/api-docs/index.html
@@ -28,6 +28,9 @@
+
+
+
@@ -179,6 +182,20 @@ ' + item.title + '
'; + output += '' + trimmedString + '
'; + output += '"; + output += 'Let's schedule your demo
+
+
+
+ Latest in Our Blog
+
+ Follow
+
+
+
+
+