champlain/WEBD-225-40
1
0
Fork 0
Code Releases Activity

Week 6: Responsive Site Build

Browse Source
This commit is contained in:
Llewellyn van der Merwe 2022-02-28 04:43:16 +02:00
parent a6d5898f61
commit 20520e287e
Signed by: Llewellyn
GPG Key ID: EFC0C720A240551C
5 changed files with 156 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
banner_units_large.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 KiB

BIN
banner_units_small.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

131
css/atlantic.css
View File

@ -105,7 +105,7 @@ header ul li *[href]:hover {
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
width: 650px;
width: 320px;
}
}
@ -126,13 +126,13 @@ header ul li *[href]:hover {
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
width: 650px;
width: 320px;
}
}
#default-image {
border-radius: 20px;
width: 650px;
width: 320px;
position: relative;
animation-name: image-fun;
animation-duration: 2s;
@ -140,7 +140,7 @@ header ul li *[href]:hover {
#book-flight-image, #rent-car-image, #walking-distance-image {
border-radius: 20px;
width: 650px;
width: 320px;
position: relative;
animation-name: image-spin;
animation-duration: 2s;
@ -164,7 +164,7 @@ header ul li *[href]:hover {
}
/* Mobile devices */
@media screen and (max-width: 480px) {
@media screen and (max-width: 320px) {
header nav ul {
height: 40px;
@ -175,14 +175,14 @@ header ul li *[href]:hover {
line-height: 40px;
height: 40px;
}
}
.flex-container {
flex-direction: column;
h1 {
font-size: 20px;
}
}
/* iPads, Tablets. */
@media screen and (min-width: 481px) {
@media screen and (min-width: 321px) {
header nav ul {
height: 40px;
@ -193,15 +193,27 @@ header ul li *[href]:hover {
line-height: 40px;
height: 40px;
}
}
img#large_image {
display: none;
}
.flex-container {
flex-direction: column;
img#small_image {
display: block;
width: 100%;
}
h1 {
font-size: 26px;
}
video {
display: none;
}
}
/* Small screens, laptops */
@media screen and (min-width: 769px) {
@media screen and (min-width: 768px) {
header nav ul {
height: 50px;
@ -212,14 +224,89 @@ header ul li *[href]:hover {
line-height: 50px;
height: 50px;
}
img#small_image {
display: none;
}
img#large_image {
display: block;
width: 100%;
}
.flex-container {
flex-direction: row;
}
h1 {
font-size: 36px;
}
video {
display: inline-block;
}
@keyframes image-fun {
0% {
left: -500px;
top: -300px;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
width: 10px;
}
100% {
left: 0px;
top: 0px;
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
width: 650px;
}
}
@keyframes image-spin {
0% {
left: 0;
top: 100px;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
width: 10px;
}
100% {
left: 0;
top: 0;
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
width: 650px;
}
}
#default-image {
border-radius: 20px;
width: 650px;
position: relative;
animation-name: image-fun;
animation-duration: 2s;
}
#book-flight-image, #rent-car-image, #walking-distance-image {
border-radius: 20px;
width: 650px;
position: relative;
animation-name: image-spin;
animation-duration: 2s;
}
}
.flex-container {
flex-direction: row;
}
/* Desktops, large screens. */
@media screen and (min-width: 1025px) {
@media screen and (min-width: 1024px) {
header nav ul {
height: 50px;
@ -230,10 +317,14 @@ header ul li *[href]:hover {
line-height: 50px;
height: 50px;
}
h1 {
font-size: 46px;
}
}
/* Extra large screens, TV. */
@media screen and (min-width: 1201px) {
@media screen and (min-width: 1401px) {
header nav ul {
height: 50px;
@ -246,7 +337,3 @@ header ul li *[href]:hover {
}
}
.flex-container {
flex-direction: row;
}

13
index.html
View File

@ -45,8 +45,7 @@
<div>
<h3>What We Offer</h3>
<p><span class="resort">Atlantic Fishing Resort</span> offers a special lodging experience on the
Namibian West
Coast.<br/>
Namibian West Coast.<br/>
Relax in serenity with panoramic views of the Atlantic Ocean.</p>
</div>
<div>
@ -74,7 +73,7 @@
<!--Position information will be inserted here-->
<div id="result"></div>
</div>
<div style="padding: 50px 0">
<div style="padding: 50px 0; text-align: center">
<img id="default-image" src="images/default.jpg" alt="Atlantic Holiday Resort">
<img id="book-flight-image" src="images/book_flight.jpg" alt="Book a flight to Namibia"
style="display: none;">
@ -96,11 +95,11 @@
</video>
</div>
<div id="contact">
<span class="resort">Atlantic Fishing Resort</span><br />
12010 Atlantic Fishing Road<br />
Hentiesbaai, Namibia 95555<br /><br />
<span class="resort">Atlantic Fishing Resort</span><br/>
12010 Atlantic Fishing Road<br/>
Hentiesbaai, Namibia 95555<br/><br/>
<a id="mobile" href="tel:888-555-5555">888-555-5555</a>
<span id="desktop">888-555-5555</span><br /><br />
<span id="desktop">888-555-5555</span><br/><br/>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</div>
</main>

53
units.html
View File

@ -36,29 +36,40 @@
</ul>
</nav>
</header>
<main>
<div id="banner">
<img id="large_image" src="banner_units_large.jpg" alt="Atlantic Coastal Town">
<img id="small_image" src="banner_units_small.jpg" alt="Atlantic Coastal Town">
</div>
<div id="hero">
<h2>Prepare for your stay at Atlantic Fishing Resort</h2>
<dl>
<dt>Our Units</dt>
<dd>Our luxury units sleep 6 or 8 people comfortably. They have outside BBQ's with ocean-front views. Each
unit is serviced daily (except Sundays and public holidays) by our friendly staff to help you to take a
break.
</dd>
<dt>How are the units furnished?</dt>
<dd>Each unit is furnished with a king-size bed and double and single beds to accommodate all guests.
The luxury unit has a fully furnished kitchen, dining room and living room with at least 2 toilets, a
bath and shower facilities with hot water. Each unit also has a garage available.
</dd>
<dt>What should I bring?</dt>
<dd>Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking shoes and
plan to dress for changing weather with layers of clothing.
</dd>
</dl>
<h1 style="text-align: center">Prepare for your stay at Atlantic Fishing Resort</h1>
<article>
<div class="flex-container">
<div>
<h3>Our Units</h3>
<p>Our luxury units sleep 6 or 8 people comfortably. They have outside BBQ's with ocean-front
views. Each unit is serviced daily (except Sundays and public holidays) by our friendly
staff
to help you to take a break.
</p>
</div>
<div>
<h3>How are the units furnished?</h3>
<p>Each unit is furnished with a king-size bed and double and single beds to accommodate all
guests. The luxury unit has a fully furnished kitchen, dining room and living room with at
least 2 toilets, a bath and shower facilities with hot water. Each unit also has a garage
available.
</p>
</div>
<div>
<h3>What should I bring?</h3>
<p>Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking
shoes and plan to dress for changing weather with layers of clothing. Remember a hat and
sunscreen for a very bright African sun.
</p>
</div>
</div>
</article>
</div>
<h3>Unit Packages</h3>
<p>A variety of luxury unit packages are available. Choose a package below and contact us to begin your