Can someone review my HTML & CSS Code?

Projects Personal Projects
1

I know the code below is not accessible at all for smaller or larger devices other than my own, but I am wondering what ways can I make the HTML and CSS better. For example, is there anything can I improve on in the code, am I using too many divs or how could I make the page more accessible and how could I implement Semantic HTML? Thank you very much!

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Paypal Clone</title>
        <link rel="stylesheet" href="./style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    </head>
    <body> 
        <header>
            <a href="#"><img src="https://www.paypalobjects.com/digitalassets/c/website/logo/full-text/pp_fc_hl.svg" alt="Paypal Logo" id="header-paypal-logo"/></a>
            <nav class="inline-block-navigation">
                <a href="#" class="navigation-bar-theme">Personal</a>
                <a href="#" class="navigation-bar-theme">Business</a>
                <a href="#" class="navigation-bar-theme">Send</a>
                <a href="#" class="navigation-bar-theme">Help</a>
                <div id="other-header-button" class="inline-block-navigation">
                    <a href="https://www.paypal.com/signin" target="_blank">Log In</a>
                    <a href="https://www.paypal.com/ca/for-you/account/create-account" target="_blank" id="header-sign-up-button-theme">Sign Up</a>
                </div>
            </nav>
        </header>
        <main>
            <section class="background-theme-blue">
              <h1 id="header-text">With ways to pay, shop and chip in, we're  <span id="header-text-new-line">we're here for you</span></h1>
              <a href="https://www.paypal.com/ca/for-you/account/create-account?locale.x=en_CA" target="_blank">Sign Up For Free</a>
              <div id="business-solutions-theme">
                <p>Looking for business solutions with PayPal? Whether you’re local or global, we’re here to support you.</p>
                <a href="https://www.paypal.com/ca/business/accept-payments?locale.x=en_CA" target="_blank">Explore Business Solutions</a>
             </div>
           </section>
           <section id="main-page-content">
            <article id="send-money-style">
             <h2>Send money to friends & family around the world</h2>
                <p>Do more with PayPal - send, receive, split the bill or collect money as a group. Do it quickly and easily with just a mobile number or email address.*</p>
                <a href="https://www.paypal.com/ca/for-you/mobile-wallet/paypal-app?locale.x=en_CA" target="_blank">Download The App</a>
                <img src="https://www.paypalobjects.com/marketing/web/ca/en/home/everyday-essentials/PurpleYoga.png" alt="Send money in seconds">
            </article>
            <article id="instant-spend-notification-style">
                <img src="https://www.paypalobjects.com/marketing/web/us/en/home/uncookied-treatment-v3/groceries_image_update.gif" alt="Get instant spend notifications">
                <h2>Get instant spend notifications</h2>
                <p>Whether shopping at your usual store or somewhere new, we help keep checkout fast and your eligible purchases protected.** You also get instant spend notifications, so you can easily keep track of all your online hauls. You can also keep earning rewards from your favourite cards.***</p>
                <a href="https://www.paypal.com/ca/for-you/mobile-wallet/paypal-app?locale.x=en_CA" target="_blank">Download The App</a>
             </article>
             <article id="pay-touch-free">
                <h2><span class="new-badge">New</span>Pay touch-free</h2>
                <p>With the PayPal app, the only thing you need to touch when you pay in-person, is your own phone.</p>
                <img src="https://www.paypalobjects.com/marketing/web/ca/en/home/everyday-essentials/PP_EE_QR_Code_CA-(White).gif" alt="Pay touch-free">
                <a href="https://www.paypal.com/ca/for-you/qrcode?locale.x=en_CA" target="_blank">Find Out More</a>
            </article>
            <article id="save-with-honey">
              <img src="https://www.paypalobjects.com/marketing/web/us/en/home/Everyday-Essentials/COINY_Hill.png" alt="Save more when you shop online with Honey">
              <h2><span class="new-badge">New</span>Save more when you shop <span id="save-with-honey-edit-header-text">online with Honey</span></h2>
              <p>Honey has joined the PayPal family. Use it to find discounts at over 30,000 retailers online. Plus, Honey is free.</p>
              <a href="https://www.joinhoney.com/paypal" target="_blank">Join Honey</a>
            </article>
           </section>
        </main>
        <footer>
            <!-- brands -->
            <h2>Check out with millions of brands you love</h2>
            <img src="https://www.paypalobjects.com/marketing/web/ca/en/home/everyday-essentials/LOGOS_120x50_INDIGO.png" alt="Indigo">
            <img src="https://www.paypalobjects.com/marketing/web/ca/en/home/everyday-essentials/LOGOS_120x50_SPOTIFY.png" alt="Spotify">
            <img src="https://www.paypalobjects.com/marketing/web/ca/en/home/everyday-essentials/LOGOS_120x50_HUDSONSBAY.png" alt="Hudson Bay">
            <img src="https://www.paypalobjects.com/marketing/web/ca/en/home/everyday-essentials/LOGOS_120x50_WALMART.png" alt="Walmart">
            <img src="https://www.paypalobjects.com/marketing/web/ca/en/home/everyday-essentials/LOGOS_120x50_STEAM.png" alt="Steam">
            <img src="https://www.paypalobjects.com/marketing/web/ca/en/home/everyday-essentials/LOGOS_120x50_WISH.png" alt="Wish">
            <!-- Responding To Coronavirus Message-->
            <div id="responding-corona-section">
                <h3>Responding to the Coronavirus</h3>
                <p>See how we're working to support you. <a href="https://newsroom.paypal-corp.com/" target="_blank">Visit Newsroom ></a></p>
            </div>
            <!-- join paypal footer -->
            <div id="footer-bottom-style">
                <h2>Join the millions of users worldwide trusting PayPal every day</h2>
                <a href="https://www.paypal.com/ca/for-you/account/create-account" target="_blank" class="header-sign-up-button-theme">Sign Up for Free</a>
                <p id="user-amount-style-border"><span class="user-amounts-style">3</span ><span class="user-amounts-style">2</span><span class="user-amounts-style">5</span><span class="user-amounts-style">0</span><span class="user-amounts-style">0</span><span class="user-amounts-style">0</span><span class="user-amounts-style">2</span><span class="user-amounts-style">7</span><span class="user-amounts-style">5</span></p>
                <div id="terms-of-service-style">
                    <p>* Account required to send and receive money. If the receiver doesn’t have a PayPal account, they can easily sign up for an account for free. If you send with your credit card or debit card, there's a fee of 2,9 % plus 0,30$.</p>
                    <p id="terms-of-service-button-style">** <a href="https://www.paypal.com/ca/webapps/mpp/ua/useragreement-full?locale.x=en_CA#purchase-protection" target="_blank">Applies to eligible purchases only. Terms and limitations apply.</a></p>
                    <p>*** Issuer rewards program is subject to the issuer’s rewards program terms and conditions.</p>
                </div>
            </div>
        </footer>
    </body>
