Major-Project1/Rentalsr.html at main · Kapishbansal48/Major-Project1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rentals</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAaVBMVEVHcEwoKBksLBglJRYyMhYxMhYyMhYyMhYyMhYkJBExMhYxMhYkJBMnJxIyMhYyMhYxMhYxMhYpKRgFBQULCwkgIBAHBwYHBwcICAcKCgkKCgkHBwYlJREHBwYICAcFBQQHBwYxMhYICAdukr7uAAAAI3RSTlMABhsRZcT/86IvgLklROTaj1QL5045oGOAb1vId7GJ7NGs36pFGB8AAAEKSURBVHgBvdBFYsNADEDRPxAlZsfMbXP/O5bMoU3hbcXitylteMwe5Mvx5AC3XBHPOtoP3FAihxs6dpn5B4l57iwezzlyYsMwS5gEEmwaxkozSjMmsbAIT7nDqCiLoqjqJtegmPjilyUATtEmHQDKJNsP0BQAVAoybngeWa/xYQAUN6IYp2nJCDK2koBR6ELTlww1O6FdO1DzUhkChw2x6w74Gb0iADD+NEFyRp0ANZOhVfMvFSMtzppQZK/TnLeIWeRBofwsN2Q9+ApAiWUWiEN+aSg/JUzejqwOAlAbVmfJ2ZCIvVxitowcNRtW3thTkbBwInG50SVj73N8lMjnEU8kjH0eMwn/7gOk4Qvy3h8fnwAAAABJRU5ErkJggg==" rel="icon" type="image/x-icon">
  <style>
.box1{
    margin-top: 100px;
    transform: translate(-50%, -50%);

    text-align: center;
    margin-left: 100px;
    margin-right: 100px;
    font-size: 25px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.box2{
    margin-top: 50px;
    text-align: center;
    margin-left: 150px;
    margin-right: 100px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 25px;
}

/* Define the fade-in-right animation */
@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Apply the animation to the element */
.fade-in-right {
    animation: fade-in-right 1s ease-out forwards;
}

.fade-in-left {
    animation: fade-in-left 1s ease-out forwards;
}
#textToPrint {
     font-weight: bold;
        margin-top: 80px;
        margin-left: 100px;
    font-size: 50px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    white-space: nowrap;
    overflow: hidden;

    animation: typing 4s steps(50) forwards;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
i{
    color: blue;
}
  </style>
</head>
<body>
    <div id="textToPrint"> Rentals</div>
    <div class="box1 fade-in-right"> <p>Explore the roars of Rhyno at your own pace with our rental options! Test the waters with our flexible rental model, available for a week or a month, allowing you to experience the Rhyno first hand before committing. Simply visit our authorized dealerships to unlock this opportunity.
        Additionally, we're redefining campus commuting with our rental fleet tailored for college students. Navigate your daily commute effortlessly by renting Rhyno vehicles on an hourly basis through our user-friendly mobile app. Embrace the freedom to ride and explore a new dimension in sustainable and convenient transportation.


    </p>
    </div>
        <div class="box2 fade-in-left">
            Download our rental app : <i class="fa-brands fa-google-play"></i> | <i class="fa-brands fa-apple"></i>
        </div>
</body>
</html>