-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
180 lines (150 loc) · 7.06 KB
/
index.html
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scroll Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- header section starts -->
<header>
<a href="#" class="logo"><span style="font-weight: 600;">SCRIBE</span> RABBIT</a>
<input type="checkbox" id="menu-bar">
<label for="menu-bar" class="fas fa-bars"></label>
<nav class="navbar">
<a href="#features">Features</a>
<a href="#contact">Contact</a>
<a href="#log-in" class="button">Log In</a>
</nav>
</header>
<!-- header section ends -->
<!-- home section starts -->
<section class="home">
<div class="content">
<h1>Video Transcription</h1>
<h2>made simple</h2>
<p>Meet ScribeRabbit, helping you <br/>transcribe your videos in minutes with <br/>the power of AI. </p>
<a href="#" class="btn">Get Started <i class='fas fa-arrow-right'> </i></a>
</div>
<div class="image">
<img src="images/home.png" alt="" style="float: right;">
</div>
</section>
<!-- home section ends -->
<!-- second section starts -->
<section class="two">
<div class='content'>
<div class="list">
<button class="listheader" onmouseover="openDescription(event, 'AI')"><span>•</span>AI driven transcription</button>
<button class="listheader" onmouseover="openDescription(event, 'Workspace')"><span>•</span>Multiple workspaces</button>
<button class="listheader" onmouseover="openDescription(event, 'FineTuning')"><span>•</span>Finetuning</button>
<button class="listheader" onmouseover="openDescription(event, 'Teamwork')"><span>•</span>Make teamwork easier</button>
</div>
<div id='AI' class="listbody">
<h2>Streamline your video transcription</h2>
<p>Our automatic speech recognition(ASR) AI will help you to transcribe the videos fast <br/><br/>Choose from multiple available AI models to find the one best suited for your needs</p>
</div>
<div id='Workspace' class="listbody">
<h2>Increased efficiency and accurancy</h2>
<p>Easily edit your transcribed results manually as needed</p>
</div>
<div id='FineTuning' class="listbody">
<h2>Stay organised</h2>
<p>Working on multiple projects? Have access to multiple workspaces to organise your videos into different categories</p>
</div>
<div id='Teamwork' class="listbody">
<h2>Keep your team in check</h2>
<p>Assign editing and reviewing tasks to different team members for increase productivity</p>
</div>
</div>
<a href="#" class="btn">Try It Out</a>
</section>
<!-- third section starts -->
<section class="three">
<p>Supported by the fastest growing AI powered platform</p>
<h1 class= "heading" style="color: white">with over 1,100 active users</h1>
</section>
<!-- third section ends -->
<!-- tutorial section starts -->
<section class="tutorial">
<!-- first step -->
<div class="row">
<div class="image">
<img src="images/img1.png" alt="">
</div>
<div class="content">
<h3>1. Upload a video</h3>
<p> Easily upload your video from your local computer, and wait a few moments for your video to be processed. <br/> <br/> Once complete, start transcribing!</p>
</div>
</div>
<!-- second step -->
<div class="row">
<div class="content">
<h3>2. Select and transcribe</h3>
<p>Choose your AI, how exactly you want the AI to transcribe your video, and preview your settings on the video itself! <br/><br/> Satisfied? Let the AI work its magic.</p>
</div>
<div class="image">
<img src="images/img2.png" alt="">
</div>
</div>
<!-- third step -->
<div class="row">
<div class="image">
<img src="images/img3.png" alt="">
</div>
<div class="content">
<h3>3. Review and edit</h3>
<p> Keep track of the transcribed text which has been time sectioned on the right panel for easy playback. <br/><br/>Finetune as needed by editing directly into this textarea.</p>
</div>
</div>
<!-- fourth step -->
<div class="row">
<div class="content">
<h3>4. Save and download</h3>
<p>Once done, you can save your edits and download the subtitles to your local computer!</p>
</div>
<div class="image">
<img src="images/img4.png" alt="">
</div>
</div>
</section>
<!-- tutorial section ends -->
<!-- fourth section starts -->
<section class="five">
<h1 class="heading" style="color:aliceblue">Ready to get started?</h1>
<p> Setting up ScribeRabbit is easy. You're just a few click away!</p>
<a href="#" class="btn">Let's Go!</a>
</section>
<!-- fourth section ends -->
<!-- contact section ends -->
<section class="contact">
<h1 class ="heading">Got question?</h1>
<div class="row">
<div class="contact-info">
<i class="fa fa-envelope"></i>
<a href="#email" >[email protected]</a> <br/><br/>
<i class='fas fa-map-marker-alt'></i>
<a href="#googlemap">3 Fusionopolis Place <br/>#03-56 Galaxis Work Lofts <br/>Singapore 138523</a>
</div>
<div class="form-container">
<form action="">
<input type="name" placeholder="name">
<div class="inputBox">
<input type="text" placeholder="email">
<input type="text" placeholder="phone number">
</div>
<textarea name="" id="" cols="30" rows="10" placeholder="message"></textarea>
<input type="submit" value="Get In Touch">
</form>
</div>
</div>
</section>
<!-- contact section ends -->
<!-- jquery file link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- custom js file link -->
<script src="app.js"></script>
</body>
</html>