diff --git a/Page2.html b/Page2.html new file mode 100644 index 0000000..b88c3bb --- /dev/null +++ b/Page2.html @@ -0,0 +1,101 @@ + + + +Lego Projects + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+

+
+

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

+ + + +
+

+

Color

+

Pallette

+ +
+Colorful Legos +

+
+ +
+

+

+
+ + +
+ + + + + diff --git a/Page3.html b/Page3.html new file mode 100644 index 0000000..01fe601 --- /dev/null +++ b/Page3.html @@ -0,0 +1,90 @@ + + + +Lego Projects + + + + + + + + + + + + + + + + + +
+ + +
+

+
+

+

Contact Form

+
+
+ + +
+ + +
+ + +
+ + +
+
+ Questions + Website problems + Comments + +
+
+ + + +

+
+
+ + +
+

+

Contact Me

+
+Lego Mail Box +

+
+ +
+
+ + +
+
+ + + + diff --git a/ReadMe2.md b/ReadMe2.md new file mode 100644 index 0000000..c3dd000 --- /dev/null +++ b/ReadMe2.md @@ -0,0 +1,15 @@ + +# This is my Lego Project site + + +### Description +* This site allows users to view Lego models, color options and contact support. +* Page 1: View the model and try the internal view dropdown option +* Page 2: Colors page takes you to the color palette. +* Page 3: Contact page shows a contact form. +* The site is also mobile friendly. + + +* Source: + * https://fraryd.github.io/sba.javascript_3-page-website/ (View the page) + * https://github.com/fraryd (Links to an external site.) diff --git a/css/style.css b/css/style.css index d17d83a..acd3483 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,98 @@ -body { - background-color: navy; +html, body, div{ + height: 100%; + margin: 0; + font-family: Verdana, Geneva, Tahoma, sans-serif; + overflow-x:hidden; + word-wrap:break-word; } +table, th, td { + border: 1px solid black; + padding: 10px; +} + +nav{ + float: left; + display: block; + color: black; + text-align: left; + text-decoration: none; +} + +a:link, a:visited { + background-color: lightblue; + color: black; + padding: 4px 4px; + text-align: center; + text-decoration: none; + display: inline-block; + border-radius: 4px; +} + +a:hover, a:active { + background-color: lightgray; +} + +* { + box-sizing: border-box; +} -object { - height: 100vh; - width: 100vh; +.Falcon { + width: 100%; + max-width: 160px; + height: auto; } + +/* columns */ +.column1 { + top: 0%; + left: 0%; + float: left; + width: 80%; + height: 100%; + text-align: left; + padding: 20px 10%; +} + +.column2 { + top: 0%; + right: 0%; + position: fixed; + float: right; + background-color: lightgray; + width: 20%; + height: 55%; + text-align: left; + padding: 20px 2%; +} + +.column3 { + top: 55%; + right: 0%; + position: fixed; + float: right; + background-color: gray; + width: 20%; + height: 100%; + text-align: left; + padding: 20px 2%; +} + +/* clears floats after columns */ +.row:after { + content: ""; + display: table; + clear: both; +} + +/* mobile */ +@media only screen and (max-width:520px) { + .column1, .column2, .column3 { + top:0%; + left:0%; + width:100%; + position: static; + padding: 5% 5%; + display: inline-table; + } +} \ No newline at end of file diff --git a/img/Black.png b/img/Black.png new file mode 100644 index 0000000..fe13eb3 Binary files /dev/null and b/img/Black.png differ diff --git a/img/Blue.png b/img/Blue.png new file mode 100644 index 0000000..8ba9dec Binary files /dev/null and b/img/Blue.png differ diff --git a/img/Falcon.png b/img/Falcon.png new file mode 100644 index 0000000..bc180e3 Binary files /dev/null and b/img/Falcon.png differ diff --git a/img/FalconInternal.png b/img/FalconInternal.png new file mode 100644 index 0000000..317edc6 Binary files /dev/null and b/img/FalconInternal.png differ diff --git a/img/Gray.png b/img/Gray.png new file mode 100644 index 0000000..061a94b Binary files /dev/null and b/img/Gray.png differ diff --git a/img/Green.png b/img/Green.png new file mode 100644 index 0000000..85a7839 Binary files /dev/null and b/img/Green.png differ diff --git a/img/LegoPile.png b/img/LegoPile.png new file mode 100644 index 0000000..8c20080 Binary files /dev/null and b/img/LegoPile.png differ diff --git a/img/LegoThumb.png b/img/LegoThumb.png new file mode 100644 index 0000000..a817dcf Binary files /dev/null and b/img/LegoThumb.png differ diff --git a/img/LightGray.png b/img/LightGray.png new file mode 100644 index 0000000..81dd310 Binary files /dev/null and b/img/LightGray.png differ diff --git a/img/MailBox.png b/img/MailBox.png new file mode 100644 index 0000000..4f17a96 Binary files /dev/null and b/img/MailBox.png differ diff --git a/img/Red.png b/img/Red.png new file mode 100644 index 0000000..64fd66f Binary files /dev/null and b/img/Red.png differ diff --git a/img/smFalcon.png b/img/smFalcon.png new file mode 100644 index 0000000..2471b46 Binary files /dev/null and b/img/smFalcon.png differ diff --git a/index.html b/index.html index 4dc0c72..24c7a05 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,89 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes. - - - - - - -
- - -
- - + +Lego Projects + + + + + + + + + + + + + + + + + +
+ + +
+

