Skip to content

Commit ba1ac28

Browse files
LAKSHAYBANSAL879LAKSHAYBANSAL879
authored
Add files via upload
1 parent 43c633d commit ba1ac28

File tree

3 files changed

+476
-0
lines changed

3 files changed

+476
-0
lines changed

‎TRANSLATOR APP/index.css‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inclusive+Sans&display=swap');
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: 'Inclusive Sans', sans-serif;
7+
}
8+
.container{
9+
display: flex;
10+
justify-content: center;
11+
flex-direction: column;
12+
align-items: center;
13+
margin-top: 4vh;
14+
}
15+
body{
16+
background: linear-gradient(135deg,rgb(255, 169, 183),rgb(111, 111, 235));
17+
width: 100%;
18+
height: 100vh;
19+
}
20+
.mainContent{
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
flex-direction: row;
25+
margin-top: -4vh;
26+
border-radius: 10px;
27+
max-height: 80%;
28+
min-width: 50%;
29+
gap:1vw;
30+
background: linear-gradient(135deg,rgb(246, 220, 220),rgb(255, 199, 208));
31+
}
32+
textarea::placeholder{
33+
/* pointer-events: none; */
34+
margin: auto;
35+
padding: 6px;
36+
font-weight: bold;
37+
38+
/* font-size: 18px; */
39+
}
40+
textarea{
41+
background-color: rgb(245, 244, 242);
42+
width: 100%;
43+
height: 100%;
44+
border-radius: 10px;
45+
border: 3px solid black;
46+
resize: none;
47+
padding: 20px;
48+
font-size: 15px;
49+
font-weight: bold;
50+
}
51+
.text-input{
52+
/* border: 3px solid black; */
53+
border-radius: 10px;
54+
}
55+
56+
.textToTranslate,.translatedText{
57+
display: flex;
58+
justify-content: center;
59+
align-items: center;
60+
flex-direction: column;
61+
padding: 20px;
62+
}
63+
.controls ul{
64+
list-style: none;
65+
margin-top: 2vh;
66+
67+
}
68+
.control li{
69+
display: flex;
70+
align-items: center;
71+
justify-content: space-between;
72+
padding-left:15px;
73+
padding-right:15px;
74+
padding-bottom: 12px;
75+
76+
}
77+
.control .icons i{
78+
width: 60px;
79+
cursor: pointer;
80+
81+
82+
}
83+
.exchange{
84+
list-style: none;
85+
cursor: pointer;
86+
}
87+
select{
88+
width: 8vw;
89+
height: 4vh;
90+
border-radius: 10px;
91+
font-size: 19px;
92+
background: NONE;
93+
border: none;
94+
outline: none;
95+
cursor: pointer;
96+
}
97+
.tbtn{
98+
width: 85%;
99+
background: linear-gradient(135deg,rgb(255, 169, 183),rgb(111, 111, 235));
100+
101+
/* background-color: rgb(20, 88, 223); */
102+
height: 6vh;
103+
font-size: 20px;
104+
font-weight: bold;
105+
padding: 5px;
106+
border: none;
107+
border-radius: 10px;
108+
margin-bottom: 2vh;
109+
margin-top: 3vh;
110+
color: white;
111+
cursor: pointer;
112+
}
113+
.col{
114+
display: flex;
115+
justify-content: center;
116+
align-items: center;
117+
flex-direction: column;
118+
height: 85vh;
119+
background: linear-gradient(135deg,rgb(246, 220, 220),rgb(255, 199, 208));
120+
margin-bottom: 1vh;
121+
}
122+
h1{
123+
margin-bottom: 2vh;
124+
}
125+
@media (max-width:539px) {
126+
select{
127+
width: fit-content;
128+
padding: 1px;
129+
height: 4vh;
130+
border-radius: 10px;
131+
font-size: 11px;
132+
133+
}
134+
.control .icons i{
135+
width: 30px;
136+
}
137+
.control li{
138+
/* display: flex; */
139+
/* align-items: center; */
140+
/* justify-content: space-between; */
141+
padding-left:10px;
142+
padding-right:12px;
143+
padding-bottom: 11px;
144+
padding-top: 5px;
145+
146+
}
147+
.fa-volume-high{
148+
padding-bottom: 20px;
149+
}
150+
}
151+
@media (max-width:363px){
152+
.mainContent{
153+
154+
width: fit-content;
155+
padding: 6px;
156+
margin-top: -1vh;
157+
display: flex;
158+
justify-content: center;
159+
align-items: center;
160+
flex-direction: row;
161+
162+
}
163+
textarea{
164+
width: 80%;
165+
height: 80%;
166+
margin-left: 5vw;
167+
}
168+
.textToTranslate{
169+
margin-right: -3vh;
170+
}
171+
.translatedText{
172+
margin-left: -4vh;
173+
}
174+
.col{
175+
display: flex;
176+
justify-content: center;
177+
align-items: center;
178+
flex-direction: column;
179+
height: 75vh;
180+
background: linear-gradient(135deg,rgb(246, 220, 220),rgb(255, 199, 208));
181+
margin-bottom: 1vh;
182+
}
183+
}

