praveenscience · RaghavMaskara21 · Oct 7, 2021
diff --git a/RaghavMaskara21/first/HayDay.png b/RaghavMaskara21/first/HayDay.png
diff --git a/RaghavMaskara21/first/Hay_Day_logo.png b/RaghavMaskara21/first/Hay_Day_logo.png
diff --git a/RaghavMaskara21/first/hd_large.jpg b/RaghavMaskara21/first/hd_large.jpg
diff --git a/RaghavMaskara21/first/index.html b/RaghavMaskara21/first/index.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HAY DAY</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <!--Google Fonts-->   
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+    <!--Google Fonts-->
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <header>              
+        <!--NavBar Start-->
+        <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-nav">
+          <div class="container-fluid">          
+            <img src="Hay_Day_logo.png" class="navbar-brand">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+              <div class="navbar-nav">
+                <a class="nav-link active" aria-current="page" href="index.html">Home</a>
+                <a class="nav-link" href="#">Price Calculator</a>
+                <a class="nav-link" href="#">Bems Calculator</a>
+                <a class="nav-link" href="#">Barn Size Calculator</a>
+                <a class="nav-link" href="#">Deco Cost Calculator</a> 
+                <a class="nav-link" href="#">Food List Maker</a>
+                <a class="nav-link" href="#">Hay Day Mod Apk</a>
+                <a class="nav-link" href="#">Contact Us</a>                
+              </div>
+            </div>
+          </div>
+        </nav>
+        <!--Navbar End-->        
+        <img class="responsive1" src="HayDay.png ">
+        <img class="responsive2" src="hd_large.jpg">
+    </header>
+  <main>
+      <div class="container btn-links">
+      <div class="row">
+        <div class="col-md-4 card" style="width: 18rem;">
+          <div class="card-body">
+            <h5 class="card-title">PRICE CALCULATOR</h5>        
+            <p class="card-text">Calculate the total price of the list foods using multiplier.</p>             
+            <a href="#" class="btn btn-outline-danger">Open</a>        
+          </div>
+        </div>
+
+        <div class="col-md-4 card" style="width: 18rem;">
+          <div class="card-body">
+            <h5 class="card-title">FOOD LIST MAKER</h5>        
+            <p class="card-text">Select the quantity of foods you want and make a list instantly.</p>
+            <a href="#" class="btn btn-outline-danger">Open</a>          
+          </div>
+        </div>
+
+        <div class="col-md-4 card" style="width: 18rem;">
+          <div class="card-body">
+            <h5 class="card-title">BEMS CALCULATOR</h5>        
+            <p class="card-text">Are you a Fb trader? Enter the Complete List of Foods with ratios and get the total bems instantly.<br>
+            </p>
+            <a href="#" class="btn btn-outline-danger">Open</a>         
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-4 card" style="width: 18rem;">
+          <div class="card-body">
+            <h5 class="card-title">DECO COST CALCULATOR</h5>        
+            <p class="card-text">Want to Decorate Your Farm and have no idea how much will it cost? Calculate Here!</p>
+            <a href="#" class="btn btn-outline-danger">Open</a>         
+          </div>
+        </div> 
+
+        <div class="col-md-4 card" style="width: 18rem;">
+          <div class="card-body">
+            <h5 class="card-title">BARN SIZE CALCULATOR</h5>        
+            <p class="card-text">Calculate the Number of bems required to upgrade your barn.</p>
+            <a href="#" class="btn btn-outline-danger">Open</a>          
+          </div>
+        </div>
+
+        <div class="col-md-4 card" style="width: 18rem;">
+          <div class="card-body">
+            <h5 class="card-title">HAY DAY MOD APK</h5>        
+            <p class="card-text">Special Modified Version Of Hay Day. Open to see the benefits &#128540;</p>
+            <a href="#" class="btn btn-outline-danger">Open</a>          
+          </div>
+        </div>    
+      </div>
+     </div>
+  </main>
+
+  <footer>
+    <br>
+    <a href="#" class="btn btn-danger">Contact Us</a>  
+    <br><br>
+    <div class="unq_btn">
+            <!--facebook-->
+            <a href="https://www.facebook.com/maskararaghav/" class="fb">
+              <span class="fa-stack">
+                <i class="fa fa-certificate fa-stack-2x"></i>
+                <i class="fab fa-facebook-f fa-stack-1x"></i>
+              </span>
+            </a>
+
+            <!--Discord-->
+            <a href="https://discord.gg/PxCCnnc529" class="discord">
+              <span class="fa-stack">
+                <i class="fa fa-certificate fa-stack-2x"></i>
+                <i class="fab fa-discord fa-stack-1x"></i>
+              </span>
+            </a>
+
+            <!--Messenger-->
+            <a href="https://m.me/maskararaghav" class="messenger">
+              <span class="fa-stack">
+                <i class="fa fa-certificate fa-stack-2x"></i>
+                <i class="fab fa-facebook-messenger fa-stack-1x"></i>
+              </span>
+            </a>
+            <!--Instagram-->
+            <a href="https://www.instagram.com/raghavmaskara/" class="instagram">
+              <span class="fa-stack">
+                <i class="fa fa-certificate fa-stack-2x"></i>
+                <i class="fab fa-instagram fa-stack-1x"></i>
+              </span>
+            </a>
+    </div>
+    <br>
+    <p>Website Created By- &#169;  Raghav Maskara</p>
+  </footer>
+
+  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+
+</body>
+</html>
diff --git a/RaghavMaskara21/first/style.css b/RaghavMaskara21/first/style.css
@@ -0,0 +1,178 @@
+
+.card-title{
+font-family: 'Montserrat', sans-serif;
+text-align: center;
+}
+
+.card a{
+float: right;
+}
+
+body{
+    width: auto;
+    background-color: #c4e8fc;
+    padding-top: 15%;
+}
+
+button.navbar-toggler{
+margin-right: 5%;
+}
+
+.bg-nav{
+background-color: #c4e8fc
+}
+
+.card-body {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    justify-content: flex-end;
+}
+
+
+@media (max-width: 768px){
+    /* For Mobile */
+    .responsive1 {
+    width: 96%;
+    height: auto;
+    padding-left: 3%;
+
+    }
+    /* .btn-links {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+    }   */
+    button {
+     margin: 2% auto;
+    }
+    .card{
+        margin: 2% 0;
+    }   
+    h1{
+        margin-top: 10px;
+    }
+    .responsive2{
+        display: none;
+    }
+    body{
+        padding-top: 15%;
+    }
+    div.row{
+        justify-content: center;
+    }
+
+}
+nav img{  
+    max-width:100%;
+    height:45px;         
+}
+
+
+@media (min-width: 768px){
+    /* For Laptop */
+
+    /* .btn-links {
+        display: flex;
+        flex-direction: row;
+     } */
+     .responsive1{
+         display: none;
+         border: 2px solid black;
+     }
+     .responsive2{         
+         width: 80%;
+         margin: 0 10%;
+         border: 2px solid black;
+
+     }
+     body{
+        padding-top: 60px;
+    }
+    div.row{
+        justify-content: space-between;
+        margin: 2% 0;
+    }
+
+
+}
+
+/* 
+
+FOOTER STARTS
+
+*/
+footer{
+    background-color: black;
+    margin-bottom: 0;
+    padding: 2% 5% 5% 5%;
+    margin-right: 0;
+    margin-top: 6%;
+}
+
+i{
+    color: white;
+}
+
+footer p{
+    color: white;
+    margin: 0;
+    padding:0;
+}
+
+.unq_btn{
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.unq_btn a{
+    display: inline-block;
+    text-decoration: none;
+    font-size: 25px;
+}
+.unq_btn .fa-stack-1x {
+    color: white;
+    font-size: 18px;
+}
+.unq_btn .fa-stack-2x {
+    transition: .3s;
+}
+.unq_btn .discord .fa-certificate {
+  color: #5764f2;
+}
+.unq_btn .fb .fa-certificate {
+  color: #3b579e;
+}
+.unq_btn .messenger .fa-certificate {
+    color: #09f;
+}
+.unq_btn .instagram .fa-certificate{
+
+color: #d6249f;
+
+}
+
+.unq_btn a:hover .fa-stack-2x {
+    -ms-transform: rotate(60deg);
+    -webkit-transform: rotate(60deg);
+    transform: rotate(60deg);
+}
+
+@media (min-width: 768px){
+    /* For Laptop */
+    .unq_btn{
+
+        justify-content: flex-start;
+    }
+    footer{
+        margin-top: 2%;
+    }
+}
+
+/*
+
+FOOTER ENDS
+
+*/