반응형

도지스왑 

 

 스캠의 대명사 도지코인에 대한 스왑 html 홈페이지를 만들어 보았다. 아직 이미지나 디자인, css에 대한 기교가 없어서 간단하게 구현할 수 있는 방식으로 구현해 보았다. 

기본적인 coinmarketcap의 스왑 웹사이트를 보고 구현을 진행하였다. 아직 javascript를 사용하여 연결이나 동작은 작동하지 않지만, 기본적인 html과 css 와꾸를 만들어 보았다.

 

html 도지스왑

 

아직 header 부분의 div 속성값에 대한 부분을 숙지하지 못해서 버튼들의 중앙값을 설정하지 못하였다. 차차 알아가야겠다.

 

 

1. dogeswap.html 

 

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/dogeswap.css" />
  </head>
  <body>
    <div>
      <nav>
        <div class="header">
          <div class="logo">
            <button><img src="./imgs/dogeicon.png" alt="dogeicon" /></button>
          </div>
          <h2>DOGDSWAP / APP V2</h2>

          <div class="contentbox">
            <div class="swaptext">Swap</div>
            <div class="pooltext">Pools</div>
            <div class="bridgetext">Bridge</div>
            <div class="farmtext">Farm</div>
            <div class="vesistexs">veSIS</div>
          </div>
        </div>

        <ul class="gnb">
          <li>Rewards</li>
          <li>Get SIS & LP Tokens</li>
          <li>veSIS</li>
          <li>Zap</li>
          <li>Developers</li>
          <li>Audits</li>
          <li>Explorer</li>
          <li>Index</li>
          <li>Explorer UI</li>
        </ul>
        <div class="main">
          <div class="exchange">
            <h3>Exchange</h3>
          </div>

          <div class="from">
            Transform From Ethereum: <br />
            <div class="fromToken">
              <select name="tokenselect" id="token"></select>
            </div>
            <div class="writeBalance">
              <input type="number" />
            </div>
          </div>

          <div class="exchangebtn">
            <button><img src="./imgs/swap.png" alt="swapbtn" /></button>
          </div>

          <div>
            <div class="to">
              Transform To: <br />
              <div class="fromToken">
                <select name="tokenselect" id="token"></select>
              </div>
              <div class="writeBalance">
                <input type="number" />
              </div>
            </div>
          </div>

          <div class="add wallet"></div>
          <div class="connect wallet">
            <button>CONNECT WALLET</button>
          </div>
        </div>
      </nav>
    </div>
    <div></div>
    <div></div>
  </body>
</html>

 

 

 

2. dogeswap.css

 

.header {
  display: flex;
  background-image: url(../imgs/dogebackground.jpg);
}

.header h2 {
  color: aquamarine;
}

.contentbox {
  display: inline-flex;
  margin: auto;
  /* display: inline-flex;
  justify-content: center; */
}

.contentbox div {
  width: 100px;
  height: 40px;
  margin: 5px;
  border-radius: 10px;
  background-color: cadetblue;
  color: black;
  text-align: center;
  border: 1px solid;
}

.gnb > li {
  display: none;
}

.main {
  border: 5px solid;
  background-image: url(../imgs/dogehell.jpg);
}

.main div {
  text-align: center;
  color: aquamarine;
  font-size: 30px;
  font-weight: bold;
}

.main select {
  width: 40px;
  height: 40px;
}

.main input {
  width: 300px;
  height: 40px;
}

.from div,
.To div {
  display: inline-block;
  margin: 20px;
}

.exchangebtn {
  margin: 100px;
}

.exchangebtn button img {
  width: 20px;
  height: 20px;
}

.logo button img {
  width: 70px;
  height: 70px;
}

 

반응형

'블록체인 개발 > 클론코딩' 카테고리의 다른 글

경일게임아카데미 클론코딩 - 5  (2) 2023.06.23
경일게임 아카데미 클론코딩 - 4  (0) 2023.06.22
경일게임아카데미 클론코딩 - 3  (0) 2023.06.21
경일게임아카데미 웹사이트 클론하기- 2  (0) 2023.06.20
경일게임아카데미 웹사이트 클론하기  (2) 2023.06.19

+ Recent posts

티스토리툴바