first commit

styles/base/_base.scss

@@ -0,0 +1,15 @@
+
+
+// html {  
+//     font-size: 62.5%;
+// }
+
+body {
+    box-sizing: border-box;
+    // font-size: 62.5%;
+    overflow-x: hidden;
+    @include respond(tab-port) {
+        padding: 0;
+    }
+}
+

styles/base/_utilities.scss

@@ -0,0 +1,285 @@
+// colors
+.bg-green {
+  background-color: #3bb78f;
+  background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
+}
+
+.text-green-Awni{
+  color: #0A886A;
+}
+
+.anwi_grey_bg{
+  background-color: #ECECEC;
+}
+
+.orbitron_font{
+  font-family: 'Orbitron', sans-serif;
+}
+
+.satoshi_font{
+  font-family: "Satoshi", sans-serif;
+}
+
+// font size
+.font-1{
+  font-size: 1rem;
+}
+.font-3 {
+  font-size: 3rem;
+}
+
+.font-1-2{
+  font-size: 1.2rem;
+}
+
+.font-1-5{
+  font-size: 1.5rem;
+}
+.font-1_5 {
+  font-size: 2rem;
+}
+
+.font-1_7{
+  font-size: 1.7rem;
+}
+
+
+.font-2{
+  font-size: 2rem;
+}
+
+.font-2_2{
+  font-size: 2.2rem;
+}
+
+.font-2_7{
+  font-size: 2.7rem;
+}
+
+
+.font_4{
+  font-size: 4rem;
+}
+
+.font-5{
+  font-size: 5rem;
+}
+
+.font-6{
+  font-size: 6rem;
+}
+
+.font-7{
+  font-size: 7rem;
+}
+
+.font-10{
+  font-size: 10rem;
+}
+
+
+.subtitle_1 {
+  font-size: 1.5rem;
+}
+
+
+
+.banner_heading_4 {
+  font-size: 3rem;
+}
+
+
+// padding
+
+.padding_top_14 {
+  padding-top: 14rem;
+}
+
+.p-6{
+  padding:5rem;
+}
+
+.ps-7{
+  padding-left: 6rem;
+}
+
+.px-6{
+  padding-left: 6rem;
+    padding-right: 6rem;
+}
+
+.p-7{
+  padding: 7rem;
+}
+
+.padding_top_10 {
+  padding-top: 10rem; }
+
+.padding_top_13{
+  padding-top: 13rem; 
+}
+
+.padding_bottom_ONE_FIVE{
+  padding-bottom: 1.5rem;
+}
+// heights
+
+.h-10{
+  height: 10%;
+}
+
+.h-15{
+  height: 15%;
+}
+
+.h-20{
+  height: 20%;
+}
+
+.h-30{
+  height: 30%;
+}
+
+.h-33{
+  height: 33%;
+}
+.h-34{
+  height: 34%;
+}
+.h-35{
+  height: 35%;
+}
+
+.h-40{
+  height: 40%;
+}
+
+.vh_60{
+  height: 60vh;
+}
+
+.vh-70{
+  height: 70vh;
+}
+
+.vh-77{
+  height: 77vh;
+}
+
+.vh-85 {
+  height: 85vh;
+}
+
+.vh-15 {
+  height: 15vh;
+}
+
+.h-700p{
+  height: 700px;
+}
+
+.h-25{
+  height: 25%;
+}
+
+.h-60{
+  height: 60%;
+}
+
+.h-75{
+  height: 75%;
+}
+
+.w-60{
+  width: 60%;
+}
+
+
+.w-20p{
+  width: 20px;
+}
+
+.w-200{
+  width:200px;
+}
+
+// font weight
+
+
+.fw-500{
+  font-weight: 500;
+}
+
+.fw-600{
+  font-weight: 600;
+}
+
+
+  .fw-700 {
+    font-weight: 700; }
+
+
+.h-200p{
+  height: 200px;
+}
+
+// margin
+.mt-7 {
+  margin-top: 7rem;
+}
+
+
+// spacing
+
+
+.sec-space-1 {
+  margin-top: 80px;
+}
+
+.sec-space-2 {
+  margin-top: 60px;
+}
+
+.sec-space-3 {
+  margin-top: 40px;
+}
+
+.sec-space-4 {
+  margin-top: 20px;
+}
+
+.sec-space-5 {
+  margin-top: 0px;
+}
+
+.h-100p {
+  height: 100px;
+}
+
+
+
+// gap
+
+.gap-1 {
+  gap: 0.7rem;
+}
+
+.gap-2{
+  gap:2rem
+}
+
+// border-radius
+
+.br-1{
+  border-radius: 1rem;
+}
+
+.cursor-pointer{
+  cursor: pointer;
+}
+
+
+// margin
+.mt-5C{
+  margin-top: 5rem;
+}