Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

**Merch Page Update** from committees branch #102

Open
wants to merge 28 commits into
base: main
Choose a base branch
from
Open

**Merch Page Update** from committees branch #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
78441a2
Added: committee.js, committee.css, committee.html. Added images: img…
shazebs Nov 19, 2021
3be97ef
Worked on mobile responsiveness and inserting text content into main …
shazebs Dec 7, 2021
a9a664b
Fixed more css styling, adding more @media responsiveness, created a …
shazebs Dec 7, 2021
4d832e7
some js changes
elijaholmos Dec 10, 2021
43b332a
Merge branch 'main' into committee
GCUCoding Jan 11, 2022
25e75ff
showed max template committees page
shazebs Jan 21, 2022
654b048
Merge branch 'committee' of https://github.com/GCUCoders/Tech-Club-Si…
shazebs Jan 21, 2022
2914dff
Merge branch 'main' into committee
shazebs Jan 21, 2022
e4560fe
Added in comments (no serious code changes)
shazebs Jan 21, 2022
6ec38c1
Merge branch 'main' into committee
shazebs Jan 21, 2022
a399ade
moved temp css from page to css file , added more comments
shazebs Jan 21, 2022
25bb7a6
Fixed minor bugs based mostly around page responsiveness and css styl…
shazebs Jan 25, 2022
bcd5082
Merge branch 'main' into committee
shazebs Jan 28, 2022
45da6f9
Merge branch 'main' into committee
elijaholmos Jan 28, 2022
e258452
Merge branch 'main' into committee
shazebs Feb 8, 2022
1f9dd12
Merge branch 'main' into committee
shazebs Feb 8, 2022
1a091e8
Merge branch 'committee' of https://github.com/GCUCoders/Tech-Club-Si…
shazebs Feb 8, 2022
f416068
Updated committee.js page and fixed content height on committee.html
shazebs Feb 8, 2022
1ab5ec8
Fixed committee.js code to be more DOM appropriate
shazebs Feb 8, 2022
d261299
Fixed committee.js code to be more DOM appropriate
shazebs Feb 8, 2022
fdd939d
Merge branch 'main' into committee
shazebs Feb 18, 2022
bf41b00
Squashed commit of the following:
elijaholmos Feb 18, 2022
fa37575
Revert "Squashed commit of the following:"
elijaholmos Feb 18, 2022
0191583
fix images
elijaholmos Feb 18, 2022
4b23b8b
Merge branch 'main' into committee
elijaholmos Feb 18, 2022
162d6c2
Merge branch 'main' into committee
shazebs Feb 22, 2022
46cf495
I changed up the entire "merch.html" doc.
shazebs Mar 4, 2022
44ffa0b
Merge branch 'committee' of https://github.com/GCUCoders/Tech-Club-Si…
shazebs Mar 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
313 changes: 294 additions & 19 deletions merch.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,191 @@
<!DOCTYPE html>
<html>
<html lang="en">

<!-- start of head -->
<head>
<meta charset="utf-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- tab title -->
<title>Merch Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/merch-style.css">

<!-- Link to Navbar CSS -->
<link rel="stylesheet" href="css/navbar-style.css">

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

body {
background: black;

}

footer {
color: white;
text-align: center;
border-top:1.5px solid white;
padding-top: 3%;
padding-bottom: 3%;
}

#titleBR {
display: none;
}

.main-container {
display:flex;
flex-wrap:nowrap;
color: white;
font-family: 'Roboto Mono', monospace;
/* padding-bottom: 60px; */
}

#filters {
/* background-color:#774baa; */
width: 15%;
text-align: center;
padding: 10px 0px 0px 0px;
font-family:inherit;
border-top: 1.5px solid white;
border-right: 1.5px solid white;
height:100;
/* border-bottom: 1.5px solid white; */
}
#filters h2 {
margin-top: 0;
/* padding-left:18%; */
font-family: inherit;
color:white;
margin-bottom: 0;
font-size: large;
}
#filters details {
padding: 5px 0px 5px 0px;
line-height: 2;
font-family: 'Roboto Mono', monospace;
}
#filters summary {
/* list-style-type:disc; */
text-align: left;
padding-left: 10px;
/* margin: 0; */
font-family:inherit;
}
#filters button {
font-size:small;
padding:8px;
margin-top:10px;
color:white;
background:black;
border-radius: 5px;
/* font-family:'Roboto Mono', monospace; */

}
#filters button:hover {
color:black;
background-color: white;
/* font-family:'Roboto Mono', monospace; */
}

#products {
width: 85%;
text-align:center;
/* align-items: center; */
padding:10px 15px;;
border-top: 1.5px solid white;
font-family:inherit;
}
#products h2 span {
border-top:2px dashed #774baa;
border-bottom:2px dashed #774baa;
font-family:'Roboto Mono', monospace;
font-size: 2em;
}
#products div {
margin: 15px;
}
#products img {
width: 18vw;
height: 18vw;
border-radius: 8px;
opacity: 0.7;
}
#products img:hover {
opacity: 1;
}

