landing page Rust section

css/landing.css

@@ -56,6 +56,7 @@ main h2 {padding-top:2em;}
 
 .hide {display:none;}
 .green_waterloo {color:#272822;} /* favicon bg */
+.small_fancySerif {font-size:60%;background-color:#cccaca;}
 
 /* The navigation bar */
 .navbar {
@@ -294,13 +295,17 @@ transform: scale(1);
 }
 
 /*---*/
+#mosaic-img {
+  height: 500px;
+}
+
 .mosaic-hover-menu {
   position: relative;
   overflow: hidden;
   margin: 0;
   width: 100%;
   height: 100%;
-  background: #000;
+  background: #815c5c; /*#000;*/
   text-align: center;
   box-sizing: border-box;
 }
@@ -310,22 +315,25 @@ transform: scale(1);
 }
 
 .mosaic-hover-menu img {
-  position: relative;
+  position: elative;
   max-width: 100%;
   height: 100%;
-  top: 0;
-  right: 0;
+  left: -20px
   opacity: 1;
   transition: 0.3s ease-in-out;
+  background: #815c5c;
 }
 
 .mosaic-hover-menu div {
   position: absolute;
   top: 0;
-  left: -145px;
+  /*left: -145px;
   width: 145px;
   height: 100%;
-  padding: 8px 4px;
+  */
+  left: -670px;
+  width: 670px;
+  padding: 8px 1px;
   background: #000;
   transition: 0.3s ease-in-out;
   display: flex;
@@ -338,7 +346,7 @@ transform: scale(1);
   line-height: 2;
   color: #fff;
   text-decoration: none;
-  opacity: 0.8;
+  opacity: 1; /*0.8;*/
   padding: 5px 15px;
   position: relative;
   transition: 0.3s ease-in-out;
@@ -351,10 +359,13 @@ a:hover {
   text-decoration: none;
 }
 .mosaic-hover-menu:hover img {
-  opacity: 0.5;
-  right: -120px;
+  opacity: 1;
+  margin-top: -2.3rem;
+  margin-left: -2rem;
+  /*right: -120px;*/
 }
 
+
 .mosaic-hover-menu:hover div {
   left: 0;
   opacity: 1;

index.html

@@ -13,7 +13,7 @@
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
     ul.task-list{list-style: none;}
   </style>
-  <link rel="stylesheet" href="https://lerina.github.io/css/landing_min.css" />
+  <link rel="stylesheet" href="./css/landing.css" />
   <meta name="keywords" content="Rust,Wasm,Workshop,Talk" />
   <meta name="description" content="Rust Workshop Series" />
   <meta property="og:image" content="./img/writing.jpg" />
@@ -33,7 +33,7 @@ <h1 class="title">OPTIMAL: Services</h1>
 <main>
 <div class="greetings">
 <p class="drop  fancySerif">
-Tonga soa. Welcome Friend<br> <code>OPTIMAL</code> part of <code>IMPACT Web Agency</code> leads the way to bring secure and fast app development in the Indian Ocean Neighbourhood.
+Tonga soa. Welcome Friend<br> <code class="small_fancySerif">OPTIMAL</code> part of <code class="small_fancySerif">IMPACT Web Agency</code> leads the way to bring secure and fast app development in the Indian Ocean Neighbourhood.
 </p>
 </div>
 <section id="featured_projects">
@@ -44,16 +44,22 @@ <h1 class="title">OPTIMAL: Services</h1>
 <h2 id="featured-tutorials">Featured tutorials</h2>
 <style>
 #the_cure {background-image: url('img/20140711_BB.png'); background-size: cover;}
-#the_cure:hover {background-image: url('img/Rust_and_friends.png');color:rgba(183, 65, 14, 0.0);}
+#the_cure:hover {color:rgba(183, 65, 14, 0.0);}
 </style>
 <div class="image-mosaic">
 <div class="card card-tall card-wide">
 <div id="the_cure" class="mosaic-hover-menu">
 <p>
-A cure <br/>for insecure <br/>code
+There is a cure <br/>for insecure <br/>code
 </p>
 <div style="font-size: 1rem;">
-<p><a href="./html/code/index.html"> Rust and Friends<br/> Safety first<br/> Blazingly fast Modern tools </a> <!--
+<p><a href="./html/code/index.html"> <img id="mosaic-img" src="./img/secure_Rust.png"> <!--
+Is a programming<br/>
+language that puts<br/>
+Safety first, is<br/>
+Blazingly fast, with<br/>
+Modern tools
+--> </a> <!--
 <a href="./html/code/secure_coding/index.html#memory_safe">Safety first</a>
 <a href="./html/code/secure_coding/index.html#blasingly_fast">Blazingly fast</a>
 <a href="./html/code/secure_coding/index.html#modern_tools">Modern tools</a>

index.md

@@ -1,15 +1,15 @@
 ---
 title: "OPTIMAL: Services"
 header-includes:
-        <meta name="keywords" content="Rust,Wasm,Workshop,Talk" />
-        <meta name="description" content="Rust Workshop Series" />
+        <meta name="keywords" content="Rust,Wasm,Workshop,Talk, OPTIMAL, IMPACT" />
+        <meta name="description" content="Rust Programming Workshop and Wasm Development" />
         <meta property="og:image" content="./img/writing.jpg" />
 ---
 
 <div class="bg"></div>
 <main>
 <div class="greetings">
-<p class="drop  fancySerif">Tonga soa. Welcome Friend<br> `OPTIMAL` part of `IMPACT Web Agency`
+<p class="drop  fancySerif">Tonga soa. Welcome Friend<br> `OPTIMAL`{.small_fancySerif} part of `IMPACT Web Agency`{.small_fancySerif}
 leads the way to bring secure and fast app development in the Indian Ocean Neighbourhood.
 </p>
 </div>
@@ -25,22 +25,16 @@ successfully attended our Rust Programming workshops.
 ## Featured tutorials
 <style>
 #the_cure {background-image: url('img/20140711_BB.png'); background-size: cover;}
-#the_cure:hover {background-image: url('img/Rust_and_friends.png');color:rgba(183, 65, 14, 0.0);}
+#the_cure:hover {color:rgba(183, 65, 14, 0.0);}
 </style>
 <div class="image-mosaic">
 <div class="card card-tall card-wide">
-<div class="mosaic-hover-menu"  id="the_cure" ><p>A cure <br/>for insecure <br/>code</p><div style="font-size: 1rem;">
+<div class="mosaic-hover-menu"  id="the_cure" >
+<p>There is a cure <br/>for insecure <br/>code</p>
+<div style="font-size: 1rem;">
 <a href="./html/code/index.html">
-Rust and Friends<br/>
-Safety first<br/>
-Blazingly fast
-Modern tools
+<img id="mosaic-img" src="./img/secure_Rust.png">
 </a>
-<!--
-<a href="./html/code/secure_coding/index.html#memory_safe">Safety first</a>
-<a href="./html/code/secure_coding/index.html#blasingly_fast">Blazingly fast</a>
-<a href="./html/code/secure_coding/index.html#modern_tools">Modern tools</a>
--->
 </div>
 </div><!--^-- mosaic-hover-menu -->
 </div>