Lego Projects

+
+

One of the many lego projects you can do is the Millenium Falcon. Down below is a great photo of a completed project. +

+
+ +

Millenium Falcon

+
+

+ Corellian Light Freighter +
+ An extensively modified Corellian light freighter, the Millennium Falcon is a legend in + smuggler circles and is coveted by many for being the fastest hunk of junk in the galaxy. + It is also fabled to be involved with the rebel alliance. +
+ +
+ Millenium Falcon + + + + +
+ +

+
+ + +
+

+

Millenium Falcon

+

Corellian Light Freighter

+
+Millinium Falcon Thumbnail +

+
+ +
+
+ + +
+
+ - - - - - \ No newline at end of file + diff --git a/js/colors-external-javascript.js b/js/colors-external-javascript.js new file mode 100644 index 0000000..34c73e2 --- /dev/null +++ b/js/colors-external-javascript.js @@ -0,0 +1,29 @@ + + +function setImage() { +var image = document.getElementById("shipViews"); +select = document.getElementsByTagName('select')[0]; + image.src=select.value; + console.log('set src to ' + select.value); + } + +function homeAlert() { +var answer = confirm ("Continue to Home page?") +if (answer) +window.location="index.html"; +} + +let userInput = ""; +while (userInput = prompt ("Enter a number between 1 and 3:")){ + if (isNaN(userInput) || userInput < 1 || userInput > 3){ + alert ("Re-enter number between 1 and 3:"); + } else if (userInput == 3){ + + alert ("Winner winner chicken dinner!"); + break; + } + else{ + alert ("Better luck next time!"); + break; + } +} diff --git a/js/external-javascript.js b/js/external-javascript.js new file mode 100644 index 0000000..a34d726 --- /dev/null +++ b/js/external-javascript.js @@ -0,0 +1,14 @@ + + +function setImage() { +var image = document.getElementById("shipViews"); +select = document.getElementsByTagName('select')[0]; + image.src=select.value; + console.log('set src to ' + select.value); + } + +function homeAlert() { +var answer = confirm ("Continue to Home page?") +if (answer) +window.location="index.html"; +} \ No newline at end of file diff --git a/js/file-inject.js b/js/file-inject.js new file mode 100644 index 0000000..e69de29 diff --git a/js/header-functions.js b/js/header-functions.js index ff2614d..f8b882f 100644 --- a/js/header-functions.js +++ b/js/header-functions.js @@ -1,5 +1,5 @@ // import jquery-3.4.0 -document.write(''); +document.write(''); document.write(''); // import `utils.js` diff --git a/sounds/test.mp3 b/sounds/test.mp3 new file mode 100644 index 0000000..9302a92 Binary files /dev/null and b/sounds/test.mp3 differ
ColorPhoto + ColorPhoto
RedBlue
GreenBlack
Light GrayGray