Skip to content

Commit 4430f52

Browse files
dedehasdedehas
authored
Merge pull request #28 from dedehas/feature/home
Feature/home
2 parents 2e6652e + 17d0e55 commit 4430f52

File tree

6 files changed

+35
-156
lines changed

6 files changed

+35
-156
lines changed

‎components/navbar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export class Navbar extends LitElement {
5454
float: right;
5555
}
5656
a {
57-
/* color: black; */
57+
color: black;
5858
text-decoration: none;
5959
}
6060
.wide i{

‎images/homepage/garden-bench.jpg‎

3.34 MB
Loading

‎images/homepage/ohbaby-ring.jpg‎

1.72 MB
Loading

images/pink-balloon-wall.jpg renamed to images/homepage/pink-balloon-wall.jpg

File renamed without changes.

‎index.html‎

Lines changed: 15 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
99
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
1010
<link rel="stylesheet" href="/style.css">
11-
1211
<!-- Favicons in increasing order of preference -->
1312
<!-- This is automatically selected if in root (for backwards compatibility), using sizes tag to trick chromium into NOT selecting it -->
1413
<link rel="icon" href="/favicon.ico?v=1.2" sizes="48x48">
@@ -25,24 +24,27 @@
2524
<meta name="msapplication-config" content="/images/icons/browserconfig.xml?v=1.2">
2625
<!-- Specify Chrome tab colour on Android -->
2726
<meta name="theme-color" content="#fde9ee" />
28-
27+
<!-- Web Components Scripts -->
2928
<script src="/footer.js" type="text/javascript" defer></script>
3029
<script src="/contentCard.js" type="text/javascript" defer></script>
3130
<script src="/components/navbar.js" type="module" defer></script>
32-
3331
</head>
32+
3433
<body onload="logoResize()">
3534

35+
<header>
3636
<nav-bar current="index"></nav-bar>
37+
<div class="logoimg" id="home"></div>
38+
</header>
3739

38-
<!-- Logo Image -->
39-
<div class="logoimg w3-display-container" id="home">
40-
<div class="w3-display-middle" style="white-space:nowrap;">
41-
</div>
40+
<main>
41+
42+
<div id="welcome">
43+
<h2>WELCOME TO BALLOON ATELIER!</h2>
4244
</div>
4345

4446
<content-card>
45-
<img src="images/pink-balloon-wall.jpg" slot="card-image" alt="Ela kneels before a flowery pink balloon wall">
47+
<img src="images/homepage/pink-balloon-wall.jpg" slot="card-image" alt="Ela kneels before a flowery pink balloon wall">
4648
<h4 slot="card-title">Who We Are</h4>
4749
<p slot="card-body">
4850
At Balloon Atelier, we believe that every event deserves a touch of magic.
@@ -52,6 +54,7 @@ <h4 slot="card-title">Who We Are</h4>
5254
</content-card>
5355

5456
<content-card>
57+
<img src="images/homepage/ohbaby-ring.jpg" slot="card-image" alt="A large balloon ring surrounding a neon sign that says 'Oh Baby'">
5558
<h4 slot="card-title">What We Do</h4>
5659
<p slot="card-body">
5760
Whether it's a birthday party, wedding, corporate event, baby shower or any special occasion,
@@ -61,121 +64,20 @@ <h4 slot="card-title">What We Do</h4>
6164
</content-card>
6265

6366
<content-card>
67+
<img src="images/homepage/garden-bench.jpg" slot="card-image" alt="A garden bench surrounded by chrome balloons">
6468
<h4 slot="card-title">What They Say</h4>
6569
<p slot="card-body">
6670
Don't just take it from me, read some of the testimonials from happy customers below!
6771
</p>
6872
</content-card>
6973

70-
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
71-
<div class="w3-quarter w3-section">
72-
<span class="w3-xlarge">14+</span><br>
73-
Partners
74-
</div>
75-
<div class="w3-quarter w3-section">
76-
<span class="w3-xlarge">55+</span><br>
77-
Projects Done
78-
</div>
79-
<div class="w3-quarter w3-section">
80-
<span class="w3-xlarge">89+</span><br>
81-
Happy Clients
82-
</div>
83-
<div class="w3-quarter w3-section">
84-
<span class="w3-xlarge">150+</span><br>
85-
Meetings
86-
</div>
87-
</div>
88-
89-
<!-- Container (Portfolio Section) -->
90-
<div class="w3-content w3-container w3-padding-64" id="portfolio">
91-
<div class="w3-display-container w3-opacity-min">
92-
<div class="w3-display-middle">
93-
<span class="w3-xxlarge w3-text w3-wide">PORTFOLIO</span>
94-
</div>
95-
</div>
96-
<br>
97-
98-
<p class="w3-center"><em>Here are some of my latest creations<br> Click on the images to enlarge</em></p><br>
99-
100-
<!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
101-
<div class="w3-row-padding w3-center">
102-
<div class="w3-col m3">
103-
<img src="images/teepee-pastel.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="A Teepee Party">
104-
</div>
105-
106-
<div class="w3-col m3">
107-
<img src="images/disco-decor.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Disco Glamour">
108-
</div>
109-
110-
<div class="w3-col m3">
111-
<img src="images/harry-potter-arch.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="A magical Harry Potter themed arch">
112-
</div>
113-
114-
<div class="w3-col m3">
115-
<img src="images/safari-84jpg.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Lush Leopard Print">
116-
</div>
117-
</div>
118-
119-
</div>
120-
</div>
121-
122-
<!-- Modal for full size images on click-->
123-
<div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'">
124-
<span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
125-
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
126-
<img id="img01" class="w3-image">
127-
<p id="caption" class="w3-opacity w3-large"></p>
128-
</div>
129-
</div>
130-
131-
132-
133-
<!-- Container (Contact Section) -->
134-
<div class="w3-content w3-container w3-padding-64" id="contact">
135-
<div class="w3-display-container w3-opacity-min">
136-
<div class="w3-display-middle">
137-
<span class="w3-xxlarge w3-text w3-wide">CONTACT</span>
138-
</div>
139-
</div>
140-
<br>
141-
142-
<p class="w3-center"><em>I'd love your feedback!</em></p>
143-
144-
<div class="w3-row w3-padding-32 w3-section">
145-
<!-- <div class="w3-col m4 w3-container">
146-
<img src="/w3images/map.jpg" class="w3-image w3-round" style="width:100%">
147-
</div> -->
148-
<div class="w3-col m8 w3-panel">
149-
<div class="w3-large w3-margin-bottom">
150-
<i class="fa fa-map-marker fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> London, UK<br>
151-
<i class="fa fa-phone fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Phone: 07804690155<br>
152-
<i class="fa fa-envelope fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> <a href="mailto:info@balloonatelier.co.uk"> info@balloonatelier.co.uk </a> <br>
153-
</div>
154-
<!-- <p>Say hello:</p>
155-
<form action="/action_page.php" target="_blank">
156-
<div class="w3-row-padding" style="margin:0 -16px 8px -16px">
157-
<div class="w3-half">
158-
<input class="w3-input w3-border" type="text" placeholder="Name" required name="Name">
159-
</div>
160-
<div class="w3-half">
161-
<input class="w3-input w3-border" type="text" placeholder="Email" required name="Email">
162-
</div>
163-
</div>
164-
<input class="w3-input w3-border" type="text" placeholder="Message" required name="Message">
165-
<button class="w3-button w3-black w3-right w3-section" type="submit">
166-
<i class="fa fa-paper-plane"></i> SEND MESSAGE
167-
</button>
168-
</form> -->
169-
</div>
170-
</div>
171-
</div>
74+
</main>
17275

17376
<!-- Footer -->
17477
<footer-component></footer-component>
17578

17679
<script>
177-
178-
// animation 1
80+
// animation
17981
var id = null;
18082
function logoResize() {
18183
var elem = document.getElementById("home");
@@ -189,40 +91,10 @@ <h4 slot="card-title">What They Say</h4>
18991
clearInterval(id);
19092
} else {
19193
scale = 100 - 50 / (1 + Math.exp(8 - millis / 150));
192-
// log(scale);
193-
elem.style.minHeight = scale + '%';
94+
elem.style.height = scale + 'vh';
19495
}
19596
}
19697
}
197-
198-
// Model Image Gallery
199-
function onClick(element) {
200-
document.getElementById("img01").src = element.src;
201-
document.getElementById("modal01").style.display = "block";
202-
var captionText = document.getElementById("caption");
203-
captionText.innerHTML = element.alt;
204-
}
205-
206-
// Change style of navbar on scroll
207-
// window.onscroll = function() {myFunction()};
208-
// function myFunction() {
209-
// var navbar = document.getElementById("myNavbar");
210-
// if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
211-
// navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
212-
// } else {
213-
// navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-'white'", "");
214-
// }
215-
// }
216-
217-
// Used to toggle the menu on small screens when clicking on the menu button
218-
// function toggleFunction() {
219-
// var x = document.getElementById("navDemo");
220-
// if (x.className.indexOf("w3-show") == -1) {
221-
// x.className += " w3-show";
222-
// } else {
223-
// x.className = x.className.replace(" w3-show", "");
224-
// }
225-
// }
22698
</script>
22799

