#webdesigner-Logo {grid-area: Logo} #webdesigner-Menu {grid-area: IconMenu} #webdesigner-Icons {grid-area: Icons} #webdesigner-Video {grid-area: Video} #webdesigner-Agentur {grid-area: Agentur} #webdesigner-Slogan {grid-area: Slogan} #webdesigner-Leistungen {grid-area: Leistungen} #e1 {grid-area: e1} #e2 {grid-area: e2} #e3 {grid-area: e3} #e4 {grid-area: e4} #e5 {grid-area: e5} #e6 {grid-area: e6} #webdesigner { width:100%;min-height:100vh; display:grid; column-gap:0;row-gap:0; grid-template-columns: 10% 25% 25% 5% 25% 10%; grid-template-rows: 200px 400px 1fr; grid-template-areas: "e1 Logo . . IconMenu e2" ". Icons . . . ." "e3 Slogan Leistungen Leistungen Agentur e4" ; /* justify-content: stretch; justify-items: start; align-content: stretch; align-items:stretch; */ } #e3, #e4, /* #webdesigner-Icons, */ /* #webdesigner-Video, */ #webdesigner-Agentur, #webdesigner-Slogan, #webdesigner-Leistungen {background:rgba(255,255,255,0.8)} #webdesigner-Logo {display:flex;justify-content:center;align-items:center} #webdesigner-Logo img {width:100%;height:auto;max-width:350px;margin-top:50px} #webdesigner-Menu {display:flex;justify-content:center;align-items:center} #webdesigner-Icons {display:flex;justify-content:center;align-items:center} #webdesigner-Icons img {width:100%;height:auto;max-width:250px} #wdiconsmobile {display:none} #webdesigner-Slogan {font-family:'Akrobat-ExtraBold';font-size:40px;line-height:140%;text-transform:uppercase;display:flex;justify-content:center;align-items:start;padding:40px 0 40px 0px} #webdesigner-Leistungen {font-size:22px;display:flex;justify-content:start;align-items:start} #webdesigner-Agentur {display:flex;justify-content:center;align-items:start} #webdesigner-Agentur video {width:100%;height:auto} #webdesigner-Video video {width:100%;height:auto} #navPhone, #navPhone img, #navToggle, #navToggle img {max-width:80px} #navToggle {float:right;margin-left:25px} #webdesigner-Video, #webdesigner-Agentur {padding:0px 40px;z-index:99} #webdesigner-Icons {padding:40px 0px} #webdesigner-Leistungen {padding:40px} #webdesigner-Leistungen ul {list-style:none;width:100%;text-align:left} #webdesigner-Agentur video {max-width:220px;margin-top:-110px} @media all and (max-width:1599px) { #webdesigner { grid-template-rows: 200px 300px 1fr; } } @media all and (max-width:1404px) { #webdesigner { width:100%;min-height:100vh; display:grid; column-gap:0;row-gap:0; grid-template-columns: 10% 25% 25% 5% 25% 10%; grid-template-rows: 200px 250px auto; grid-template-areas: "e1 Logo Logo . IconMenu e2" ". Icons Agentur . . ." "e3 Slogan Leistungen Leistungen Leistungen e4" ; } #webdesigner-Logo {display:flex;justify-content:start;align-items:center} #webdesigner-Icons {display:flex;justify-content:end;align-items:center} #webdesigner-Agentur {display:flex;justify-content:start;align-items:center;background:none} #webdesigner-Agentur {padding:40px} #webdesigner-Agentur video {width:100%;height:auto;max-width:250px;max-height:170px;margin-top:0} #webdesigner-Leistungen ul{padding-left:0} } @media all and (max-width:767px) { #webdesigner { width:100%;height:auto; display:grid; column-gap:0;row-gap:0; grid-template-columns: 10% 20% 20% 5% 35% 10%; grid-template-rows: 200px 300px .; grid-template-areas: "e1 Logo Logo . IconMenu e2" ". Icons Icons Agentur Agentur ." "e3 Slogan Slogan Leistungen Leistungen e4" ; } } @media all and (max-width:639px) { #webdesigner { width:100%;height:auto; display:grid; column-gap:0;row-gap:0; grid-template-columns: 10% 60% 20% 10%; grid-template-rows: 150px 250px auto auto auto; grid-template-areas: "e1 Logo IconMenu e2" "Icons Icons Icons Icons" "e3 Slogan Slogan e4" "e5 Leistungen Leistungen e6" "e7 Agentur Agentur e8" ; } #webdesigner-Logo {display:flex;justify-content:start;align-items:center} #webdesigner-Icons {display:flex;justify-content:center;align-items:end;margin-top:80px;padding:0} #webdesigner-Icons img {width:90%;max-width:400px} #wdicons {display:none} #wdiconsmobile {display:flex} #webdesigner-Slogan {font-size:35px;line-height:120%;justify-content:start;align-items:start;padding:20px 0 18px 0;text-align:left} #webdesigner-Agentur video {width:100%;height:auto;max-width:250px;max-height:170px;margin-top:0} #webdesigner-Leistungen {justify-content:start;align-items:start;padding:20px 0 0 0} #webdesigner-Leistungen ul{padding-left:0} #webdesigner-Agentur {display:flex;justify-content:center;align-items:center;padding:20px;background:#ffffff} #webdesigner-Leistungen, #e5, #e6, #e7, #e8 {background:#ffffff} #webdesigner-Slogan, #e3, #e4 {background:rgba(255,255,255,0.5)} #webdesigner-Menu {flex-direction:column-reverse;justify-content:end;align-items:end} #navPhone, #navToggle {margin-left:15px} #navPhone img, #navToggle img {max-width:60px} } /* intro - subpages */ #webdesigner-subpages { width:100%;height:200px; display:grid; column-gap:0;row-gap:0; grid-template-columns: 10% 20% 25% 10% 25% 10%; grid-template-rows: 30vh; grid-template-areas: "e1 Logo . . IconMenu e2"; /* justify-content: stretch; justify-items: start; align-content: stretch; align-items:stretch; */ } @media all and (max-width:1404px) { #webdesigner-subpages { width:100%;height:200px; display:grid; column-gap:0;row-gap:0; grid-template-columns: 10% 60% 20% 10%; grid-template-areas: "e1 Logo IconMenu e2" ; } #webdesigner-Logo {display:flex;justify-content:start;align-items:center;text-align:left} #webdesigner-Logo img {width:90%;max-width:300px} } /* ************************************* */ .intro-boxes-container { display:grid; justify-items: stretch; align-items: stretch; justify-content: space-between; align-content: start; grid-template-columns: 10% 1fr 1fr 1fr 1fr 10%; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; grid-auto-flow: row dense; column-gap: 0px; row-gap: 0px; width:100%; min-height:250px; max-height:400px; margin-top:0; } .intro-item {color:#005c87;color:rgba(0,92,135,0.9);text-transform:uppercase} .intro-boxes-container h2 {color:#005c87;color:rgba(0,92,135,0.9);text-transform:uppercase; font-family: 'Akrobar-ExtraLight',Helvetica,Arial,Lucida,sans-serif;font-size: 32px;line-height: 140%} .intro-item li {list-style:none;margin-left:-15px} .intro-boxes-left-title {background:#ffffff;background:rgba(255,255,255,0.9);margin-bottom:2px;grid-column:1/2;grid-row:2/3} .intro-boxes-left-headline {background:#ffffff;background:rgba(255,255,255,0.9);margin-bottom:2px;grid-column:1/2;grid-row:1/2} .intro-boxes-left-text {background:transparent;grid-column:1/2;grid-row:3/4} .intro-boxes-left-last {background:transparent;grid-column:1/2;grid-row:4/5} .intro-boxes-footer {grid-column:2/6;grid-row:4/5} .intro-boxes-right-title {background:#ffffff;background:rgba(255,255,255,0.9);margin-bottom:2px;grid-column:6/7;grid-row:2/3} .intro-boxes-right-headline {background:#ffffff;background:rgba(255,255,255,0.9);margin-bottom:2px;grid-column:6/7;grid-row:1/2} .intro-boxes-right-text {background:transparent;grid-column:6/7;grid-row:3/4} .intro-boxes-right-last {background:transparent;grid-column:6/7;grid-row:4/5} .intro-boxes-1-title1 {border-radius:0;margin-left:0;margin-right:1px;margin-bottom:2px;background:#ffffff;background:rgba(255,255,255,0.9) url('https://wp-webdesigner.com/_assets/img-webdesigner/wp-webdesigner-online-shops-landing-pages.webp');grid-column:2/3;grid-row:2/3} .intro-boxes-1-headline {margin-left:0;margin-right:0;margin-bottom:2px;background:#ffffff;background:rgba(255,255,255,0.9);padding:20px 25px 0 25px;grid-column:2/3;grid-row:1/2} .intro-boxes-1-text {border-radius:0 0 0 15px;margin-left:0;margin-right:1px;background:#ffffff;background:rgba(255,255,255,0.9);padding:20px 25px 20px 25px;grid-column:2/3;grid-row:3/4} .intro-boxes-2-title1 {margin-left:1px;margin-right:1px;margin-bottom:2px;background:#ffffff;background:rgba(255,255,255,0.9) url('https://wp-webdesigner.com/_assets/img-webdesigner/wp-webdesigner-beratung-webstatistik.webp');grid-column:3/4;grid-row:2/3} .intro-boxes-2-headline {margin-left:0;margin-right:0;margin-bottom:2px;background:#ffffff;background:rgba(255,255,255,0.9);padding:20px 25px 0 25px;grid-column:3/4;grid-row:1/2} .intro-boxes-2-text {margin-left:1px;margin-right:1px;background:#ffffff;background:rgba(255,255,255,0.9);padding:20px 25px 20px 25px;grid-column:3/4;grid-row:3/4} .intro-boxes-3-title1 {margin-left:1px;margin-right:1px;margin-bottom:2px;background:#ffffff;background:rgba(255,255,255,0.9) url('https://wp-webdesigner.com/_assets/img-webdesigner/wp-webdesigner-seo-sea-maps.webp');grid-column:4/5;grid-row:2/3} .intro-boxes-3-headline {margin-left:0;margin-right:0;margin-bottom:2px;background:#ffffff;background:rgba(255,255,255,0.9);padding:20px 25px 0 25px;grid-column:4/5;grid-row:1/2} .intro-boxes-3-text {margin-left:1px;margin-right:1px;background:#ffffff;background:rgba(255,255,255,0.9);padding:20px 25px 20px 25px;grid-column:4/5;grid-row:3/4} .intro-boxes-4-title1 {border-radius:0;margin-left:1px;margin-right:0;margin-bottom:2px;background:#ffffff;background:rgba(255,255,255,0.9) url('https://wp-webdesigner.com/_assets/img-webdesigner/wp-webdesigner-logos-corporate-design.webp');grid-column:5/6;grid-row:2/3} .intro-boxes-4-headline {margin-left:0;margin-right:0;margin-bottom:2px;background:#ffffff;background:rgba(255,255,255,0.9);padding:20px 25px 0 25px;grid-column:5/6;grid-row:1/2} .intro-boxes-4-text {border-radius:0 0 15px 0;margin-left:1px;margin-right:0;background:#ffffff;background:rgba(255,255,255,0.9);padding:20px 25px 20px 25px;grid-column:5/6;grid-row:3/4} /* .intro-boxes-title {background-size:cover;background-repeat:no-repeat;background-position:center center;height:50px} .intro-boxes-1-title {background-image:url('https://wp-webdesigner.com/_assets/gifs/GIFs_PS_WEBDESIGNER-ONLINE-SHOPS-001.gif')} .intro-boxes-2-title {background-image:url('https://wp-webdesigner.com/_assets/gifs/GIFs_PS_BERATUNG-001.gif')} .intro-boxes-3-title {background-image:url('https://wp-webdesigner.com/_assets/gifs/GIFs_PS_SEO-SEA-001.gif')} .intro-boxes-4-title {background-image:url('https://wp-webdesigner.com/_assets/gifs/GIFs_PS_DESIGN-001-PS-C64.gif')} */ .intro-boxes-left-title, .intro-boxes-right-title, .intro-boxes-1-title1, .intro-boxes-2-title1, .intro-boxes-3-title1, .intro-boxes-4-title1 { height:50px;background-size:cover;background-position:center center;background-repeat:no-repeat } /* .intro-boxes-overlay {width:100%;height:100%;background:rgba(30,150,200,0.5)} */ .intro-boxes-overlay { width:100%;height:100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+15,ffffff+100&0.8+15,0+100 background: linear-gradient(to bottom, rgba(255,255,255,0.9) 15%,rgba(255,255,255,0) 100%); */ } @media all and (max-width:1599px) { .intro-item {font-size:17px} .intro-boxes-container h2 {font-size:24px} } @media all and (max-width:1399px) { .intro-item {font-size:16px} .intro-boxes-container h2 {font-size:24px} } @media all and (max-width:1199px) { .intro-boxes-container { display:grid; justify-items: stretch; align-items: stretch; justify-content: space-between; align-content: space-between; grid-template-columns: 10% 1fr 1fr 10%; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; column-gap: 0px; row-gap: 0px; width:100%; min-height:500px; max-height:750px; margin-top:0; } .intro-item li {list-style:none;margin-left:-15px} .intro-boxes-left-title {grid-column:1/2;grid-row:1/2} .intro-boxes-left-headline {grid-column:1/2;grid-row:2/3} .intro-boxes-left-text {grid-column:1/2;grid-row:3/4} .intro-boxes-left-last {grid-column:1/2;grid-row:4/5} .intro-boxes-footer {grid-column:2/4;grid-row:8/9} .intro-boxes-right-title {grid-column:4/5;grid-row:1/2} .intro-boxes-right-headline {grid-column:4/5;grid-row:2/3} .intro-boxes-right-text {grid-column:4/5;grid-row:3/4} .intro-boxes-right-last {grid-column:4/5;grid-row:4/5} .intro-boxes-1-title1 {grid-column:2/3;grid-row:1/2;border-radius:15px 0 0 0} .intro-boxes-1-headline {grid-column:2/3;grid-row:2/3;border-radius:0} .intro-boxes-1-text {grid-column:2/3;grid-row:3/4;border-radius:0} .intro-boxes-2-title1 {grid-column:3/4;grid-row:1/2;border-radius:0 15px 0 0} .intro-boxes-2-headline {grid-column:3/4;grid-row:2/3;border-radius:0} .intro-boxes-2-text {grid-column:3/4;grid-row:3/4;border-radius:0} .intro-boxes-3-title1 {grid-column:2/3;grid-row:5/6;border-radius:0} .intro-boxes-3-headline {grid-column:2/3;grid-row:6/7;border-radius:0} .intro-boxes-3-text {grid-column:2/3;grid-row:7/8;border-radius:0 0 0 15px} .intro-boxes-4-title1 {grid-column:3/4;grid-row:5/6;border-radius:0} .intro-boxes-4-headline {grid-column:3/4;grid-row:6/7;border-radius:0} .intro-boxes-4-text {grid-column:3/4;grid-row:7/8;border-radius:0 0 15px 0} .intro-item {font-size:16px} .intro-boxes-container h2 {font-size:24px} } @media all and (max-width:979px) { .intro-boxes-container { display:grid; justify-items: stretch; align-items: stretch; justify-content: space-between; align-content: space-between; grid-template-columns: 10% 1fr 10%; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; column-gap: 0px; row-gap: 0px; width:100%; min-height:320px; margin-top:0; } .intro-item li {list-style:none;margin-left:-15px} .intro-boxes-left-title {grid-column:1/2;grid-row:1/2} .intro-boxes-left-headline {grid-column:1/2;grid-row:2/3} .intro-boxes-left-text {grid-column:1/2;grid-row:3/4} .intro-boxes-left-last {grid-column:1/2;grid-row:4/5} .intro-boxes-footer {grid-column:2/3;grid-row:16/17} .intro-boxes-right-title {grid-column:3/4;grid-row:1/2} .intro-boxes-right-headline {grid-column:3/4;grid-row:2/3} .intro-boxes-right-text {grid-column:3/4;grid-row:3/4} .intro-boxes-right-last {grid-column:3/4;grid-row:4/5} .intro-boxes-1-title1 {grid-column:2/3;grid-row:1/2;border-radius:0} .intro-boxes-1-title2 {grid-column:2/3;grid-row:1/2;border-radius:0} .intro-boxes-1-title3 {grid-column:2/3;grid-row:1/2;border-radius:0} .intro-boxes-1-headline {grid-column:2/3;grid-row:2/3;border-radius:0} .intro-boxes-1-text {grid-column:2/3;grid-row:3/4;border-radius:0} .intro-boxes-2-title1 {grid-column:2/3;grid-row:5/6;border-radius:0} .intro-boxes-2-title2 {grid-column:2/3;grid-row:5/6;border-radius:0} .intro-boxes-2-title3 {grid-column:2/3;grid-row:5/6;border-radius:0} .intro-boxes-2-headline {grid-column:2/3;grid-row:6/7;border-radius:0} .intro-boxes-2-text {grid-column:2/3;grid-row:7/8;border-radius:0} .intro-boxes-3-title1 {grid-column:2/3;grid-row:9/10;border-radius:0} .intro-boxes-3-title2 {grid-column:2/3;grid-row:9/10;border-radius:0} .intro-boxes-3-title3 {grid-column:2/3;grid-row:9/10;border-radius:0} .intro-boxes-3-headline {grid-column:2/3;grid-row:10/11;border-radius:0} .intro-boxes-3-text {grid-column:2/3;grid-row:11/12;border-radius:0} .intro-boxes-4-title1 {grid-column:2/3;grid-row:13/14;border-radius:0} .intro-boxes-4-title2 {grid-column:2/3;grid-row:13/14;border-radius:0} .intro-boxes-4-title3 {grid-column:2/3;grid-row:13/14;border-radius:0} .intro-boxes-4-headline {grid-column:2/3;grid-row:14/15;border-radius:0} .intro-boxes-4-text {grid-column:2/3;grid-row:15/16;border-radius:0} .intro-item {font-size:17px} .intro-boxes-container h2 {font-size:28px} }