From 786452f3ff51aa074d8ec0dcc14f7089f4ab0eaa Mon Sep 17 00:00:00 2001
From: Nisar Hassan Naqvi <syednisarhassan12@gmail.com>
Date: Tue, 5 Jan 2021 15:24:59 +0000
Subject: [PATCH] make site valid in accordance to W3C validator..

Fixes gitpod-io/website#842
---
 src/components/FeatureCard.tsx       |  2 +-
 src/components/TrustedBy.tsx         |  6 ++--
 src/components/index/PrefixInput.tsx | 50 ++++++++++++++--------------
 3 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/FeatureCard.tsx b/src/components/FeatureCard.tsx
index ecef5a927..4ffd5c73d 100644
--- a/src/components/FeatureCard.tsx
+++ b/src/components/FeatureCard.tsx
@@ -43,7 +43,7 @@ const Styled = styled.div<{
 
   &:nth-of-type(2n) {
     @media (min-width: 1141px) {
-      flex-direction: ${({ opposite }) => (opposite ? 'reverse' : 'row-reverse')};
+      flex-direction: ${({ opposite }) => (opposite ? 'row' : 'row-reverse')};
     }
 
     @media (min-width: 1141px) {
diff --git a/src/components/TrustedBy.tsx b/src/components/TrustedBy.tsx
index a1f8ad753..d3820c4da 100644
--- a/src/components/TrustedBy.tsx
+++ b/src/components/TrustedBy.tsx
@@ -78,7 +78,7 @@ const StyledTrustedBy = styled.section`
   }
 `
 
-const StyledBrandImage = styled.img<{ transform?: string }>`
+const StyledBrandImage = styled.img<{ transformValue?: string }>`
     width: 9.5rem;
 
     @media(max-width: ${sizes.breakpoints.lg}) {
@@ -90,7 +90,7 @@ const StyledBrandImage = styled.img<{ transform?: string }>`
     }
 
     @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) {
-        transform: ${({ transform }) => (transform ? transform : 'none')};
+        transform: ${({ transformValue }) => (transformValue ? transformValue : 'none')};
     }
 `
 
@@ -117,7 +117,7 @@ const TrustedBy = ({ brands, title, styles }: TrustedByProps) => (
       <div className="logos">
         {brands.map((b: Brand) => (
           <a href={b.url} target="_blank" className="trustedBy">
-            <StyledBrandImage src={b.svg} alt={b.alt} transform={b.transform} className={b.className} />
+            <StyledBrandImage src={b.svg} alt={b.alt} transformValue={b.transform} className={b.className} />
           </a>
         ))}
       </div>
diff --git a/src/components/index/PrefixInput.tsx b/src/components/index/PrefixInput.tsx
index 877486d2f..56458274e 100644
--- a/src/components/index/PrefixInput.tsx
+++ b/src/components/index/PrefixInput.tsx
@@ -272,33 +272,33 @@ const PrefixInput = () => {
 
     return (
         <Styled>
-            <div className="header" aria-hidden="true">
-                <div className="dots">
+            <span className="header" aria-hidden="true">
+                <span className="dots">
                     <span>&nbsp;</span>
                     <span>&nbsp;</span>
                     <span>&nbsp;</span>
-                </div>
-                <div className="tab">
-                    <div className="bar">
+                </span>
+                <span className="tab">
+                    <span className="bar">
                         &nbsp;
-                </div>
+                </span>
                     <img src={Close} />
-                </div>
-                <div className="new-tab">
+                </span>
+                <span className="new-tab">
                     <img src={Plus} />
-                </div>
-            </div>
-            <div className="main">
-                <div className="bar-container" aria-hidden="true">
-                    <div className="bar">&nbsp;</div>
-                    <div className="bar">&nbsp;</div>
-                    <div className="bar">&nbsp;</div>
-                </div>
-                <div className="input-container">
-                    <div className="label">
+                </span>
+            </span>
+            <span className="main">
+                <span className="bar-container" aria-hidden="true">
+                    <span className="bar">&nbsp;</span>
+                    <span className="bar">&nbsp;</span>
+                    <span className="bar">&nbsp;</span>
+                </span>
+                <span className="input-container">
+                    <span className="label">
                         <img src={World} aria-hidden="true" />
                         <span>https://gitpod.io/#</span>
-                    </div>
+                    </span>
                     <span className="wrapper">
                         <input
                             defaultValue={url}
@@ -306,7 +306,7 @@ const PrefixInput = () => {
                             onChange={handleChange}
                             type="text"
                         />
-                        <div className="message" style={ error ? {color: '#bf4338'} : {}}>
+                        <span className="message" style={ error ? {color: '#bf4338'} : {}}>
                             <>
                                 <p>
                                     { error ? error : 'Enter your GitLab, GitHub, or Bitbucket URL' }
@@ -320,13 +320,13 @@ const PrefixInput = () => {
                                     Start Workspace
                                 </a>
                             </>
-                        </div>
+                        </span>
                     </span>
-                </div>
-            </div>
-            <div className="info">
+                </span>
+            </span>
+            <span className="info">
                 &nbsp;
-            </div>
+            </span>
         </Styled>
     )
 }