WIP demo web

4 files changed, 31 insertions, 29 deletions

diff --git a/layouts/index.html b/layouts/index.html
index 0c222ff..5ba1fca 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -12,39 +12,39 @@
                         <h1 class="mx-auto my-0 text-uppercase">{{ .header.title }}</h1>
                         <h2 class="text-white-50 mx-auto mt-2 mb-5">{{ .header.description }}</h2>
                         <a class="btn btn-primary" href="{{ .header.button.url }}">{{ .header.button.text }}</a>
+                        <a class="btn btn-secondary" href="{{ .header.src_button.url }}">{{ .header.src_button.text }}</a>
+                        <p class="mx-auto text-white-50 mt-3 mb-3 text-uppercase">
+                            Introduction video
+                        </p>
+                        <p>
+                            <video class="" autoplay="false" src="{{ .header.video }}" width="480"></video>
+                        </p>
+                        <p>
+                        {{ with site.Data.homepage.about }}
+                            <h3 class="text-white-50 mb-3 text-uppercase">{{ .title }}</h3>
+                            <label class="text-white-50 w-50">{{ .desc }}</label>
+                            {{ if .button.enable }}
+                            <a class="btn btn-primary about-btn" href="{{ .button.url }}">{{ .button.text }}</a>
+                            {{ end }}
+                        </p>
                         {{ end }}
-                    </div>
-                </div>
-            </div>
-        </header>
-        <!-- About-->
-        {{ with site.Data.homepage.about }}
-        <section class="about-section text-center" id="about">
-            <div class="container px-4 px-lg-5">
-                <div class="row gx-4 gx-lg-5 justify-content-center">
-                    <div class="col-lg-8">
-                        <h2 class="text-white mb-4">{{ .title }}</h2>
-                        <p class="text-white-50">{{ .desc }}</p>
-                        {{ if .button.enable }}
-                        <a class="btn btn-primary about-btn" href="{{ .button.url }}">{{ .button.text }}</a>
                         {{ end }}
                     </div>
                 </div>
-                <img class="img-fluid" src="{{ .image }}" alt="..." />
             </div>
-        </section>
-        {{ end }}
+        </header>
+
         <!-- Projects-->
         {{ with site.Data.homepage.projects }}
-        <section class="projects-section bg-light" id="projects">
+        <section class="projects-section bg-dark" id="projects">
             <div class="container px-4 px-lg-5">
                 <!-- Featured Project Row-->
                 <div class="row gx-0 mb-4 mb-lg-5 align-items-center">
                     <div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="{{ .card1.img }}" alt="..." /></div>
                     <div class="col-xl-4 col-lg-5">
                         <div class="featured-text text-center text-lg-left">
-                            <h4>{{ .card1.title }}</h4>
-                            <p class="text-black-50 mb-0">{{ .card1.text }}</p>
+                            <h4 class="text-white">{{ .card1.title }}</h4>
+                            <p class="text-white-50 mb-0">{{ .card1.text }}</p>
                         </div>
                     </div>
                 </div>
@@ -150,4 +150,4 @@
         </section>
 {{- partial "footer.html" . -}}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 6f3a6c1..68df436 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -9,4 +9,4 @@
     {{ $title := print .Site.Title " | " .Title }}
     {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
     <title>{{ $title }}</title>
-</head>
\ No newline at end of file
+</head>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index a210045..d8ffede 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -14,4 +14,4 @@
             </ul>
         </div>
     </div>
-</nav>
\ No newline at end of file
+</nav>
diff --git a/static/css/styles.css b/static/css/styles.css
index 860f557..26161b2 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -4150,6 +4150,7 @@ textarea.form-control-lg {
   justify-content: space-between;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  background: linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 100%);
 }
 .navbar > .container,
 .navbar > .container-fluid,
@@ -11474,7 +11475,7 @@ body {
 }
 
 #mainNav {
-  min-height: 3.5rem;
+  min-height: 3.0rem;
   background-color: #000;
 }
 #mainNav .navbar-toggler {
@@ -11561,7 +11562,7 @@ body {
   position: relative;
   width: 100%;
   height: auto;
-  min-height: 35rem;
+  min-height: 80rem;
   padding: 15rem 0;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000 100%), url("../assets/img/bg-masthead.jpg");
   background-position: center;
@@ -11573,7 +11574,7 @@ body {
   font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 2.5rem;
   line-height: 2.5rem;
-  letter-spacing: 0.8rem;
+  letter-spacing: 0.2rem;
   background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
@@ -11587,6 +11588,7 @@ body {
   .masthead h1, .masthead .h1 {
     font-size: 4rem;
     line-height: 4rem;
+    letter-spacing: 0.4rem;
   }
 }
 @media (min-width: 992px) {
@@ -11597,10 +11599,10 @@ body {
   .masthead h1, .masthead .h1 {
     font-size: 6.5rem;
     line-height: 6.5rem;
-    letter-spacing: 0.8rem;
+    letter-spacing: 0.2rem;
   }
   .masthead h2, .masthead .h2 {
-    max-width: 30rem;
+    max-width: 100rem;
     font-size: 1.25rem;
   }
 }
@@ -11705,4 +11707,4 @@ body {
 .about-btn {
   margin-top: -50px;
   margin-bottom: 20px;
-}
\ No newline at end of file
+}