Improving projects page

Author: diemol

site_source_files/themes/selenium/layouts/projects/section.html

@@ -19,37 +19,41 @@ <h1>Selenium Projects</h1>
             <img class="product-logo" src="{{"images/selenium_logo_square_red.png" | relURL}}"/>
         </div>
         <h2>Selenium WebDriver</h2>
-        <p>Selenium WebDriver can drive a browser natively either locally or on remote machines.</p>
+        <p>Selenium WebDriver drives a browser natively, as a real user would, either locally or on remote machines.</p>
     </div>
-    <div class="toggle-section">
-        <b id="webdriverShow" class="toggle-button" onClick="showWebDriver()">+ Show more</b>
-    </div>
-    <div id="webdriverContent" class="content hide">
-        <p>
-            WebDriver drives a browser natively, as a user would, either locally
-            or on a remote machine using the Selenium server,
-            marks a leap forward in terms of browser automation.
+    <div id="webdriverContent" class="content">
+        <h3>Simple and concise</h3>
+        <p>WebDriver is simple, it is designed as a concise and compact programming interface.</p>
+
+
+        <h3>Works in all major browsers</h3>
+        <p>Through a simple setup, WebDriver can be used with all major browsers. Automate real user interactions in
+            Firefox, Safari, Edge, Chrome, Internet Explorer and more!
         </p>
         <p>
             Selenium WebDriver refers to both the language bindings
             and the implementations of the individual browser controlling code.
             This is commonly referred to as just <i>WebDriver</i>.
         </p>
+
+        <h3>WebDriver is a <a href="https://www.w3.org/TR/webdriver1/">W3C Recommendation</a>!</h3>
+        <p>
+            The W3C is an international community that works to develop Web standards. In
+            June 2018, WebDriver became a W3C recommendation.
+        </p>
         <p>
-            Selenium WebDriver is a <a href="https://www.w3.org/TR/webdriver1/">W3C Recommendation</a>
+            What does this mean? Major browser vendors (Mozilla, Google, Apple, Microsoft)
+            support WebDriver and work constantly to improve the browsers<br>
+            and browser controlling code, which leads to a more uniform behaviour across the different
+            browsers, making your automation scripts more stable.
         </p>
 
-        <ul>
-            <li>WebDriver is designed as a simple and more concise programming interface.</li>
-            <li>WebDriver is a compact object-oriented API</li>
-            <li>It drives the browser effectively.</li>
-        </ul>
-
-        <p>For More information on Selenium WebDriver, please see the documentation and Remote Control to WebDriver Migration Notes.</p>
+        <a href="https://selenium.dev/documentation/en/webdriver/">
+            <div class="learn-more webdriver">
+                <span>Learn More</span>
+            </div>
+        </a>
 
-        <div class="toggle-section">
-            <b class="toggle-button" onClick="hideWebDriver()">- Show less</b>
-        </div>
     </div>
 </div>
 
@@ -61,10 +65,7 @@ <h2>Selenium WebDriver</h2>
         <h2>Selenium IDE</h2>
         <p>Selenium IDE is a Chrome and Firefox extension that makes it easy to record and playback tests in the browser.</p>
     </div>
-    <div class="toggle-section">
-        <b id="ideShow" class="toggle-button" onClick="showIDE()">+ Show more</b>
-    </div>
-    <div id="ideContent" class="content hide">
+    <div id="ideContent" class="content">
         <h3>Web Ready</h3>
         <p>Simple, turn-key solution to quickly author reliable end-to-end tests. Works out of the box for any web app.</p>
 
@@ -74,10 +75,11 @@ <h3>Easy Debugging</h3>
         <h3>Cross-browser Execution</h3>
         <p>Run your tests on any browser/OS combination in parallel using the Command-line Runner for Selenium IDE.</p>
 
-
-        <div class="toggle-section">
-            <b class="toggle-button" onClick="hideIDE()">- Show less</b>
-        </div>
+        <a href="https://selenium.dev/selenium-ide/">
+            <div class="learn-more ide">
+                <span>Learn More</span>
+            </div>
+        </a>
     </div>
 </div>
 
@@ -87,17 +89,25 @@ <h3>Cross-browser Execution</h3>
             <img class="product-logo" src="{{"images/selenium_grid_logo_square.png" | relURL}}"/>
         </div>
         <h2>Selenium Grid</h2>
-        <p>Selenium Grid takes Selenium Remote Control to another level by running tests on may servers at the same time,</br>cutting down on the time it takes to test multiple browsers or operating systems.</p>
-    </div>
-    <div class="toggle-section">
-        <b id="gridShow" class="toggle-button" onClick="showGrid()">+ Show more</b>
+        <p>Selenium Grid takes WebDriver to another level by running tests on many machines at the same time,
+            </br>cutting down on the time it takes to test on multiple browsers and operating systems.</p>
     </div>
-    <div id="gridContent" class="content hide">
-        <p>With the release of Selenium 2.0, the Selenium Server now has built-in Grid functionality. To see the how to configure this, please see the wiki.</p>
+    <div id="gridContent" class="content">
+        <h3>Multiple browsers, versions, and operating systems</h3>
+        <p>Grid helps you to run your automation scripts across multiple combinations of browsers, versions and operating systems.</p>
+
+        <h3>Reduce execution time</h3>
+        <p>
+            Speed up execution and cut down overall run time of your automation scripts.
+            You still need scripts that can run in parallel though!
+        </p>
+
+        <a href="https://selenium.dev/documentation/en/grid/">
+            <div class="learn-more grid">
+                <span>Learn More</span>
+            </div>
+        </a>
 