</html>

* {
    font-family: 'Poppins', sans-serif;
}

header {
    margin-bottom: 20px;
}
#header-paypal-logo {
    position: relative;
    left: 300px;
    height: 25px;
    top: 5px;
}

#main-page-content {
    border: 1px solid transparent;
    padding-top: 600px;
}


.background-theme-blue {
    background-color: #3fa3ea;
    position:absolute;
    left:0;
    right:0;
}

.inline-block-navigation {
    display: inline-block;
    margin-left: 450px;
}

.navigation-bar-theme {
    margin-left: 5px;
    text-transform: uppercase;
    text-decoration: none;
    color: black;
    border: 2px solid transparent;
    padding-bottom: 18px;
    margin-bottom: 0;
}

.navigation-bar-theme:hover {
    border-bottom-color: darkblue;
}

#other-header-button {
    position: relative;
    text-align: right;
    right: 300px;
}

#other-header-button a {
    font-size: 12px;
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid #0070ba;
    border-radius: 30px;
    color: #0070ba;
    margin-left: 5px;
}

#header-sign-up-button-theme {
    color: white !important;
    background-color: #0070ba;
    font-weight: bold;
    text-decoration: none !important;
}

#header-sign-up-button-theme:hover {
    border-color: darkblue;
    background-color: darkslateblue;
}

