diff --git a/lotto.css b/lotto.css
new file mode 100644
index 0000000..9c45957
--- /dev/null
+++ b/lotto.css
@@ -0,0 +1,614 @@
+.frame {
+    width: 500px;
+    height: 1012px;
+  }
+  
+  .frame .view {
+    height: 1012px;
+  }
+  
+  .frame .overlap-group {
+    position: relative;
+    width: 500px;
+    height: 1012px;
+  }
+  
+  .frame .background-shadow-wrapper {
+    position: absolute;
+    width: 500px;
+    height: 1012px;
+    top: 0;
+    left: 0;
+  }
+  
+  .frame .background-shadow {
+    position: relative;
+    height: 1012px;
+    background-color: #ffffff;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0px 0px 10px #0000001a;
+  }
+  
+  .frame .paragraph-background {
+    position: absolute;
+    width: 500px;
+    height: 98px;
+    top: 0;
+    left: 0;
+    background-color: #4b89dc;
+  }
+  
+  .frame .heading {
+    width: 182px;
+    height: 27px;
+    top: 21px;
+    left: 159px;
+    font-family: "Noto Sans KR-Bold", Helvetica;
+    font-weight: 700;
+    font-size: 24px;
+    position: absolute;
+    color: #ffffff;
+    text-align: center;
+    letter-spacing: 0;
+    line-height: normal;
+    white-space: nowrap;
+  }
+  
+  .frame .text-wrapper {
+    width: 206px;
+    height: 17px;
+    top: 57px;
+    left: 147px;
+    font-family: "Noto Sans KR-Regular", Helvetica;
+    font-weight: 400;
+    font-size: 16px;
+    position: absolute;
+    color: #ffffff;
+    text-align: center;
+    letter-spacing: 0;
+    line-height: normal;
+    white-space: nowrap;
+  }
+  
+  .frame .div {
+    position: absolute;
+    width: 103px;
+    height: 27px;
+    top: 119px;
+    left: 20px;
+    font-family: "Arial-Bold", Helvetica;
+    font-weight: 700;
+    color: #000000;
+    font-size: 18px;
+    letter-spacing: 0;
+    line-height: normal;
+  }
+  
+  .frame .background {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 165px;
+    left: 20px;
+    background-color: #fbc400;
+    border-radius: 22.5px;
+  }
+  
+  .frame .text-wrapper-2 {
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    top: 8px;
+    left: 17px;
+    font-family: "Noto Sans KR-Bold", Helvetica;
+    font-weight: 700;
+    color: #ffffff;
+    font-size: 20px;
+    letter-spacing: 0;
+    line-height: normal;
+  }
+  
+  .frame .div-wrapper {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 165px;
+    left: 103px;
+    background-color: #69c8f2;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-2 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 170px;
+    left: 186px;
+    background-color: #ff7272;
+    border-radius: 22.5px;
+  }
+  
+  .frame .text-wrapper-3 {
+    width: 25px;
+    height: 25px;
+    top: 3px;
+    left: 17px;
+    font-family: "Noto Sans KR-Bold", Helvetica;
+    font-weight: 700;
+    color: #ffffff;
+    font-size: 20px;
+    position: absolute;
+    letter-spacing: 0;
+    line-height: normal;
+  }
+  
+  .frame .background-3 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 170px;
+    left: 269px;
+    background-color: #aaaaaa;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-4 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 170px;
+    left: 352px;
+    background-color: #b0d840;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-5 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 170px;
+    left: 435px;
+    background-color: #fbc400;
+    border-radius: 22.5px;
+  }
+  
+  .frame .button {
+    all: unset;
+    box-sizing: border-box;
+    position: absolute;
+    width: 460px;
+    height: 40px;
+    top: 230px;
+    left: 20px;
+    background-color: #4b89dc;
+    border-radius: 5px;
+  }
+  
+  .frame .text-wrapper-4 {
+    width: 101px;
+    height: 17px;
+    top: 10px;
+    left: 180px;
+    font-family: "Noto Sans KR-Bold", Helvetica;
+    font-weight: 700;
+    color: #ffffff;
+    font-size: 16px;
+    text-align: center;
+    white-space: nowrap;
+    position: absolute;
+    letter-spacing: 0;
+    line-height: normal;
+  }
+  
+  .frame .horizontal-border {
+    position: absolute;
+    width: 460px;
+    height: 199px;
+    top: 300px;
+    left: 20px;
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-color: #eeeeee;
+  }
+  
+  .frame .heading-2 {
+    width: 113px;
+    top: 22px;
+    left: 0;
+    position: absolute;
+    height: 20px;
+    font-family: "Noto Sans KR-Bold", Helvetica;
+    font-weight: 700;
+    color: #000000;
+    font-size: 18px;
+    letter-spacing: 0;
+    line-height: normal;
+    white-space: nowrap;
+  }
+  
+  .frame .label {
+    position: absolute;
+    width: 73px;
+    height: 17px;
+    top: 68px;
+    left: 0;
+    font-family: "Noto Sans KR-Regular", Helvetica;
+    font-weight: 400;
+    color: #000000;
+    font-size: 16px;
+    letter-spacing: 0;
+    line-height: normal;
+    white-space: nowrap;
+  }
+  
+  .frame .input {
+    position: absolute;
+    width: 380px;
+    height: 37px;
+    top: 60px;
+    left: 80px;
+    background-color: #ffffff;
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid;
+    border-color: #dddddd;
+  }
+  
+  .frame .container {
+    position: relative;
+    width: 347px;
+    height: 15px;
+    top: 11px;
+    left: 9px;
+    background-color: #ffffff;
+    overflow: scroll;
+  }
+  
+  .frame .container::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
+  
+  .frame .text-wrapper-5 {
+    width: 8px;
+    height: 15px;
+    top: -1px;
+    left: 0;
+    font-family: "Noto Sans KR-Regular", Helvetica;
+    font-weight: 400;
+    color: #000000;
+    font-size: 13.3px;
+    white-space: nowrap;
+    position: absolute;
+    letter-spacing: 0;
+    line-height: normal;
+  }
+  
+  .frame .p {
+    width: 234px;
+    height: 17px;
+    top: 107px;
+    left: 0;
+    font-family: "Noto Sans KR-Regular", Helvetica;
+    font-weight: 400;
+    color: #000000;
+    font-size: 16px;
+    white-space: nowrap;
+    position: absolute;
+    letter-spacing: 0;
+    line-height: normal;
+  }
+  
+  .frame .button-2 {
+    all: unset;
+    box-sizing: border-box;
+    position: absolute;
+    width: 460px;
+    height: 40px;
+    top: 148px;
+    left: 0;
+    background-color: #4b89dc;
+    border-radius: 5px;
+  }
+  
+  .frame .text-wrapper-6 {
+    width: 64px;
+    height: 17px;
+    top: 10px;
+    left: 198px;
+    font-family: "Noto Sans KR-Bold", Helvetica;
+    font-weight: 700;
+    color: #ffffff;
+    font-size: 16px;
+    text-align: center;
+    white-space: nowrap;
+    position: absolute;
+    letter-spacing: 0;
+    line-height: normal;
+  }
+  
+  .frame .background-6 {
+    position: absolute;
+    width: 460px;
+    height: 461px;
+    top: 520px;
+    left: 20px;
+    background-color: #f5f5f5;
+    border-radius: 5px;
+  }
+  
+  .frame .heading-3 {
+    width: 118px;
+    top: 16px;
+    left: 15px;
+    position: absolute;
+    height: 20px;
+    font-family: "Noto Sans KR-Bold", Helvetica;
+    font-weight: 700;
+    color: #000000;
+    font-size: 18px;
+    letter-spacing: 0;
+    line-height: normal;
+    white-space: nowrap;
+  }
+  
+  .frame .text-wrapper-7 {
+    width: 130px;
+    height: 17px;
+    top: 54px;
+    left: 15px;
+    font-family: "Noto Sans KR-Regular", Helvetica;
+    font-weight: 400;
+    color: #000000;
+    font-size: 16px;
+    white-space: nowrap;
+    position: absolute;
+    letter-spacing: 0;
+    line-height: normal;
+  }
+  
+  .frame .background-7 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 95px;
+    left: 15px;
+    background-color: #fbc400;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-8 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 95px;
+    left: 92px;
+    background-color: #69c8f2;
+    border-radius: 22.5px;
+  }
+  
+  .frame .text-wrapper-8 {
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    top: 8px;
+    left: 11px;
+    font-family: "Noto Sans KR-Bold", Helvetica;
+    font-weight: 700;
+    color: #ffffff;
+    font-size: 20px;
+    letter-spacing: 0;
+    line-height: normal;
+  }
+  
+  .frame .background-9 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 95px;
+    left: 169px;
+    background-color: #ff7272;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-10 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 95px;
+    left: 246px;
+    background-color: #aaaaaa;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-11 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 95px;
+    left: 323px;
+    background-color: #b0d840;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-12 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 95px;
+    left: 400px;
+    background-color: #fbc400;
+    border-radius: 22.5px;
+  }
+  
+  .frame .text-wrapper-9 {
+    width: 126px;
+    height: 17px;
+    top: 160px;
+    left: 15px;
+    font-family: "Noto Sans KR-Regular", Helvetica;
+    font-weight: 400;
+    color: #000000;
+    font-size: 16px;
+    white-space: nowrap;
+    position: absolute;
+    letter-spacing: 0;
+    line-height: normal;
+  }
+  
+  .frame .background-13 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 201px;
+    left: 15px;
+    background-color: #fbc400;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-14 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 201px;
+    left: 92px;
+    background-color: #69c8f2;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-15 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 201px;
+    left: 169px;
+    background-color: #ff7272;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-16 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 201px;
+    left: 246px;
+    background-color: #aaaaaa;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-17 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 201px;
+    left: 323px;
+    background-color: #b0d840;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-18 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 201px;
+    left: 400px;
+    background-color: #fbc400;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-19 {
+    position: absolute;
+    width: 430px;
+    height: 41px;
+    top: 266px;
+    left: 15px;
+    background-color: #e8f4fd;
+    border-radius: 5px;
+  }
+  
+  .frame .text-wrapper-10 {
+    width: 150px;
+    height: 17px;
+    top: 10px;
+    left: 140px;
+    font-family: "Noto Sans KR-Bold", Helvetica;
+    font-weight: 700;
+    color: #000000;
+    font-size: 16px;
+    text-align: center;
+    white-space: nowrap;
+    position: absolute;
+    letter-spacing: 0;
+    line-height: normal;
+  }
+  
+  .frame .background-20 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 860px;
+    left: 35px;
+    background-color: #fbc400;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-21 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 860px;
+    left: 112px;
+    background-color: #69c8f2;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-22 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 860px;
+    left: 189px;
+    background-color: #ff7272;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-23 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 860px;
+    left: 266px;
+    background-color: #aaaaaa;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-24 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 860px;
+    left: 343px;
+    background-color: #b0d840;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-25 {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 860px;
+    left: 420px;
+    background-color: #fbc400;
+    border-radius: 22.5px;
+  }
+  
+  .frame .background-26 {
+    position: absolute;
+    width: 430px;
+    height: 41px;
+    top: 925px;
+    left: 35px;
+    background-color: #e8f4fd;
+    border-radius: 5px;
+  }
\ No newline at end of file
diff --git a/lotto.html b/lotto.html
new file mode 100644
index 0000000..760a8ed
--- /dev/null
+++ b/lotto.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="lotto.css"/>
+</head>
+<body>
+  <div class="frame">
+      <div class="view">
+        <div class="overlap-group">
+          <div class="background-shadow-wrapper">
+            <div class="backgroud-shadow">
+              <div class="paragraph-background">
+                <div class="heading">로또 번호 생성기</div>
+                  <div class="text-wrapper">행운의 번호를 생성해보세요!</div>
+              </div>
+              <div class="div">번호 생성</div>
+              <div class="background-0"><div class="text-wrapper-2">?</div></div>
+              <div class="background-1"><div class="text-wrapper-2">?</div></div>
+              <div class="background-2"><div class="text-wrapper-2">?</div></div>
+              <div class="background-3"><div class="text-wrapper-2">?</div></div>
+              <div class="background-4"><div class="text-wrapper-2">?</div></div>
+              <div class="background-5"><div class="text-wrapper-2">?</div></div>
+              <button class="button"><div class="text-wrapper-4">번호 생성하기</div></button>
+              <div class="horizontal-border"></div>
+              <div class="heading-2">로또 구매하기</div>
+                <div class="label">구매 수량:</div>
+                <div class="input">
+                  <div class="container"><div class="text-wrapper-5">3</div></div>
+                </div>
+                <p class="p">총 금액: 3,000원 (1장당 1,000원)</p>
+                <button class="button-2"><div class="text-wrapper-6">구매하기</div></button>
+              </div>
+              <div class="background-6">
+                <div class="heading-3">당첨 결과 확인</div>
+                <div class="text-wrapper-7">이번 주 당첨 번호:</div>
+                <div class="background-7"><div class="text-wrapper-2">3</div></div>
+                <div class="background-8"><div class="text-wrapper-8">14</div></div>
+                <div class="background-9"><div class="text-wrapper-8">25</div></div>
+                <div class="background-10"><div class="text-wrapper-8">33</div></div>
+                <div class="background-11"><div class="text-wrapper-8">41</div></div>
+                <div class="background-12"><div class="text-wrapper-2">9</div></div>
+                <div class="text-wrapper-9">내가 구매한 번호:</div>
+                <div class="background-13"><div class="text-wrapper-2">7</div></div>
+                <div class="background-14"><div class="text-wrapper-8">12</div></div>
+                <div class="background-15"><div class="text-wrapper-8">25</div></div>
+                <div class="background-16"><div class="text-wrapper-8">38</div></div>
+                <div class="background-17"><div class="text-wrapper-8">42</div></div>
+                <div class="background-18"><div class="text-wrapper-2">9</div></div>
+                <div class="background-19"><div class="text-wrapper-10">결과: 2개 일치</div></div>
+              </div>
+            </div>
+          </div>
+          <div class="background-20"><div class="text-wrapper-2">3</div></div>
+          <div class="background-21"><div class="text-wrapper-8">14</div></div>
+          <div class="background-22"><div class="text-wrapper-8">25</div></div>
+          <div class="background-23"><div class="text-wrapper-8">33</div></div>
+          <div class="background-24"><div class="text-wrapper-8">41</div></div>
+          <div class="background-25"><div class="text-wrapper-2">9</div></div>
+          <div class="background-26"><p class="text-wrapper-10">결과: 6개 일치 - 당첨</p></div>
+        </div>
+      </div>
+    </div>
+</body>
+</html>
\ No newline at end of file