diff --git a/README.md b/README.md index 7ed589e..1493eae 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,107 @@ # AD - SBA - HTML/CSS/JavaScript +https://lauragodinez.github.io/sba.javascript_3-page-website/ + + +-This website is a simple 3 paged HTML website that was built using the following: + +index.html: (HOME) + +- Used Bootstrap to create carousel. + - Carousel has three image slides with text. + - Slide 3 of Carousel text is within a table. +- Used upsplash's free images for background. +- Used Google fonts for webpage font. +- Used Bootstap to create a navigation bar to link to other webpages. When size is minimized nav bar becomes a drop down. + - List used for nav bar. +- grid system used. +- HTML tags used. +- Links used. +- CSS selectors Used. + + +profile.html (ABOUT ME) + +- Used bootstap for navbar +- Used google fonts for webpage font. +- Used upsplash's free images for background +- Used bootstraps simple form template to create bestfriend% form. +- internal script used at footer for form function use. +- grid system used. +- HTML tags used. +- Internal Script Event at footer function. +- Random number generator used for % of bestfriend. +- Links Used. +- CSS selectors used. + +contactMe.html (CONTACT ME ) + +- Used bootstap for navbar +- Used google fonts for webpage font. +- Used upsplash's free images for background +- Used bootstraps simple form template to contact form. +- internal script used at footer for form function use. +- external script used. +- grid system used. +- HTML tags used. +- Internal Script Event at footer function. +- Links Used. +- CSS selectors used . + + + +REQUIREMENTS NEEDED: +- [x] 3 html pages (3 pages used) +- [x] Grid system (on all htmls) +- [x] Html table(home.html slide 3) +- [x] 1 form use (aboutme.html ) +- [ ] 2nd form use (contactme.html) +- [x] Drop down menu (nav bar when screen made smaller.) +- [x] Web fonts (google fonts used ) +- [x] Use different types of content in forms ex txt img vid, gif (txt and img used) +- [x] Regex validation (used for email on contactMe) + + +CSS +- [x] Inline styling (ON ALL 3 HTML PAGES) +- [x] Internal styling +- [x] External styling +- [x] Css selector 1 +- [x] Css selector 2 +- [x] Css selector 3 +- [x] Css selector 4 +- [x] Css selector 5 (Can be found on css page used multiples ones) + +JavaScript + +- [x] External script ( .js file) +- [x] Variables (.js file and at footer function on contactme.html +- [x] If statement (footer function at contactme.html) +- [x] Loop(if and for loops used) +- [x] 1 form of collections () +- [ ] Function/callback () +- [x] Events + + + + + + + + + + + + + + + + + + + + + + diff --git a/contactMe.html b/contactMe.html new file mode 100644 index 0000000..819b4fc --- /dev/null +++ b/contactMe.html @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Contact Me

+

If you would like to send me an enquiry please feel free to get in touch by filling out this form and + sending me a message. You can also contact me on LinkedIn or find + my work on GitHub.

