devlopr-jekyll 0.4.2

data/_includes/product.html

@@ -0,0 +1,9 @@
+<div class="blog-post card product">
+    <img src="{{ product.image }}" alt="{{ product.name }} product image" class="product__image card-img-top">
+    <div class="product__information">
+       <h2 class="product__title">{{ product.name }}</h2>
+       <p class="product__description">{{ product.content | remove: '<p>' | remove: '</p>' }}</p>
+       {% include product_definition.html %}
+    </div>
+    
+   </div>

data/_includes/product_definition.html

@@ -0,0 +1,10 @@
+<button
+ class="buy-button snipcart-add-item btn-success"
+ data-item-id="{{ product.identifier }}"
+ data-item-name="{{ product.name }}"
+ data-item-price="{{ product.price }}"
+ data-item-image="{{ product.image }}"
+ data-item-url="https://devlopr.netlify.com{{ page.url }}"
+ data-item-description="{{ product.content | remove: '<p>' | remove: '</p>' }}">
+ Add to cart (${{ product.price }})
+</button>

data/_includes/twitter_follow_button.html

@@ -0,0 +1 @@
+<a href="https://twitter.com/{{site.twitter_username}}?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-count="true">Follow @{{site.twitter_username}}</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

data/_layouts/about_me.html

@@ -0,0 +1,129 @@
+--- 
+layout: default 
+---
+
+    <div class="row">
+        <div class="col-lg-8">
+        
+            {% if site.author_bio %}
+            <div class="card">
+                <h1 class="card-title">About</h1>
+                <p> {{ site.author_bio }}</p>
+            </div>
+            {% endif %}
+
+
+            {% if site.show_author_project_details == true %}
+            <div class="card">
+                <h1 class="card-title">Projects</h1>
+                <br />
+                {% for project in site.author_project_details %}
+                {% if project.visibility == true %}
+                <div class="row">
+                        <div class="col-md-2">
+                            <img src="/assets/img/{{project.project_thumbnail}}" class="company-logo" />
+                        </div>
+                        <div class="col-md-6">
+                            <h4 class="experience-title"> {{ project.project_title }}</h4>
+                            <h6 class="experience-info"> {{ project.project_info}}</h6>
+                            <p class="experience-desc"> {{ project.project_description }} </p>
+                            <p><a href="{{exp.company_url}}">{{ project.project_url}}</a></p> 
+                        </div>
+                    </div>
+                    {% endif %}
+                    
+                    {% endfor %}  
+            </div>
+            {% endif %}
+
+            {% if site.show_author_work_experiences == true %}
+            <div class="card">
+                <h1 class="card-title"> Work Experience</h1>
+                <br />
+                {% for exp in site.author_work_experiences %}
+                {% if exp.visibility == true %}
+                <div class="row">
+                        <div class="col-md-2">
+                            <img src="/assets/img/{{ exp.company_logo }}" class="company-logo" />
+                        </div>
+                        <div class="col-md-6">
+                            <h4 class="experience-title"> {{ exp.designation }}</h4>
+                            <h6 class="experience-info"> {{ exp.company_name}}</h6>
+                            <p class="experience-desc"> {{ exp.description }} </p>
+                            <p><a href="{{exp.company_url}}">{{ exp.company_url}}</a></p> 
+                        </div>
+                    </div>
+                    {% endif %}
+                    
+                    {% endfor %}  
+            </div>
+            {% endif %}
+
+
+            {% if site.show_author_education_details == true %}
+            <div class="card">
+                <h1 class="card-title"> Education </h1>
+                <br />
+                {% for detail in site.author_education_details %}
+                {% if detail.visibility == true %}
+                <div class="row">
+                        <div class="col-md-2">
+                            <img src="/assets/img/{{ detail.college_logo}}" class="company-logo" />
+                        </div>
+                        <div class="col-md-6">
+                            <h4 class="experience-title"> {{detail.college_degree }}</h4>
+                            <h6 class="experience-info">{{detail.college_name}}</h6>
+                            <p class="experience-desc"> {{detail.description}} </p>
+                            <p><a href="{{detail.college_url}}">{{ detail.college_url}}</a></p>                    
+                        </div>
+                    </div>
+                    {% endif %}
+                    
+                    {% endfor %}  
+            </div>
+            {% endif %}
+
+        </div>
+        <div class="col-lg-4">
+    
+            <div class="card">
+                {% if site.author_location %} 
+                <h6>  <i class="fas fa-map-marker-alt"></i> {{ site.author_location }}</h6>
+                {% endif %}
+                
+                {% if site.author_email %}
+                <h6><i class="fas fa-envelope"></i> {{ site.author_email }}</h6>
+                {% endif %}
+                
+                {% if site.author_website_url %}
+                <h6> <i class="fas fa-link"></i> {{ site.author_website_url }} </h6>
+                {% endif %}
+                
+                {% if site.github_username %}
+                  {%- include github_follow_button.html -%} 
+                {% endif %}
+
+                {% if site.twitter_username %}
+                  {%- include twitter_follow_button.html -%} 
+                {% endif %}
+    
+            </div>
+    
+            <div class="card">
+                <h1> Skills </h1>
+
+                {%- include author_skills.html -%}
+               
+            </div>
+    
+            {% if site.wakatime_username %}
+            <div class="card">
+                <h1> Coding Activity </h1>
+                
+                {%- include coding_activity.html -%}
+    
+            </div>
+            {% endif %}
+    
+        </div>
+        </div>