#header-text {
    margin-top: 50px;
    font-size: xx-large;
    font-weight: normal;
    text-align: center;
    color: white;
}

#header-text-new-line {
    display: block;
}

.background-theme-blue  {
    text-align: center;
}
.background-theme-blue a[href="https://www.paypal.com/ca/for-you/account/create-account?locale.x=en_CA"] {
    font-size: 15px;
    text-decoration: none;
    color: darkblue;
    border: 1px solid #fcbb32;
    background-color: #fcbb32;
    border-radius: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 6px;
    padding-bottom: 6px;
}

#business-solutions-theme {
    height: 140px;
    font-size: 17px;
    color: white;
    margin-top: 240px;
    border: 1px solid black;
    background-color: darkblue;
}

#business-solutions-theme a{
    font-weight: bold;
    font-size: 14px;
    border: 1px solid white;
    background-color: white;
    border-radius: 20px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-decoration: none;
}

/*footer css*/
footer h2 {
    text-align: center;
    font-weight: normal;
    font-size: 35px;
    color: dimgrey;
}

footer {
    text-align: center;
}

#responding-corona-section {
    background-color: #fff2dc;
    position:absolute;
    left:0;
    right:0; 
    margin-top: 10px;
    padding-bottom: 5px;
}

#responding-corona-section h3 {
    font-size: 20px;
    font-weight: normal;
}

#responding-corona-section p a {
    color: #0070ba;
    font-weight: bold;
    text-decoration: none;
}

#footer-bottom-style {
    color: white;
    margin-top: 125px;
    background-color: #0d3685;
    position:absolute;
    left:0;
    right:0; 
}

#footer-bottom-style h2 {
    color: white;
}

#footer-bottom-style a {
    margin-top: 0;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    color: darkblue;
    border: 1px solid #fcbb32;
    background-color: #fcbb32;
    border-radius: 30px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.user-amounts-style {
    color: black;
    font-weight: bold;
    font-size: 40px;
    border: 1px solid white;
    background-color: white;
    border-radius: 15px;
    padding: 5px 15px;
    margin: 3px;
}

#footer-bottom-style #user-amount-style-border {
    border: 1px solid transparent;
    padding: 40px;
}

#terms-of-service-style {
    color: black;
    margin-top: 20px;
    background-color: white;
    position:absolute;
    left:0;
    right:0; 
}


#terms-of-service-button-style a {
    border: none !important;
    padding: 0;
    margin: 0;
    color: black;
    background-color: transparent;
}

#send-money-style h2 {
    font-weight: normal;
    font-size: 40px;
    color: #4a4a4a;
    max-width: 500px;
    margin-left: 170px;
}

#send-money-style p {
    max-width: 560px;
    margin-left: 170px;
    display: inline-block;
    position: relative;
    bottom: 280px;
}

#send-money-style img {
    display: inline-block;
    position: relative;
    bottom: 170px;
}

#send-money-style a {
    text-decoration: none;
    font-weight: bold;
    color: #0070ba;
    position: relative;
    right: 565px;
    bottom: 240px;
}

#instant-spend-notification-style {
    background-color: #f5f7fa;
    position:absolute;
    left:0;
    right:0;
}

#instant-spend-notification-style img {
    display: inline-block;
    margin-left: 250px;
}

#instant-spend-notification-style h2 {
    display: inline;
    font-weight: normal;
    font-size: 40px;
    color: #4a4a4a;
    position: relative;
    top: 50px;
    vertical-align: top;
}

