Responsive Web Design Challenge #3: Build a Product Landing Page

Tell us what’s happening:
I think my code satisfies all the user stories for this challenge, but it isn’t accepting the submit input for the email form (at the bottom). Please tell me if my code is flawed and that’s why it’s not passing the tests, or at least give me a hint to send me in the right direction if I am writing the code incorrectly. I am at my wit’s end and finally decided to cry out for help. Thanks in advance!

Your code so far

Wasabi Wallet landing page nav { position: fixed; top: 0; width: 100%; background-color: green; }
        a {
            color: yellow;
        }

        #header-img {
            padding: 3px;
            display: inline-block;
        }

        h1,
        h2, h3{
            color: green;
            text-align: center;
        }

        .labels {
            color: green;
        }
        #features-list, #reasons-list {
            color: green;
            display: inline-flex;
        }
        .navbar {
            padding: 3px;

        }
        .nav-link {
            background-color: green;
        }
        @media only screen and (max-width: 600px) {
        body {
            background-color: yellow;
        }
    }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <nav id="nav-bar" class="navbar">

        <a class="nav-link" href="#features">Features</a> |
        <a class="nav-link" href="#why_wasabi">Why should you Wasabi?</a> |
        <a class="nav-link" href="#download">Download Wasabi</a> |
        <a class="nav-link" href="#top">Top of page</a> |

    </nav>

    <div style="text-align: left;">
        <image id="header-img" alt="wasabi-logo" src="https://cdn-images-1.medium.com/max/1600/0*znD3AT3aue70a0QE.png"></image>
    </div>

</header>

<body>
    <div id="top"></div>
    <h1>Wasabi Wallet: Privacy focused, ZeroLink compliant Bitcoin wallet</h1>
    <div style="text-align: center;">
        <label id="video-label" class="labels">A comprehensive overview of Wasabi Wallet</label>
        <br>
        <iframe id="video" width="640" height="480" src="https://www.youtube.com/watch?v=7yzmYgiXDqc&t=3s"></iframe></div>
    <div style="text-align: center;">
        <h2 id="features">Wasabi Wallet Features</h2>
    </div>
    <div id="features-list">
        <ul>
            <li>It is open source and cross platform, so it works on every desktop architechture: Linux, OSX,
                Windows.</li><br>
            <li>It is an HD wallet, it uses BIP84 derivation scheme, so it can only generate bech32, native
                segregated witness addresses.</li><br>
            <li>It has advanced coin control features.</li><br>
            <li>This is the only truly light wallet that is already deployed and that does not fail against network
                analysis, thus protects your privacy against network observers. We achieve this by implementing a
                BIP157–158.</li><br>
            <li>The Tor anonymity network is integrated and the wallet cannot be used without it.</li><br>
            <li>The wallet implements a trustless Bitcoin mixing technique, called Chaumian CoinJoin and enforces
                constant 100 anonymity set. This means waiting for peers may take a long time until liquidity
                catches up, no anonymity system used today in any cryptocurrency comes close to this number.</li><br>
            <li>Unlike today’s centralized mixers, in Chaumian CoinJoin, the coordinator of the mix cannot steal
                your coins, nor deanonymize you.</li><br>
            <li>Wasabi only takes a small mixing fee of 0.003%</li><br>
        </ul>
        <a href="https://medium.com/@nopara73/wasabi-privacy-focused-bitcoin-wallet-for-desktop-3962d567045a" style="color:green">*All
            information taken from Nopara73's blog post</a>
    </div>
    <div style="text-align: center;">
        <h2 id="why_wasabi">Why should you use Wasabi Wallet?</h2>
    </div>
    <div id="reasons-list">
        <ul>
            <li>Privacy is a fundamental human right</li><br>
            <li>Fungibility is an essential property of good money</li><br>
            <li>The powers that be are steadily trying to erode our privacy away until we have none at all</li><br>
            <li>Personal privacy limits governmental power</li><br>
            <li>Privacy allows you to choose what aspects of your personal life are made public</li><br>
            <li>Personal financial privacy allows you to safeguard your reputation</li><br>
            <li>Financial privacy gives you a wide degree of control over your personal life</li><br>
            <li>Privacy saves you from having to explain yourself or justify yourself or your actions</li><br>
            <li>Privacy protects your rights to free speech and political activities</li>
        </ul>
    </div>
    <div style="text-align: center;">
        <h2 id="download">Download Wasabi Wallet</h2>
    </div>
    <div id="download-links">
        <ul>
            <li><a href="https://github.com/zkSNACKs/WalletWasabi/releases/download/v0.9.4/WasabiInstaller.msi"
                    style="color:green">Wasabi-Installer.msi</a></li><br>
            <li><a href="https://github.com/zkSNACKs/WalletWasabi/releases/download/v0.9.4/WasabiInstaller.msi.asc"
                    style="color: green">Wasabi-Installer.msi.asc</a></li><br>
            <li><a href="https://github.com/zkSNACKs/WalletWasabi/releases/download/v0.9.4/WasabiLinux.tar.gz"
                    style="color: green">Wasabi-Linux.tar.gz</a></li><br>
            <li><a href="https://github.com/zkSNACKs/WalletWasabi/releases/download/v0.9.4/WasabiLinux.tar.gz.asc"
                    style="color: green">Wasabi-Linux.tar.gz.asc</a></li><br>
            <li><a href="https://github.com/zkSNACKs/WalletWasabi/releases/download/v0.9.4/WasabiOsx.tar.gz" style="color: green">Wasabi-Osx.tar.gz</a></li><br>
            <li><a href="https://github.com/zkSNACKs/WalletWasabi/releases/download/v0.9.4/WasabiOsx.tar.gz.asc"
                    style="color: green">Wasabi-Osx.tar.gz.asc</a></li><br>
            <li><a href="https://github.com/zkSNACKs/WalletWasabi/archive/v0.9.4.zip" style="color: green">Source
                    code (zip)</a></li><br>
            <li><a href="https://github.com/zkSNACKs/WalletWasabi/archive/v0.9.4.tar.gz" style="color: green">Source
                    code (tar.gz)</a></li><br>
        </ul>
    </div>
    <div style="text-align: center;">
        <h3>Stay informed</h3>
    </div>
    <div style="text-align: center;">
        <form id="form" action="www.freecodecamp.com/email-submit" method="GET" target="_blank">
            email:<br>
            <input id="email" type="email" placeholder="please enter email"><br>
            <div id="submit-button"><br>
            <input id="submit" type="submit" value="Submit"></div>
        </form>
    </div>



