Feature/token sale box fixed

src/components/Main/index.css

@@ -1,10 +1,68 @@
+/* token sale box styles */
 .token-sale-box {
-  width: 554px;
-  height: 302px;
+  position: relative;
+  overflow: hidden;
+  margin-top: 40px;
+  width: auto;
+  max-width: 554px;
+  height: auto;
   border-radius: 20px;
   background-color: #ffffff;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
 }
+.token-sale-box-body {
+  display: flex;
+  padding: 15px;
+  padding-left: 200px;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.token-sale-box-body-text {
+  max-width: auto;
+  font-size: 20px;
+  line-height: 1.1;
+  color: #bebebe;
+  padding-top: 10px;
+  padding-bottom: 20px;
+}
+.token-sale-header {
+  display: flex;
+  padding-left: 199px;
+  align-items: center;
+  vertical-align: middle;
+  /* width: 554px; */
+  width: 100%;
+  height: 89px;
+  background-image: linear-gradient(to left, #ffb158, #ff6427);
+  font-size: 40px;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+  color: #ffffff;
+}
+.token-sale-header-text {
+  margin-top: 5px;
+}
+.token-sale-header2 {
+  font-size: 40px;
+  font-weight: bold;
+  color: #001ada;
+}
+.ares-coin {
+  position: absolute;
+  width: 198;
+  height: 198;
+  left: 5px;
+  top: 20px;
+}
+/* token sale box styles end */
+
+
 .graph {
   width: 411.7px;
   height: 17px;
@@ -40,19 +98,6 @@
   background-origin: border-box;
   background-clip: content-box, border-box;
 }
-.token-sale-header {
-  width: 554px;
-  height: 89px;
-  background-image: linear-gradient(to left, #ffb158, #ff6427);
-  font-size: 40px;
-  font-weight: normal;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: left;
-  color: #ffffff;
-}
 
 .main {
     background-image: linear-gradient(80deg, #cf38da, #7400a4);
@@ -116,32 +161,49 @@
         bottom: 0;
     }
 }
-
-@media (max-width: 768px) {
-    .btn.main__button {
-        width: auto;
-    }
+@media (max-width: 850px) {
   .token-sale-box {
-    width: 100%;
+    max-width: 450px;
   }
+}
+@media (max-width: 768px) {
   .ares-coin {
     width: 60px;
     height: auto;
     left: 15px !important;
     top: 18px !important;
   }
+  .token-sale-header {
+    font-size: 2rem;
+    justify-content: center;
+  }
+  .token-sale-header2 {
+    font-size: 2rem;
+  }
   .token-sale-header, .token-sale-box-body {
     width: 100%;
     padding-left: 20px !important;
   }
+  .token-sale-box-body-text {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+/* iphone 6/7/8 */
+@media (max-width: 375px) {
+}
+
+/* iphone 5/SE */
+@media (max-width: 320px) {
   .token-sale-header {
-    font-size: 40px;
-    justify-content: center;
+    font-size: 2rem;
   }
-  .graph {
-    width: 90%;
+  .token-sale-header2 {
+    font-size: 1.8rem;
   }
-  .token-text {
-    width: 90%
+  .token-sale-header-text {
+    margin-top: 5px;
+    margin-left: 40px;
   }
 }

src/components/Main/index.js

@@ -90,16 +90,16 @@ const Main = () => (
         </a>
       </div>
     </div>
-    <div className="token-sale-box" style={{position: 'relative', overflow: 'hidden', marginTop: '40px'}}>
-      <div className="token-sale-header" style={{display: 'flex', paddingLeft: '199px', alignItems: 'center', verticalAlign: 'middle'}}>
-        <div style={{verticalAlign: 'center', height: '36px', padingTop: '5px'}}><FormattedMessage id="main.tokenSaleBox.title" /></div>
+    <div className="token-sale-box">
+      <div className="token-sale-header">
+        <div className="token-sale-header-text"><FormattedMessage id="main.tokenSaleBox.title" /></div>
       </div>
       <img className="ares-coin" src="/images/arestech-coin.png" alt="arestech-coin" style={{position: 'absolute', width:"198", height:"198", left: '5px', top: '20px'}}/>
-      <div className="token-sale-box-body" style={{display: 'flex', paddingLeft: '199px', flexDirection: 'column', width: '100%', height: '100%', overflow: 'hidden'}}>
-        <div className="token-sale-header2" style={{ marginTop: '15px', height: '38px', fontSize: '40px', fontWeight: 'bold', color: '#001ada'}}>
+      <div className="token-sale-box-body" >
+        <div className="token-sale-header2">
           <FormattedMessage id="main.tokenSaleBox.subTitle" />
         </div>
-        <div style={{marginTop: '25px', maxWidth: '295px', fontSize: '20px', lineHeight: '1.1', color: '#bebebe'}}>
+        <div className="token-sale-box-body-text">
           <FormattedMessage id="main.tokenSaleBox.description" />
         </div>
       </div>