‎TRANSLATOR APP/index.html‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>MY-TRANSLATOR</title>
7+
<link rel="stylesheet" href="index.css" />
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
9+
</head>
10+
<body id="body">
11+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
12+
<div class="container-fluid">
13+
<a class="navbar-brand" href="#">Navbar</a>
14+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
15+
<span class="navbar-toggler-icon"></span>
16+
</button>
17+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
18+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
19+
<li class="nav-item">
20+
<a class="nav-link active" aria-current="page" href="#">Home</a>
21+
</li>
22+
<li class="nav-item">
23+
<a class="nav-link" href="#">Link</a>
24+
</li>
25+
<li class="nav-item dropdown">
26+
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
27+
Dropdown
28+
</a>
29+
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
30+
<li><a class="dropdown-item" href="#">Action</a></li>
31+
<li><a class="dropdown-item" href="#">Another action</a></li>
32+
<li><hr class="dropdown-divider"></li>
33+
<li><a class="dropdown-item" href="#">Something else here</a></li>
34+
</ul>
35+
</li>
36+
<li class="nav-item">
37+
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
38+
</li>
39+
</ul>
40+
<form class="d-flex">
41+
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
42+
<button class="btn btn-outline-success" type="submit">Search</button>
43+
</form>
44+
</div>
45+
</div>
46+
</nav>
47+
<div class="container">
48+
<h1>WELCOME TO MY TRANSLATOR</h1>
49+
<div class="col">
50+
<div class="mainContent">
51+
<div class="textToTranslate">
52+
<div class="text-input">
53+
<textarea
54+
name="translate"
55+
id="translate"
56+
cols="45"
57+
rows="20"
58+
placeholder="ENTER TEXT TO TRANSLATE"
59+
></textarea>
60+
61+
</div>
62+
<div class="controls">
63+
<ul class="control">
64+
<li class="row from">
65+
<div class="icons">
66+
<i id="from" class="fa-solid fa-volume-high fa-xl"></i>
67+
<i id="from" class="fas fa-copy fa-xl" ></i>
68+
</div>
69+
<div>
70+
<select></select>
71+
</div>
72+
</li>
73+
74+
</ul>
75+
</div>
76+
77+
78+
</div>
79+
<li class="exchange" id="exchange"><i id="exchange" class="fas fa-exchange-alt fa-xl"></i></li>
80+
81+
<div class="translatedText">
82+
<div class="text-input">
83+
<textarea
84+
name="translated"
85+
id="translated"
86+
cols="45"
87+
rows="20"
88+
placeholder="TRANSLATED TEXT"
89+
readonly disabled
90+
></textarea>
91+
</div>
92+
<div class="controls">
93+
<ul class="control">
94+
<li class="row from">
95+
<div class="icons">
96+
<i id="to" class="fa-solid fa-volume-high fa-xl"></i>
97+
<i id="to" class="fas fa-copy fa-xl" ></i>
98+
</div>
99+
<div>
100+
<select></select>
101+
</div>
102+
</li>
103+
</ul>
104+
105+
106+
</div>
107+
108+
109+
</div>
110+
</div>
111+
<button class="tbtn" id="btn">TRANSLATE TEXT</button>
112+
</div>
113+
114+
</div>
115+
<script src="js/index.js"></script>
116+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
117+
<!-- <script src="js/countries.js"></script> -->
118+
<script
119+
src="https://kit.fontawesome.com/8c9b0ad18f.js"
120+
crossorigin="anonymous"
121+
></script>
122+
</body>
123+
</html>

0 commit comments

Comments
 (0)