-        <div class="toggle-section">
-            <b class="toggle-button" onClick="hideGrid()">- Show less</b>
-        </div>
     </div>
 </div>
 
@@ -110,65 +120,3 @@ <h2>Selenium Grid</h2>
 </body>
 
 {{ partial "footer.html" . }}
-
-<script>
-    function showWebDriver() {
-      const webdriverContent = document.getElementById("webdriverContent");
-      const webdriverButton = document.getElementById("webdriverShow");
-
-      webdriverContent.className = 'content'
-      webdriverButton.className = 'toggle-button hide'
-    }
-    function hideWebDriver() {
-      const webdriverContent = document.getElementById("webdriverContent");
-      const webdriverButton = document.getElementById("webdriverShow");
-
-      webdriverContent.className = 'content hide'
-      webdriverButton.className = 'toggle-button'
-    }
-
-    function showGrid() {
-      const webdriverContent = document.getElementById("gridContent");
-      const webdriverButton = document.getElementById("gridShow");
-
-      webdriverContent.className = 'content'
-      webdriverButton.className = 'toggle-button hide'
-    }
-    function hideGrid() {
-      const webdriverContent = document.getElementById("gridContent");
-      const webdriverButton = document.getElementById("gridShow");
-
-      webdriverContent.className = 'content hide'
-      webdriverButton.className = 'toggle-button'
-    }
-
-    function showIDE() {
-      const webdriverContent = document.getElementById("ideContent");
-      const webdriverButton = document.getElementById("ideShow");
-
-      webdriverContent.className = 'content'
-      webdriverButton.className = 'toggle-button hide'
-    }
-    function hideIDE() {
-      const webdriverContent = document.getElementById("ideContent");
-      const webdriverButton = document.getElementById("ideShow");
-
-      webdriverContent.className = 'content hide'
-      webdriverButton.className = 'toggle-button'
-    }
-
-    function showRemoteControl() {
-      const webdriverContent = document.getElementById("remoteControlContent");
-      const webdriverButton = document.getElementById("remoteControlShow");
-
-      webdriverContent.className = 'content'
-      webdriverButton.className = 'toggle-button hide'
-    }
-    function hideRemoteControl() {
-      const webdriverContent = document.getElementById("remoteControlContent");
-      const webdriverButton = document.getElementById("remoteControlShow");
-
-      webdriverContent.className = 'content hide'
-      webdriverButton.className = 'toggle-button'
-    }
-</script>

site_source_files/themes/selenium/static/css/about.css

@@ -7,7 +7,7 @@
 }
 
 .metadata p {
-  border-bottom: 1px solid rgb(148, 156, 161, 0.45);
+  border-bottom: 1px solid rgb(148, 156, 161);
   padding-bottom: 50px;
 }
 

site_source_files/themes/selenium/static/css/index.css

@@ -97,7 +97,7 @@ the text under the Hero Image*/
 is the line that separates the content*/
 
 .getting-started-topic:not(:last-child) {
-  border-right: 1px solid rgb(148, 156, 161, 0.45);
+  border-right: 1px solid rgb(148, 156, 161);
   padding-right: 70px;
 }
 
@@ -126,7 +126,7 @@ is the line that separates the content*/
 .news-metadata {
     flex: 1;
     border-top: 1px;
-    border-top-color: rgb(148, 156, 161, 0.45);
+    border-top-color: rgb(148, 156, 161);
     border-top-style: solid;
     margin: 10px 30px 30px 30px;
 }
@@ -142,7 +142,7 @@ is the line that separates the content*/
 .news-description {
     flex: 2;
     border-top: 1px;
-    border-top-color: rgb(148, 156, 161, 0.45);
+    border-top-color: rgb(148, 156, 161);
     border-top-style: solid;
     margin: 10px 30px 30px 30px;
     padding: 10px;
@@ -293,7 +293,7 @@ is the line that separates the content*/
     .getting-started-topic:not(:last-child) {
       border-right: none;
       padding-right: 0;
-      border-bottom: 1px solid rgb(148, 156, 161, 0.45);
+      border-bottom: 1px solid rgb(148, 156, 161);
       margin-bottom: 50px;
   }
 

site_source_files/themes/selenium/static/css/projects.css

@@ -28,6 +28,18 @@
     border-left-width: 5px;
 }
 
+.product-container  a {
+    text-decoration: none;
+}
+
+.learn-more {
+    display: flex;
+    font-weight: bold;
+    width: 85px;
+    border-bottom: 2px solid;
+    transition: 0.3s;
+}
+
 .product-container.webdriver {
     border-left-color: #cf0a2c;
 }
@@ -40,6 +52,10 @@
     color: #cf0a2c;
 }
 
+.learn-more.webdriver {
+    color: #cf0a2c;
+}
+
 .product-container.grid {
     border-left-color: #645d9c;
 }
@@ -52,6 +68,11 @@
     color: #645d9c;
 }
 
+.learn-more.grid {
+    color: #645d9c;
+}
+
+
 .product-container.ide {
     border-left-color: #0033a0;
 }
@@ -64,16 +85,8 @@
     color: #0033a0;
 }
 
-.product-container.remoteControl {
-    border-left-color: #ef4b0a;
-}
-
-.product-container.remoteControl h2 {
-    color: #ef4b0a;
-}
-
-.product-container.remoteControl b {
-    color: #ef4b0a;
+.learn-more.ide {
+    color: #0033a0;
 }
 
 .product-logo-container {
@@ -88,7 +101,7 @@
 }
 
 .intro {
-    border-bottom: 1px solid rgb(148, 156, 161, 0.45);
+    border-bottom: 1px solid rgb(148, 156, 161);
 }
 
 .toggle-section {