From 608f0a67b69d346bf7658f590441513964405f97 Mon Sep 17 00:00:00 2001
From: Nisar Hassan Naqvi <syednisarhassan12@gmail.com>
Date: Tue, 5 Jan 2021 16:27:02 +0000
Subject: [PATCH] make site valid in accordance to W3C validator..

Fixes gitpod-io/website#842
---
 src/components/FeatureCard.tsx       |  2 +-
 src/components/Footer.tsx            | 22 ++++++++++--
 src/components/MoreInfo.tsx          |  2 +-
 src/components/TrustedBy.tsx         |  6 ++--
 src/components/index/GetStarted.tsx  |  2 +-
 src/components/index/PrefixInput.tsx | 50 ++++++++++++++--------------
 src/components/index/TextFeature.tsx |  2 +-
 7 files changed, 51 insertions(+), 35 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/Footer.tsx b/src/components/Footer.tsx
index e46d650c1..be4326b82 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -16,7 +16,7 @@ const StyledFooter = styled.footer`
         flex-wrap: wrap;
 
         @media(max-width: 650px) {
-            justify-content: space-between;
+            justify-content: center;
 
             ul {
                 padding-bottom: 4rem;
@@ -24,6 +24,18 @@ const StyledFooter = styled.footer`
                 width: 48%;
                 text-align: center;
 
+                @media(max-width: 650px) {
+                    width: 46%;
+                    margin-left: 2%;
+                    margin-right: 2%;
+                }
+
+                @media(max-width: 400px) {
+                    width: 48%;
+                    margin-left: 1%;
+                    margin-right: 1%;
+                }
+
                 &:not(:last-child) {
                     margin-bottom: 5rem;
                 }
@@ -34,13 +46,16 @@ const StyledFooter = styled.footer`
                     img {
                         transform: translateX(1rem);
                     }
+
+                    @media(max-width: 650px) {
+                        transform: none;
+                    }
                 }
             }
         }
     }
 
     li {
-
         &:not(:last-child) {
             margin-bottom: 1.6rem;
         }
@@ -79,6 +94,8 @@ const StyledFooter = styled.footer`
     }
 
     .contact {
+        max-width: 11rem;
+
         li:not(:first-child) {
             display: inline-block;
             margin-left: 2rem;
@@ -173,7 +190,6 @@ const Footer: React.SFC<{}> = () => (
                             </svg>
                         </a>
                     </li>
-                    <br aria-hidden={true} />
                     <li>
                         <a href="https://twitter.com/gitpod" target="_blank" rel="noopener" title="Twitter">
                             <svg
diff --git a/src/components/MoreInfo.tsx b/src/components/MoreInfo.tsx
index 04fa41e4d..dec758074 100644
--- a/src/components/MoreInfo.tsx
+++ b/src/components/MoreInfo.tsx
@@ -91,7 +91,7 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric
   return (
     <div
       className="pattern-bg"
-      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', background: backgroundShouldBeWhite ? 'none' : '' }}
+      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', ...(backgroundShouldBeWhite && {background: 'none'}) }}
     >
       <div className="row">
         <StyledPricingLinks>
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/GetStarted.tsx b/src/components/index/GetStarted.tsx
index f1cbb7f97..1cb4c093d 100644
--- a/src/components/index/GetStarted.tsx
+++ b/src/components/index/GetStarted.tsx
@@ -74,7 +74,7 @@ const GetStarted = () => (
         {projects.map((project, i) => (
           <Project
             key={i}
-            image={<object role="presentation" tabIndex={-1} data={project.image} />}
+            image={<object tabIndex={-1} data={project.image} />}
             title={project.title}
             githubUrl={project.githubUrl}
             gitlabUrl={project.gitlabUrl}
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>
     )
 }
diff --git a/src/components/index/TextFeature.tsx b/src/components/index/TextFeature.tsx
index 73988e73b..06d117978 100644
--- a/src/components/index/TextFeature.tsx
+++ b/src/components/index/TextFeature.tsx
@@ -52,7 +52,7 @@ const TextFeature = ({ path, alt, title, text, btnText, href }: TextFeatureProps
     <h3>
       <strong>{title}</strong>
     </h3>
-    <p>{text}</p>
+    <>{text}</>
     {btnText ? (
       <a href={href} target="_blank" className="btn">
         {btnText}