diff --git a/Basic_HTML_and_CSS/Cryptozoology Website/one_page_website.css b/Basic_HTML_and_CSS/Cryptozoology Website/CSS/one_page_website.css similarity index 74% rename from Basic_HTML_and_CSS/Cryptozoology Website/one_page_website.css rename to Basic_HTML_and_CSS/Cryptozoology Website/CSS/one_page_website.css index 6e8e2b4..af58f0d 100644 --- a/Basic_HTML_and_CSS/Cryptozoology Website/one_page_website.css +++ b/Basic_HTML_and_CSS/Cryptozoology Website/CSS/one_page_website.css @@ -92,11 +92,124 @@ section { margin-left: auto; } -.row { - margin-right:-15px; - margin-left:-15px; +.row > .column{ + padding: 0 8px; +} +.row:after { + content:""; + display: table; + clear: both; +} +/* Create four equal columns that floats next to eachother */ +.column { + float: left; + width: 25%; +} +/*The Modal (background)*/ +.modal { + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow:auto; + background-color:#000; +} +/*Modal Content */ +.modal-content { + position: relative; + background-color:#fefefe; + margin:auto; + padding: 0; + width: 90%; + max-width: 1200px; +} +/*The Close Button */ +.close { + color: white; + position: absolute; + top: 10px; + right: 25px; + font-size: 35px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: #999; + text-decoration: none; + cursor: pointer; } +/* Hide the slides by default */ +.mySlides { + display: none; +} +/*Next & Previous buttons */ +.prev, +.next { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + padding: 16px; + margin-top: -50px; + color: white; + font-weight: bold; + font-size: 20px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + -webkit-user-select: none; + } +/* Position the "next button" to the right */ +.next { + right: 0; + border-radius: 3px 0 0 3px; + } + + /* On hover, add a black background color with a little bit see-through */ + .prev:hover, + .next:hover { + background-color: rgba(0, 0, 0, 0.8); + } + + /* Number text (1/3 etc) */ + .numbertext { + color: #f2f2f2; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; + } + + /* Caption text */ + .caption-container { + text-align: center; + background-color: black; + padding: 2px 16px; + color: white; + } + + img.demo { + opacity: 0.6; + } + + .active, + .demo:hover { + opacity: 1; + } + + img.hover-shadow { + transition: 0.3s; + } + + .hover-shadow:hover { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + } .clearfix:after, .container:after, .navbar:after { diff --git a/Basic_HTML_and_CSS/Cryptozoology Website/cryptopics/one_page_website_animations.css b/Basic_HTML_and_CSS/Cryptozoology Website/CSS/one_page_website_animations.css similarity index 100% rename from Basic_HTML_and_CSS/Cryptozoology Website/cryptopics/one_page_website_animations.css rename to Basic_HTML_and_CSS/Cryptozoology Website/CSS/one_page_website_animations.css diff --git a/Basic_HTML_and_CSS/Cryptozoology Website/Cryptozoology One Page Website.html b/Basic_HTML_and_CSS/Cryptozoology Website/Cryptozoology One Page Website.html deleted file mode 100644 index aa8f987..0000000 --- a/Basic_HTML_and_CSS/Cryptozoology Website/Cryptozoology One Page Website.html +++ /dev/null @@ -1,223 +0,0 @@ - - - - - - Cryptozoology: A Brief Rundown - - - - -
-
-
-
- - -
-
-
-

What is Cryptozoology?

-

Cryptids are defined as an animal (such as Sasquatch or the Loch Ness Monster) that has been
- claimed to exist but never proven to exist Contrary to popular belief, cryptids don't have to be supernatural, mythical or even all that strange
- —though many popular creatures acquire these characteristics as their legends grow.—

- Therefore, Cryptozoology is the study of these Crytpids. Some attempt serious scientific research while others are a bit less than scientific.

-
-
-
- - - -
- -
- - -
-
-

Cryptid Clips

-
- -
-
- " -
-

Click to Enlarge

-

We have several space launches departing daily, book your flight today!

-
-
-
- - -
-
- -
-

Click to Enlarge

-

We have several space launches departing daily, book your flight today!

-
-
-
- - -
-
- -
-

Click to Enlarge

-

We have several space launches departing daily, book your flight today!

-
-
-
- - -
-
- -
-

Click to Enlarge

-

We have several space launches departing daily, book your flight today!

-
-
-
- - -
-
-
- - -
-
-
-

Contact Us and Together We Can Shed Light On Cryptids

-
-

The Truth Is Out There -

-

- Please Contact Us If You Have Evidence -

-
-
- - - - -
- -
-
- -
-
-
-
-
-
-
- - - \ No newline at end of file diff --git a/Basic_HTML_and_CSS/Cryptozoology Website/JS/one_page_website.js b/Basic_HTML_and_CSS/Cryptozoology Website/JS/one_page_website.js new file mode 100644 index 0000000..753ec2a --- /dev/null +++ b/Basic_HTML_and_CSS/Cryptozoology Website/JS/one_page_website.js @@ -0,0 +1,40 @@ +// Open the Modal +function openModal() { + document.getElementById("myModal").style.display = "block"; + } + + // Close the Modal + function closeModal() { + document.getElementById("myModal").style.display = "none"; + } + + var slideIndex = 1; + showSlides(slideIndex); + + // Next/previous controls + function plusSlides(n) { + showSlides(slideIndex += n); + } + + // Thumbnail image controls + function currentSlide(n) { + showSlides(slideIndex = n); + } + + function showSlides(n) { + var i; + var slides = document.getElementsByClassName("mySlides"); + var dots = document.getElementsByClassName("demo"); + var captionText = document.getElementById("caption"); + if (n > slides.length) {slideIndex = 1} + if (n < 1) {slideIndex = slides.length} + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + for (i = 0; i < dots.length; i++) { + dots[i].className = dots[i].className.replace(" active", ""); + } + slides[slideIndex-1].style.display = "block"; + dots[slideIndex-1].className += " active"; + captionText.innerHTML = dots[slideIndex-1].alt; + } \ No newline at end of file diff --git a/Basic_HTML_and_CSS/Cryptozoology Website/cryptopics/bigfoot-1502134764.jpg b/Basic_HTML_and_CSS/Cryptozoology Website/cryptopics/bigfoot-1502134764.jpg index 625b8cf..4856050 100644 Binary files a/Basic_HTML_and_CSS/Cryptozoology Website/cryptopics/bigfoot-1502134764.jpg and b/Basic_HTML_and_CSS/Cryptozoology Website/cryptopics/bigfoot-1502134764.jpg differ diff --git a/Basic_HTML_and_CSS/Cryptozoology Website/cryptopics/kraken.jpg b/Basic_HTML_and_CSS/Cryptozoology Website/cryptopics/kraken.jpg index 3c470be..f4c3287 100644 Binary files a/Basic_HTML_and_CSS/Cryptozoology Website/cryptopics/kraken.jpg and b/Basic_HTML_and_CSS/Cryptozoology Website/cryptopics/kraken.jpg differ diff --git a/Basic_HTML_and_CSS/Cryptozoology Website/one_page_website.html b/Basic_HTML_and_CSS/Cryptozoology Website/one_page_website.html index 5770238..e26b35b 100644 --- a/Basic_HTML_and_CSS/Cryptozoology Website/one_page_website.html +++ b/Basic_HTML_and_CSS/Cryptozoology Website/one_page_website.html @@ -3,9 +3,9 @@ Cryptozoology: A Brief Rundown - - - + + +
@@ -34,94 +34,99 @@

What is Cryptozoology?

Therefore, Cryptozoology is the study of these Crytpids. Some attempt serious scientific research while others are a bit less than scientific.

- - - - - +
@@ -143,8 +148,7 @@

Clips

-

Chupacabra

-

He digs goats and cows!

+
@@ -163,8 +167,7 @@

Chupacabra

-

Loch Ness Monsters

-

Is it there or is it a floating toy boat?

+
diff --git a/Basic_HTML_and_CSS/FTP/Michael Tabb.txt b/Basic_HTML_and_CSS/FTP/Michael Tabb.txt new file mode 100644 index 0000000..aca4033 --- /dev/null +++ b/Basic_HTML_and_CSS/FTP/Michael Tabb.txt @@ -0,0 +1 @@ +Michael Tabb \ No newline at end of file diff --git a/Basic_HTML_and_CSS/bootstrap4_project/academy_cinemas.html b/Basic_HTML_and_CSS/bootstrap4_project/academy_cinemas.html index 7d7086e..a8fba56 100644 --- a/Basic_HTML_and_CSS/bootstrap4_project/academy_cinemas.html +++ b/Basic_HTML_and_CSS/bootstrap4_project/academy_cinemas.html @@ -1,4 +1,4 @@ - + @@ -11,7 +11,6 @@ Academy Cinemas -
+
+
@@ -51,7 +65,7 @@

Academy Cinemas

-

Accomodations

+

Accommodations

Located in beautiful Portland, Oregon's Pearl district, our reels have been spinning since 1959.

Showing our guests a great time is our passion and seeing their smiles is our pleasure!

All of our auditoriums are equipped with brand new Christie 3D® sound systems!

@@ -128,19 +142,77 @@
Kong: Skull Island
-
-
-

Sign up for Movie Club Rewards!

-
- + +
+
+

+ Movie Deals

+

Check out our monthly deals...

+ + + +
+
+ +
+
+
+

Stay Current On Movies!

+
+ + + + +
- - +
+
+ + + + + -
+
- - +
- - - - - - - - - - - +
- - - - - - - - - - --> + + \ No newline at end of file diff --git a/Basic_HTML_and_CSS/endsectionchallenges/end_section_challenges.css b/Basic_HTML_and_CSS/endsectionchallenges/end_section_challenges.css new file mode 100644 index 0000000..21e0ea9 --- /dev/null +++ b/Basic_HTML_and_CSS/endsectionchallenges/end_section_challenges.css @@ -0,0 +1,78 @@ +.container { + position: relative; + text-align: center; + color:white; + height: 50em +} +.centered { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + .overlay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 100%; + width: 100%; + opacity: 0; + transition: .5s ease; + background-color: #008CBA; + } + + .container:hover .overlay { + opacity: 1; + } + + .text { + color: white; + font-size: 20px; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; + } + +table th, td { + border:1px solid brown; + padding:2px; + width:100%; + } + + tr:nth-child(odd) {background-color:hotpink; + color:aqua;} + + .column { + float: left; + width:50%; + padding: 10px; + height:fit-content; + width:25%; + } + + /*Clear floats after the column*/ + .row:after { + content:""; + display:table; + clear:both; + } + + h2 {color:blueviolet;} + p {color: black;} + p:hover {background-color:azure;} + + footer { + text-align: center; + padding: 4px; + background-color: darkcyan; + color:black; + font-weight:bold; + } + + \ No newline at end of file diff --git a/Basic_HTML_and_CSS/endsectionchallenges/end_section_challenges.html b/Basic_HTML_and_CSS/endsectionchallenges/end_section_challenges.html new file mode 100644 index 0000000..26a0e43 --- /dev/null +++ b/Basic_HTML_and_CSS/endsectionchallenges/end_section_challenges.html @@ -0,0 +1,112 @@ + + + + + + + + + + + + End of HTML/CSS Challenges + + + + + + + + +
+ Obi Wan Kenobi +
May the Force Be With You
+
+
Only Sith think in absolutes!
+
+ + +
+ + + + + + + + + + + + + + + +
First NameLast NameEmail AddressPhone Number
MichaelJordanspacejam@looneytunes.com 555-555-5555
+ +
+
+

This

+

Some text...

+
+
+

That

+

Some text....

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Basic_HTML_and_CSS/endsectionchallenges/obiwan.jfif b/Basic_HTML_and_CSS/endsectionchallenges/obiwan.jfif new file mode 100644 index 0000000..23643fc Binary files /dev/null and b/Basic_HTML_and_CSS/endsectionchallenges/obiwan.jfif differ