change favicon

.gitignore

@@ -0,0 +1,17 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Mac files
+.DS_Store
+
+# IDE configuration
+.vscode/settings.json
+

css/main.css

@@ -38,6 +38,12 @@
     padding-right: 170px;
   }
 }
+@media screen and (min-width: 1900px) {
+  #articles, #team, .demo-header, .form-section, .feature-list, .container {
+    padding-left: 355px;
+    padding-right: 355px;
+  }
+}
 
 html {
   box-sizing: border-box;
@@ -443,7 +449,7 @@ img {
     background-image: image-set(url("../images/[email protected]") type("image/webp") 1x, url("../images/[email protected]") type("image/webp") 2x, url("../images/[email protected]") type("image/jpeg") 1x, url("../images/[email protected]") type("image/jpeg") 2x);
   }
 }
-@media screen and (min-width: 2460px) {
+@media screen and (min-width: 1900px) {
   .hero .container {
     width: 50%;
   }
@@ -517,7 +523,7 @@ img {
     margin-right: 81px;
   }
 }
-@media screen and (min-width: 2460px) {
+@media screen and (min-width: 1900px) {
   .feature:not(:last-child) {
     margin-right: 200px;
   }
@@ -592,7 +598,7 @@ img {
 }
 @media screen and (min-width: 1200px) {
   .frontend {
-    padding-left: 167px;
+    padding-left: 170px;
     padding-right: 53px;
     display: inline-flex;
     flex-direction: column;
@@ -603,14 +609,24 @@ img {
     margin-top: auto;
   }
 }
+@media screen and (min-width: 1900px) {
+  .frontend {
+    padding-left: 355px;
+  }
+}
 
 .backend {
   background-color: #fafafa;
 }
 @media screen and (min-width: 1200px) {
   .backend {
     padding-left: 40px;
-    padding-right: 167px;
+    padding-right: 170px;
+  }
+}
+@media screen and (min-width: 1900px) {
+  .backend {
+    padding-right: 355px;
   }
 }
 
@@ -747,7 +763,7 @@ img {
     column-gap: 100px;
   }
 }
-@media screen and (min-width: 2460px) {
+@media screen and (min-width: 1900px) {
   .form-section {
     background-image: url("../images/[email protected]");
     background-image: -webkit-image-set(url("../images/[email protected]") 1x, url("../images/[email protected]") 2x, url("../images/[email protected]") 1x, url("../images/[email protected]") 2x);
@@ -795,6 +811,11 @@ img {
     right: 170px;
   }
 }
+@media screen and (min-width: 1900px) {
+  .demo-header .hero-btn {
+    right: 355px;
+  }
+}
 
 .demo-basic {
   font-family: "Manrope", sans-serif;
@@ -827,6 +848,10 @@ img {
   }
 }
 
+.demo-img {
+  aspect-ratio: 354/203;
+}
+
 .demo-item {
   padding-top: 24px;
   padding-bottom: 24px;
@@ -836,6 +861,9 @@ img {
     padding-left: 18px;
     padding-right: 18px;
   }
+  .demo-item .demo-img {
+    width: 100%;
+  }
 }
 @media screen and (min-width: 1200px) {
   .demo-item {
@@ -857,6 +885,14 @@ img {
     object-position: 100%;
   }
 }
+@media screen and (min-width: 1900px) {
+  .demo-item:nth-child(odd) {
+    padding-left: 355px;
+  }
+  .demo-item:nth-child(even) {
+    padding-right: 355px;
+  }
+}
 
 .demo-text {
   font-family: "Manrope", sans-serif;
@@ -1349,6 +1385,11 @@ img {
     right: 170px;
   }
 }
+@media screen and (min-width: 1900px) {
+  #articles .btn-black {
+    right: 355px;
+  }
+}
 
 .articles-title {
   font-family: "DIN Pro", "DIN Pro fallback", sans-serif;
@@ -1431,6 +1472,12 @@ footer {
     padding-bottom: 56px;
   }
 }
+@media screen and (min-width: 1900px) {
+  footer {
+    padding-left: 355px;
+    padding-right: 355px;
+  }
+}
 
 .footer-list {
   display: flex;

index.html

@@ -7,7 +7,9 @@
       name="description"
       content="Boilerplates to start you project fast and polished"
     />
-    <link rel="icon" type="image/x-icon" href="./images/favicon.ico" />
+    <link rel="icon" type="image/png" href="./images/favicon.png" />
+    <link rel="shortcut icon" href="./images/favicon.png" />
+    <link rel="apple-touch-icon" href="./images/favicon.png" />
     <title>BCBoilerplate</title>
     <link rel="stylesheet" href="./css/main.min.css" />
     <meta itemprop="serviceType" content="Software development" />
@@ -27,7 +29,15 @@
           "name": "Brocoders"
         },
         "applicationSuite": ["React", "Next.js", "Nest JS"],
-        "featureList": ["Public and private routing", "Social Login"],
+        "featureList": [
+          "Public and private routing",
+          "Social Login",
+          "Sign in and sign up via email",
+          "Internationalization",
+          "Admin Panel with user management",
+          "Github Actions",
+          "File uploads"
+        ],
         "screenshot": [
           "https://bcboilerplates.com/images/SignIn.png",
           "https://bcboilerplates.com/images/SignUp.png",
@@ -121,7 +131,7 @@
             <a href="#team" class="site-nav__link">Team</a>
           </li>
           <li class="site-nav__item">
-            <a href="#contacts" class="site-nav__link">Get in touch</a>
+            <a href="#contacts" class="site-nav__link"> Get in touch </a>
           </li>
         </ul>
       </nav>

sass/layouts/_articles.scss

@@ -12,6 +12,11 @@
       right: $sidePadding;
     }
   }
+  @media screen and (min-width: $wide) {
+    .btn-black {
+      right: $wideSidePadding;
+    }
+  }
 }
 .articles-title {
   @include titleFont($fs: 36px, $lh: 1.35, $ls: -2px);

sass/layouts/_demos.scss

@@ -13,6 +13,11 @@
       right: $sidePadding;
     }
   }
+  @media screen and (min-width: $wide) {
+    .hero-btn {
+      right: $wideSidePadding;
+    }
+  }
 }
 .demo-basic {
   @include font($fs: 22px, $lh: 1.46, $ls: -0.4px);
@@ -29,12 +34,19 @@
     font-size: 48px;
   }
 }
