Initial Commit

Itz-Hex · Nov 19, 2022 · 1719b43 · 1719b43
1 parent 03d5ca9
commit 1719b43
Show file tree

Hide file tree

Showing 10 changed files with 712 additions and 0 deletions.
diff --git a/about-us.html b/about-us.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+
+ <head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Mousepad Shop</title>
+ <!-- Import Boxicons CDN -->
+ <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
+ <!-- Import CSS -->
+ <link rel="stylesheet" href="./assets/css/master.css">
+ <link rel="stylesheet" href="./assets/css/nav.css">
+ <link rel="stylesheet" href="./assets/css/about.css">
+ <!-- Import Vue.js -->
+ <script src="https://unpkg.com/vue@3"></script>
+ </head>
+
+ <body>
+ <div class="wrapper nav-wrapper">
+ <nav>
+ <header class="nav-logo">
+ <h1>BRAND NAME</h1>
+ <p>BRAND NAME SLOGAN</p>
+ </header>
+ <ul class="nav-links">
+ <li class="link active">
+ <a href="./index.html">Home</a>
+ </li>
+ <li class="link">
+ <a href="./index.html">Our Products</a>
+ </li>
+ <li class="link">
+ <a href="./about-us.html">About Us</a>
+ </li>
+ </ul>
+ <div class="nav-cta">
+ <div class="search">
+ <i class='bx bx-search'>
+ <div class="input-box">
+ <input type="search" name="searchInput" id="searchInput" placeholder="Search.."
+ autocomplete="off" />
+ </div>
+ </i>
+ </div>
+ <div class="basket">
+ <a href="http:https://olliewells.co.uk" style="color: var(--secondary);"><i
+ class='bx bx-basket'></i></a>
+ </div>
+ </div>
+ </nav>
+ </div>
+
+ <div class="parallax"></div>
+
+ <div class="wrapper">
+ <div class="content" id="app">
+ <div class="header">
+ <h1 class="title">About Us</h1>
+ <div class="hl"></div>
+ </div>
+ <div class="content-body">
+ <div class="section section-1">
+ <img src="https://picsum.photos/400/600" alt="">
+ <div class="content-container">
+ <h1>This is a sample heading.</h1>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus sem, bibendum
+ eu
+ nibh a, tincidunt euismod metus. Donec lacinia magna et tincidunt rhoncus. Aenean
+ placerat,
+ ipsum sed ultrices laoreet, dui quam sodales sapien, a euismod lorem nisi quis ligula.
+ Duis
+ finibus elit a nisi tristique laoreet. Praesent in faucibus sapien, ac mattis metus.
+ Duis a
+ metus dapibus, scelerisque turpis quis, malesuada sapien. Praesent risus magna, semper
+ eget
+ facilisis nec, mattis sit amet mi. Nam sit amet posuere purus, at facilisis sapien.
+ Nullam
+ hendrerit urna quis justo tincidunt maximus. Maecenas maximus blandit ipsum. Nulla
+ tincidunt, orci eu suscipit dictum, quam ante vehicula nunc, ac fringilla elit arcu quis
+ velit.
+ </p>
+ </div>
+ </div>
+ <div class="hl"></div>
+ </div>
+ </div>
+ </div>
+
+ <footer>
+ Copyright &copy BRAND NAME 2022 <br> Website made by <a href=""
+ style="color: hsl(298, 85%, 52%);">Hex#2639</a>.
+ </footer>
+
+ <script src="./assets/js/index.js"></script>
+ </body>
+
+</html>
diff --git a/assets/css/about.css b/assets/css/about.css
@@ -0,0 +1,48 @@
+.parallax {
+ /* The image used */
+ background-image: url("https://picsum.photos/1920/1080");
+
+ /* Set a specific height */
+ min-height: 600px;
+
+ /* Create the parallax scrolling effect */
+ background-attachment: fixed;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: auto 12px;
+ max-width: 1200px;
+}
+
+.content .header {
+ margin: 36px;
+}
+
+.content .hl {
+ width: 80%;
+ border-bottom: 1px solid var(--secondary);
+ margin: 12px auto;
+}
+
+.content .content-body {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+}
+
+.content .content-body .section {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ gap: 100px;
+ align-items: center;
+ justify-content: center;
+ margin: 60px;
+}
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -0,0 +1,62 @@
+.parallax {
+ /* The image used */
+ background-image: url("https://picsum.photos/1920/1080");
+
+ /* Set a specific height */
+ min-height: 600px;
+
+ /* Create the parallax scrolling effect */
+ background-attachment: fixed;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: auto 12px;
+ max-width: 1200px;
+}
+
+.content .header {
+ margin: 36px;
+}
+
+.content .header .hl {
+ width: 100%;
+ border-bottom: 1px solid var(--secondary);
+ margin: 12px auto;
+}
+
+.content .content-body {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 16px
+}
+
+.content .content-body .card {
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+ max-width: 300px;
+ margin: 12px;
+ text-align: center;
+ padding-bottom: 12px;
+
+ transition: all 0.3s ease;
+}
+
+.content .content-body .card:hover {
+ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
+}
+
+.content .content-body .price {
+ color: var(--accent);
+ font-size: 22px;
+}
+
+.content .content-body .card p {
+ margin: 0 30px;
+}
diff --git a/assets/css/master.css b/assets/css/master.css
@@ -0,0 +1,28 @@
+@import url('https://fonts.googleapis.com/css2?family=Radio+Canada:wght@300;400;500;600;700&display=swap');
+
+:root {
+ --primary: #F1F7ED;
+ --secondary: #070707;
+ --accent: #009dff;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+
+ font-family: 'Radio Canada', sans-serif;
+}
+
+html,
+body {
+ color: var(--secondary);
+ background-color: var(--primary);
+}
+
+footer {
+ text-align: center;
+ width: 100%;
+ margin: 180px auto;
+ text-decoration: none;
+}
diff --git a/assets/css/nav.css b/assets/css/nav.css
@@ -0,0 +1,110 @@
+.wrapper {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+
+nav {
+ background-color: transparent;
+ position: fixed;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ max-width: 1200px;
+ width: 100%;
+ margin: 16px;
+ user-select: none;
+}
+
+nav .nav-links {
+ display: flex;
+ flex-direction: row;
+ align-items: ceter;
+ justify-content: space-between;
+ list-style: none;
+}
+
+nav .nav-links .link {
+ margin: 0 32px;
+
+ transition: all 0.3s ease;
+}
+
+nav .nav-links .link:hover {
+ transform: scale(1.25);
+}
+
+nav .nav-links .link a {
+ color: var(--secondary);
+ text-decoration: none;
+ font-size: 18px;
+
+ transition: all 0.3s ease;
+}
+
+nav .nav-links .link:hover a {
+ color: var(--accent);
+}
+
+nav .nav-cta {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+}
+
+nav .nav-cta i {
+ font-size: 24px;
+ margin: 0 12px;
+ position: relative;
+
+ transition: all 0.3s ease;
+}
+
+nav .nav-cta i:hover {
+ color: var(--accent);
+ font-size: 30px;
+}
+
+nav .nav-cta .search i .input-box {
+ position: absolute;
+ top: 80px;
+ right: -7px;
+ outline: none;
+ border: none;
+ background-color: var(--accent);
+ color: var(--primary);
+ padding: 12px;
+ font-size: 18px;
+ border-radius: 4px;
+
+ transition: all 0.3s ease;
+
+ opacity: 0;
+ visibility: hidden;
+}
+
+nav .nav-cta .search i .input-box input {
+ border: none;
+ outline: none;
+ padding: 4px 8px;
+ font-size: 18px;
+}
+
+nav .nav-cta .search i .input-box::before {
+ content: '';
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ background: var(--accent);
+ right: 10px;
+ top: -6px;
+ transform: rotate(45deg);
+ z-index: -10;
+}
+
+nav .nav-cta .search i:hover .input-box {
+ opacity: 1;
+ visibility: visible;
+ top: 40px;
+}