Equipments

team#17-(3)/CSS/equipment.css

@@ -0,0 +1,315 @@
+.backgroundImage
+{
+    height: 35vw;
+    width: 100%;
+    /* position: absolute; */
+    z-index: -1;
+}
+.bgimage
+{
+  position: relative;
+  text-align: center;
+  color: rgb(64, 11, 124);
+}
+.backgroundImage:hover{
+  opacity: 90%;
+}
+.txtOverImg {
+  position: absolute;
+  top: 27%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.txtOverImg2{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.txtOverImg3{
+  position: absolute;
+  top: 63%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+* {
+    box-sizing: border-box;
+  }
+
+  .sbx-google {
+    display: inline-block;
+    position: relative;
+    width: 500px;
+    height: 41px;
+    white-space: nowrap;
+    box-sizing: border-box;
+    font-size: 14px;
+  }
+
+  .sbx-google__wrapper {
+    width: 100%;
+    height: 141%;
+  }
+
+  .sbx-google__input {
+    display: inline-block;
+    transition: box-shadow .4s ease, background .4s ease;
+    border: 0;
+    border-radius: 4px;
+    box-shadow: inset 0 0 0 1px #CCCCCC;
+    background: #FFFFFF;
+    padding: 0;
+    padding-right: 77px;
+    padding-left: 11px;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    white-space: normal;
+    font-size: inherit;
+    appearance: none;
+  }
+
+  .sbx-google__input::-webkit-search-decoration, .sbx-google__input::-webkit-search-cancel-button, .sbx-google__input::-webkit-search-results-button, .sbx-google__input::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  .sbx-google__input:hover {
+    box-shadow: inset 0 0 0 1px #b3b3b3;
+  }
+
+  .sbx-google__input:focus, .sbx-google__input:active {
+    outline: 0;
+    box-shadow: inset 0 0 0 1px #3E82F7;
+    background: #FFFFFF;
+  }
+
+  .sbx-google__input::placeholder {
+    color: #AAAAAA;
+  }
+
+  .sbx-google__submit {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: inherit;
+    margin: 0;
+    border: 0;
+    border-radius: 0 3px 3px 0;
+    background-color: #3e82f7;
+    padding: 0;
+    width: 49px;
+    height: 141%;
+    vertical-align: middle;
+    text-align: center;
+    font-size: inherit;
+    user-select: none;
+  }
+
+  .sbx-google__submit::before {
+    display: inline-block;
+    margin-right: -4px;
+    height: 100%;
+    vertical-align: middle;
+    content: '';
+  }
+
+  .sbx-google__submit:hover, .sbx-google__submit:active {
+    cursor: pointer;
+  }
+
+  .sbx-google__submit:focus {
+    outline: 0;
+  }
+
+  .sbx-google__submit svg {
+    width: 21px;
+    height: 21px;
+    vertical-align: middle;
+    fill: #FFFFFF;
+  }
+
+  .sbx-google__reset {
+    display: none;
+    position: absolute;
+    top: 10px;
+    right: 56px;
+    margin: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    padding: 0;
+    font-size: inherit;
+    user-select: none;
+    fill: rgba(0, 0, 0, 0.5);
+  }
+
+  .sbx-google__reset:focus {
+    outline: 0;
+  }
+
+  .sbx-google__reset svg {
+    display: block;
+    margin: 4px;
+    width: 13px;
+    height: 13px;
+  }
+
+  .sbx-google__input:valid ~ .sbx-google__reset {
+    display: block;
+    animation-name: sbx-reset-in;
+    animation-duration: .15s;
+  }
+
+  @keyframes sbx-reset-in {
+    0% {
+      transform: translate3d(-20%, 0, 0);
+      opacity: 0;
+    }
+    100% {
+      transform: none;
+      opacity: 1;
+    }
+  }
+/* NEED equipment */
+
+
+.myButton {
+	box-shadow: 0px 10px 14px -7px #276873;
+	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
+	background-color:#599bb3;
+	border-radius:8px;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Arial;
+	font-size:20px;
+	font-weight:bold;
+	padding:13px 32px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #3d768a;
+}
+.myButton:hover {
+	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
+	background-color:#408c99;
+}
+.myButton:active {
+	position:relative;
+	top:1px;
+}
+
+/* Info */
+.check
+{
+  background-color:red;
+  width:15vw;
+  height:15vw;
+  display:inline-flex;
+  margin:5rem;
+}
+#info
+{
+margin:4rem;
+  display:flex;
+  justify-content:center;
+
+
+}
+
+
+/* moto */
+.moto{
+    margin: 10px;
+    text-align: center;
+
+}
+
+/* list equipment */
+.btn {
+    -webkit-border-radius: 60;
+    -moz-border-radius: 60;
+    border-radius: 60px;
+    font-family: Arial;
+    color: #ffffff;
+    font-size: 26px;
+    background: #2d93d6;
+    padding: 14px 27px 17px 29px;
+    text-decoration: none;
+  }
+
+  .btn:hover {
+    background: #2b94d6;
+    text-decoration: none;
+  }
+
+/* Connect */
+.connect{
+  height: 30vw;
+  width: 45%;
+}
+
+.dealHeading{
+font-weight: bold;
+margin: 20px;
+text-align: center;
+font-size: 2rem;
+}
+.dealFooter{
+margin: 20px;
+font-size: 1.5rem;
+text-align: center;
+}
+
+.imgCheck{
+width: 6rem;
+}
+
+
+.bgimage2
+{
+  position: relative;
+  text-align: center;
+  color:White;
+}
+.bgimage2:hover{
+  opacity: 90%;
+}
+.txtOverImg2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* Contact US */
+.contact-us{
+  margin: 5%;
+  text-align: center;
+
+}
+/* Send message button*/
+.Sendbtn {
+  background: #3498db;
+  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
+  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
+  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
+  background-image: -o-linear-gradient(top, #3498db, #2980b9);
+  background-image: linear-gradient(to bottom, #3498db, #2980b9);
+  -webkit-border-radius: 6;
+  -moz-border-radius: 6;
+  border-radius: 6px;
+  font-family: Arial;
+  color: #ffffff;
+  font-size: 20px;
+  padding: 10px 20px 10px 20px;
+  text-decoration: none;
+}
+
+.Sendbtn:hover {
+  background: #3cb0fd;
+  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
+  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
+  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
+  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
+  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
+  text-decoration: none;
+}

team#17-(3)/equipment.html

@@ -0,0 +1,246 @@
+<!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>Rent Farm Equipment</title>
+    <!--bootstrap css -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+    <link rel="stylesheet" href="CSS\equipment.css">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+
+<body>
+    <!-- Navigation bar -->
+
+
+    <!-- carousel content container -->
+    <section>
+        <div class="bgimage">
+
+            <img class="backgroundImage " src="images\loren-king-EA45-AXlvWk-unsplash.jpg" alt="" srcset="">
+
+            <div class="txtOverImg">
+                <h3 style="font-size: 3.75vw;">Rent Out Farm Equipment </h3>
+
+            </div>
+            <div class="txtOverImg2">
+                <!-- <<form class="example" action="">
+            <input type="text" placeholder="Search.." name="search">
+            <button type="submit"><i class="fa fa-search"></i></button>
+          </form> -->
+                <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+                    <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-13" viewBox="0 0 40 40">
+                        <path
+                            d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
+                            fill-rule="evenodd" />
+                    </symbol>
+                    <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-3" viewBox="0 0 20 20">
+                        <path
+                            d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
+                            fill-rule="evenodd" />
+                    </symbol>
+                </svg>
+
+                <form novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-google">
+                    <div role="search" class="sbx-google__wrapper">
+                        <input type="search" name="search" placeholder="Enter Location" autocomplete="off"
+                            required="required" class="sbx-google__input">
+                        <button type="submit" title="Submit your search query." class="sbx-google__submit">
+                            <svg role="img" aria-label="Search">
+                                <use xlink:href="#sbx-icon-search-13"></use>
+                            </svg>
+                        </button>
+                        <button type="reset" title="Clear the search query." class="sbx-google__reset">
+                            <svg role="img" aria-label="Reset">
+                                <use xlink:href="#sbx-icon-clear-3"></use>
+                            </svg>
+                        </button>
+                    </div>
+                </form>
+                <script type="text/javascript">
+                    document.querySelector('.searchbox [type="reset"]').addEventListener('click', function () {
+                        this.parentNode.querySelector('input').focus();
+                    });
+                </script>
+            </div>
+            <div class="txtOverImg3">
+                <a href="#" class="myButton">Need Equipment ?</a>
+            </div>
+
+        </div>
+
+    </section>
+
+    <div>
+
+        <div class="provider_info">
+
+        </div>
+        <div class="provider_info">
+
+        </div>
+
+        <div id="info">
+            <div class="check">
+                <img src="images\image1.jpg" alt="" srcset="">
+            </div>
+            <div class="check">
+                <img src="images\image2.jpg" alt="" srcset="">
+            </div>
+            <div class="check">
+                <img src="images\image3.jpg" alt="" srcset="">
+            </div>
+            <div class="check">
+                <img src="images\image4.jpg" alt="" srcset="">
+            </div>
+        </div>
+        <div class="container-fluid">
+            <div class="row"style=" 
+            display: flex;
+            justify-content: center";
+        >
+                <div class="col-lg-6 connect" >
+                    <img style="height: 30vw;" src="images\tractorEquipment.jpeg" alt="" srcset="">
+                </div>
+                <div class="col-lg-6 connect">
+                    <img style="height: 30vw;" src="images\farmer.jpg" alt="">
+                </div>
+            </div>
+
+        </div>
+        <div class="moto">
+            <h2 style="font-size:2.5vw;">We connect the person with one who want's it</h2>
+        </div>
+
+        <div>
+            <h1 style="font-size:3vw; text-align:center; margin: 30px;">Listing In 3 Steps</h1>
+
+        </div>
+        <div class="container-fluid">
+            <div class="row" style="margin: 100px;" >
+                <div class="col-lg-4">
+                    <div style="display: block;
+                    text-align: center;">
+                        <img class="imgCheck" src="images\check.png" alt="">
+                    </div>
+                    <header class="dealHeading" >
+                        List your equipment for free
+                    </header>
+                    <footer class="dealFooter" >
+                        Share your tractor, tiller, or any type of farm equipment. Listing takes only 2 minutes and is
+                        free there are no sign-up charges and no monthly fees.
+                    </footer>
+                </div>
+                <div class="col-lg-4">
+                    <div style="    display: block;
+                    text-align: center;">
+                        <img class="imgCheck" src="images\check.png" alt="">
+                    </div>
+                    <header class="dealHeading">
+                        Set your price & policy
+                    </header>
+                    <footer class="dealFooter" >
+                        Set your own selling price. You can add daily or hourly prices as well. Choose the policy as per
+                        your convenience. </footer>
+                </div>
+                <div class="col-lg-4">
+                    <div style="    display: block;
+                    text-align: center;">
+                        <img class="imgCheck" src="images\check.png" alt="">
+                    </div>
+                    <header class="dealHeading" >
+                        Sit back & earn </header>
+                    <footer class="dealFooter">
+                        Accept bookings. Get amount via direct deposit in to your bank account after successful job
+                        completion. </footer>
+                </div>
+            </div>
+
+            <div class="container-fluid bgimage2" style="padding: 0;margin: 0%;">
+                <div>
+                    <img style="width: 100%; height: 40vw;"src="images\chris-ensminger-yJDZTDeHeG8-unsplash.jpg" alt="">
+                </div>
+                <div class="txtOverImg2">
+                    <h1>Put your farm machinery onn work</h1>
+                    <a href="" class="btn">List equipment</a>
+                </div>
+            </div>
+
+
+            <!-- Contact us -->
+            <section class="contact-us" id="contact">
+
+            <div>
+                <h1>Connect With us</h1>
+            </div>
+                <div style="margin-top:3% ;">
+                    <div class="container">
+                        <div class="row">
+                            <div class="col-md-5">
+                                <div class="section-heading">
+                                    <h3>Contact Us</h3>
+                                </div>
+                                <div class="footer-address">
+                                    <h6 style="font-weight:bold;color: #2c3e50;">Head Office</h6>
+                                    <p>960 Holmdel Road, Suite 2-02, Holmdel, NJ 07733</p>
+                                    <ul>
+                                        <li><i class="fa fa-envelope-o"></i><span>Email : <a
+                                                    href="mailto:assist@farmease.app">assist@farmease.app</a></span>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col-md-7">
+                                <form class="contact-us-form   ng-pristine ng-invalid" novalidate="">
+                                    <h6 style="font-weight:bold;color: #2c3e50; margin-bottom:20px;">Reach Us Quickly
+                                    </h6>
+                                    <div class="row">
+                                        <div class="col-sm-6 col-xs-12">
+                                            <div class="form-group"><input class="form-control   ng-pristine ng-invalid"
+                                                    name="name" ngmodel="" placeholder="Name*" required="" type="text">
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-6 col-xs-12">
+                                            <div class="form-group"><input class="form-control   ng-pristine ng-invalid"
+                                                    name="email" ngmodel="" placeholder="Email*" required=""
+                                                    type="text"></div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-sm-6 col-xs-12">
+                                            <div class="form-group"><input class="form-control   ng-pristine ng-valid"
+                                                    maxlength="12" minlength="10" name="mobile" ngmodel=""
+                                                    placeholder="Mobile No." type="text"></div>
+                                        </div>
+                                        <div class="col-sm-6 col-xs-12">
+                                            <div class="form-group"><input class="form-control   ng-pristine ng-valid"
+                                                    name="company" ngmodel="" placeholder="Subject" size="40"
+                                                    type="text"></div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-sm-12 col-xs-12">
+                                            <div class="form-group"><textarea
+                                                    class="form-control   ng-pristine ng-valid" cols="25" name="message"
+                                                    ngmodel="" placeholder="Message*" rows="3"></textarea></div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-sm-12  ">
+                                            <a href="#" class="Sendbtn">Send Message</a>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+</body>
+
+</html>