#products-flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 1300px)
{
#products img {
width:35vw;
height:35vw;
}
#products h2 span {
font-size: 1.25em;
}
#filters {
font-size: small;
}
}
@media (max-width:700px)
{
#products img {
opacity: 1;
}
#titleBR {
display:block;
}
#filters {
width:25%;
font-size: small;
}
#filters h2 {
font-size: small;
}
#products img {
width:100%;
height:auto;
}
#filters button {
font-size: x-small;
padding:4px;
border-radius: 3px;
}
}
@media (max-width: 600px) {
footer {
padding-top:5%;
padding-bottom: 5%;
}
}
@media (max-width: 420px) {
#filters {
font-size: x-small;
}
#products h2 span {
font-size: large;
}
}
</style>


</head>
<!-- end of head -->


<!-- start of body -->
<body>

<!-- GCU Navbar -->
<nav class="navbar">
<a href="index.html"><img src="images/Navbar-Logo.png" alt="Navbar Logo" id="navbar-logo"></a>
<a href="#" class="toggle-button" style="margin-top: 20px;">
<a href="" class="toggle-button" style="margin-top: 20px;">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
Expand All @@ -25,24 +195,129 @@
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li class="dropdown">
<a href="committee.html">Committees</a>

</li>
<li class="dropdown"><a href="committee.html">Committees</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="merch.html">Merch</a></li>
<li style="margin-right: 10px;"><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<script src="js/mobile-toggle.js"></script>
<div id="merch-temp">
<div id="merch-temp-card">
<img src="images/TCLBlack-bg.png" class="merch-temp-img" alt="Logo">
<h1>Under Construction</h1>
<p>We are hard at work on this page</p>
<br/>
</div>


<!-- -->
<div class="main-container">

<!-- left filters container -->
<section id="filters" onchange="changeBoxSizes()">
<h2>Filters</h2><hr color="white">

<details>
<summary>Size</summary>
i
</details>
<details>
<summary>Color</summary>
&lt;3
</details>
<details>
<summary>Price</summary>
U
</details>
<details>
<summary>Gender</summary>
!!!
</details>

<hr color="white">

<button onclick="alert('This button is not yet functional.');">Apply Filters</button>
</section>

<!-- right content container -->
<section id="products">

<h2 style="">
<span style="">GCU Tech Club <br id="titleBR">Online Store</span>
</h2>

<section id="products-flex">
<div>
<img src="images/TC_T-shirt_basic1.png">
</div>
<div>
<img src="images/TC_T-shirt_basic2.png">
</div>
<div>
<img src="images/TC_T-shirt_havocs1.png">
</div>
<div>
<img src="images/TC_T-shirt_havocs2.png">
</div>
<div>
<img src="https://cdn11.bigcommerce.com/s-hkftlrohcg/images/stencil/300x300/products/6514/28035/College-of-Science-Engineering-Technology-Magnet__S_1__56944.1627073264.jpg?c=2">
</div>
<div>
<img src="https://cdn11.bigcommerce.com/s-hkftlrohcg/images/stencil/300x300/products/6087/28028/College-of-Science-Engineering-Technology-GCU-Tee__S_1__57050.1627066737.jpg?c=2">
</div>
<div>
<img src="https://cdn11.bigcommerce.com/s-hkftlrohcg/images/stencil/300x300/products/7831/28030/College-of-Science-Engineering-Technology-GCU-Long-Sleeve-Tee__S_1__53293.1627071657.jpg?c=2">
</div>
<div>
<img src="https://cdn11.bigcommerce.com/s-hkftlrohcg/images/stencil/300x300/products/8437/31705/Strideline-Purple-GCU-Thunder-Socks__S_1__47211.1641505646.jpg?c=2">
</div>
<div>
<img src="https://cdn11.bigcommerce.com/s-hkftlrohcg/images/stencil/300x300/products/5966/30854/College-of-Science-Engineering-Technology-Sticker__S_1__02115.1637272788.jpg?c=2">
</div>
<div>
<img src="https://cdn11.bigcommerce.com/s-hkftlrohcg/images/stencil/300x300/products/8635/32280/Logitech-M325-Wireless-Mouse-Blue__S_1__25106.1643755505.jpg?c=2">
</div>
<div>
<img src="https://cdn11.bigcommerce.com/s-hkftlrohcg/images/stencil/300x300/products/8400/32061/Logo-Brands-Grand-Canyon-University-Drawstring-Backpack__S_1__29331.1643146249.jpg?c=2">
</div>
<div>
<img src="https://cdn11.bigcommerce.com/s-hkftlrohcg/images/stencil/300x300/products/5604/30528/Running-Lope-GCU-Purple-White-Paint-Splatter-Notebook__S_1__19688.1636388363.jpg?c=2">
</div>
</section>

</section>

</div>

<footer>
Grand Canyon University 2022
</footer>
<script src="js/mobile-toggle.js"></script>





<!-- javascript -->
<script>

function changeBoxSizes()
{
// get browser height and width and print to console
var browserHeight = Math.floor(window.innerHeight)
var browserWidth = Math.floor(window.innerWidth)
console.log(browserHeight + "," + browserWidth)

// make filter section full browser height
var filterBox = document.getElementById('filters')
filterBox.style.height = (browserHeight-85)+'px'
}

// on page load function
window.onload = function()
{
// changeBoxSizes()
}


</script>


</body>
</html>
<!-- end of body -->

</html>
Loading