A friend's computer repair business website

vipers-web-design · Aug 14, 2020 · ddd311e · ddd311e
1 parent cb54165
commit ddd311e
Show file tree

Hide file tree

Showing 14 changed files with 3,037 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea/*
diff --git a/.htaccess b/.htaccess
@@ -0,0 +1,51 @@
+# STRONG HTACCESS PROTECTION - make sure nothing can reach your htaccess via bot or browser
+<Files ~ "^.*\.([Hh][Tt][Aa])">
+    order allow,deny
+    Deny from all
+</Files>
+
+Options All -Indexes
+
+RewriteEngine On
+#RewriteBase /swcrepair/
+RewriteBase /
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule . index.html
+
+#FILE HEADERS SO THE BROWSER KNOWS HOW LONG TO KEEP A FILE TYPE CACHED
+<IfModule mod_headers.c>
+  # 1 YEAR
+	<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
+	 Header set Cache-Control "max-age=29030400, public"
+	</FilesMatch>
+
+	# 1 WEEK
+	<FilesMatch "\.(jpg|jpeg|png|gif|swf|svg)$">
+	 Header set Cache-Control "max-age=604800, public"
+	</FilesMatch>
+
+	# 3 HOUR
+	<FilesMatch "\.(txt|xml|js|css|php)$">
+	 Header set Cache-Control "max-age=10800"
+	</FilesMatch>
+
+	<FilesMatch "\.(js|css|xml|gz|svg)$">
+    Header append Vary: Accept-Encoding
+  </FilesMatch>
+</IfModule>
+
+# FILE EXPIRE SPECIFIC HEADER TO AGAIN HELP WITH PROPER CACHING
+<IfModule mod_expires.c>
+	ExpiresActive On
+	ExpiresByType image/jpg "access plus 30 days"
+	ExpiresByType image/jpeg "access plus 30 days"
+	ExpiresByType image/gif "access plus 30 days"
+	ExpiresByType image/png "access plus 30 days"
+	ExpiresByType text/css "access plus 1 month"
+	ExpiresByType application/pdf "access plus 1 month"
+	ExpiresByType text/x-javascript "access plus 1 month"
+	ExpiresByType application/x-shockwave-flash "access plus 1 month"
+	ExpiresByType image/x-icon "access plus 1 year"
+	ExpiresDefault "access plus 7 days"
+</IfModule>
diff --git a/_redirects b/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
diff --git a/css/base_taino.css b/css/base_taino.css
@@ -0,0 +1,45 @@
+*{box-sizing:border-box;}
+html,body{width:100%;min-height:100vh; font-size:16px;margin:0;padding:0;color:#000;background:#1D2838;}
+html{text-rendering:optimizeLegibility !important;}
+
+/*FONTS*/
+body{font-family: 'Arial', sans-serif; letter-spacing:0.1rem;}
+
+/*GENERAL RULES*/
+h1{margin:0; font-size:4rem; }
+h2{}
+h3{}
+ul{list-style-type:none;margin:0;padding:0}
+a{color:#C59952; text-decoration:none; }
+a:hover{ color:rgb(235, 148, 10);}
+.hidden{display:none;opacity:0}
+#tainomain{min-height:500px;}
+
+/*TEMPLATE*/
+header{position:relative; z-index:2; width:100%; background:rgb(13, 18, 25); text-align:center; height:80px; padding-top:50px;}
+header nav{width:96%; max-width:1200px; margin:0 auto; height:40px; }
+header nav a{height:40px; line-height:40px;display:inline-block; vertical-align:top; padding:0 12px; margin:0 0.4rem; font-size:16px; color:#123; background:#ddd; text-align:center; text-transform:uppercase; font-weight:bold; box-shadow:6px 6px #00A128; transition:all 0.1s;}
+header nav a:hover{color:#123; box-shadow:3px 3px #00FF40;}
+footer{width:100%; background:#333; color:#fff; text-align:center; height:100px; padding:20px;}
+
+/*PAGES*/
+.pagewrap{position:relative; overflow:hidden; z-index:1; margin:0 auto; min-height:80vh; width:100%; padding:4rem; font-size:20px; text-align:center; color:#fff; }
+.pagewrap:before{content:' '; position:absolute; top:0; right:0; width:40vw; height:40vw; transform:rotate(-40deg); background:url(../images/taino-cemi.svg) no-repeat top right; background-size:contain; opacity:0.4; z-index:-1;}
+.pagewrap:after{content:' '; position:absolute; top:5vh; left:5vw; width:40vw; height:40vw; transform:rotate(-30deg); background:url(../images/taino-sun.svg) no-repeat top right; background-size:contain; opacity:0.4; z-index:-1;}
+.pagewrap .content{padding:2rem; width:90%; max-width:1200px; margin:0 auto 40px auto;background:rgba(13, 18, 25,0.8); box-shadow:0px 0px 5px #00A128; border-radius:4px;}
+.home .content{border:0; background:none; box-shadow:none;}
+.home h1 span{display:block; font-size:2.5rem; font-weight:normal; font-style:italic; color:#00A128; }
+
+
+@media screen and (max-width:960px){
+    h1{margin:0 0.5rem 1rem 0.5rem; font-size:2.5rem; }
+    h2{margin:0 0.5rem 1rem 0.5rem; font-size:1.5rem;}
+    .pagewrap{padding:4rem 2rem;}
+}
+@media screen and (max-width:640px){
+    header{padding-top:30px;}
+    header nav a{margin-bottom:12px;}
+    .pagewrap{padding:4rem 0.5rem;}
+    .pagewrap:before{display:none;}
+    .pagewrap:after{display:none;}
+}
diff --git a/css/taino.css b/css/taino.css
@@ -0,0 +1,239 @@
+/* CSS Document */
+/* typography */
+h1, h2, h3, h4, h5, h6, [class*=heading-] {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 500;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  color: #151515;
+}
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, [class*=heading-] a {
+  color: inherit;
+}
+h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus, [class*=heading-] a:focus, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, [class*=heading-] a:hover {
+  color: #273aa3;
+}
+h1, .heading-1 {
+  font-size: 50px;
+  letter-spacing: .025em;
+}
+@media only screen and (min-width:768px) {
+  h1, .heading-1 {
+    font-size: 70px;
+  }
+}
+@media only screen and (min-width:992px) {
+  h1, .heading-1 {
+    font-size: 90px;
+  }
+}
+@media only screen and (min-width:1200px) {
+  h1, .heading-1 {
+    font-size: 110px;
+  }
+}
+h2, .heading-2 {
+  font-size: 36px;
+  letter-spacing: .075em;
+}
+@media only screen and (min-width:768px) {
+  h2, .heading-2 {
+    font-size: 46px;
+  }
+}
+@media only screen and (min-width:992px) {
+  h2, .heading-2 {
+    font-size: 54px;
+  }
+}
+@media only screen and (min-width:1200px) {
+  h2, .heading-2 {
+    font-size: 70px;
+  }
+}
+h3, .heading-3 {
+  font-size: 30px;
+  font-weight: 400;
+}
+@media only screen and (min-width:768px) {
+  h3, .heading-3 {
+    font-size: 34px;
+  }
+}
+@media only screen and (min-width:992px) {
+  h3, .heading-3 {
+    font-size: 40px;
+  }
+}
+@media only screen and (min-width:1200px) {
+  h3, .heading-3 {
+    font-size: 44px;
+  }
+}
+h4, .heading-4 {
+  font-size: 26px;
+  font-weight: 400;
+}
+@media only screen and (min-width:768px) {
+  h4, .heading-4 {
+    font-size: 30px;
+  }
+}
+@media only screen and (min-width:1200px) {
+  h4, .heading-4 {
+    font-size: 36px;
+  }
+}
+h5, .heading-5 {
+  font-size: 20px;
+}
+@media only screen and (min-width:768px) {
+  h5, .heading-5 {
+    font-size: 24px;
+  }
+}
+h6, .heading-6 {
+  font-size: 16px;
+}
+@media only screen and (min-width:768px) {
+  h6, .heading-6 {
+    font-size: 18px;
+  }
+}
+.heading-7 {
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: .2em;
+  color: #777;
+}
+p {
+  margin: 0;
+}
+body {
+  color: #777;
+  font: normal normal 400 15px/1.5 'Roboto', sans-serif;
+  letter-spacing: .075em;
+  overflow-x: hidden;
+}
+header {
+  position: relative;
+  background-color: #f5f5f5;
+  z-index: 15;
+}
+header #topbar .col-auto::before {
+  position: absolute;
+  content: '';
+  top: 0;
+  bottom: 0;
+  /*left: 0;*/
+  width: 100vw;
+  height: 37px;
+  background: #fff;
+  transform: skewX(16deg);
+  transform-origin: 50% 90%;
+  will-change: transform;
+  pointer-events: none;
+  z-index: -1;
+}
+header #topbar .list-inline-item {
+  font-size: 16px;
+}
+header #topbar .list-inline-item a {
+  color: #151515;
+}
+header #topbar .list-inline-item a.facebook {
+  padding: 6.5px 10.44px;
+  width: 29px;
+  height: 29px;
+  line-height: 29px;
+  background-color: #e1e1e1;
+}
+header #topbar .list-inline-item .fas {
+  margin-right: 10px;
+  color: #151515;
+}
+header #topbar .list-inline-item .fab {
+  color: #151515;
+}
+header .navbar .navbar-header {
+  position: relative;
+  max-width: 260px;
+  min-width: 200px;
+  width: 100%;
+}
+@media only screen and (min-width:1200px) {
+  header .navbar .navbar-header {
+    max-width: 325px;
+    min-width: 280px;
+  }
+}
+header .navbar .navbar-header::before {
+  position: absolute;
+  content: '';
+  /*top: 0;*/
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 122px;
+  background: #fff;
+  transform: skewX(16deg);
+  transform-origin: 50% 100%;
+  will-change: transform;
+  pointer-events: none;
+  z-index: -1;
+}
+header .navbar .navbar-brand {
+  font-size: inherit;
+}
+@media only screen and (min-width:1200px) {
+  header .navbar .navbar-brand {
+    font-size: 20px;
+  }
+}
+header .navbar .navbar-nav .nav-link {
+  font-size: 16px;
+  font-weight: 500;
+  color: #151515;
+}
+#tainomain {
+  min-height: calc(100vh - 93px - 53px);
+}
+@media only screen and (min-width:992px) {
+  #tainomain {
+    min-height: calc(100vh - 85px - 53px);
+  }
+}
+@media only screen and (min-width:1200px) {
+  #tainomain {
+    min-height: calc(100vh - 93px - 53px);
+  }
+}
+[contact] .row .contact-info * {
+  display: block;
+}
+[contact] .row .contact-info i {
+  font-size: 30px;
+}
+[contact] .row .contact-info a {
+  font-size: 15px;
+  line-height: 25px;
+  padding: 30px 0 0;
+  color: #151515;
+}
+[contact] .row .contact-info span {
+  color: #495057;
+}
+footer {
+  font-size: .9rem;
+  background-color: #263238;
+  color: #fff;
+}
+footer .footer-copyright {
+  overflow: hidden;
+  background-color: transparent;
+  color: rgba(255, 255, 255, .6);
+}
+footer a {
+  color: #fff;
+}
diff --git a/favicon.ico b/favicon.ico