Structuring HTML

gkunwar · Nov 17, 2023 · d49dbb9 · d49dbb9
1 parent 706db94
commit d49dbb9
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 74 deletions.
diff --git a/_includes/body.html b/_includes/body.html
@@ -1,8 +1,9 @@
-<body>
+<body class="{{page.group}}">
   {% include header.html %}
+  <a href="https://lnkd.in/ge-akEbF" class="btn btn-primary btn__submit--project" target="_blank">Submit Your Project</a>
   <main>
-    {% include showcase.html %}
-    <!--Footer begins here-->
+    {{content}}
   </main>
+  <!--Footer begins here-->
   {% include footer.html %}
 </body>
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,6 +1,6 @@
 <head>
     {% include meta.html %}
-    <title>{{site.title}} | Built In Ruby</title>
+    <title>{{site.title}} | Built With Ruby</title>
     <link rel="stylesheet" href="{% if site.baseurl %}{{site.baseurl}}{% else %}{% endif %}/assets/css/style.css">
     <script src="https://kit.fontawesome.com/6a97161b76.js" crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
@@ -15,4 +15,4 @@
 
       gtag('config', 'G-2KL4P15L2X');
     </script>
-</head>
+</head>
diff --git a/_includes/header.html b/_includes/header.html
@@ -7,15 +7,14 @@
             href="{% if page.layout == 'default' %}{{site.url}}{{site.baseurl}}/#{% else %}{{site.url}}{{site.baseurl}}/{% endif %}">
             <img
             src="{{site.baseurl}}/assets/images/builtwithRuby-logo.svg"
-            alt="Built In Ruby"
+            alt="Built With Ruby"
             />
           </a>
         </div>
-        <p class="text-center text-light header__text ">#BuiltWithRuby is an inspiration resource showcasing totally rocking ruby app made by people from all over the world.</p>
+        {% if page.layout == 'default' %}
+          <p class="text-center text-light header__text">#BuiltWithRuby is an inspiration resource showcasing totally rocking ruby app made by people from all overv the world.</p>
+        {% endif %}
       </div>
     </div>
   </nav>
-</div>
-<div class="container">
-
 </div>
diff --git a/_includes/showcase.html b/_includes/showcase.html
@@ -1,3 +1,7 @@
+---
+  layout: default
+---
+
 <div class="container">
   <div class="masonry ">
     {% for project in site.posts %}

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
 <html>
-{% include head.html %}
-{% include body.html %}
+	{% include head.html %}
+	{% include body.html %}
 </html>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -1,4 +1,4 @@
 ---
-layout: post
+layout: default
 ---
-<h1>hello</h1>
+{{ content }}
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -1,62 +1,37 @@
-<!DOCTYPE html>
-<html>
-{% include head.html %}
-<body class="project">
-  <div class="header">
-    <nav class="navbar is-black is-fixed-top" role="navigation" aria-label="main navigation" id="navbar">
-      <div class="container">
-        <div class="col-6 m-auto text-center">
-          <div class="navbar-brand ">
-            <a class="navbar-item has-text-centered "
-              href="{% if page.layout == 'default' %}{{site.url}}{{site.baseurl}}/#{% else %}{{site.url}}{{site.baseurl}}/{% endif %}">
-              <img
-              src="{{site.baseurl}}/assets/images/builtwithRuby-logo.svg"
-              alt="Built In Ruby"
-              />
-            </a>
-          </div>
-        </div>
+---
+layout: default
+---
+<div class="container">
+  <div class="col-lg-7 col-md-10 col-sm-12 p-4 m-auto bg-white project__showcase">
+    <div class="row">
+      <div class="col-md-5">
+        <img src="{{ page.image }}" alt="" class="img-fluid project__image">
       </div>
-    </nav>
-  </div>
-  <main>
-    <div class="container">
-      <div class="col-lg-7 col-md-10 col-sm-12 p-4 m-auto bg-white project__showcase">
-        <div class="row">
-          <div class="col-md-5">
-            <img src="{{ page.image }}" alt="" class="img-fluid project__image">
-          </div>
-          <div class="col-md-7">
-            <div class="project__body">
-              <div class="d-flex justify-content-between">
-                <div class="project__type ">
-                  <div class="project__industry">{{ page.type }}</div>
-                  <h3 class="project__name">{{ page.title }}</h3>
-                </div>
-                <div class="">
-                  <a href="{{ page.website_link }}" target="_blank" class="btn btn-danger btn-sm btn-round">Visit Website</a>
-                </div>
-              </div>
-              <p class="project__description mt-2">
-                {{ page.description }}
-              </p>
-              <div class="project__technology mb-3">
-                <label class="project__label"> Technoloy</label><br>
-                <div class="project__data">{{ page.technology }}</div>
-              </div>
-              <div class="project__avaiable">
-                <label class="project__label"> Available on:</label><br>
-                <div class="project__data">{{ page.available_on }}</div>
-              </div>
+      <div class="col-md-7">
+        <div class="project__body">
+          <div class="d-flex justify-content-between">
+            <div class="project__type ">
+              <div class="project__industry">{{ page.type }}</div>
+              <h3 class="project__name">{{ page.title }}</h3>
             </div>
+            <div class="">
+              <a href="{{ page.website_link }}" target="_blank" class="btn btn-danger btn-sm btn-round">Visit Website</a>
+            </div>
+          </div>
+          <p class="project__description mt-2">
+            {{ page.description }}
+          </p>
+          <div class="project__technology mb-3">
+            <label class="project__label"> Technoloy</label><br>
+            <div class="project__data">{{ page.technology }}</div>
+          </div>
+          <div class="project__avaiable">
+            <label class="project__label"> Available on:</label><br>
+            <div class="project__data">{{ page.available_on }}</div>
           </div>
         </div>
       </div>
     </div>
-  </main>
-  <!-- <div class="container mt-5">
-    <div class="h5 text-center">Related Project</div>
-  </div> -->
-  {% include footer.html %}
-</body>
-</html>
+  </div>
+</div>
+
diff --git a/_posts/2023-11-08-bluvagas.md b/_posts/2023-11-08-bluvagas.md
@@ -9,4 +9,5 @@ available_on: Web
 type: Job Board
 permalink: /bluvagas/
 website_link: https://www.bluvagas.com.br/
+group: project
 ---
diff --git a/_sass/_showcase.scss b/_sass/_showcase.scss
@@ -44,4 +44,15 @@
       margin-top: 1rem;
     }
   }
-}
+}
+
+.btn{
+  &__submit{
+    &--project{
+      position: fixed;
+      top: 1.5rem;
+      right: 1.5rem;
+      z-index: 9;
+    }
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+---
+layout: default
+group: home
+---
+
+<div class="container">
+  <div class="masonry ">
+    {% for project in site.posts %}
+      <div class="masonry-item">
+        <a href="{{project.url}}" class="d-block">
+          <img src="{{base.url}}
+          {{project.image}}
+          " alt="{{ project.title }}" class="masonry-content">
+          <div class="masonry-item-name p-3 bg-white font-weight-bold">
+            {{ project.title }}
+          </div>
+        </a>
+      </div>
+    {% endfor %}
+  </div>
+</div>
diff --git a/index.md b/index.md