Skip to content

Commit 85ba935

Browse files
ItsAmyLeeItsAmyLee
authored
Merge pull request #29 from dedehas/develop
Pushão
2 parents febb105 + 4430f52 commit 85ba935

39 files changed

+1328
-214
lines changed

‎404.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Balloon Atelier</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10+
<link rel="stylesheet" href="/style.css">
11+
12+
<!-- Favicons in increasing order of preference -->
13+
<!-- This is automatically selected if in root (for backwards compatibility), using sizes tag to trick chromium into NOT selecting it -->
14+
<link rel="icon" href="/favicon.ico?v=1.2" sizes="48x48">
15+
<!-- Shortcut icons on iOS and some others -->
16+
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png?v=1.2">
17+
<!-- For Android Home Screens -->
18+
<link rel="manifest" href="/images/icons/site.webmanifest?v=1.2">
19+
<!-- For pinned tabs on Safari on MacOS -->
20+
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg?v=1.2" color="#b3d2e6">
21+
<!-- Future-proof svg icon (most preferred)-->
22+
<link rel="icon" type="image/svg+xml" href="/images/icons/favicon.svg" sizes="any">
23+
<!-- For Windows Metro Tile -->
24+
<meta name="msapplication-TileColor" content="#603cba">
25+
<meta name="msapplication-config" content="/images/icons/browserconfig.xml?v=1.2">
26+
<!-- Specify Chrome tab colour on Android -->
27+
<meta name="theme-color" content="#fde9ee" />
28+
29+
<script src="/footer.js" type="text/javascript" defer></script>
30+
<script src="/contentCard.js" type="text/javascript" defer></script>
31+
<script src="/components/navbar.js" type="module" defer></script>
32+
33+
</head>
34+
<body>
35+
36+
<header>
37+
<nav-bar></nav-bar>
38+
</header>
39+
40+
<div class="logoimg w3-display-container" style="min-height: 50%;" id="home">
41+
</div>
42+
43+
<main>
44+
<h2>Feeling Deflated?</h2>
45+
<p>Sorry, we can't find the page you are looking for (Error 404).
46+
It might be down temporarily, have moved, or it doesn't exist.
47+
Here are some things you can do in the meantime...
48+
</p>
49+
<ul>
50+
<li>
51+
Make sure that the URL is typed correctly, or simply visit our <a href="/index.html">HOMEPAGE</a>
52+
</li>
53+
<li>
54+
If this keeps happening, please <a href="/pages/contact.html">LET US KNOW</a> so we can fix it as soon as possible!
55+
</li>
56+
<li>
57+
Check out some beautiful balloon designs in our <a href="/pages/gallery.html">GALLERY</a>
58+
</li>
59+
</ul>
60+
</main>
61+
62+
<footer-component></footer-component>
63+
64+
</body>
65+
</html>

‎components/contentCard.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<style>
2+
h4 {
3+
font-weight: bold;
4+
}
5+
6+
::slotted(p) {
7+
margin-top: 0px;
8+
text-align: justify;
9+
}
10+
11+
.card {
12+
background-color: #b3d2e6;
13+
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
14+
transition: 0.3s;
15+
border-radius: 15px;
16+
}
17+
18+
.card:hover {
19+
box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
20+
}
21+
22+
img, ::slotted(img) {
23+
width: 100%;
24+
height: inherit;
25+
object-fit: cover;
26+
padding: 2%;
27+
border-radius: 15px;
28+
aspect-ratio: 1 / 1;
29+
}
30+
31+
.container {
32+
padding: 2px 16px;
33+
}
34+
35+
@media screen and (min-width: 601px) {
36+
div.card-image {
37+
width: 33%;
38+
}
39+
}
40+
41+
@media screen and (min-width: 769px) {
42+
div.card-image {
43+
width: 25%;
44+
}
45+
}
46+
</style>
47+
48+
<div class="card w3-margin">
49+
50+
<div class="w3-cell-row">
51+
52+
<div class="w3-cell w3-cell-middle w3-mobile card-image">
53+
<slot name="card-image">
54+
<img src="/images/defualt-balloon-clipart.png" alt="">
55+
</slot>
56+
</div>
57+
58+
<div class="w3-cell w3-mobile w3-container card-text">
59+
60+
<div class="card-title">
61+
<slot name="card-title"><h4>Default Card Title</h4></slot>
62+
</div>
63+
64+
<div class="card-body">
65+
<slot name="card-body">
66+
<p>Default Card Body</p>
67+
</slot>
68+
</div>
69+
70+
</div>
71+
72+
<!-- <div class="card-button w3-center w3-padding-16">
73+
<slot name="card-button">
74+
<button class="w3-button w3-round-large w3-grey">Default Button Text</button>
75+
</slot>
76+
</div> -->
77+
78+
</div>
79+
80+
</div>