</body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:63.0) Gecko/20100101 Firefox/63.0.

I used google chrome for Codepen, because of the warning they have about other browsers…

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page

Hi,

Can you please link your Codepen? The code above seems ‘chopped’ as there’s tags missing, making it difficult to see what’s going on.

Hi Danl, yes of course.

link:

hello, :slightly_smiling_face:

i think you should put name=“email” inside input id=“email”

1 Like

Hi Paranoidancer,

Thank you so very much for your help!!!
That was the missing link to pass the tests! I love you guys for helping me! Good luck and God bless!

2 Likes

Glad to be able to help you…
Your code is 99.9% perfect… that’s just a small mistake that I often experience too. Thanks and GBU too!

1 Like

wow, thanks for the compliment, I feel super lost still, to hear that it’s written well makes me feel really good, at least I know I am absorbing the tutorials and practice and stuff even if it doesn’t feel like it yet.

1 Like

i’m also new… just joined one week ago and start from HTML/CSS. I have to take the time to practice every day. Like “playing” with CSS syntaxes and properties, also the HTML attributes. In order to understand the effects that occur on the results. I don’t understand much and often forget what I need to input… :sweat_smile: But I don’t want to give up because no matter how difficult it is, it can still be learned, right? Need to stay excited!

1 Like

Move your CSS (the code inside tags) to the CSS part of codepen, not a big deal at the moment but as you add more styles it wont look good to have everything in one tab.

Also, avoid writing inline-styles, that is styles that you put directly inside HTML elements, you’re repeating yourself a lot this way and make things less readable. Declare these styles in your CSS file instead (or in case of codepen, in the CSS tab).

1 Like

thanks for the pointers and helpful advice!

Awesome! good luck! I have been doing the FCC curriculum starting from html also and I am doing it around my full-time job and family so I don’t have as much time to practice as I’d like, but I am persistent and willing to put in a steady amount of work every week.