Weegle Search BarUIのコピー

18036 ワード
CSS WeCode html Weegle テキストリンク

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <!-- <a href="wecode.co.kr"> 위코드 접ㄱ</a> -->
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://kit.fontawesome.com/c491e52303.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="logo">
      <img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" alt="Weegle">
    </div>
    <div class="search__box">
      <input type="text" />
      <i class="fas fa-search"></i>
      <div class="right">
        <i class="far fa-keyboard"></i>
        <i class="fas fa-microphone"></i>
      </div>
    </div>
    <div class="two__small__box">
      <div class="small__box">Weegle 검색</div>
      <div class="small__box">I'm feeling Lucky</div>
    </div>
    <footer class="info">
      Weegle 제공 서비스 : <a href="#"> &nbsp;English
    </footer>
  </body>
</html>

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.logo {
  display: flex;
  justify-content: center;
}

.search__box {
  position: relative;
  margin: 0 auto;
  width: 800px;
}

.search__box input {
  width: 100%;
  border: 1px solid #bbb;
  border-radius: 15px;
  padding: 10px 12px;
  font-size: 14px;
}

.search__box i.fa-search {
  position: absolute;
  font-size: 18px;
  top: 10px;
  left: 12px;
  padding-left: 10px;
}

.search__box .right {
  position: absolute;
  font-size: 18px;
  top: 10px;
  right: 12px;
}

.search__box .right i {
  display: inline-block;
  padding-right: 10px;
}

.search__box .right i.fa-microphone {
  color: #4f86ec;
}

.two__small__box {
  display: flex;
  justify-content: center;
  margin-top: 19px;
  height: 48px;
}

.small__box {
  display: flex;
  color: #939396;
  background-color: #f4f4f4;
  margin: 0 10px;
  padding: 0 10px;
  align-items: center;
  border-radius: 8px;
}

footer.info {
  display: flex;
  justify-content: center;
  margin-top: 38px;
}

footer.info a {
  text-decoration: none;
}
[4] Vue's components communication
UNIXネットワークプログラミング-socketのkeep-alive