228100
</body>

‎style.css‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,39 @@
77
--color-dark-grey: #adadad;
88
}
99

10-
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
10+
body, h1, h2, h3, h4, h5, h6 {
11+
font-family: "Lato", sans-serif;
12+
}
13+
14+
h2 {
15+
text-align: center;
16+
}
1117

1218
body, html {
1319
height: 100%;
1420
background-color: var(--color-light-pink);
15-
line-height: 1.8;
21+
line-height: 1.6;
1622
}
1723

1824
.logoimg {
1925
background-image: url('images/logo-final-cropped.jpg');
20-
min-height: 100%;
21-
background-attachment: scroll;
26+
height: 100vh;
2227
background-position: center;
2328
background-repeat: no-repeat;
2429
background-size: contain;
2530
margin-top: 60px;
2631
}
2732

33+
main {
34+
padding-top: 64px;
35+
padding-bottom: 64px;
36+
padding-left: 16px;
37+
padding-right: 16px;
38+
max-width: 980px;
39+
margin-left: auto;
40+
margin-right: auto;
41+
}
42+
2843
.nav-button {
2944
display: inline-block;
3045
text-align: center;
@@ -41,14 +56,6 @@ body, html {
4156
.w3-wide {letter-spacing: 10px;}
4257
.w3-hover-opacity {cursor: pointer;}
4358

44-
/* Turn off parallax scrolling for tablets and phones */
45-
/* @media only screen and (max-device-width: 1600px) {
46-
.bgimg-1, .bgimg-2, .bgimg-3 {
47-
background-attachment: scroll;
48-
min-height: 100px;
49-
}
50-
} */
51-
5259
.faq-item {
5360
background-color: var(--color-pink);
5461
}

0 commit comments

Comments
 (0)