diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..d3a6818 --- /dev/null +++ b/contact.html @@ -0,0 +1,182 @@ + + + + + + + + + + Contact | Web Design Erith, Bexley, South East London | Sybiltec + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ +
+ +
+
+
+
+
+

Contact Sybiltec

+
+
+
+
+

Let's work together

+
+ + + + + + + + + + +
+
+
+
+
+
+

Would You Like To Start A Project With Me?

+

Click the contact button to get in touch with your requirements

+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/styles.css b/styles.css index d3fd987..e85e7c3 100644 --- a/styles.css +++ b/styles.css @@ -2,6 +2,15 @@ * { box-sizing: border-box; } +/* iframe styling */ +body { + margin: 0; +} +iframe { + border-width: 0px; + width: 100%; + height: 1200px; +} /* For mobile phones: */ [class*="col-"] { width: 100%; @@ -306,7 +315,7 @@ hr { background-image: linear-gradient(90deg, #791E89, rgb(204, 0, 0, 0.8)); background-size: cover; background-repeat: no-repeat; - padding: 100px 20px; + padding: 50px 20px; } @media screen and (max-width: 767px) { .hero { diff --git a/styles.min.css b/styles.min.css index 3ce4a77..b328ea9 100644 --- a/styles.min.css +++ b/styles.min.css @@ -1 +1 @@ -@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap);.dropdown,.topnav{overflow:hidden}#caption,.dropdown .dropbtn,a,h1,h2,h3,h4,h5,h6,li,p,q{font-family:Lato,sans-serif}.dropdown-content a,.topnav a,a{text-decoration:none}.nav ul,body{margin:0}.clients video,.hero img{filter:drop-shadow(0px 4px 40px rgba(0, 0, 0, .25))}.arrow-right,.close{right:35px}.dot,.myImg,.next,.prev{cursor:pointer}*{box-sizing:border-box}[class*=col-]{width:100%;float:left;padding:20px 0}.center img,.myPortfolio img,.mySlides img,[class*=col-] img{max-width:100%}.row{padding:30px 0 20px}.row-2::after,.row::after{content:"";clear:both;display:table}html{scroll-behavior:smooth}h1,h2,h3,h4,h5,h6{font-weight:700}a,li,p,q{font-weight:400}h1{font-size:60px}h2{font-size:36px}h3{font-size:24px}h4,li,p,q{font-size:16px}li,p,q{color:#3a3a3a;line-height:1.5rem}hr{width:50px;height:5px;border:none;background:linear-gradient(90deg,#791e89,rgb(204,0,0,.8))}.container-1140{max-width:1140px;margin:auto}.container-1080{max-width:1080px;margin:auto}.container-1000{max-width:1000px;margin:auto}.container-700{max-width:700px;margin:auto}.header .logo{text-align:left}.center,.certifications,.clients,.contact .col-4,.footer .logo,.nav .menu,.topnav a{text-align:center}.header .logo img{max-width:250px}.header .row{padding:0}.dropdown .dropbtn,.topnav a{padding:10px 16px;color:#791e89;font-size:16px}.topnav a{float:left;display:block}.topnav a:hover{color:#000}.topnav .icon{display:none}.dropdown{float:left}.dropdown .dropbtn{border:none;outline:0;background-color:inherit;margin:0}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.dropdown-content a{float:none;color:#791e89;padding:12px 16px;display:block;text-align:left}@media screen and (min-width:600px){.dropdown:hover .dropdown-content{display:block}}.topnav .fa-solid.fa-angle-down{font-size:16px;color:#791e89;padding-left:6px}.topnav .fas.fa-bars{font-size:16px;color:#fff}.show{display:block}.nav{padding:10px}.nav li{display:inline}.nav ul{list-style-type:none;padding:0}.footer a,.footer p,.hero h1,.hero h4,.hero p,.menu-item a{color:#fff}.hero{background-color:transparent;background-image:linear-gradient(90deg,#791e89,rgb(204,0,0,.8));background-size:cover;background-repeat:no-repeat;padding:100px 20px}.clients,.contact{background:linear-gradient(90deg,#791e89,rgb(204,0,0,.8))}@media screen and (max-width:767px){.dropdown .dropbtn,.topnav a,.topnav a:not(:first-child){display:none}.topnav a.icon{float:right;display:block;background-color:#791e89}.topnav.responsive,.topnav.responsive .dropdown-content{position:relative}.topnav.responsive a.icon{position:absolute;right:0;top:0;background-color:#791e89}.topnav.responsive a{float:none;display:block;text-align:left}.topnav.responsive .dropdown{float:none}.topnav.responsive .dropdown .dropbtn{display:block;width:100%;text-align:left}.hero{background-image:linear-gradient(90deg,#791e89,rgb(204,0,0,.8))}}.hero img{border-radius:500px;border:8px solid #d5bb32;width:250px;max-width:100%}.section{padding:20px}.portfolio h2{margin-top:0}.testimonials{padding-top:60px}.testimonials img{height:80px;padding-top:16px}.contact h3,.contact p{color:#fff;margin-top:0}.btn-primary:hover,.btn-secondary:hover,.footer{background-color:#000;color:#fff}@media only screen and (min-width:768px){.col-1{width:8.33%}.col-2{width:16.66%}.col-3{width:25%}.col-4{width:33.33%}.col-5{width:41.66%}.col-6{width:50%}.col-7{width:58.33%}.col-8{width:66.66%}.col-9{width:75%}.col-10{width:83.33%}.col-11{width:91.66%}.col-12{width:100%}[class*=col-]{padding:20px}.nav{float:right}.footer h4{text-align:left}}.footer i{padding-right:10px;color:#fff}.copyright a,.section svg,i{color:#791e89}.footer img{padding:5px 0;max-height:70px}.grey{background-color:#f6f6f6}.violet{background-color:#791e89}.shadow-box,.shadow-box-2{background-color:#fff;border-radius:12px}.shadow-box{box-shadow:0 10px 20px 0 rgba(0,0,0,.07);padding:20px}.blog-card,.offer-card,.shadow-box-2{box-shadow:0 4px 40px 0 rgba(121,29,136,.13)}.shadow-box-2{margin:40px 0}.btn-cnt,.btn-primary{border-radius:6px}@media only screen and (max-width:768px){.shadow-box-2 .col-5{padding:0 0 20px}.shadow-box-2 .col-7{padding:0 30px;text-align:left}}.blog-card:hover,.offer-card:hover,.shadow-box-2:hover{box-shadow:0 4px 40px 0 rgba(121,29,136,.25);transition:box-shadow 1s}i{font-size:40px}.left-align{margin-left:0}.btn-cnt{background-color:#015595;color:#fff;padding:15px 40px;text-decoration:none;margin-top:30px}.btn-primary,.btn-secondary{background-color:#d5bb32;color:#000;padding:15px 40px;margin-top:30px;text-align:center;text-decoration:none}.btn-cnt:hover{background-color:#27a1da}.btn-secondary{border:1px solid #d5bb32;border-radius:6px}.close,[class^=arrow]{color:#f1f1f1;transition:.3s}.padding-btn,.padding-top{padding-top:30px}.padding-bottom,.padding-btn{padding-bottom:30px}@media only screen and (max-width:479px){.btn-cnt,.btn-contact,.btn-primary,.btn-secondary{margin-top:0;width:100%;display:block}.padding-btn{padding-top:10px;padding-bottom:20px}}::-moz-selection{color:#fff;background:#d5bb32}::selection{color:#fff;background:#d5bb32}.videoWrapper{position:relative;padding-bottom:56.25%;height:0}.videoWrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}.Custom-Polaris-Icon{display:block;height:4rem;width:4rem;max-height:100%;max-width:100%;margin:auto}.Custom-Polaris-Icon__Svg{position:relative;display:block;width:100%;max-width:100%;max-height:100%;fill:#791E89}@media screen and (min-width:768px){.smaller{font-size:24px}}.section svg{font-size:36px}.footer svg{color:#fff;font-size:30px;margin-right:10px}.myImg{border-radius:5px;transition:.3s;width:100%;max-width:250px;padding-bottom:20px}.myImg:hover{opacity:.7}.modal{display:none;position:fixed;z-index:1;padding-top:20px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.9)}#caption,.modal-content{margin:auto;display:block}.close,.next,.prev,[class^=arrow]{position:absolute;font-weight:700}.modal-content{max-height:90%}#caption{width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0}#caption,.modal-content{-webkit-animation-name:zoom;-webkit-animation-duration:.6s;animation-name:zoom;animation-duration:.6s}@-webkit-keyframes zoom{from{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes zoom{from{transform:scale(0)}to{transform:scale(1)}}.close{top:15px;font-size:40px}.close:focus,.close:hover,[class^=arrow]:focus,[class^=arrow]:hover{color:#bbb;text-decoration:none;cursor:pointer}[class^=arrow]{top:50%;font-size:28px}.arrow-left{left:35px}@media only screen and (max-width:700px){.modal-content{max-height:none;max-width:80%}.modal{padding-top:100px}.arrow-left,.arrow-right{top:44%}.arrow-left{left:5px}.arrow-right{right:5px}.myImg{margin:auto}}.blog-card-text,.offer-card{padding:30px}.design{justify-content:space-between;display:flex;align-items:center;flex-wrap:wrap}.myPortfolio,.mySlides{display:none;text-align:center}.blog-card,.offer-card{border-radius:12px}.blog-card img{border-radius:12px 12px 0 0}@media only screen and (max-width:767px){.header .logo,[class*=col-]{text-align:center}.nav,.row{padding:0}h1{font-size:30px}h2{font-size:25px}h3{font-size:18px}.header{padding:0 20px}.header .logo img{max-width:150px}.header .col-10,.header .col-2{padding-bottom:10px}.partners img{max-width:200px}}.slideshow-container{position:relative;margin:60px auto;background:#fff;box-shadow:0 10px 20px 0 rgba(0,0,0,.07);border-radius:12px;padding-top:10px;padding-bottom:10px}.slideshow-container-portfolio{position:relative;margin:auto;background-color:#fff;box-shadow:0 4px 40px 0 rgba(121,29,136,.5)}.mySlides{margin:60px 60px 0}.next,.prev{top:50%;width:auto;margin-top:-30px;padding:16px;color:#791e89;font-size:20px;border-radius:0 3px 3px 0;user-select:none}.numbertext,.text{color:#f2f2f2;padding:8px 12px;position:absolute}.next{position:absolute;right:0;border-radius:3px 0 0 3px}.next:hover,.prev:hover{background-color:rgba(0,0,0,.8)}.text{font-size:15px;bottom:8px;width:100%;text-align:center}.numbertext{font-size:12px;top:0}.dot-container{text-align:center;padding-bottom:20px}.dot{height:8px;width:8px;margin:0 2px;background-color:rgb(121 30 137 / 25%);border-radius:50%;display:inline-block;transition:background-color .6s}.active,.dot:hover{background-color:#791e89!important}q{font-style:italic}.fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}@keyframes fade{from{opacity:.4}to{opacity:1}} \ No newline at end of file +@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap);.dropdown,.topnav{overflow:hidden}#caption,.dropdown .dropbtn,a,h1,h2,h3,h4,h5,h6,li,p,q{font-family:Lato,sans-serif}.dropdown-content a,.topnav a,a{text-decoration:none}.nav ul,body{margin:0}.clients video,.hero img{filter:drop-shadow(0px 4px 40px rgba(0, 0, 0, .25))}.arrow-right,.close{right:35px}.dot,.myImg,.next,.prev{cursor:pointer}*{box-sizing:border-box}iframe{border-width:0;width:100%;height:1200px}[class*=col-]{width:100%;float:left;padding:20px 0}.center img,.myPortfolio img,.mySlides img,[class*=col-] img{max-width:100%}.row{padding:30px 0 20px}.row-2::after,.row::after{content:"";clear:both;display:table}html{scroll-behavior:smooth}h1,h2,h3,h4,h5,h6{font-weight:700}a,li,p,q{font-weight:400}h1{font-size:60px}h2{font-size:36px}h3{font-size:24px}h4,li,p,q{font-size:16px}li,p,q{color:#3a3a3a;line-height:1.5rem}hr{width:50px;height:5px;border:none;background:linear-gradient(90deg,#791e89,rgb(204,0,0,.8))}.container-1140{max-width:1140px;margin:auto}.container-1080{max-width:1080px;margin:auto}.container-1000{max-width:1000px;margin:auto}.container-700{max-width:700px;margin:auto}.header .logo{text-align:left}.center,.certifications,.clients,.contact .col-4,.footer .logo,.nav .menu,.topnav a{text-align:center}.header .logo img{max-width:250px}.header .row{padding:0}.dropdown .dropbtn,.topnav a{padding:10px 16px;color:#791e89;font-size:16px}.topnav a{float:left;display:block}.topnav a:hover{color:#000}.topnav .icon{display:none}.dropdown{float:left}.dropdown .dropbtn{border:none;outline:0;background-color:inherit;margin:0}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.dropdown-content a{float:none;color:#791e89;padding:12px 16px;display:block;text-align:left}@media screen and (min-width:600px){.dropdown:hover .dropdown-content{display:block}}.topnav .fa-solid.fa-angle-down{font-size:16px;color:#791e89;padding-left:6px}.topnav .fas.fa-bars{font-size:16px;color:#fff}.show{display:block}.nav{padding:10px}.nav li{display:inline}.nav ul{list-style-type:none;padding:0}.footer a,.footer p,.hero h1,.hero h4,.hero p,.menu-item a{color:#fff}.hero{background-color:transparent;background-image:linear-gradient(90deg,#791e89,rgb(204,0,0,.8));background-size:cover;background-repeat:no-repeat;padding:50px 20px}.clients,.contact{background:linear-gradient(90deg,#791e89,rgb(204,0,0,.8))}@media screen and (max-width:767px){.dropdown .dropbtn,.topnav a,.topnav a:not(:first-child){display:none}.topnav a.icon{float:right;display:block;background-color:#791e89}.topnav.responsive,.topnav.responsive .dropdown-content{position:relative}.topnav.responsive a.icon{position:absolute;right:0;top:0;background-color:#791e89}.topnav.responsive a{float:none;display:block;text-align:left}.topnav.responsive .dropdown{float:none}.topnav.responsive .dropdown .dropbtn{display:block;width:100%;text-align:left}.hero{background-image:linear-gradient(90deg,#791e89,rgb(204,0,0,.8))}}.hero img{border-radius:500px;border:8px solid #d5bb32;width:250px;max-width:100%}.section{padding:20px}.portfolio h2{margin-top:0}.testimonials{padding-top:60px}.testimonials img{height:80px;padding-top:16px}.contact h3,.contact p{color:#fff;margin-top:0}.btn-primary:hover,.btn-secondary:hover,.footer{background-color:#000;color:#fff}@media only screen and (min-width:768px){.col-1{width:8.33%}.col-2{width:16.66%}.col-3{width:25%}.col-4{width:33.33%}.col-5{width:41.66%}.col-6{width:50%}.col-7{width:58.33%}.col-8{width:66.66%}.col-9{width:75%}.col-10{width:83.33%}.col-11{width:91.66%}.col-12{width:100%}[class*=col-]{padding:20px}.nav{float:right}.footer h4{text-align:left}}.footer i{padding-right:10px;color:#fff}.copyright a,.section svg,i{color:#791e89}.footer img{padding:5px 0;max-height:70px}.grey{background-color:#f6f6f6}.violet{background-color:#791e89}.shadow-box,.shadow-box-2{background-color:#fff;border-radius:12px}.shadow-box{box-shadow:0 10px 20px 0 rgba(0,0,0,.07);padding:20px}.blog-card,.offer-card,.shadow-box-2{box-shadow:0 4px 40px 0 rgba(121,29,136,.13)}.shadow-box-2{margin:40px 0}.btn-cnt,.btn-primary{border-radius:6px}@media only screen and (max-width:768px){.shadow-box-2 .col-5{padding:0 0 20px}.shadow-box-2 .col-7{padding:0 30px;text-align:left}}.blog-card:hover,.offer-card:hover,.shadow-box-2:hover{box-shadow:0 4px 40px 0 rgba(121,29,136,.25);transition:box-shadow 1s}i{font-size:40px}.left-align{margin-left:0}.btn-cnt{background-color:#015595;color:#fff;padding:15px 40px;text-decoration:none;margin-top:30px}.btn-primary,.btn-secondary{background-color:#d5bb32;color:#000;padding:15px 40px;margin-top:30px;text-align:center;text-decoration:none}.btn-cnt:hover{background-color:#27a1da}.btn-secondary{border:1px solid #d5bb32;border-radius:6px}.close,[class^=arrow]{color:#f1f1f1;transition:.3s}.padding-btn,.padding-top{padding-top:30px}.padding-bottom,.padding-btn{padding-bottom:30px}@media only screen and (max-width:479px){.btn-cnt,.btn-contact,.btn-primary,.btn-secondary{margin-top:0;width:100%;display:block}.padding-btn{padding-top:10px;padding-bottom:20px}}::-moz-selection{color:#fff;background:#d5bb32}::selection{color:#fff;background:#d5bb32}.videoWrapper{position:relative;padding-bottom:56.25%;height:0}.videoWrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}.Custom-Polaris-Icon{display:block;height:4rem;width:4rem;max-height:100%;max-width:100%;margin:auto}.Custom-Polaris-Icon__Svg{position:relative;display:block;width:100%;max-width:100%;max-height:100%;fill:#791E89}@media screen and (min-width:768px){.smaller{font-size:24px}}.section svg{font-size:36px}.footer svg{color:#fff;font-size:30px;margin-right:10px}.myImg{border-radius:5px;transition:.3s;width:100%;max-width:250px;padding-bottom:20px}.myImg:hover{opacity:.7}.modal{display:none;position:fixed;z-index:1;padding-top:20px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.9)}#caption,.modal-content{margin:auto;display:block}.close,.next,.prev,[class^=arrow]{position:absolute;font-weight:700}.modal-content{max-height:90%}#caption{width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0}#caption,.modal-content{-webkit-animation-name:zoom;-webkit-animation-duration:.6s;animation-name:zoom;animation-duration:.6s}@-webkit-keyframes zoom{from{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes zoom{from{transform:scale(0)}to{transform:scale(1)}}.close{top:15px;font-size:40px}.close:focus,.close:hover,[class^=arrow]:focus,[class^=arrow]:hover{color:#bbb;text-decoration:none;cursor:pointer}[class^=arrow]{top:50%;font-size:28px}.arrow-left{left:35px}@media only screen and (max-width:700px){.modal-content{max-height:none;max-width:80%}.modal{padding-top:100px}.arrow-left,.arrow-right{top:44%}.arrow-left{left:5px}.arrow-right{right:5px}.myImg{margin:auto}}.blog-card-text,.offer-card{padding:30px}.design{justify-content:space-between;display:flex;align-items:center;flex-wrap:wrap}.myPortfolio,.mySlides{display:none;text-align:center}.blog-card,.offer-card{border-radius:12px}.blog-card img{border-radius:12px 12px 0 0}@media only screen and (max-width:767px){.header .logo,[class*=col-]{text-align:center}.nav,.row{padding:0}h1{font-size:30px}h2{font-size:25px}h3{font-size:18px}.header{padding:0 20px}.header .logo img{max-width:150px}.header .col-10,.header .col-2{padding-bottom:10px}.partners img{max-width:200px}}.slideshow-container{position:relative;margin:60px auto;background:#fff;box-shadow:0 10px 20px 0 rgba(0,0,0,.07);border-radius:12px;padding-top:10px;padding-bottom:10px}.slideshow-container-portfolio{position:relative;margin:auto;background-color:#fff;box-shadow:0 4px 40px 0 rgba(121,29,136,.5)}.mySlides{margin:60px 60px 0}.next,.prev{top:50%;width:auto;margin-top:-30px;padding:16px;color:#791e89;font-size:20px;border-radius:0 3px 3px 0;user-select:none}.numbertext,.text{color:#f2f2f2;padding:8px 12px;position:absolute}.next{position:absolute;right:0;border-radius:3px 0 0 3px}.next:hover,.prev:hover{background-color:rgba(0,0,0,.8)}.text{font-size:15px;bottom:8px;width:100%;text-align:center}.numbertext{font-size:12px;top:0}.dot-container{text-align:center;padding-bottom:20px}.dot{height:8px;width:8px;margin:0 2px;background-color:rgb(121 30 137 / 25%);border-radius:50%;display:inline-block;transition:background-color .6s}.active,.dot:hover{background-color:#791e89!important}q{font-style:italic}.fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}@keyframes fade{from{opacity:.4}to{opacity:1}} \ No newline at end of file