Week 6: Responsive Site Build
This commit is contained in:
parent
a6d5898f61
commit
20520e287e
GPG Key ID:
EFC0C720A240551C
BIN
banner_units_large.jpg
Normal file
BIN
banner_units_large.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
BIN
banner_units_small.jpg
Normal file
BIN
banner_units_small.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
131
css/atlantic.css
131
css/atlantic.css
@ -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;
|
||||
}
|
||||
|
||||
|
||||
21
index.html
21
index.html
@ -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;">
|
||||
@ -95,14 +94,14 @@
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<div id="contact">
|
||||
<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 />
|
||||
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
|
||||
</div>
|
||||
<div id="contact">
|
||||
<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/>
|
||||
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div style="padding: 50px 50px;">
|
||||
|
||||
63
units.html
63
units.html
@ -22,43 +22,54 @@
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="index.html">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="active">Units</a>
|
||||
<a href="#" class="active">Units</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="activities.html">Activities</a>
|
||||
<a href="activities.html">Activities</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="reservations.html">Reservations</a>
|
||||
<a href="reservations.html">Reservations</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<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>
|
||||
<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">
|
||||
<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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user