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 |
241
css/atlantic.css
241
css/atlantic.css
|
|
@ -105,10 +105,167 @@ header ul li *[href]:hover {
|
|||
-moz-transform: rotateZ(360deg);
|
||||
-o-transform: rotateZ(360deg);
|
||||
transform: rotateZ(360deg);
|
||||
width: 650px;
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@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: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
#default-image {
|
||||
border-radius: 20px;
|
||||
width: 320px;
|
||||
position: relative;
|
||||
animation-name: image-fun;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
#book-flight-image, #rent-car-image, #walking-distance-image {
|
||||
border-radius: 20px;
|
||||
width: 320px;
|
||||
position: relative;
|
||||
animation-name: image-spin;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
#toggleWatchBtn {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
background: rgb(96, 95, 95);
|
||||
background: linear-gradient(0deg, rgba(96, 95, 95, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
-webkit-duration: .5s;
|
||||
-moz-duration: .5s;
|
||||
-o-duration: .5s;
|
||||
transition-duration: .5s;
|
||||
}
|
||||
|
||||
#toggleWatchBtn:hover {
|
||||
width: 250px;
|
||||
height: 60px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Mobile devices */
|
||||
@media screen and (max-width: 320px) {
|
||||
|
||||
header nav ul {
|
||||
height: 40px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
header ul li *[href] {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPads, Tablets. */
|
||||
@media screen and (min-width: 321px) {
|
||||
|
||||
header nav ul {
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
header ul li *[href] {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
img#large_image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img#small_image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
video {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small screens, laptops */
|
||||
@media screen and (min-width: 768px) {
|
||||
|
||||
header nav ul {
|
||||
height: 50px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
header ul li *[href] {
|
||||
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;
|
||||
|
|
@ -145,81 +302,11 @@ header ul li *[href]:hover {
|
|||
animation-name: image-spin;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
#toggleWatchBtn {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
background: rgb(96, 95, 95);
|
||||
background: linear-gradient(0deg, rgba(96, 95, 95, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
-webkit-duration: .5s;
|
||||
-moz-duration: .5s;
|
||||
-o-duration: .5s;
|
||||
transition-duration: .5s;
|
||||
}
|
||||
|
||||
#toggleWatchBtn:hover {
|
||||
width: 250px;
|
||||
height: 60px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Mobile devices */
|
||||
@media screen and (max-width: 480px) {
|
||||
|
||||
header nav ul {
|
||||
height: 40px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
header ul li *[href] {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* iPads, Tablets. */
|
||||
@media screen and (min-width: 481px) {
|
||||
|
||||
header nav ul {
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
header ul li *[href] {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flex-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Small screens, laptops */
|
||||
@media screen and (min-width: 769px) {
|
||||
|
||||
header nav ul {
|
||||
height: 50px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
header ul li *[href] {
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;">
|
||||
|
|
|
|||
53
units.html
53
units.html
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue