Week 6: Responsive Site Build
This commit is contained in:
parent
a6d5898f61
commit
20520e287e
GPG Key ID:
EFC0C720A240551C
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
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);
|
-moz-transform: rotateZ(360deg);
|
||||||
-o-transform: rotateZ(360deg);
|
-o-transform: rotateZ(360deg);
|
||||||
transform: rotateZ(360deg);
|
transform: rotateZ(360deg);
|
||||||
width: 650px;
|
width: 320px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -126,13 +126,13 @@ header ul li *[href]:hover {
|
||||||
-moz-transform: rotateY(360deg);
|
-moz-transform: rotateY(360deg);
|
||||||
-o-transform: rotateY(360deg);
|
-o-transform: rotateY(360deg);
|
||||||
transform: rotateY(360deg);
|
transform: rotateY(360deg);
|
||||||
width: 650px;
|
width: 320px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#default-image {
|
#default-image {
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
width: 650px;
|
width: 320px;
|
||||||
position: relative;
|
position: relative;
|
||||||
animation-name: image-fun;
|
animation-name: image-fun;
|
||||||
animation-duration: 2s;
|
animation-duration: 2s;
|
||||||
|
|
@ -140,7 +140,7 @@ header ul li *[href]:hover {
|
||||||
|
|
||||||
#book-flight-image, #rent-car-image, #walking-distance-image {
|
#book-flight-image, #rent-car-image, #walking-distance-image {
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
width: 650px;
|
width: 320px;
|
||||||
position: relative;
|
position: relative;
|
||||||
animation-name: image-spin;
|
animation-name: image-spin;
|
||||||
animation-duration: 2s;
|
animation-duration: 2s;
|
||||||
|
|
@ -164,7 +164,7 @@ header ul li *[href]:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile devices */
|
/* Mobile devices */
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (max-width: 320px) {
|
||||||
|
|
||||||
header nav ul {
|
header nav ul {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
@ -175,14 +175,14 @@ header ul li *[href]:hover {
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.flex-container {
|
h1 {
|
||||||
flex-direction: column;
|
font-size: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* iPads, Tablets. */
|
/* iPads, Tablets. */
|
||||||
@media screen and (min-width: 481px) {
|
@media screen and (min-width: 321px) {
|
||||||
|
|
||||||
header nav ul {
|
header nav ul {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
@ -193,15 +193,27 @@ header ul li *[href]:hover {
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
img#large_image {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-container {
|
img#small_image {
|
||||||
flex-direction: column;
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Small screens, laptops */
|
/* Small screens, laptops */
|
||||||
@media screen and (min-width: 769px) {
|
@media screen and (min-width: 768px) {
|
||||||
|
|
||||||
header nav ul {
|
header nav ul {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
|
@ -212,14 +224,89 @@ header ul li *[href]:hover {
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
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. */
|
/* Desktops, large screens. */
|
||||||
@media screen and (min-width: 1025px) {
|
@media screen and (min-width: 1024px) {
|
||||||
|
|
||||||
header nav ul {
|
header nav ul {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
|
@ -230,10 +317,14 @@ header ul li *[href]:hover {
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 46px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Extra large screens, TV. */
|
/* Extra large screens, TV. */
|
||||||
@media screen and (min-width: 1201px) {
|
@media screen and (min-width: 1401px) {
|
||||||
|
|
||||||
header nav ul {
|
header nav ul {
|
||||||
height: 50px;
|
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>
|
<div>
|
||||||
<h3>What We Offer</h3>
|
<h3>What We Offer</h3>
|
||||||
<p><span class="resort">Atlantic Fishing Resort</span> offers a special lodging experience on the
|
<p><span class="resort">Atlantic Fishing Resort</span> offers a special lodging experience on the
|
||||||
Namibian West
|
Namibian West Coast.<br/>
|
||||||
Coast.<br/>
|
|
||||||
Relax in serenity with panoramic views of the Atlantic Ocean.</p>
|
Relax in serenity with panoramic views of the Atlantic Ocean.</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -74,7 +73,7 @@
|
||||||
<!--Position information will be inserted here-->
|
<!--Position information will be inserted here-->
|
||||||
<div id="result"></div>
|
<div id="result"></div>
|
||||||
</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="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"
|
<img id="book-flight-image" src="images/book_flight.jpg" alt="Book a flight to Namibia"
|
||||||
style="display: none;">
|
style="display: none;">
|
||||||
|
|
@ -95,14 +94,14 @@
|
||||||
Your browser does not support the video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
<div id="contact">
|
<div id="contact">
|
||||||
<span class="resort">Atlantic Fishing Resort</span><br />
|
<span class="resort">Atlantic Fishing Resort</span><br/>
|
||||||
12010 Atlantic Fishing Road<br />
|
12010 Atlantic Fishing Road<br/>
|
||||||
Hentiesbaai, Namibia 95555<br /><br />
|
Hentiesbaai, Namibia 95555<br/><br/>
|
||||||
<a id="mobile" href="tel:888-555-5555">888-555-5555</a>
|
<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>
|
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<div style="padding: 50px 50px;">
|
<div style="padding: 50px 50px;">
|
||||||
|
|
|
||||||
63
units.html
63
units.html
|
|
@ -22,43 +22,54 @@
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="index.html">Home</a>
|
<a href="index.html">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" class="active">Units</a>
|
<a href="#" class="active">Units</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="activities.html">Activities</a>
|
<a href="activities.html">Activities</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="reservations.html">Reservations</a>
|
<a href="reservations.html">Reservations</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div id="hero">
|
<div id="banner">
|
||||||
<h2>Prepare for your stay at Atlantic Fishing Resort</h2>
|
<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">
|
||||||
<dl>
|
</div>
|
||||||
<dt>Our Units</dt>
|
<div id="hero">
|
||||||
<dd>Our luxury units sleep 6 or 8 people comfortably. They have outside BBQ's with ocean-front views. Each
|
<h1 style="text-align: center">Prepare for your stay at Atlantic Fishing Resort</h1>
|
||||||
unit is serviced daily (except Sundays and public holidays) by our friendly staff to help you to take a
|
<article>
|
||||||
break.
|
<div class="flex-container">
|
||||||
</dd>
|
<div>
|
||||||
|
<h3>Our Units</h3>
|
||||||
<dt>How are the units furnished?</dt>
|
<p>Our luxury units sleep 6 or 8 people comfortably. They have outside BBQ's with ocean-front
|
||||||
<dd>Each unit is furnished with a king-size bed and double and single beds to accommodate all guests.
|
views. Each unit is serviced daily (except Sundays and public holidays) by our friendly
|
||||||
The luxury unit has a fully furnished kitchen, dining room and living room with at least 2 toilets, a
|
staff
|
||||||
bath and shower facilities with hot water. Each unit also has a garage available.
|
to help you to take a break.
|
||||||
</dd>
|
</p>
|
||||||
|
</div>
|
||||||
<dt>What should I bring?</dt>
|
<div>
|
||||||
<dd>Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking shoes and
|
<h3>How are the units furnished?</h3>
|
||||||
plan to dress for changing weather with layers of clothing.
|
<p>Each unit is furnished with a king-size bed and double and single beds to accommodate all
|
||||||
</dd>
|
guests. The luxury unit has a fully furnished kitchen, dining room and living room with at
|
||||||
</dl>
|
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>
|
</div>
|
||||||
<h3>Unit Packages</h3>
|
<h3>Unit Packages</h3>
|
||||||
<p>A variety of luxury unit packages are available. Choose a package below and contact us to begin your
|
<p>A variety of luxury unit packages are available. Choose a package below and contact us to begin your
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue