docs: demo homepage - adding alt tags to images and fixing cta alignment (#1022)

* docs: demo homepage - adding alt tags to images and fixing cta alignment

* should've used initial instead of inherit

Co-authored-by: [ Cassondra ] <[email protected]>

Author: kylebuch8

index.html

@@ -73,6 +73,10 @@
       margin-bottom: 16px;
     }
 
+    .header-ctas pfe-cta a {
+      min-width: 250px;
+    }
+
     @media (min-width: 500px) {
       .header-ctas {
         flex-direction: row;
@@ -82,6 +86,10 @@
         margin-bottom: 0;
         margin-right: 16px;
       }
+
+      .header-ctas pfe-cta a {
+        min-width: initial;
+      }
     }
   </style>
 </head>
@@ -104,23 +112,23 @@ <h1 class="title">PatternFly Elements</h1>
     <pfe-band pfe-color="lightest">
       <div class="pfe-l-grid pfe-m-gutters pfe-m-all-4-col-on-xl pfe-m-all-6-col-on-lg pfe-m-all-6-col-on-sm">
         <pfe-card pfe-color="lightest" pfe-border>
-          <img pfe-overflow="top right left" src="/brand/[email protected]">
+          <img pfe-overflow="top right left" src="/brand/[email protected]" alt="">
           <h2>Components</h2>
           <p>View the complete inventory of PatternFly Elements components.</p>
           <pfe-cta slot="pfe-card--footer">
             <a href="/examples">View the components</a>
           </pfe-cta>
         </pfe-card>
         <pfe-card pfe-color="lightest" pfe-border>
-          <img pfe-overflow="top right left" src="/brand/[email protected]">
+          <img pfe-overflow="top right left" src="/brand/[email protected]" alt="">
           <h2>Develop</h2>
           <p>Learn how to develop components for PatternFly Elements. View the basics on how to write HTML, CSS, and JavaScript for PatternFly Elements as well as how to properly test a component.</p>
           <pfe-cta slot="pfe-card--footer">
             <a href="https://patternfly.github.io/patternfly-elements/develop/">Start developing components</a>
           </pfe-cta>
         </pfe-card>
         <pfe-card pfe-color="lightest" pfe-border>
-          <img pfe-overflow="top right left" src="/brand/[email protected]">
+          <img pfe-overflow="top right left" src="/brand/[email protected]" alt="">
           <h2>Theming and styles</h2>
           <p>View the documentation on the theme palette, colors, layouts, how to theme slots, and how to write styles</p>
           <pfe-cta slot="pfe-card--footer">
@@ -133,7 +141,7 @@ <h2>Theming and styles</h2>
       <h2 class="pfe-l--text-align--center">Learn more</h2>
       <div class="pfe-l-grid pfe-m-gutters pfe-m-all-4-col">
         <pfe-card pfe-color="lightest">
-          <img pfe-overflow="top right left" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*zHHMQQBMora88A_WQJiNtw.png">
+          <img pfe-overflow="top right left" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*zHHMQQBMora88A_WQJiNtw.png" alt="">
           <h3>
             <a href="https://medium.com/patternfly-elements/web-components-and-seo-58227413e072">Web Components and SEO</a>
           </h3>
@@ -188,7 +196,7 @@ <h3>
           </pfe-cta>
         </pfe-card>
         <pfe-card pfe-color="lightest">
-          <img pfe-overflow="left top right" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*VxME5U0fg6jyClhZBo-O3A.png">
+          <img pfe-overflow="left top right" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*VxME5U0fg6jyClhZBo-O3A.png" alt="">
           <h3>
             <a href="https://medium.com/patternfly-elements/more-resilientweb-components-in-angular-or-anywhere-else-with-mutationobserver-72a91cd7cf22">More Resilient Web Components in Angular (or anywhere else) with MutationObserver</a>
           </h3>
@@ -207,7 +215,7 @@ <h3>
           </pfe-cta>
         </pfe-card>
         <pfe-card pfe-color="lightest">
-          <img pfe-overflow="left top right" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*R29zV1u1Fj-s3gw1P_D5LQ.png">
+          <img pfe-overflow="left top right" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*R29zV1u1Fj-s3gw1P_D5LQ.png" alt="">
           <h3>
             <a href="https://medium.com/patternfly-elements/patternfly-elements-writing-automated-tests-e5af412931dd">Writing automated tests for PatternFly Elements</a>
           </h3>
@@ -217,7 +225,7 @@ <h3>
           </pfe-cta>
         </pfe-card>
         <pfe-card pfe-color="lightest">
-          <img pfe-overflow="left top right" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*6TbBJFAxhhi6K5WAbY5aCg.png">
+          <img pfe-overflow="left top right" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*6TbBJFAxhhi6K5WAbY5aCg.png" alt="">
           <h3>
             <a href="https://medium.com/patternfly-elements/patternfly-elements-how-to-build-a-demo-component-448c32069a21">How to build a demo component</a>
           </h3>