160 lines
3 KiB
HTML
160 lines
3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=, initial-scale=1.0" />
|
|
<title>Mystiq | Hyper-localized Social Media</title>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<a class="nav-link" href="#home">HOME</a>
|
|
<a class="nav-link" href="#about-us">ABOUT US</a>
|
|
<a class="nav-link" href="#contact">CONTACT</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<section id="home" class="hero">
|
|
<div class="text">
|
|
<h1>Chat Privately</h1>
|
|
<p>Coming soon...</p>
|
|
</div>
|
|
|
|
<div class="elipse">
|
|
<svg
|
|
width="775"
|
|
height="801"
|
|
viewBox="0 0 775 801"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M109.01 649.842C-281.638 203.861 486.238 -204.683 716.061 -434.506C945.885 -664.33 1318.5 -664.33 1548.33 -434.507C1778.15 -204.683 1778.15 167.935 1548.33 397.758C1318.5 627.582 539.284 1015.77 109.01 649.842Z"
|
|
fill="#FF426F"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
<style>
|
|
@font-face {
|
|
font-family: "Orbitron-Regular";
|
|
src: url("/static/fonts/Orbitron-Regular.ttf");
|
|
}
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
body {
|
|
background-color: #0c0c15;
|
|
height: 100vh;
|
|
}
|
|
|
|
nav {
|
|
height: 40px;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.nav-link,
|
|
nav-link:visited {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
margin: auto 10px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.ellipse > svg {
|
|
display: inline;
|
|
z-index: 3;
|
|
}
|
|
.brand-name {
|
|
color: #fff;
|
|
}
|
|
.text > h1 {
|
|
color: #ff426f;
|
|
font-size: 6rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
section {
|
|
margin: 50px 0;
|
|
}
|
|
|
|
#contact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
h2 {
|
|
color: #fff;
|
|
font-size: 3rem;
|
|
}
|
|
|
|
p {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.hero {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
margin: auto;
|
|
}
|
|
|
|
.text {
|
|
flex: 1;
|
|
margin: auto;
|
|
margin-left: 150px;
|
|
}
|
|
|
|
.text > h1 {
|
|
width: 50px;
|
|
}
|
|
|
|
/*
|
|
width: 1784.5px;
|
|
height: 1231.25px;
|
|
left: 2629.46px;
|
|
top: -18.37px;
|
|
|
|
background: #FF426F;
|
|
transform: rotate(135deg);
|
|
*/
|
|
|
|
@media (max-width: 1025px) {
|
|
|
|
.hero {
|
|
align-items: center;
|
|
height: 100%
|
|
}
|
|
.text > h1 {
|
|
font-size: 4rem;
|
|
width: 50%;
|
|
margin: auto;
|
|
}
|
|
.elipse {
|
|
display: none;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.text {
|
|
display:flex;
|
|
flex-direction: column;
|
|
margin: auto;
|
|
width: 50%;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|
|
</html>
|