data/_layouts/blog.html

@@ -0,0 +1,72 @@
+--- 
+layout: default 
+---
+
+    <div class="row">
+ 
+        <div class="col-lg-8 col-md-4">
+           
+                <!-- Blog Posts -->
+             <ul >
+                <div class="row">
+                    {% for post in paginator.posts %}
+                    <div class="card blog-post">
+                        <img class="card-img-top" src="/assets/img/posts/{{ post.thumbnail }}" alt="{{ post.title }}">
+                        <div class="card-body center">
+                            <img src="/assets/img/{{ site.author_logo }}" class="author-profile-img">
+                            <h4 class="card-title">{{ post.title }}</h4>
+
+                            <h6 class="card-subtitle mb-2 text-muted">{{ post.date | date: "%b %-d, %Y" }}</h6>
+                            <p class="card-text">{{ post.summary }} </p>
+
+                            <a href="{{ post.url | prepend: site.baseurl }}" data-disqus-identifier="{{ post.url }}" class="btn btn-primary btn-lg">Read</a>
+                            <span class="disqus-comment-count" data-disqus-identifier="{{ post.url }}"></span>
+
+                        </div>
+                    </div>
+
+                    {% endfor %}
+                </div>
+            </ul> 
+
+
+      <div class="row center">
+        <!-- Pagination links -->
+        {% if paginator.total_pages > 1 %}
+          <ul class="pagination pagination-sm">
+            {% if paginator.previous_page %}
+              <li><a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo;</a></li>
+            {% else %}
+              <li class="disabled"><span aria-hidden="true">&laquo;</span></li>
+            {% endif %}
+      
+            <li><a href="/">First</a></li>
+      
+            {% for page in (1..paginator.total_pages) %}
+              {% if page == paginator.page %}
+                <li class="active"><a>{{ page }}<span class="sr-only">(current)</span></a></li>
+              {% elsif page == 1 %}
+                <li><a href="/">{{ page }}</a></li>
+              {% else %}
+                <li><a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a></li>
+              {% endif %}
+            {% endfor %}
+      
+            <li><a href="/page/{{ paginator.total_pages }}/">Last</a></li>
+      
+            {% if paginator.next_page %}
+              <li><a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">&raquo;</a></li>
+            {% else %}
+              <li class="disabled"><span>&raquo;</span></li>
+            {% endif %}
+          </ul>
+        {% endif %}
+    </div>
+        
+</div>
+
+
+            {%- include blog_sidebar.html -%}
+        </div>
+
+        

data/_layouts/compress.html

@@ -0,0 +1,10 @@
+---
+# Jekyll layout that compresses HTML
+# v3.1.0
+# http://jch.penibelst.de/
+# © 2014–2015 Anatol Broder
+# MIT License
+---
+
+{% capture _LINE_FEED %}
+{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}

data/_layouts/contact_me.html