‎components/footer.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<style>
2+
a {
3+
text-decoration: none;
4+
}
5+
hr {
6+
margin: 8px;
7+
}
8+
p, ul {
9+
margin: 0;
10+
padding: 0;
11+
}
12+
li {
13+
display: inline;
14+
list-style-type: none;
15+
padding-inline: 8px;
16+
}
17+
li+li {
18+
border-left: 1px solid #ffffff
19+
}
20+
#daisyIcon img {
21+
margin: 8px;
22+
max-width: 120px;
23+
}
24+
@media screen and (min-width: 600px) {
25+
#daisyIcon img {
26+
margin: 0px;
27+
max-width: 180px;
28+
}
29+
}
30+
</style>
31+
<footer class="w3-center w3-dark-grey w3-hover-black">
32+
<div class="w3-container w3-padding-16" id="footerContainer">
33+
34+
<div class="w3-row" id="footerTopSection" style="width: 100%; height: 180px">
35+
36+
<div class="w3-col" id="socials" style="width: 50px; height: 100%">
37+
<div class="w3-bar-block w3-xlarge">
38+
<a class="w3-bar-item w3-container" href="https://www.facebook.com/" target="_blank">
39+
<i class="fa fa-facebook w3-hover-opacity"></i>
40+
</a>
41+
<a class="w3-bar-item w3-container" href="https://www.instagram.com/balloonatelier_/" target="_blank">
42+
<i class="fa fa-instagram w3-hover-opacity"></i>
43+
</a>
44+
<a class="w3-bar-item w3-container" href="https://www.google.com/" target="_blank">
45+
<i class="fa fa-google w3-hover-opacity"></i>
46+
</a>
47+
</div>
48+
</div>
49+
50+
<div class="w3-rest" style="height: 100%;">
51+
<div class="w3-cell-row" style="height: 100%; width: 100%;">
52+
53+
<div class="w3-cell w3-right w3-mobile" id="buttonToTop" style="width: auto;">
54+
<button class="w3-button w3-round-large w3-light-grey">
55+
<a href="#home"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
56+
</button>
57+
</div>
58+
59+
<div class="w3-rest w3-mobile" id="daisyIcon">
60+
<a href="/index.html"><img src="/images/balloon-daisy-icon_clear.svg" alt="Balloon Daisy Icon"></a>
61+
</div>
62+
63+
</div>
64+
</div>
65+
66+
</div>
67+
68+
<hr>
69+
70+
<div class="w3-row" id="footerBottomSection">
71+
<div class="w3-half">
72+
<p>© 2024 Balloon Atelier. All rights reserved.</p>
73+
</div>
74+
<div class="w3-half">
75+
<ul>
76+
<li><a href="/pages/terms.html">Terms & Conditions</a></li>
77+
<li><a href="/pages/contact.html">Contact</a></li>
78+
<li><a href="/pages/sitemap.html">Sitemap</a></li>
79+
</ul>
80+
</div>
81+
</div>
82+
83+
</div>
84+
</footer>

