web/about-us.html
2021-09-13 16:19:54 +07:00

405 lines
No EOL
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<title>About Us</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
body {
font-family: 'Poppins', sans-serif;
background-color: #1b1c1e;
}
.comp-color {
background-color: #212226;
}
.nav-radius {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
video {
opacity: 0.5;
}
@media {
.card {
width: 70%;
margin: auto;
}
}
.card-img-overlay {
position: absolute;
text-align: center;
}
br {
display: block;
content: " ";
}
@media only screen and (max-width: 320px) {
.card-img-overlay {
top: -5%;
}
br {
margin: 0px 0;
line-height: 0px;
}
.card-img-overlay h1 {
font-size: 9pt;
}
.card-img-overlay h3 {
font-size: 8pt;
}
.card-img-overlay p {
font-size: 3pt;
}
.navbar-brand {
width: 25%;
}
}
@media only screen and (min-width: 321px) {
.card-img-overlay {
top: -5%;
}
br {
margin: 0px 0;
line-height: 0px;
}
.card-img-overlay h1 {
font-size: 10pt;
}
.card-img-overlay h3 {
font-size: 9pt;
}
.card-img-overlay p {
font-size: 4pt;
}
.navbar-brand {
width: 25%;
}
}
@media only screen and (min-width: 376px) {
.card-img-overlay {
top: -5%;
}
br {
margin: 0px 0;
line-height: 0px;
}
.card-img-overlay h1 {
font-size: 11pt;
}
.card-img-overlay h3 {
font-size: 10pt;
}
.card-img-overlay p {
font-size: 5pt;
}
.navbar-brand {
width: 15%;
}
}
@media only screen and (min-width: 426px) {
.card-img-overlay {
top: -5%;
}
br {
margin: 0px 0;
line-height: 0px;
}
.card-img-overlay h1 {
font-size: 12pt;
}
.card-img-overlay h3 {
font-size: 11pt;
}
.card-img-overlay p {
font-size: 6pt;
}
.navbar-brand {
width: 10%;
}
}
@media only screen and (min-width: 551px) {
.card-img-overlay {
top: 0%;
}
br {
margin: 0px 0;
line-height: 0px;
}
.card-img-overlay h1 {
font-size: 14pt;
}
.card-img-overlay h3 {
font-size: 13pt;
}
.card-img-overlay p {
font-size: 8pt;
}
.navbar-brand {
width: 7%;
}
}
@media only screen and (min-width: 700px) {
.card-img-overlay {
top: 5%;
}
br {
margin: 1px 0;
line-height: 1px;
}
.card-img-overlay h1 {
font-size: 16pt;
}
.card-img-overlay h3 {
font-size: 15pt;
}
.card-img-overlay p {
font-size: 10pt;
}
}
@media only screen and (min-width: 900px) {
.card-img-overlay {
top: 5%;
}
br {
margin: 2px 0;
line-height: 2px;
}
.card-img-overlay h1 {
font-size: 18pt;
}
.card-img-overlay h3 {
font-size: 17pt;
}
.card-img-overlay p {
font-size: 12pt;
}
}
@media only screen and (min-width: 1024px) {
.card-img-overlay {
top: 5%;
}
br {
margin: 3px 0;
line-height: 3px;
}
.card-img-overlay h1 {
font-size: 20pt;
}
.card-img-overlay h3 {
font-size: 19pt;
}
.card-img-overlay p {
font-size: 14pt;
}
}
@media only screen and (min-width: 1200px) {
.card-img-overlay {
top: 10%;
}
br {
margin: 4px 0;
line-height: 4px;
}
.card-img-overlay h1 {
font-size: 22pt;
}
.card-img-overlay h3 {
font-size: 21pt;
}
.card-img-overlay p {
font-size: 16pt;
}
.navbar-brand {
width: 6%;
}
}
@media only screen and (min-width: 1440px) {
.card-img-overlay {
top: 10%;
}
br {
margin: 5px 0;
line-height: 5px;
}
.card-img-overlay h1 {
font-size: 25pt;
}
.card-img-overlay h3 {
font-size: 24pt;
}
.card-img-overlay p {
font-size: 19pt;
}
}
@media only screen and (min-width: 1500px) {
.card-img-overlay {
top: 15%;
}
br {
margin: 5px 0;
line-height: 5px;
}
.card-img-overlay h1 {
font-size: 28pt;
}
.card-img-overlay h3 {
font-size: 27pt;
}
.card-img-overlay p {
font-size: 22pt;
}
}
@media only screen and (min-width: 2000px) {
.card-img-overlay {
top: 10%;
}
br {
margin: 10px 0;
line-height: 10px;
}
.card-img-overlay h1 {
font-size: 65pt;
}
.card-img-overlay h3 {
font-size: 45pt;
}
.card-img-overlay p {
font-size: 35pt;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<img class="navbar-brand" src="assets/logo_transparent.png" alt="Banner" style="margin-top: 0%;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/product-list.html">Products</a>
</li>
<li class="nav-item active">
<a class="nav-link disabled" href="/about-us.html" aria-disabled="true">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<a href="/login.html"><button type="button"
class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
</div>
</nav>
<div class="card bg-dark text-white">
<video src="assets/AboutUs.mp4" muted autoplay loop class="card-img"></video>
<div class="card-img-overlay">
<h1 class="card-title"><b>About Us</b></h1>
<p class="card-text">Nekoya is your place for sneakers for the entire family from many name brands. Youll
discover styles for
ladies, men and children from brands like Nike, Converse, Vans, Sperry, Madden Girl, Skechers, ASICS and
then some! Nekoya is a main family footwear goal for the popular brands you know and love.</p>
<br>
<br>
<h1 class="card-title"><b>Contact Us</b></h1>
<br>
<h3 class="card-text"><i class="bi bi-envelope"></i> Info@Nekoya.com</h3>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
</body>
</html>