added achievements

exampleSite/config.yaml

@@ -64,6 +64,27 @@ params:
   #   align: mx-auto # Left: ms-auto | center: mx-auto | right: me-auto | Default: ms-auto
   #   brandLogo: "/logo.png" # Logo for the brand | default is the favicon variable
   #   brandName: "Profile" # Brand name for the brand | default is the title variable
+
+  # Achievements
+  achievements:
+    enable: true
+    items:  
+      - title: Competition winner
+        content: We are developed a product which can help others.
+        url: https://example.com
+      - title: Competition winner
+        content: We are developed a product which can help others.
+        url: "!#"
+      - title: Competition winner
+        content: We are developed a product which can help others.
+        url: "#"
+      - title: Competition winner
+        content: We are developed a product which can help others.
+        url: "!#"
+      - title: Competition winner
+        content: We are developed a product which can help others.
+        url: https://example.com
+
   footer:
     # recentPosts: false
     socialNetworks:

layouts/index.html

@@ -1,6 +1,6 @@
 {{ define "head" }}
 <meta name="description" content={{ .Site.Params.description }}>
-<!-- <link rel="stylesheet" href="/css/index.css" media="all"> -->
+<link rel="stylesheet" href="/css/index.css" media="all">
 
 <!-- fontawesome -->
 <script defer src="/fontawesome-5/all-5.15.4.js"></script>
@@ -11,5 +11,5 @@
 {{ end }}
 
 {{ define "main" }}
-
+{{- partial "sections/achievements.html" . -}}
 {{ end }}

layouts/partials/sections/achievements.html

@@ -0,0 +1,23 @@
+{{ if .Site.Params.achievements.enable | default false }}
+<section id="achievements" class="py-5">
+    <div class="container">
+        <h3 class="text-center">Achievements</h3>
+        <div class="px-0 px-md-5 px-lg-5">
+            <div class="row justify-content-center px-3 px-md-5 px-lg-5">
+                {{ range .Site.Params.achievements.items }}
+                <div class="col-md-4 my-3" title="{{ .title }}">
+                    <a class="card my-3 h-100 p-3" href="{{ .url }}">
+                        <div class="card-body bg-transparent">
+                            <h5 class="card-title bg-transparent">{{ .title }}</h5>
+                            <div class="card-text secondary-font">
+                                {{ .content }}
+                            </div>
+                        </div>
+                    </a>
+                </div>
+                {{ end }}
+            </div>
+        </div>
+    </div>
+</section>
+{{ end }}

layouts/partials/sections/header.html

@@ -79,8 +79,7 @@
                     </li>
                     {{ end }}
 
-                    {{ if .Site.Params.disable_achievements }}
+                    {{ if .Site.Params.achievements.enable | default false }}
-                    {{ else }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#achievements"
                             aria-label="achievements">Achievements</a>

static/css/footer.css

@@ -11,10 +11,16 @@ footer a:hover {
 footer .card {
     background-color: var(--secondary-color) !important;
     border-radius: .75rem;
+    cursor: context-menu;
     overflow: hidden;
 }
 
-footer .card-text *{
+footer .card:hover {
+    transition: all 0.3s ease-out;
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+}
+
+footer .card-text * {
     background-color: var(--secondary-color) !important;
 }
 

static/css/index.css

@@ -0,0 +1,23 @@
+#achievements a {
+    text-decoration: none;
+}
+
+#achievements .card {
+    background-color: var(--secondary-color) !important;
+    border-radius: .75rem;
+    box-shadow: 0 0 36px rgba(0,0,0,0.1);
+    cursor: alias;
+    /* transform: translate3d(0, 0, 0); */
+    transition: box-shadow .2s linear,opacity .2s linear;
+}
+
+#achievements .card:hover {
+    border: 1px solid var(--text-color);
+    transition: .4s;
+}
+
+#achievements .card-text {
+    background-color: var(--secondary-color) !important;
+    color: var(--text-secondary-color) !important;
+}
+

static/css/list.css

@@ -1,5 +1,6 @@
 #list-page .card {
     background-color: var(--secondary-color) !important;
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     border-radius: .75rem;
     cursor: context-menu;
     overflow: hidden;
@@ -10,9 +11,9 @@
 }
 
 #list-page .card:hover {
-    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     border: 1px solid var(--secondary-color);
     transition: all 0.3s ease-out;
+    transform: translateY(-7px);
 }
 
 #list-page .card-text * {