MSICS template design by Soriful Chalehin. v1.0

README.md

@@ -0,0 +1,42 @@
+# MSICS HTML Template
+
+Welcome to the MSICS HTML Template, a creation by Soriful Chalehin. This template offers a responsive and visually appealing design suitable for various web development projects. Explore the live demo [here](https://soriful-chalehin.github.io/MSICS-Template).
+
+![MSICS Template Preview](images/preview.png)
+
+## Features
+
+- **Responsive Design:** Ensure a seamless experience across a range of devices.
+- **Bootstrap Integration:** Utilize Bootstrap for a clean and structured layout.
+- **Font Awesome Icons:** Enhance your website with scalable vector icons from Font Awesome.
+- **Google Fonts:** Utilize beautifully crafted fonts from Google Fonts to enhance the visual appeal.
+
+## Table of Contents
+
+1. [Getting Started](#getting-started)
+2. [Features](#features)
+3. [Live Demo](https://soriful-chalehin.github.io/MSICS-Template)
+4. [Contact the Developer](#contact-the-developer)
+5. [License](#license)
+
+## Getting Started
+
+To begin with the MSICS HTML Template, clone the repository and explore the code. Use it as a foundation for your projects, customizing and extending it according to your needs.
+
+```bash
+git clone https://github.com/Soriful-Chalehin/MSICS-Template.git
+```
+
+### Live Demo
+Check out the live demo of the MSICS HTML Template here.
+
+### Contact the Developer
+For any questions, suggestions, or to connect, reach out to Soriful Chalehin:
+
+<ul>
+    <li><a href='https://facebook.com/Chalehin'> Follow me on Faceobook.</li>
+    <li><a href='https://soriful-chalehin.github.io'> Website.</li>
+    <li><a href='mailto:developersoriful@gmail.com'> E-mail </li>
+</ul>
+License
+This MSICS HTML Template is licensed under the MIT License.

assets/css/responsive.css

@@ -0,0 +1,119 @@
+/* Media query for all devices  */
+@media all and (max-width: 1120px) {
+    h1,h2{
+        font-size:2.8rem;
+    }
+}
+
+@media all and (max-width:1024px) {
+    h1, h2{
+        font-size: 2.5rem;
+    }
+}
+
+@media all and (max-width:992px) {
+
+    h1{
+        font-size: 2.3rem;
+    }
+    /* header */
+    header .container{
+        padding-bottom: 2rem;
+        position: relative;
+        & nav{
+            display: none;
+        }
+        & label {
+            display: inline-block;
+        }
+        & input[type=checkbox]:checked ~ nav{
+           display: inline-flex;
+           flex-direction: column;
+           position: absolute;
+           top: 100%;
+           left: 0;
+           gap: 2rem;
+           width: 100%;
+           padding: 1rem;
+           background: white;
+        }
+        & h1{
+            font-size: 2.1rem;
+        }
+
+    }
+
+    @media all and (min-width:680px) and (max-width:768px) {
+        .mission-section {
+            padding-top: 3rem;
+            font-size: 100%;
+        }
+    }
+}
+
+@media all and (max-width:768px) {
+    .container:not(header .container){
+        flex-direction: column;
+        & h1,
+        & h2{
+            font-size: 2rem;
+        }
+        /* all left and right sides */
+        .banner-left,
+        .banner-right,
+        .product-left,
+        .product-right{
+            width: 100%;
+            grid-auto-rows: auto;
+        }
+        .product-right{
+            grid-template-rows: 3;
+            grid-template-areas: 
+            'fullwidth'
+            'halfwidth1'
+            'halfwidth2';
+            margin-bottom: 4rem;
+        }
+
+        .footer-left,
+        .footer-right{
+            width: 100%;
+        }
+    }
+    .mission-section {
+        padding: 1rem;
+        &h2{
+            font-size: 1.8rem !important;
+        }
+    }
+    /* contact */
+    .contact-section .container{
+        padding: 1rem;
+        flex-direction: column;
+        justify-content: center;
+        .w50{
+            width: 100% !important;
+            &:last-child{
+                padding-top: 1rem;
+            }
+        }
+
+        & form{
+            & input:not([type=submit]),
+            & textarea{
+                width: 100%;
+            }
+        }
+
+        .contact-right{
+            width: 100%;
+            & h2{
+                font-size: 1.2rem;
+                text-align: center;
+                padding-block: 0.5rem;
+                font-size: 2rem;
+                border-top: 2px solid;
+            }
+        }
+    }
+}