Skip to content

Commit 02ed3b5

Browse files
AlijonMurodovAlijonMurodov
committed
added main website files
1 parent ac7a5c7 commit 02ed3b5

File tree

3 files changed

+167
-0
lines changed

3 files changed

+167
-0
lines changed

‎index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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>OpenConvert</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
12+
</head>
13+
<body>
14+
<nav>
15+
<div class="logo"> <img src="./logo.png" alt=""></div>
16+
<div class="navbar-buttons">
17+
<a href="#">Documentation</a>
18+
<a href="https://github.com/OpenConvert/OpenConvert-desktop/releases">Releases</a>
19+
<a href="https://github.com/OpenConvert/">Github</a>
20+
</div>
21+
</nav>
22+
<div class="download">
23+
<p class="text">Download Our Open Source <br> Software Today</p>
24+
<div class="dropdown">
25+
<button onclick="dropdwn()" class="dropbtn"><i class="fa-solid fa-download"></i>&nbsp; Download </button>
26+
<div id="myDropdwn" class="dropdwn-content">
27+
<a href="#win"><i class="fa-brands fa-windows"></i> &nbsp;Windows</a>
28+
<a href="#linux"><i class="fa-brands fa-linux"></i>&nbsp; Linux</a>
29+
<a href="#darwin"><i class="fa-brands fa-apple"></i>&nbsp;Macos (coming soon)</a>
30+
</div>
31+
</div>
32+
<p class="bottom-text">Last release 2024 November 22</p>
33+
</div>
34+
<script>
35+
function dropdwn(){
36+
document.getElementById("myDropdwn").classList.toggle("show")
37+
}
38+
window.onclick = function(event){
39+
if(!event.target.matches('.dropbtn')){
40+
const dropdowns = document.getElementsByClassName("dropdwn-content");
41+
for(let i=0;i<dropdowns.length;i++){
42+
let openDropdwn = dropdowns[i];
43+
if(openDropdwn.classList.remove('show'));
44+
}
45+
}
46+
}
47+
</script>
48+
</body>
49+
</html>

‎logo.png‎

57.8 KB
Loading

‎style.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
body{
2+
background-image: linear-gradient(to right, #272323, #232021, #1f1e1f, #1c1c1c, #191919);
3+
}
4+
.download{
5+
margin-top: 7rem;
6+
margin-left: 27rem;
7+
width: 65rem;
8+
height: 39rem;
9+
border-radius: 2rem;
10+
background:#1e1e1e;
11+
backdrop-filter: blur( 20px );
12+
-webkit-backdrop-filter: blur( 20px );
13+
border-radius: 10px;
14+
border: 1px solid rgba( 255, 255, 255, 0.18 );
15+
}
16+
img{
17+
width: 13rem;
18+
}
19+
nav {
20+
display: flex;
21+
align-items: center;
22+
justify-content: space-between;
23+
background: transparent;
24+
padding: 10px 20px;
25+
}
26+
.logo {
27+
color: white;
28+
font-size: 24px;
29+
font-weight: bold;
30+
}
31+
.navbar-buttons {
32+
display: flex;
33+
gap: 40px;
34+
}
35+
.navbar-buttons a {
36+
font-family: "Noto Sans", sans-serif;
37+
color: white;
38+
padding: 5px 10px;
39+
text-decoration: none;
40+
background: transparent;
41+
border-radius: 5px;
42+
}
43+
.navbar-buttons a:hover {
44+
background-color: #313131;
45+
}
46+
.text{
47+
font-family: "Noto Sans", sans-serif;
48+
padding: 1rem;
49+
text-align: center;
50+
color: aliceblue;
51+
font-size: 35px;
52+
margin: 3rem;
53+
}
54+
.dropbtn{
55+
font-family: "Noto Sans", sans-serif;
56+
width: 35rem;
57+
margin-top: 5rem;
58+
margin-left: 15rem;
59+
background: #3C3D37;
60+
box-shadow: 0 8px 32px 0 rgba(62, 64, 92, 0.37);
61+
backdrop-filter: blur( 6px );
62+
-webkit-backdrop-filter: blur( 6px );
63+
border-radius: 10px;
64+
border: 1px solid rgba( 255, 255, 255, 0.18 );
65+
color: white;
66+
padding: 1.2rem;
67+
font-size: 26px;
68+
border: none;
69+
border-radius: 2rem;
70+
}
71+
.dropbtn:hover{
72+
background:#434442;
73+
}
74+
.dropdown{
75+
position: relative;
76+
display: inline-block;
77+
}
78+
.dropdwn-content{
79+
background-color: #3C3D37;
80+
margin-left: 16rem;
81+
width: 33rem;
82+
display: none;
83+
position: absolute;
84+
min-width: 160px;
85+
overflow: auto;
86+
box-shadow: 0 8px 32px 0 rgba(62, 64, 92, 0.37);
87+
border-radius: 1.6rem;
88+
z-index: 1;
89+
}
90+
.dropdwn-content a:hover{
91+
background-color: #4d4d48;
92+
}
93+
.dropdwn-content a{
94+
95+
font-family: "Noto Sans",sans-serif;
96+
font-size: 25px;
97+
text-align: center;
98+
border-bottom: 1px solid #191919;
99+
color: white;
100+
padding: 12px 15px;
101+
text-decoration: none;
102+
display: block;
103+
}
104+
.show{
105+
display: block;
106+
}
107+
.material-symbols-outlined{
108+
padding-right: 7px;
109+
}
110+
.bottom-text{
111+
text-align: center;
112+
margin-top: 13rem;
113+
font-family: "Noto Sans",sans-serif;
114+
color: wheat;
115+
}
116+
.bottom-text:hover{
117+
color: #4f6eac;
118+
}

0 commit comments

Comments
 (0)