‎components/navbar.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import {LitElement, css, html, nothing} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
2+
3+
export class Navbar extends LitElement {
4+
5+
static properties = {
6+
active: {type: Boolean, reflect: true},
7+
current: {type: String, reflect: true},
8+
}
9+
10+
static styles = css`
11+
:host {
12+
--grid-rows: 0fr;
13+
--wrapper-visibility: hidden;
14+
--extra-padding: 0px;
15+
}
16+
:host([active]) {
17+
--grid-rows: 1fr;
18+
--wrapper-visibility: visible;
19+
--extra-padding: 4px;
20+
}
21+
nav {
22+
position: fixed;
23+
top: 0;
24+
width: 100%;
25+
z-index: 1;
26+
/* overflow-y: scroll; */
27+
background-color: var(--color-light-pink);
28+
border-bottom: 2px solid var(--color-light-grey);
29+
box-shadow: 0px 4px 16px var(--color-pink);
30+
padding: 8px;
31+
}
32+
.wrapper {
33+
display: grid;
34+
grid-template-rows: var(--grid-rows);
35+
visibility: var(--wrapper-visibility);
36+
transition: all 1000ms ease-in-out;
37+
}
38+
ul {
39+
display: flex;
40+
flex-direction: column;
41+
flex-wrap: nowrap;
42+
gap: 4px;
43+
justify-content: space-between;
44+
list-style: none;
45+
margin: 0;
46+
padding: var(--extra-padding);
47+
transition: inherit;
48+
position: sticky;
49+
overflow: hidden;
50+
}
51+
button {
52+
border: unset;
53+
background-color: unset;
54+
float: right;
55+
}
56+
a {
57+
color: black;
58+
text-decoration: none;
59+
}
60+
.wide i{
61+
margin-inline-end: 8px;
62+
}
63+
64+
@media screen and (min-width: 700px) {
65+
.wrapper {
66+
grid-template-rows: 1fr;
67+
}
68+
ul {
69+
position: sticky;
70+
flex-direction: row;
71+
visibility: visible;
72+
}
73+
.nav-button.wide {
74+
margin: 0;
75+
display: block;
76+
}
77+
.small {
78+
display: none;
79+
visibility: hidden;
80+
}
81+
}
82+
`;
83+
84+
constructor() {
85+
super();
86+
this.active = false; // bools must default to false
87+
this.current = this.getAttribute("current");
88+
this.addEventListener("keyup", e => {
89+
if (e.code === "Escape") {this.active = false}
90+
});
91+
}
92+
93+
_toggle(e) {this.active = !this.active}
94+
95+
_icon(status) {return status? "fa-close" : "fa-bars"}
96+
97+
_current(name) {return (name === this.current)? "page" : ""}
98+
99+
render() {
100+
return html`
101+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
102+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
103+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
104+
<link rel="stylesheet" href="/style.css">
105+
<nav id="nav" aria-label="Main">
106+
<a href="/index.html" class="nav-button small">
107+
<img src="/images/balloon-daisy-icon_clear.svg" style="height: 24px;">
108+
</a>
109+
<button @click="${this._toggle}" id="menu-button" type="button" class="nav-button small" aria-label="Menu" aria-expanded="${this.active}" aria-controls="nav-links"><i class="fa fa-fw fa-lg ${this._icon(this.active)}" aria-hidden="true"></i></button>
110+
111+
<div class="wrapper">
112+
<ul role="list" id="nav-links">
113+
<li>
114+
<a href="/index.html" class="nav-button wide" aria-current=${this._current("index") || nothing}><i class="fa fa-fw fa-lg fa-home"></i>HOME</a>
115+
</li>
116+
<li>
117+
<a href="/pages/about.html" class="nav-button wide" aria-current=${this._current("about") || nothing}><i class="fa fa-fw fa-lg fa-user" aria-hidden="true"></i>ABOUT</a>
118+
</li>
119+
<li>
120+
<a href="/pages/services.html" class="nav-button wide" aria-current=${this._current("services") || nothing}><i class="fa fa-fw fa-lg fa-th-list" aria-hidden="true"></i>SERVICES</a>
121+
</li>
122+
<li>
123+
<a href="/pages/contact.html" class="nav-button wide" aria-current=${this._current("contact") || nothing}><i class="fa fa-fw fa-lg fa-envelope" aria-hidden="true"></i>CONTACT</a>
124+
</li>
125+
<li>
126+
<a href="/pages/gallery.html" class="nav-button wide" aria-current=${this._current("gallery") || nothing}><i class="fa fa-fw fa-lg fa-camera" aria-hidden="true"></i>GALLERY</a>
127+
</li>
128+
<li>
129+
<a href="/pages/faq.html" class="nav-button wide" aria-current=${this._current("faq") || nothing}><i class="fa fa-fw fa-lg fa-question-circle" aria-hidden="true"></i>FAQ</a>
130+
</li>
131+
</ul>
132+
</div>
133+
</nav>
134+
`;
135+
}
136+
}
137+
138+
customElements.define('nav-bar', Navbar)

0 commit comments

Comments
 (0)