@@ -0,0 +1,9 @@
+--- 
+layout: default 
+---
+
+<div class="card">
+    <h1 class="card-title"> Contact</h1>
+   
+     {%- include contact_me_form.html -%}
+ </div>

data/_layouts/default.html

@@ -0,0 +1,28 @@
+---
+layout: compress
+---
+
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: " en " }}">
+
+{%- include head.html -%}
+
+<body>
+    <div class="container-fluid">
+
+        {%- include header.html -%}
+
+        <div class="col-lg-12">
+          
+            {{ content }}
+
+        </div>
+
+        {%- include footer.html -%}
+
+    </div>
+</body>
+
+<div hidden id="snipcart" data-api-key="Y2I1NTAyNWYtMTNkMy00ODg0LWE4NDItNTZhYzUxNzJkZTI5NjM3MDI4NTUzNzYyMjQ4NzU0"></div>
+<script src="https://cdn.snipcart.com/themes/v3.0.0-beta.3/default/snipcart.js" defer></script>
+</html>

data/_layouts/page.html

@@ -0,0 +1,9 @@
+--- 
+layout: default 
+---
+
+    <div class="card">
+        <div class="col-md-8 offset-md-2 offset-md-right">
+        {{ content }}
+         </div>
+    </div>

data/_layouts/post.html

@@ -0,0 +1,24 @@
+---
+layout: default
+---
+
+<!-- Blog Post Breadcrumbs -->
+{%- include blog_post_breadcrumb.html -%}
+
+<div class="row">
+
+        <div class="col-lg-8">
+    
+           {%- include blog_post_article.html -%}
+
+           {%- include blog_post_comments.html -%}
+        </div>
+ 
+           {%- include blog_sidebar.html -%}
+
+
+        
+</div> <!-- End of row-->
+    
+
+    

data/_layouts/product.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+<div class="row">
+   <div class="products-container col-lg-8">
+        {% for product in site.products %}
+        {% include product.html %}
+        {% endfor %}
+    </div>
+</div>

data/_layouts/search.html

@@ -0,0 +1,22 @@
+--- 
+layout: default 
+---
+
+<div class="row">
+        <div class="col-lg-12">
+    
+    <div id="search-searchbar"></div>
+        </div>
+</div>
+<ul>
+<div class="row">
+        <div class="col-lg-12">
+    
+        <div id="search-hits"></div>
+        </div>
+</ul>
+
+
+ {%- include algolia_search.html -%}
+
+ 

data/_sass/devlog.scss

