[SOLVED] Dex-like Uniswap

Hello, I am in need of some help here. I am trying to code the Uniswap Dex that Filip taught. However, Something isn’t right with my and CSS as my results are now quite the same. I’ve tried playing around for hours, so I think I need some expert help.

Thanks

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Dex</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Dex</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
            </ul>
            <button id="login_button" class="btn btn-outline-primary my-2 my-sm-0" type="submit">Sign in with Metamask</button>
        </div>
    </nav>
    <div class="container">
      <div class="row"> 
          <div class="col col-md-6 offset-md-3" id="window">
            <h4>Swap</h4>
            <div id="form">
                <div class="Swapbox">
                    <div class="Swapbox_select">
                      SELECT TOKEN  
                    </div>
                    <div class="swapbox_select">
                        <input class="number form-control" placeholder="amount" id="from_amount">
                    </div>
                </div>
                <div class="Swapbox">
                    <div class="Swapbox_select"> 
                      SELECT TOKEN                         
                </div>
                <div class="Swapbox_select">
                    <input class="number form-control" placeholder="amount" id="from_amount">
                </div>
            </div>
        </div>
    </div>
</div>
</div>

    <script type="text/javascript" src="./main.js"></script>
</body>

</html>```


CSS Code

#window{

margin-top: 50px;

background-color: black;

color: cornsilk;

padding: 15px;

border-radius: 20px;

box-shadow: 0 0 5px black;

}

.swapbox_select{

width:50%;

float: right;

}type or paste code here

Can anyone help at all or not???

Hi @ProjekP

Could you please explain exactly what the problem is. Also you can take a look at the tutorial repo

Hello Yomoo, it’s ok. It’s sorted now. I basically did not capitalize Swapbox_select in my CSS code. All fine now.

Thanks