Help with a code challenge.

Question

Hi all, I've been tasked with recreating the page on the following link in HTML and CSS:

http://www.key-online.co.uk/app-test.php

Now don't get me wrong, it did occur to me to just save the .png and insert it as an image but actually, I want to do this properly so I'm just hoping for some advice really.

Where would you start with a task like this one?

I've written out the HTML as follows:

<!DOCTYPE html>
<html class="gr_key-online_co_uk">

   <head>
    <meta charset="utf-8">
    <title>app-test.php</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">  
  </head>  

  <body data-gr-c-s-loaded="true">

    <div class="content">
      <h2 class="title"> <b>$167</b> still needed for this project</h2>      
      <div class="info">
        <p><strong>Only 3 days left</strong> to fund this project.<br><br>Join the <strong>42</strong> other donors who have already supported this project. Every dollar helps</p>
        <input type="text" id="amount" name="amount" placeholder="$ 50">
        <button type="button" class="button">Give Now</button>
        <p class="blue"><i>Why give $50?</i></p>   
      </div>      

      <div class="options">
        <button type="button" class="optbutt leftbutt">Save for later</button>
        <button type="button" class="optbutt">Tell your friends</button>
      </div>      

    </div>
  </body>  
</html>

What I'm not sure about is how to go about adding the loading bar on top and things like that. I could create an empty div, give it some properties and use grid to turn it into something resembling a loading bar?

In terms of making sure everything lines up, I could use flexbox to make sure that there is even space, especially with things like the options div where I've got two buttons.

I'd just really appreciate any help you guys could give with how you'd approach this one. I'd be most grateful.

Answer 1 · 2018-08-22T19:44:52Z

August 22, 2018 7:44pm

Hi Thomas,

There are lots of ways you can approach this.

For the loading bar, check out W3C CSS Progress Bars - pretty straightforward solution using 2 divs. The outer div has a border and acts as a container. You control how far the bar has progressed by setting the width of the inner div.

For the section above the loading bar. You can use borders to create the triangle shape. I used a slight variation of this

Here's a very rough version based on these sources:

<div class="container">

    <body data-gr-c-s-loaded="true">
        <div class="hero">
            <h2 class="title"> <b>$167</b> still needed for this project</h2>
        </div>
        <div class="content">
            <div class="info">
                <div class="loadingBarOuter">
                    <div class="loadingBarInner"></div>
                </div>
                <p><strong>Only 3 days left</strong> to fund this project.
                    <br>
                    <br>Join the <strong>42</strong> other donors who have already supported this project. Every dollar helps</p>
                <input type="text" id="amount" name="amount" placeholder="$ 50">
                <button type="button" class="button">Give Now</button>
                <p class="blue"><i>Why give $50?</i></p>
            </div>
            <div class="options">
                <button type="button" class="optbutt leftbutt">Save for later</button>
                <button type="button" class="optbutt">Tell your friends</button>
            </div>
        </div>
</div>
</body>

</html>

 .container {
        margin: 0 auto;
        width: 40%;
    }
    .loadingBarOuter {
        border: 1px solid grey;
    }

    .loadingBarInner {
        height: 24px;
        width: 70%;
        background: red;
    }

    .hero {
        position: relative;
        background-color: #444;
        /*height: 80px !important;*/
        width: 100% !important;
        margin-bottom: 50px;
        padding: 2px;    
        text-align: center;
        color: #fff;
    }

    .hero:after {
        content: '';
        position: absolute;
        top: 100%;
        right: 10%;
        margin-left: -50px;
        width: 0;
        height: 0;
        border-top: solid 10px #444;
        border-left: solid 10px transparent;
        border-right: solid 10px transparent;

    }

Using flexbox for aligning elements would work well. Not sure about CSS grid as I haven't used it. But I'm sure it will be fine. Just be aware of browser support.

Also see:

CSS Shapes

Hope this helps :)

Welcome to the Treehouse Community

Looking to learn something new?

Thomas Hewitt

Thomas Hewitt

Help with a code challenge.

1 Answer

James Anwyl

James Anwyl

Thomas Hewitt

Thomas Hewitt