@@ -0,0 +1,583 @@
+body {
+    background-color: #D6DDE1 !important;
+    font-family: 'Quicksand', sans-serif !important;
+}
+html {
+    scroll-behavior: smooth;
+}
+
+header {
+    background-color: #F5F5F5;
+    box-shadow: 10px 0px 8px;
+    height: auto;
+    width: 100%;
+    padding: 11px;
+}
+
+.container-fluid {
+    margin: 0px !important;
+    padding: 0px !important;
+}
+
+.profile-img {
+    width: 150px;
+    height: 150px;
+    margin-left: 20px;
+}
+
+.profile-name {
+    margin-top: 20px;
+}
+
+.profile-bio,
+.profile-links {
+    margin-top: 5px;
+}
+
+.border {
+    border: 1px solid #000;
+}
+
+.center {
+    text-align: center;
+}
+
+.card {
+    margin: 20px !important;
+    padding: 20px !important;
+}
+
+.blog-post{
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+.blog-post:hover {
+    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+  }
+  
+.social-link {
+    color: #262222;
+    font-size: 15px;
+    padding: 5px;
+    margin: 2px;
+    text-decoration: none !important;
+}
+.product{
+    width: 400px;
+    float:left;
+}
+.products-container{
+    margin-left:auto;
+    margin-right:auto;
+    width: 100%;
+}
+@media (min-width: 768px)
+{
+    .snipcart-layout__header {
+    width: 100% !important;
+    margin: 0 auto;
+    }
+}
+
+#navigation {
+    margin-top: 50px;
+}
+
+.nav-link {
+    font-size: 15px !important;
+    color: #000;
+    font-weight: 600;
+}
+
+footer {
+    width: 100%;
+    height: 70px;
+    text-align: center;
+    padding: 20px;
+    background-color: #000000;
+    color:#fff;
+}
+
+.company-logo {
+    width: 100px;
+    height: 100px;
+}
+
+.project-img {
+    width: 300px;
+    height: 200px;
+}
+
+.author-profile-img {
+    width: 50px;
+    height: 50px;
+}
+
+.project-desc {
+    float: left;
+}
+
+.project-link {
+    color: gray;
+    font-size: 15px;
+}
+
+.card-header {
+    border-radius: 0% !important;
+}
+
+.blog-post {
+    width: 350px;
+    height: auto;
+    margin: 20px !important;
+}
+
+.responsive-table {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+}
+
+pre,
+code {
+    overflow: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    word-break: break-all;
+    font-family: Courier, monospace;
+    font-size: 16px;
+    background-color: #F4F6F8;
+    padding: 5px;
+    display: block;
+}
+
+#newsletter_footer{
+    background-color: #1e90ff;
+    color:#fff;
+}
+
+
+// Variables
+$color--default: #3a3a3a;
+$color--light: lighten($color--default, 65%);
+$color--primary: #429bfc;
+$color--secondary: #429bfc;
+$color--background: #f8faff;
+
+$size--unit: 8px;
+
+$layout--max-width: 1000px;
+
+
+// Mixins
+@mixin sm {
+    @media (max-width: #{$layout--max-width}) {
+      @content;
+    }
+  }
+  
+  @mixin ms {
+    @media (min-width: #{$layout--max-width}) {
+      @content;
+    }
+  }
+  
+  @mixin button-hover($color) {
+    position: relative;
+    z-index: 2;
+  
+    &:hover {
+      transition: 0.2s all;
+      background-color: darken($color, 10%);
+      &:before {
+        transform: scale(1.1, 1.5);
+      }
+    }
+  
+    &:before {
+      content: " ";
+      position: absolute;
+      background-color: $color;
+      top: 0;
+      left: 0;
+      border-radius: 4px;
+      width: 100%;
+      height: 100%;
+      opacity: 0.4;
+      z-index: -1;
+      transform: scale(1);
+      transition: all 0.3s cubic-bezier(0.16, 0.8, 0.66, 1.54);
+    }
+  }
+@mixin fit-to-layout-and-center {
+    width: 100%;
+    max-width: $layout--max-width;
+    margin-left: auto;
+    margin-right: auto;
+    @include sm {
+      padding-left: $size--unit * 3;
+      padding-right: $size--unit * 3;
+    }
+  }
+// Components
+.header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin-bottom: $size--unit * 6;
+    padding-top: $size--unit * 4;
+    padding-bottom: $size--unit * 4;
+    border-bottom: 1px solid $color--light;
+  
+    &__container {
+      display: flex;
+      justify-content: center;
+      @include fit-to-layout-and-center;
+    }
+  
+    &__branding {
+      all: unset;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  
+    &__logo {
+      max-height: $size--unit*4;
+      margin-right: $size--unit*1;
+    }
+  
+    &__title {
+      font-weight: bold;
+      font-size: $size--unit * 3;
+      cursor: pointer;
+    }
+  
+    &__checkout {
+      all: unset;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+      font-weight: bold;
+      svg {
+        margin-right: $size--unit * 1;
+      }
+    }
+  
+    &__checkout-fill {
+      fill: $color--primary;
+    }
+  }
+
+
+@media (min-width: 320px) and (max-width: 480px) {
+    header {
+        height: auto;
+        text-align: center;
+    }
+    .blog-post {
+        width: 300px;
+        height: auto;
+        margin-left: -20px !important;
+    }
+    #mc-embedded-subscribe-form{
+        width: 100%;
+        padding: 50px;
+    }
+
+    #mc_embed_signup_scroll_footer{
+        margin-left:5%;
+        margin-right: 5%;
+        text-align:center;
+        font-size: 12px;
+    }
+    #mce-EMAIL_footer {
+        width: 200px;
+        padding: 14px;
+        color: #111;
+        border-color:#fff;
+        text-align: center;
+        text-transform: capitalize;
+        border: 1px solid #fff;
+    }
+    #mc-embedded-subscribe_footer{
+        margin-top: 30px;
+    }
+
+    #author_details{
+        text-align: center;
+    }
+}
+
+  
+  /* 
+    ##Device = Low Resolution Tablets, Mobiles (Landscape)
+    ##Screen = B/w 481px to 767px
+  */
+  
+  @media (min-width: 481px) and (max-width: 767px) {
+
+    #mc-embedded-subscribe-form{
+        width: 100%;
+        padding: 50px;
+    }
+
+
+    #mc_embed_signup_scroll_footer{
+        margin-left:5%;
+        margin-right: 5%;
+        text-align:center;
+        font-size: 20px;
+    }
+    #mce-EMAIL_footer {
+        width: 300px;
+        padding: 14px;
+        color: #111;
+        border-color:#fff;
+        text-align: center;
+        text-transform: capitalize;
+        border: 1px solid #fff;
+    }
+    #mc-embedded-subscribe_footer{
+        margin-top: 30px;
+    }
+
+    #author_details{
+        text-align: center;
+    }
+
+  }
+/* 
+  ##Device = Tablets, Ipads (portrait)
+  ##Screen = B/w 768px to 1024px
+*/
+
+@media (min-width: 768px) and (max-width: 1024px) {
+
+    #mc-embedded-subscribe-form{
+        width: 100%;
+        padding: 50px;
+    }
+
+    #mc_embed_signup_scroll_footer{
+        margin-left:35%;
+        margin-right: 35%;
+        text-align:center;
+        font-size: 22px;
+    }
+    #mce-EMAIL_footer {
+        width: 400px;
+        padding: 14px;
+        color: #111;
+        border-color:#fff;
+        text-align: center;
+        text-transform: capitalize;
+        border: 1px solid #fff;
+    }
+    #mc-embedded-subscribe_footer{
+        margin-top: 30px;
+    }
+    #author_details{
+        text-align: center;
+    }
+}
+/*
+##Device = Tablets, Ipads (landscape)
+##Screen = B/w 768px to 1024px
+*/
+
+@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
+
+    #mc-embedded-subscribe-form{
+        width: 100%;
+        padding: 50px;
+    }
+
+    #mc_embed_signup_scroll_footer{
+        margin-left:25%;
+        margin-right: 25%;
+        text-align:center;
+        font-size: 22px;
+    }
+    #mce-EMAIL_footer {
+        width: 400px;
+        padding: 14px;
+        color: #111;
+        border-color:#fff;
+        text-align: center;
+        text-transform: capitalize;
+        border: 1px solid #fff;
+    }
+    #mc-embedded-subscribe_footer{
+        margin-top: 30px;
+    }
+
+}
+
+  /* 
+    ##Device = Laptops, Desktops
+    ##Screen = B/w 1025px to 1280px
+  */
+  
+  @media (min-width: 1025px) and (max-width: 1280px) {
+    
+    #mc-embedded-subscribe-form{
+        width: 100%;
+        padding: 50px;
+    }
+
+    #mc_embed_signup_scroll_footer{
+        margin-left:25%;
+        margin-right: 25%;
+        text-align:center;
+        font-size: 22px;
+    }
+    #mce-EMAIL_footer {
+        width: 400px;
+        padding: 14px;
+        color: #111;
+        border-color:#fff;
+        text-align: center;
+        text-transform: capitalize;
+        border: 1px solid #fff;
+    }
+    #mc-embedded-subscribe_footer{
+        margin-top: 30px;
+    }
+
+  }
+ /* 
+  ##Device = Desktops
+  ##Screen = 1281px to higher resolution desktops
+*/
+
+@media (min-width: 1281px) {
+
+
+    #mc-embedded-subscribe-form{
+        width: 100%;
+        padding: 50px;
+    }
+    
+    #mc_embed_signup_scroll_footer{
+        margin-left:25%;
+        margin-right: 25%;
+        text-align:center;
+        font-size: 22px;
+    }
+    #mce-EMAIL_footer {
+        width: 400px;
+        padding: 14px;
+        color: #111;
+        border-color:#fff;
+        text-align: center;
+        text-transform: capitalize;
+        border: 1px solid #fff;
+    }
+    #mc-embedded-subscribe_footer{
+        margin-top: 30px;
+    }
+    
+
+}
+ /* (1920x1080) Full HD Display */
+ @media (min-width: 1281px) and (max-width: 1920px) {
+
+    #mc-embedded-subscribe-form{
+        width: 100%;
+        padding: 50px;
+    }
+    
+    #mc_embed_signup_scroll_footer{
+        margin-left:25%;
+        margin-right: 25%;
+        text-align:center;
+        font-size: 22px;
+    }
+    #mce-EMAIL_footer {
+        width: 400px;
+        padding: 14px;
+        color: #111;
+        border-color:#fff;
+        text-align: center;
+        text-transform: capitalize;
+        border: 1px solid #fff;
+    }
+    #mc-embedded-subscribe_footer{
+        margin-top: 30px;
+    }
+}
+
+/* Syntax Hightlighter */
+/* Theme - Autumn */
+/* For More Themes : https://github.com/richleland/pygments-css */
+
+.highlight .hll { background-color: #ffffcc }
+.highlight  { background: #ffffff; }
+.highlight .c { color: #aaaaaa; font-style: italic } /* Comment */
+.highlight .err { color: #FF0000; background-color: #FFAAAA } /* Error */
+.highlight .k { color: #0000aa } /* Keyword */
+.highlight .ch { color: #aaaaaa; font-style: italic } /* Comment.Hashbang */
+.highlight .cm { color: #aaaaaa; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #4c8317 } /* Comment.Preproc */
+.highlight .cpf { color: #aaaaaa; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1 { color: #aaaaaa; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #0000aa; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #aa0000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00aa00 } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { color: #0000aa } /* Keyword.Constant */
+.highlight .kd { color: #0000aa } /* Keyword.Declaration */
+.highlight .kn { color: #0000aa } /* Keyword.Namespace */
+.highlight .kp { color: #0000aa } /* Keyword.Pseudo */
+.highlight .kr { color: #0000aa } /* Keyword.Reserved */
+.highlight .kt { color: #00aaaa } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #aa5500 } /* Literal.String */
+.highlight .na { color: #1e90ff } /* Name.Attribute */
+.highlight .nb { color: #00aaaa } /* Name.Builtin */
+.highlight .nc { color: #00aa00; text-decoration: underline } /* Name.Class */
+.highlight .no { color: #aa0000 } /* Name.Constant */
+.highlight .nd { color: #888888 } /* Name.Decorator */
+.highlight .ni { color: #880000; font-weight: bold } /* Name.Entity */
+.highlight .nf { color: #00aa00 } /* Name.Function */
+.highlight .nn { color: #00aaaa; text-decoration: underline } /* Name.Namespace */
+.highlight .nt { color: #1e90ff; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #aa0000 } /* Name.Variable */
+.highlight .ow { color: #0000aa } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mb { color: #009999 } /* Literal.Number.Bin */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sa { color: #aa5500 } /* Literal.String.Affix */
+.highlight .sb { color: #aa5500 } /* Literal.String.Backtick */
+.highlight .sc { color: #aa5500 } /* Literal.String.Char */
+.highlight .dl { color: #aa5500 } /* Literal.String.Delimiter */
+.highlight .sd { color: #aa5500 } /* Literal.String.Doc */
+.highlight .s2 { color: #aa5500 } /* Literal.String.Double */
+.highlight .se { color: #aa5500 } /* Literal.String.Escape */
+.highlight .sh { color: #aa5500 } /* Literal.String.Heredoc */
+.highlight .si { color: #aa5500 } /* Literal.String.Interpol */
+.highlight .sx { color: #aa5500 } /* Literal.String.Other */
+.highlight .sr { color: #009999 } /* Literal.String.Regex */
+.highlight .s1 { color: #aa5500 } /* Literal.String.Single */
+.highlight .ss { color: #0000aa } /* Literal.String.Symbol */
+.highlight .bp { color: #00aaaa } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #00aa00 } /* Name.Function.Magic */
+.highlight .vc { color: #aa0000 } /* Name.Variable.Class */
+.highlight .vg { color: #aa0000 } /* Name.Variable.Global */
+.highlight .vi { color: #aa0000 } /* Name.Variable.Instance */
+.highlight .vm { color: #aa0000 } /* Name.Variable.Magic */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ 
+