+.demo-img {
+  aspect-ratio: 354 / 203;
+}
+
 .demo-item {
   padding-top: 24px;
   padding-bottom: 24px;
   @media (max-width: #{$desktop - 1}) {
     padding-left: $mobilePadding;
     padding-right: $mobilePadding;
+    .demo-img {
+      width: 100%;
+    }
   }
   @media screen and (min-width: $desktop) {
     display: flex;
@@ -55,6 +67,14 @@
       }
     }
   }
+  @media screen and (min-width: $wide) {
+    &:nth-child(odd) {
+      padding-left: $wideSidePadding;
+    }
+    &:nth-child(even) {
+      padding-right: $wideSidePadding;
+    }
+  }
 }
 .demo-text {
   @include textFont;

sass/layouts/_features.scss

@@ -68,7 +68,7 @@
   border-top: 1px solid $bgdColor;
   padding-left: $mobilePadding;
   @media screen and (min-width: $desktop) {
-    padding-left: 167px;
+    padding-left: $sidePadding;
     padding-right: 53px;
 
     display: inline-flex;
@@ -79,12 +79,18 @@
       margin-top: auto;
     }
   }
+  @media screen and (min-width: $wide) {
+    padding-left: $wideSidePadding;
+  }
 }
 .backend {
   background-color: $bgdColor;
   @media screen and (min-width: $desktop) {
     padding-left: 40px;
-    padding-right: 167px;
+    padding-right: $sidePadding;
+  }
+  @media screen and (min-width: $wide) {
+    padding-right: $wideSidePadding;
   }
 }
 .comparison-title {

sass/layouts/_footer.scss

@@ -9,6 +9,10 @@ footer {
     padding-top: 56px;
     padding-bottom: 56px;
   }
+  @media screen and (min-width: $wide) {
+    padding-left: $wideSidePadding;
+    padding-right: $wideSidePadding;
+  }
 }
 .footer-list {
   @include flex($ali: flex-start);

sass/layouts/_team.scss

@@ -72,6 +72,7 @@
   @include textFont($fs: 18px, $lh: 1.33, $ls: -0.4px);
   overflow-x: visible;
 }
+
 .contributor-image {
   width: 300px;
   aspect-ratio: 1/1;

sass/utils/_placeholders.scss

@@ -2,8 +2,12 @@
   padding-left: $mobilePadding;
   padding-right: $mobilePadding;
 
-  @media screen and (min-width: 1200px) {
+  @media screen and (min-width: $desktop) {
     padding-left: $sidePadding;
     padding-right: $sidePadding;
   }
+  @media screen and (min-width: $wide) {
+    padding-left: $wideSidePadding;
+    padding-right: $wideSidePadding;
+  }
 }

sass/utils/_vars.scss

@@ -3,12 +3,13 @@ $textColor: #2e384d;
 $mainEmphasisColor: #d91965;
 $lightTextColor: #afb2b8;
 $bgdColor: #fafafa;
-$sidePadding: 170px;
 $mobilePadding: 18px;
+$sidePadding: 170px;
+$wideSidePadding: 355px;
 $charcoalTextColor: #d4d5d7;
 $mobile: 480px;
 $tablet: 768px;
 $desktop: 1200px;
-$wide: 2460px;
+$wide: 1900px;
 $blackBackground: #10133c;
 $timingFunction: cubic-bezier(0.4, 0, 0.2, 1);