/* =============================================== **************** 20 COLOR *************** =============================================== */ .black,.head a.black { background-color: #121212; color: #fff; } .head a.black:hover { color: #eee; } .gray { background-color: #a9a9a9; color: #222; } .maroon { background-color: #613A43; color: #fff; } .red { background-color: rgb(255,65,54); color: #fff; } .pink { background-color: #e6194b; color: #fff; } .brown { background-color: #9A6324; color: #fff; } .tan { background-color: #fffac8; color: #fff; } .orange { background-color: #f58231; color: #fff; } .green { background-color: #3cb44b; color: #fff; } .lime { background-color: #bfef45; color: #222; } .olive { background-color: #808000; color: #fff; } .yellow { background-color: #ffe119; color: #fff; } .navy { background-color: #135589; color: #fff; } .blue { background-color: #2A93D5; color: #fff; } .purple { background-color: #911eb4; color: #fff; } .fuchsia { background-color: #e6beff; color: #fff; } .teal { background-color: #469990; color: #fff; } .aqua { background-color: #3DDAD7; color: #fff; } .silver { background-color: #e6e6e6; color: #333; } .white, .white-all article { background-color: #fefefe; color: #222; } .whiteF { color: #fff; } .blackF { color: #222; } .greyF { color: #ccc; } .wall { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -1; } /* =============================================== **************** 3 FONTS *************** =============================================== */ /* @font-face { font-family: serious; src: url(fonts/TheLightFont.otf);} */ @font-face { font-family: 'fontello'; src: url('fontello/dashbod.eot?44949982'); src: url('fontello/dashbod.eot?44949982#iefix') format('embedded-opentype'), url('fontello/dashbod.woff?44949982') format('woff'), url('fontello/dashbod.ttf?44949982') format('truetype'), url('fontello/dashbod.svg?44949982#dashbod') format('svg'); font-weight: normal; font-style: normal; } .fun { font-family: fun; } .icons { font-family: fontello; } /* =============================================== **************** SPECIFIC *************** =============================================== */ * { box-sizing: border-box;} html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.3em; background-color: #fefefe; color: #222; margin: 0px; overflow-x: hidden; } a { text-decoration: none; } figure { margin: 15px 0px; } h1,h2,h3,h4,h5,h6 { margin: 0px; line-height: 1.5em; } h1 { font-size: 2.5em; } h2 { font-size: 1.8em; } h3 { font-size: 1.25em; } h4 { font-size: 1.2em; } h5 { font-size: 1.1em; } h6 { font-size: 1em; } p { padding: 0.2em 0px 0.5em;margin: 0px; } .hidden { display: none; } .center { text-align: center; } .right { text-align: right; } .left { text-align: left; } .designed { display: block; text-align: center; padding: 35px 0px 0px; font-size: 0.85em; } .designed,.designed a { color: #9e9e9e; font-weight: lighter; } .shadow, .shadow-all>article { box-shadow: 4px 4px 5px 2px rgba(10,10,10, 0.2); } .button { padding: 10px 25px; border:0px; margin:10px 20px 30px 0px;} .pad,.pad-all article { padding: 10px 20px 10px; } .spacer { padding: 40px 0px;} .stroke { border:0px; height: 2px; width: 80px; margin: 10px 0px; } .circle { border-radius: 50%; } .curveout { border-radius: 8px;} /*standard padding : 10px and 20px*/ /* =============================================== ************** HORIZONTAL SIZE ************** =============================================== */ .one { width: 86vw; margin: auto; } .ones, .twos, .twos2, .twos2R, .twos3, .twos3R, .twos4, .twos4R ,.threes, .threes2, .threes2R, .threes2C, .threes3, .threes3R, .threes3C, .threes3CR ,.fours, .fours2, .fours2R, .fours2C, .fours2CR, .fives, .fives2, .fives2R, .sixes { display: grid; justify-content: center; grid-gap: 30px 2vw; } .ones { grid-template-columns: 86vw; } .twos { grid-template-columns: 42vw 42vw; } .twos2 { grid-template-columns: 30vw 54vw; } .twos2R { grid-template-columns: 54vw 30vw; } .twos3 { grid-template-columns: 22vw 62vw; } .twos3R { grid-template-columns: 62vw 22vw; } .twos4 { grid-template-columns: 12vw 72vw; } .twos4R { grid-template-columns: 72vw 12vw; } .threes { grid-template-columns: 27.3vw 27.3vw 27.3vw;} .threes2 { grid-template-columns: 27.3vw 27.3vw 27.3vw;} .threes2R { grid-template-columns: 27.3vw 27.3vw 27.3vw;} .threes2C { grid-template-columns: 27.3vw 27.3vw 27.3vw;} .threes3 { grid-template-columns: 27.3vw 27.3vw 27.3vw;} .threes3R { grid-template-columns: 27.3vw 27.3vw 27.3vw;} .threes3C { grid-template-columns: 27.3vw 27.3vw 27.3vw;} .threes3CR { grid-template-columns: 27.3vw 27.3vw 27.3vw;} .fours { grid-template-columns: 20vw 20vw 20vw 20vw; } .fours2 { grid-template-columns: 20vw 20vw 20vw 20vw; } .fours2R { grid-template-columns: 20vw 20vw 20vw 20vw; } .fours2C { grid-template-columns: 20vw 20vw 20vw 20vw; } .fours2CR { grid-template-columns: 20vw 20vw 20vw 20vw; } .fives { grid-template-columns: 15.6vw 15.6vw 15.6vw 15.6vw 15.6vw; } .fives2 { grid-template-columns: 15.6vw 15.6vw 15.6vw 15.6vw 15.6vw; } .fives2R { grid-template-columns: 15.6vw 15.6vw 15.6vw 15.6vw 15.6vw; } .sixes { grid-template-columns: 12.6666vw 12.6666vw 12.6666vw 12.6666vw 12.6666vw 12.6666vw; } /*FULLY RESPONSIVE*/ .layones, .laytwos, .laytwos2, .laytwos2R, .laytwos3, .laytwos3R, .laytwos3R, .laythrees, .laythrees2, .laythrees2R, .laythrees2C , .laythrees3, .laythrees3R, .laythrees3C, .laythrees3CR, .layfours, .layfours2, .layfours2R, .layfours2C, .layfours2CR , .layfives, .layfives2, .layfives2R, .layfives2C, .laysixes { display: grid; justify-content: space-between; } .layones { display: grid; grid-template-columns: 100%; } .laytwos { display: grid; grid-template-columns: 49% 49%; } .laytwos2 { display: grid; grid-template-columns: 37% 61%; } .laytwos2R { display: grid; grid-template-columns: 66% 32%; } .laytwos3 { display: grid; grid-template-columns: 23% 75%; } .laytwos3R { display: grid; grid-template-columns: 75% 23%; } .laytwos4 { display: grid; grid-template-columns: 13% 85%; } .laytwos4R { display: grid; grid-template-columns: 85% 13%; } .laythrees { display: grid; grid-template-columns: 32% 32% 32%; } .laythrees2 { display: grid; grid-template-columns: 23% 37% 37%; } .laythrees2R { display: grid; grid-template-columns: 37% 37% 23%; } .laythrees2C { display: grid; grid-template-columns: 37% 23% 37%; } .laythrees3 { display: grid; grid-template-columns: 13% 23% 61%; } .laythrees3R { display: grid; grid-template-columns: 61% 23% 13%; } .laythrees3C { display: grid; grid-template-columns: 23% 13% 61%; } .laythrees3CR { display: grid; grid-template-columns: 61% 13% 23%; } .layfours { display: grid; grid-template-columns: 23% 23% 23% 23%; margin:30px auto; } .layfours2 { display: grid; grid-template-columns: 13% 23% 23% 37%; margin:30px auto; } .layfours2R { display: grid; grid-template-columns: 38% 23% 23% 13%; margin:30px auto; } .layfours2C { display: grid; grid-template-columns: 23% 13% 38% 23%; margin:30px auto; } .layfours2CR { display: grid; grid-template-columns: 23% 38% 13% 23%; margin:30px auto; } .layfives { display: grid; grid-template-columns: 19% 19% 19% 19% 19%; grid-gap: 20px; margin:30px auto; } .layfives2 { display: grid; grid-template-columns: 13% 13% 23% 23% 23%; grid-gap: 20px; margin:30px auto; } .layfives2R { display: grid; grid-template-columns: 23% 23% 23% 13% 13%; grid-gap: 20px; margin:30px auto; } .layfives2C { display: grid; grid-template-columns: 13% 23% 23% 23% 13%; grid-gap: 20px; margin:30px auto; } .laysixes { display: grid; grid-template-columns: 15% 15% 15% 15% 15% 15%; grid-gap: 20px; margin:30px auto; } /* =============================================== ************** VERTICAL SIZE *************** =============================================== */ .vone, .vones article { min-height: 12vw; } .vtwo, .vtwos article { min-height: 16vw; } .vthree, .vthrees article { min-height: 20vw; } .vfour, .vfours article { min-height: 27vw; } .vfive , .vfives article { min-height: 30vw; } .vsix, .vsixes article { min-height: 53vw; } /* =============================================== **************** NAVIGATION *************** =============================================== */ .hair { min-height: 40px; line-height: 35px; font-size: 14px; padding: 0px 10px; color: #888; } .hair a { color: #888; padding-left: 10px; } .hair .socials { text-align: left; } .hair .contact { text-align: right; } .head { height: 50px; position: sticky; z-index:99;} .head .logo { left: 0px; font-size:24px; color:#232323; font-weight: lighter; padding:0px 20px; height: 50px; line-height: 50px; } .head nav { width:auto; float: right; list-style-type: none; padding: 0px; margin: 0px; font-weight: lighter; } .head nav ul { display:table; padding: 0px; margin: 0px; } .head nav ul li { float:left; list-style:none; position: relative; padding: 0px; margin: 0px; } .head nav ul li a { color:#363636; font-size:18px; height: 50px; line-height: 50px; padding:0px 20px; display:inline-block; transition: all 0.5s ease 0s;} .head nav ul li a:hover { color:#000; transition: all 0.5s ease 0s; } .head label { width:30px; padding: 0px 15px; line-height: 50px; font-size: 40px; float: right; } .head nav ul li ul { float:left; display: none;} .head nav ul li:hover ul{ display: block; position: absolute; top: 50px; padding: 0px; margin: 0px;} .head nav li li a { display: block; padding: 0px 20px; min-width: 100px; } .head input[type=checkbox],.head label{display:none;} .head li { position: relative; } .head nav nav { float: none; } .clickdrop { z-index:100; position:relative; display: inline-block;} .clickdrop>div { padding: 0px;} .clickdrop>input[type=checkbox] { top:0; opacity:0; display:block; padding:0; margin:0; border:0; position:absolute; height:100%; width:100%;} .clickdrop>input:hover { cursor:pointer;} .clickdrop>input:checked:after { transform: scaleX(1); -webkit-transform: scaleX(1);} .clickdrop>input:checked ~ ul { transform: scaleY(1); -webkit-transform: scaleY(1);} .clickdrop>ul{ display:block; position: fixed; right: 0px; height:auto; transform: scaleY(0); transform-origin: top right; transition-duration: 0.01s; -webkit-transform: scaleY(0); -webkit-transform-origin: top right; -webkit-transition-duration: 0.01s; margin:0; padding:0; list-style-type: none; min-width: 250px;} .clickdrop>ul li { word-break: keep-all; white-space:nowrap; display:block; position:relative;} .head nav .clickdrop ul li { float: none;} .sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } /* =============================================== **************** INFO *************** =============================================== */ .welcome { padding:20vh 0px 0px; min-height: 80vh; } .welcome article { width: 370px; padding: 50px; margin: 0px 50px 0px; } .welcome b { font-style: italic; } .clients { text-align: center; } .clients img { height: 100px; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); margin: 20px 40px; } .clients img:hover { -webkit-filter:grayscale(0%); filter: grayscale(0%); } /* =============================================== **************** CONTACT & FORM *************** =============================================== */ input[type="file"] { opacity: 0; display:none; } .form input, .form select, .form textarea { border: 1px solid #a9a9a9; height: 24px; line-height: 24px; padding: 3px 15px; margin: 0px 8px 16px 0px; vertical-align: top; } .form label { height: 26px; line-height: 26px; min-width: 120px; display: inline-block;} .form textarea { height:128px; width: 100%; } .form input[type="submit"]{ padding: 0px 24px; line-height: 32px; height:32px; } .contact { width: 100%; margin: 0px; } .contact form { display: grid; margin:0px auto; grid-template-columns: repeat(2, [col] 49% ); grid-template-rows: repeat(3, [row] auto ); justify-content: space-between; } .contact form .twor { grid-column: col / span 2; grid-row: row 3; } .contact label { border: 0px; height: 26px; padding: 3px 17px; margin: 10px 0px; vertical-align: top; min-width: 36%; display: inline-block; } .contact input, .contact select { border: 1px solid #a9a9a9; height: 24px; padding: 3px 15px; margin: 0px 0px 20px; vertical-align: top; min-width: 36%; } .contact textarea { grid-column: col / span 2; border: 1px solid #a9a9a9; height: 96px; padding: 5px 15px; margin: 0px 0px 20px; vertical-align: top; min-width: 78%; line-height: 24px; } .contact input[type="submit"],.contact input[type="reset"],.contact button,.contact input[type="button"] { border: 0px; height: 32px; text-indent: 0px; padding: 0px 15px; vertical-align: bottom; min-width: 25% } .contact input[type="radio"],.contact input[type="checkbox"],.contact input[type="color"] { min-width: 24px; margin: 13px 15px; padding: 0px; border: 0px; width: 24px;} .contact input[type="search"] { height: 32px; } .contact input.danger,.contact select.danger { border: 1px solid #e6194b; color: #e6194b; height: 24px; padding: 3px 15px; margin: 10px 0px; } .contact input.success,.contact select.success { border: 1px solid #3cb44b; color: #3cb44b; height: 24px; padding: 3px 15px; margin: 10px 0px; } /* =============================================== **************** ACCORDIAN *************** =============================================== */ .accordian { position: relative; padding: 0; margin: 0; padding-bottom: 0px; padding-top: 0px; border-top: 0px dotted #dce7eb; } .accordian { border-top: none; animation-delay: 1s; } .accordian header { padding-right: 38px; cursor: pointer;} .accordian main { position: relative; overflow: hidden; opacity: 1; padding: 14px 0px 0px; z-index: 2; transition: all 500ms ease; } .accordian main,.accordian i:before,.accordian i:after { transition: all 0.25s ease-in-out; } .accordian i { position: absolute; right: 5vw; top:0px; height: 52px; line-height: 52px; width: 38px; text-align: center; font-size: 35px; } /* .accordian i:before, .accordian i:after { } */ .accordian i:before { content : "-"; } /* .accordian i:after { } */ .accordian>input[type=checkbox] { position: absolute; cursor: pointer; width: 38px; height: 52px; line-height: 52px; right: 5vw; top:0px; z-index: 1; opacity: 0; margin:0px; font-size: 35px; } .accordian>input[type=checkbox]:checked ~ main { margin-top: 0; max-height: 0; opacity: 0; } .accordian>input[type=checkbox]:checked ~ i:before { margin-top: 0px; content : "+"; } .accordian>input[type=checkbox]:checked ~ i:after { margin-top: 0px; } /* =============================================== **************** TABS *************** =============================================== */ .tabs { display: flex; flex-wrap: wrap; } .tabs>input[type=radio] { position: absolute; opacity: 0;} .tabs>label { display: inline-block; padding: 10px 20px; cursor: pointer; color: #7f7f7f; transition: background 0.1s, color 0.1s; } .tabs>label:hover { color: #555;} .tabs>input[type=radio]:focus + label { box-shadow: inset 0px 0px 0px 3px #2aa1c0; z-index: 1;} .tabs>input[type=radio]:checked + label { background-color: #f7f7f7; color: #222; } .tabs>main { display: none; padding: 10px 20px 20px; background-color: #f7f7f7; order: 99; width: 100%; min-height: 80%;} .tabs>input[type=radio]:checked + label + main { display: block;} /* =============================================== **************** TABLE *************** =============================================== */ .table { border-collapse: collapse; width: 100%;} .table td, .table th { border: 1px solid #f7f7f7; padding: 10px; } .table tr:nth-child(even){background-color: #f7f7f7;} .table tr:hover {background-color: #ccc; color: #fff;} .table th { padding: 15px 10px; background-color: #333; color: white; text-align: left; } /* =============================================== **************** ANIMATIONS *************** =============================================== */ /*trigger animation on screen view add class*/ .fromleft { position: relative; left: 0px; -webkit-animation: moveright 4s; animation: moveright 4s;} .fromright { position: relative; right: 0px; -webkit-animation: moveleft 4s; animation: moveleft 4s;} .fromtop { position: relative; top: 0px; -webkit-animation: movedown 4s; animation: movedown 4s;} .frombottom { position: relative; bottom: 0px; -webkit-animation: moveup 4s; animation: moveup 4s;} .fadein { opacity: 1; -webkit-animation: fadein 4s; animation: fadein 4s;} .shake:hover{ animation: shake 0.5s; animation-iteration-count: infinite; } .zoomin, .zoomout { transition: transform 1s ease; } .zoomin:hover { transform: scale(1.3); } .zoomout:hover { transform: scale(0.8); } .spin { animation: spin 4s linear; animation-iteration-count: infinite; } @-webkit-keyframes moveright { from {left: -100vw;} to {left: 0px;}}@keyframes moveright { from {left: -100vw;} to {left: 0px;}} @-webkit-keyframes moveleft { from {right: -100vw;} to {right: 0px;}}@keyframes moveleft { from {right: -100vw;} to {right: 0px;}} @-webkit-keyframes movedown { from {top: -100vh;} to {top: 0px;}}@keyframes movedown { from {top: -100vh;} to {top: 0px;}} @-webkit-keyframes moveup { from {bottom: -100vh;} to {bottom: 0px;}}@keyframes moveup { from {bottom: -100vh;} to {bottom: 0px;}} @-webkit-keyframes fadein { from {opacity: 0;} to {opacity: 1;}} @keyframes fadein { from {opacity: 0;} to {opacity: 1;}} @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); }} @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }} @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);}} @-webkit-keyframes slider { 20% {margin-left: 0px;} 30% {margin-left: -100%;} 50% {margin-left: -100%;} 60% {margin-left: -200%;} 70% {margin-left: -200%;} 80% {margin-left: -300%;} 90% {margin-left: -300%;} } @keyframes slider { 20% {margin-left: 0px;} 30% {margin-left: -100%;} 50% {margin-left: -100%;} 60% {margin-left: -200%;} 70% {margin-left: -200%;} 80% {margin-left: -300%;} 90% {margin-left: -300%;} } /* =============================================== **************** EXTRAS *************** =============================================== */ .slide3, .slide4, .slide5 { overflow: hidden; } .slide3>div { width: 300%; } .slide3>div>div { width: 33.3333333333333%; } .slide4>div { width: 400%; } .slide4>div>div { width: 25%; } .slide5>div { width: 500%; } .slide5>div>div { width: 20%; } .slide3>div, .slide4>div, .slide5>div { -webkit-animation: slider 18s ease infinite; animation: slider 18s ease infinite; position: relative; } .slide3>div>div, .slide4>div>div, .slide5>div>div { float: left; height: 100%; } /* =============================================== **************** SMALL DESKTOP *************** =============================================== */ @media screen and (max-width: 1280px) { .sixes { display: grid; grid-template-columns: 27vw 27vw 27vw; grid-gap:30px 2.5vw; margin: auto; justify-content: center; } } /* =============================================== **************** TABLET *************** =============================================== */ @media screen and (max-width: 980px) { .fours { display: grid; grid-template-columns: 42vw 42vw; grid-gap: 30px 2vw; margin: auto; justify-content: center; } .fives { display: grid; grid-template-columns: 27vw 27vw 27vw 42vw 42vw; grid-gap: 20px 2vw; margin:30px auto; justify-content: center; } } /* =============================================== **************** SMALL TABLET *************** =============================================== */ @media screen and (max-width: 768px) { .shadow, .shadowall>article { box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.1); padding: 12px 4px; } .head input[type=checkbox] {position: absolute; top: 0px; left: 0px; background:none;} .head input[type=checkbox]:focus{background:none;} .head label { display:inline-block; } .head input[type=checkbox]:checked ~ nav {display:block;} .head #logo { font-size: 20px; padding:0px 10px;} .head nav { display:none; position:absolute; background-color: #f3f3f3; right:0px; left: 0px; top:50px; padding:0px; z-index:99;} .head nav ul { width:100%; float: left;} .head nav ul li { float:left; padding:0px; width:100%; display:table; position: relative;} .head nav ul li a { display:block; border-bottom: 1px solid rgba(225,225,225,0.1);} .head nav ul li a i { color:#fde428; padding-right:13px;} .head label { position: absolute; right: 0px; top: 0px; } .head nav nav { position: relative; top: 0px;} .head nav ul li:hover ul { position: relative; top: 0px; } .head li label { font-size: 15px; text-align: center;} .notablet { display: none; visibility: hidden;} } /* =============================================== **************** PHONE *************** =============================================== */ @media screen and (max-width: 560px) { .ones, .twos, .twos2, .twos2R, .twos3, .twos3R, .threes, .fours, .fives, .sixes .layones, .laytwos, .laytwos2, .laytwos2R, .laytwos3, .laytwos3R, .laythrees, .layfours, .layfives, .laysixes { display: grid; grid-template-columns: 90vw; grid-gap:30px 10px; margin: auto; justify-content: center; } .fives2 { display: grid; margin:0px auto; grid-template-columns: repeat(2, [col] 44% ); } .welcome article { width: 90vw; margin:0px auto; padding-left: 0px; padding-right: 0px; text-align: center; } .hair.twos3 { grid-template-columns: 28vw 70vw; grid-gap: 10px 2vw; } .contact { width: 96%; margin: auto; padding-left: 0px; padding-right: 0px; } .contact input[type="submit"],.contact button { width: 88vw; } .clients img { height: 60px; max-width: 80vw; margin: 20px 5px;} .nomobile { display: none; visibility: hidden;} } /* Menus Buttons Cards Forms (inputs, select, filter, labels) Lists Panels Progress bars Pagination Slide Show --- api Feed Accordian Pop Up Bread Crumbs //Have to be placed on every page also using php Animations: fade, shake, scale up, scale down, left, right, top, bottom, zoom in, zoom out; Tiny Counter aka badge Time */ /* DEFECTO ONLY CONTAINS THE ESSENTIALS TO MAKE A WEBSITE LOOK GOOD WITH MINIMAL EFFORT 1. Class names are reserved until number 10, e.g. head, head01 .... head10 2. Name without numbers are the defect 3. Make sure to override the defects for tablet and mobile version if needed 4. Follow the article structure for templates, minimise class usage A lot of classes were curated sections.css contains the styling for one section cards.css contains the styling for particular cards header.css forms.css templates.css a combination of sections and cards which match well (front.css can overide this) ULTRAX.css extends the defecto library to give an extensive library of effects of the top 24 cards, sections, effects */ /* Golden ratio :: 1.61803398875; 100 tones 38 62 ttwos2 24 76 ttwos3 14 86 ttwos4 24 38 38 tthrees2 14 24 62 tthrees3 14 24 24 38 tfours2 14 14 24 24 24 tfives2 make it prop to 86 as well pattern alernates:: twosP:even>section, twosP:odd>section; -- use existing twos & twosR, just place P at end */ /*Aspect Ratios Computers 5:4 1.25 --common until 2003 4:3 1.33 -- very common TV/Videos 3:2 1.5 16:10 1.6 -- 16:9 1.78 -- computer monitors, widescreen tv, online videos Aspect Ratio Images 1:1 -social media 5:4 1.25 4:3 1.33 7:5 1.4 3:2 1.5 16:9 1.78 Seven versions:: 100px 300px 500px 750px 1000px 1500px 2500px; */