+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ + + + + + + + + \ No newline at end of file diff --git a/css/style.css b/css/style.css index d17d83a..b28f8a1 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,71 @@ -body { - background-color: navy; +#home-info { + border: 1px solid; + text-align: center; +} +#img-id { + width: 100%; + height: 200px; + border: 0px; + padding: 0px; + margin: 0px; +} +.centered { + position: absolute; + top: 23%; + left: 50%; + transform: translate(-50%, -50%); +} +.car-text2 { + border: 01px solid rgba(255, 255, 255, 0.86); + background-color: white; + opacity: 0.6; +} + +#bg-id { + background-image: url("../img/img5.jpg"); + justify-content: center; + border: 3px; + font-family: "Amatic SC"; + font-size: 25px; +} + +th { + font-size: 90px; +} + +tr { + font-size: 40px; } +h1 { + font-size: 50px; +} + +.form-group { + margin: 10px; + padding: 10px; + border: 5px; +} +button { + align-self: right; +} + +#contactMe-id { + background: url(../img/img6.jpg); +} +.col-cl { + color: white; +} +.form-cl { + border: 01px solid rgba(255, 255, 255, 0.86); + padding: 50px 60px; + margin-top: 20vh; + -webkit-box-shadow: -1px 4px 26px 11px rgba(94, 94, 94, 1); + -moz-box-shadow: -1px 4px 26px 11px rgba(94, 94, 94, 1); + box-shadow: -1px 4px 26px 11px rgba(94, 94, 94, 1); +} -object { - height: 100vh; - width: 100vh; +.bg-id2 { + font-family: "Amatic SC"; + font-size: 25px; } diff --git a/img/img.jpg b/img/img.jpg new file mode 100644 index 0000000..e38802a Binary files /dev/null and b/img/img.jpg differ diff --git a/img/img1.jpg b/img/img1.jpg new file mode 100644 index 0000000..386842f Binary files /dev/null and b/img/img1.jpg differ diff --git a/img/img2.jpg b/img/img2.jpg new file mode 100644 index 0000000..3ec39f7 Binary files /dev/null and b/img/img2.jpg differ diff --git a/img/img3.jpg b/img/img3.jpg new file mode 100644 index 0000000..3f4d8d8 Binary files /dev/null and b/img/img3.jpg differ diff --git a/img/img4.jpg b/img/img4.jpg new file mode 100644 index 0000000..7641df9 Binary files /dev/null and b/img/img4.jpg differ diff --git a/img/img5.jpg b/img/img5.jpg new file mode 100644 index 0000000..8e02cd9 Binary files /dev/null and b/img/img5.jpg differ diff --git a/img/img6.jpg b/img/img6.jpg new file mode 100644 index 0000000..241663a Binary files /dev/null and b/img/img6.jpg differ diff --git a/img/platonic-icosahedron.gif b/img/platonic-icosahedron.gif deleted file mode 100644 index 10e55a9..0000000 Binary files a/img/platonic-icosahedron.gif and /dev/null differ diff --git a/img/platonic-octahedron.gif b/img/platonic-octahedron.gif deleted file mode 100644 index fa934ec..0000000 Binary files a/img/platonic-octahedron.gif and /dev/null differ diff --git a/img/platonic-pyramid.gif b/img/platonic-pyramid.gif deleted file mode 100644 index ca1d412..0000000 Binary files a/img/platonic-pyramid.gif and /dev/null differ diff --git a/index.html b/index.html index 4dc0c72..0426179 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,131 @@ - - - - + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + - - - - - - - - The quickest of brown foxes. - - - - - - - - + + + - - - + \ No newline at end of file diff --git a/js/footer-functions.js b/js/footer-functions.js index c7d6a2c..e69de29 100644 --- a/js/footer-functions.js +++ b/js/footer-functions.js @@ -1,2 +0,0 @@ -w3IncludeHTML(); -document.write(''); diff --git a/js/header-functions.js b/js/header-functions.js index ff2614d..e69de29 100644 --- a/js/header-functions.js +++ b/js/header-functions.js @@ -1,11 +0,0 @@ -// import jquery-3.4.0 -document.write(''); -document.write(''); - -// import `utils.js` -document.write(''); - - - -// import w3-include -document.write(''); diff --git a/js/myscript.js b/js/myscript.js new file mode 100644 index 0000000..abdb724 --- /dev/null +++ b/js/myscript.js @@ -0,0 +1,23 @@ +function myLinkedIn() { + window.open("https://www.linkedin.com/in/laura-godinez-8a0353148/"); +} +function myGitHub() { + window.open("https://github.com/LauraGodinez"); +} + +var submit = document.getElementById("Submit"); + +function submit() { + var name = document.getElementById("name").value; + var email = document.getElementById("email").value; + var message = document.getElementById("message").value; + + var txt = ""; + var i; + for (i = 0; i < x.length; i++) { + txt = txt + x.elements[i].value + "
"; + } + document.getElementById("demo").innerHTML = txt; + + console.log("sucess"); +} diff --git a/js/utils.js b/js/utils.js index bf0c12e..444476f 100644 --- a/js/utils.js +++ b/js/utils.js @@ -1,26 +1 @@ // Utility JS functions are to be defined here -function resizeIFrameToFitContent( iFrame ) { - iFrame.width = iFrame.contentWindow.document.body.scrollWidth; - iFrame.height = iFrame.contentWindow.document.body.scrollHeight; -} - -// used to fetch all methods of an arbitrary object to display to client -function getAllMethodsOfObejct(obj) { - var result = []; - for (var id in obj) { - try { - if (typeof(obj[id]) == "function") { - result.push(id + ": " + obj[id].toString()); - } - } catch (err) { - result.push(id + ": inaccessible"); - } - } - return result; - } - - - -function loadHtml(elementId, fileName) { - $(elementId).html(''); -}; diff --git a/profile.html b/profile.html new file mode 100644 index 0000000..9937be2 --- /dev/null +++ b/profile.html @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

About Me

+

+ Hello. Welcome to my About Me page. My name is Laura Godinez. I am located in the Triad Area + of North Carolina. When im not on the computer coding i love spending my time with my friends and + family outside or by the water. +

+ + + +
+
+
+ +
+
+
+

Bestfriend %

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

+
+
+ +
+
+
+
+
+ + + + + + + + \ No newline at end of file