#instant-spend-notification-style p {
    position: relative;
    max-width: 550px;
    left: 750px;
    bottom: 200px;
}

#instant-spend-notification-style a {
    text-decoration: none;
    font-weight: bold;
    color: #0070ba;
    position: relative;
    left: 750px;
    bottom: 190px;
}

#pay-touch-free {
    margin-top: 580px;
}

#pay-touch-free h2 {
    margin-left: 100px;
    font-weight: normal;
    font-size: 40px;
    color: #4a4a4a;
    position: relative;
    left: 100px;
}

#pay-touch-free p {
    display: inline-block;
    position: relative;
    bottom: 300px;
    max-width: 500px;
    margin-left: 260px;
}

.new-badge {
    color: white;
    font-size: 15px;
    background-color: #A96717;
    border-radius: 50%;
    padding: 10px;
    margin-right: 10px;
}

#pay-touch-free img {
    display: inline-block;
    position: relative;
    left: 70px;
    bottom: 100px;
}

#pay-touch-free a {
    text-decoration: none;
    color: #0070ba;
    font-weight: bold;
    position: relative;
    right: 995px;
    bottom: 260px;
}

#save-with-honey {
    background-color: #f5f7fa;
    position:absolute;
    left:0;
    right:0;
}

footer {
    border: 1px solid transparent;
    padding-top: 550px;
    
}

#save-with-honey img {
    position: relative;
    top: 50px;
    left: 230px;
    display: inline-block;
    height: 330px;
}
#save-with-honey h2 {
    max-width:600px;
    display: inline-block;
    font-weight: normal;
    font-size: 40px;
    color: #4a4a4a;
    position: relative;
    left: 220px;
    bottom: 100px;
}

#save-with-honey-edit-header-text {
    position: relative;
    left: 63px;
}

#save-with-honey p {
    position: relative;
    max-width: 600px;
    left: 700px;
    bottom: 160px;
    display: inline-block;
}

#save-with-honey a {
    display: inline-block;
    text-decoration: none;
    color: #0070ba;
    font-weight: bold;
    position: relative;
    left: 95px;
    bottom: 115px;
}
2

Have you ran it through any validators? W3 html checker had a warning,

Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections, or else use a div element instead for any cases where no heading is needed.
From line 36, column 12; to line 36, column 43

You mentioned that you are already know it isn’t going to handle responsiveness so I won’t mention anything from that stand point. I did notice you could be using unordered lists for groups of links and lists, then using flexbox to position them as a group. I also notice you are using id’s a lot. Is there a reason you need it to have that specificity or could the same be accomplished with using a class. If I see !important and a bunch of id’s, then I am thinking you are trying to override nested elements with an id applied. I typically avoid using id unless I have to, that’s my approach and doesn’t mean your way is wrong. I am just throwing it out there as something to think about.

Maybe adding some hover changes on the clickable links, or changing them to buttons would signify this is something you can interactive with? The cursor pointer is good but its kind of subtle, maybe adding some title attributes to the html so tooltips are displayed on links or actionable items.

Overall I think it looks really good! :metal:

3

Thank you very much! I will try to implement all of that. I know I mentioned I knew it wasn’t going to handle responsiveness, but can you please give me tips on how to make it more responsive? Thank you very much!

4

Sure. I can give you some general ideas.

Decide what screen sizes you want to target and start with the smaller of the options. Generally smaller screens will have a simplified experience, showing what you think is critical to convey. Next, start writing media queries to target other screen size ranges. So maybe start with phone or tablet and target desktop with queries, just to get started.

Not sure if you have dealt with flexbox or grid yet but those along with media queries will allow you to arrange for the various device sizes. Neither are totally necessary but they will help greatly.

I’m trying to be as vague as possible but also give you something to explore for yourself, if you haven’t came across these things yet. Hope it helps in some way!