diff --git a/README.md b/README.md index 7ed589e..224b342 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # AD - SBA - HTML/CSS/JavaScript - +Link: https://lyoumbi.github.io/sba.javascript_3-page-website/ ### Description * In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly. diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..886fd50 --- /dev/null +++ b/contact.html @@ -0,0 +1,72 @@ + + + + + + + Contact Us + + + + +
+
+ + +
+
+
+
+ MENU +
+

CONTACT US

+ Lionel Youmbi +
+ +
+
+ + + + + + + + + + + + + +
Object:
Email:
+
+
+ +
+

CONTACT ME

+ +
+
+
+ + + + + \ No newline at end of file diff --git a/css/style.css b/css/style.css index d17d83a..fe462ee 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,300 @@ -body { - background-color: navy; +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; } +.main { + font-family: 'Roboto', 'sans-serif'; + position: relative; + background-color: rgb(211, 211, 211); +} -object { +.menu { + background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); + background-color: rgba(34, 230, 181, 0.397); + display: flex; + justify-content: flex-start; + align-items: center; +} + +.menu span { + color: white; + font-size: 1em; +} + +.menu span:hover { + color: rgb(206, 206, 206); +} + +.side_nav { + font-family: 'Roboto', 'sans-serif'; + display: none; + position: fixed; + width: 20vw; height: 100vh; - width: 100vh; + z-index: 1; + background-color: rgba(34, 230, 181); + background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); +} + +.side_nav ul { + margin-top: 45%; +} + +.side_nav ul li { + margin-top: 15%; +} + + +.side_nav a { + text-decoration: none; + padding: 0 15%; + font-size: 170%; + text-align: right; + color: white; +} + +.side_nav a:hover { + color: rgb(221, 221, 221); +} + +.container { + font-family: 'Roboto', 'sans-serif'; + position: relative; + display: grid; + grid-template-columns: repeat(12/1fr); +} + +.main_section1 { + position: relative; + margin: auto; + grid-column: 1 / 11; +} + +.main_section1 img { + width: 95vw; + height: 80vh; +} + +.main_section1 h1 { + width: 100%; + height: auto; + text-align: center; + background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); + background-color: rgba(34, 230, 181, 0.397); + position: absolute; + font-size: 10em; + font-weight: 300; + color: white; +} + +.section2 { + width: 95vw; + height: 80vh; + margin: 30px 0; + grid-column: 1 / 11; + display: grid; + grid-template: repeat(2, 1fr)/ repeat(2, 1fr); +} + +.main_section2 h2 { + font-size: 3em; + font-weight: 200; + text-align: center; + color: rgb(34, 230, 181); + background-color: rgb(211, 211, 211); +} + +.section2 .article { + height: 90%; + width: 70%; + background-color: white; + margin: auto; + border-radius: 10px; +} + +.article h3 { + font-family: 'Roboto', 'sans-serif'; + font-size: 2em; + font-weight: 100; + text-align: center; + color: white; + border-top-right-radius: 10px; + border-top-left-radius: 10px; + background-color: rgb(34, 230, 181); +} + +.article p { + font-family: 'Roboto', 'sans-serif'; + height: 90%; + font-size: 1.2em; + text-align: left; + color: black; + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + background-color: rgb(245, 245, 245); + padding: 1% 3% 0 3%; +} + +.main_section3 { + width: 99vw; + height: 30vh; + margin: auto; + grid-column: 1 / 11; + background-color: rgb(34, 230, 181); +} + +.main_section3 h2 { + margin: 1%; + font-size: 3em; + font-weight: 200; + text-align: center; + color: white; + +} + +.logo { + margin-top: 2%; + display: flex; + justify-content: space-evenly; + align-items: center; +} + +.logo a { + text-decoration: none; +} + +ion-icon { + color: white; + font-size: 3em; +} + +ion-icon:hover { + color: rgb(206, 206, 206); +} + +/* Media query */ +@media only screen and (max-width: 1650px) { + .main_section2 { + display: flex; + justify-content: space-evenly; + align-items: center; + flex-direction: column; + } + + .section2 { + height: 80vh; + display: flex; + justify-content: space-evenly; + align-items: center; + flex-direction: column; + } + + .side_nav a { + font-size: 1em; + } + .section2 .article { + height: 80%; + width: 95%; + margin: 1% 0; + } + + .article h3 { + width: 100%; + font-size: 1.5em; + } + + .article p { + font-size: 1.1em; + + } } + +@media only screen and (max-width: 1345px) { + .main_section1 h1 { + font-size: 3em; + } + + .main_section1 img { + height: 60vh; + } + + .main_section3 { + height: 20vh; + } + + .main_section3 h2 { + font-size: 2.5em; + } + + .main_section3 ion-icon { + font-size: 2em; + } +} + +@media only screen and (max-width: 960px) { + .side_nav { + width: 30vw; + } + + .menu span { + font-size: 0.7em; + } + + ion-icon { + font-size: 2em; + color: white; + } + + .main_section1 { + height: 20vh; + margin-right: 8%; + } + + .main_section1 h1 { + font-size: 2em; + } + + .section2 { + height: 60vh; + } + + .main_section1 img { + width: 90vw; + height: 20vh; + } + + .main_section2 h2 { + font-size: 1em; + } + + .side_nav a { + font-size: 0.4em; + } + + .article h3 { + width: 100%; + font-size: 1.1em; + } + + .article p { + font-size: 0.4em; + height: 15%; + + } + + .main_section3 { + height: 10vh; + } + + .main_section3 h2 { + font-size: 1em; + } + + .main_section3 ion-icon { + font-size: 1em; + } +} \ No newline at end of file diff --git a/css/style_contact.css b/css/style_contact.css new file mode 100644 index 0000000..f99f142 --- /dev/null +++ b/css/style_contact.css @@ -0,0 +1,290 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Main container */ +.main { + font-family: 'Roboto', 'sans-serif'; + background-color: rgb(211, 211, 211); +} + +/* Menu */ +.menu { + background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); + background-color: rgba(34, 230, 181, 0.397); + display: flex; + justify-content: flex-start; + align-items: center; +} + +ion-icon { + font-size: 3.5em; + color: white; +} + +ion-icon:hover { + color: rgb(206, 206, 206); +} + +.menu span { + color: white; + font-size: 1em; +} + +.menu span:hover { + color: rgb(206, 206, 206); +} + +/* Side nav */ +.side_nav { + font-family: 'Roboto', 'sans-serif'; + display: none; + position: fixed; + width: 20vw; + height: 100vh; + z-index: 1; + background-color: rgba(34, 230, 181); + background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); +} + +.side_nav ul { + margin-top: 45%; +} + +.side_nav ul li { + margin-top: 15%; +} + + +.side_nav a { + text-decoration: none; + padding: 0 15%; + font-size: 170%; + text-align: right; + color: white; +} + +.side_nav a:hover { + color: rgb(221, 221, 221); +} + +/* container */ +.container { + font-family: 'Roboto', 'sans-serif'; + position: relative; + display: grid; + grid-template-columns: repeat(12/1fr); +} + +/* Main section 1 */ +.main_section1 { + width: 95vw; + height: 40vh; + position: relative; + margin: auto; + background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); + background-color: rgba(34, 230, 181, 0.397); + grid-column: 1 / 11; +} + +.main_section1 img { + width: 15%; + height: auto; + margin: 9% 0 0 40%; + border-radius: 50%; +} + +.main_section1 h1 { + width: 100%; + height: 30%; + text-align: center; + position: absolute; + font-size: 6em; + font-weight: 300; + color: white; +} + +/* Main section 2 */ +.main_section2 { + width: 95vw; + height: 70vh; + font-family: 'Roboto', 'sans-serif'; +} + +table { + width: 40%; + height: 100%; + font-size: 1.5em; + margin: 10% 0 5% 30%; +} + +input { + width: 100%; + height: 100%; + border: 2px solid rgba(34, 230, 181, 0.397); + border-radius: 10px; + font-size: 1em; + padding: 2%; + margin: 2%; +} + +textarea { + width: 100%; + border: 2px solid rgba(34, 230, 181, 0.397); + border-radius: 10px; + font-size: 1em; + padding: 2%; + margin: 2%; +} + +.btn { + background-color: rgba(34, 230, 181); + color: rgb(247, 247, 247); + border: 2px solid rgb(68, 68, 68); + font-size: 1em; +} + +.btn:hover { + background-color: rgb(168, 168, 168); + color: rgba(34, 230, 181); + border: 2px solid rgba(34, 230, 181); +} + +/* Main section 3 */ +.main_section3 { + width: 99vw; + height: 30vh; + margin: auto; + grid-column: 1 / 11; + background-color: rgb(34, 230, 181); +} + +.main_section3 h2 { + margin: 1%; + font-size: 3em; + font-weight: 200; + text-align: center; + color: white; + +} + +.logo { + margin-top: 2%; + display: flex; + justify-content: space-evenly; + align-items: center; +} + +.logo a { + text-decoration: none; + color: white; + font-weight: 100; +} + +.logo a:hover { + color: rgb(206, 206, 206); +} + +/* media query */ +@media only screen and (max-width: 1650px) { + .main_section1 { + height: 30vh; + } + + .side_nav a { + font-size: 1em; + } + + .main_section1 img { + display: none; + } + + table { + margin: 5% 0 5% 25%; + } +} + +@media only screen and (max-width: 1345px) { + .main_section1 { + height: 20vh; + } + + .main_section1 h1 { + font-size: 6em; + } + + table { + width: 50%; + font-size: 1.2em; + margin: 5% 0 5% 20%; + } + + .main_section3 { + height: 20vh; + } + + .main_section3 h2 { + font-size: 2.5em; + } + + .main_section3 ion-icon { + font-size: 2em; + } +} + +@media only screen and (max-width: 960px) { + .side_nav { + width: 30vw; + } + + .menu span { + font-size: 0.7em; + } + + ion-icon { + font-size: 2em; + color: white; + } + + .main_section1 { + height: 20vh; + } + + .main_section2 { + height: 60vh; + } + + table { + width: 70%; + font-size: 1em; + margin: 2% 0 5% 10%; + } + + .main_section1 h1 { + font-size: 3em; + } + + .side_nav a { + font-size: 0.4em; + } + + .main_section3 { + height: 20vh; + } + + .main_section3 h2 { + font-size: 2em; + } + + .main_section3 a { + font-size: 0.6em; + } + + .main_section3 ion-icon { + font-size: 1em; + } +} \ No newline at end of file diff --git a/css/style_register.css b/css/style_register.css new file mode 100644 index 0000000..59f05e2 --- /dev/null +++ b/css/style_register.css @@ -0,0 +1,277 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Main container */ +.main { + font-family: 'Roboto', 'sans-serif'; + background-color: rgb(211, 211, 211); +} + +/* Menu */ +.menu { + background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); + background-color: rgba(34, 230, 181, 0.397); + display: flex; + justify-content: flex-start; + align-items: center; +} + +.menu span { + color: white; + font-size: 1em; +} + +.menu span:hover { + color: rgb(206, 206, 206); +} + +ion-icon { + font-size: 3.5em; + color: white; +} + +ion-icon:hover { + color: rgb(206, 206, 206); +} + + +/* Side nav */ +.side_nav { + font-family: 'Roboto', 'sans-serif'; + display: none; + position: fixed; + width: 20vw; + height: 100vh; + z-index: 1; + background-color: rgba(34, 230, 181); + background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); +} + +.side_nav ul { + margin-top: 45%; +} + +.side_nav ul li { + margin-top: 15%; +} + + +.side_nav a { + text-decoration: none; + padding: 0 15%; + font-size: 2em; + text-align: right; + color: white; +} + +.side_nav a:hover { + color: rgb(221, 221, 221); +} + +/* container */ +.container { + font-family: 'Roboto', 'sans-serif'; + position: relative; + display: grid; + grid-template-columns: repeat(12/1fr); +} + +/* Main section 1 */ +.main_section1 { + width: 95vw; + height: 20vh; + position: relative; + margin: auto; + background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); + background-color: rgba(34, 230, 181, 0.397); + grid-column: 1 / 11; +} + +.main_section1 h1 { + width: 100%; + height: 10%; + text-align: center; + position: absolute; + font-size: 6em; + font-weight: 300; + color: white; +} + +/* Main section 2 */ +.main_section2 { + position: relative; + width: 95vw; + height: 70vh; + font-family: 'Roboto', 'sans-serif'; +} + +.main_section2 img { + position: absolute; + width: 50%; + height: auto; +} + +table { + width: 40%; + height: 100%; + font-size: 1.5em; + margin: 5% 0 5% 45%; + +} + +td { + color: white; + text-align: right; +} + +input { + width: 100%; + height: 100%; + border: 2px solid rgba(34, 230, 181, 0.397); + border-radius: 10px; + font-size: 1em; + padding: 2%; + margin: 2%; +} + +.btn { + background-color: rgb(34, 230, 181); + color: rgb(247, 247, 247); + border: 2px solid rgb(68, 68, 68); + font-size: 1.3em; +} + +.btn:hover { + background-color: rgb(168, 168, 168); + color: rgba(34, 230, 181); + border: 2px solid rgba(34, 230, 181); +} + +/* Main section 3 */ +.main_section3 { + width: 99vw; + height: 10vh; + margin: auto; + grid-column: 1 / 11; + background-color: rgb(34, 230, 181); + display: flex; + justify-content: center; + align-items: center; +} + +.main_section3 span { + margin: 1%; + font-size: 1.5em; + font-weight: 200; + text-align: center; + color: white; + +} + +.main_section3 img { + width: 4%; + height: auto; + border-radius: 50%; +} + +/* media query */ +@media only screen and (max-width: 1650px) { + .main_section1 { + height: 30vh; + } + + .side_nav a { + font-size: 1em; + } + + table { + margin: 5% 0 5% 50%; + } +} + +@media only screen and (max-width: 1345px) { + .side_nav { + width: 30vw; + } + + .main_section1 { + height: 20vh; + } + + .main_section1 h1 { + font-size: 6em; + } + + table { + width: 50%; + font-size: 1.2em; + margin: 5% 0 5% 40%; + } + + .main_section3 { + height: 20vh; + } + + .main_section3 h2 { + font-size: 2.5em; + } +} + +@media only screen and (max-width: 960px) { + .menu span { + font-size: 0.7em; + } + + ion-icon { + font-size: 2em; + color: white; + } + + .main_section1 h1 { + font-size: 1px; + } + + .main_section1 { + height: 15vh; + } + + .main_section2 { + height: 70vh; + } + + .main_section2 img { + display: none; + } + + table { + width: 70%; + font-size: 1em; + margin: 10% 0 5% 15%; + } + + .label { + display: none; + } + + .main_section1 h1 { + font-size: 2em; + } + + .side_nav a { + font-size: 0.4em; + } + + .main_section3 img { + width: 15%; + } + + .main_section3 span { + font-size: 1em; + } + +} \ No newline at end of file diff --git a/img/img.jpg b/img/img.jpg new file mode 100644 index 0000000..97c4a17 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..27b7d7f 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..889993c Binary files /dev/null and b/img/img2.jpg differ diff --git a/img/pp1.jpg b/img/pp1.jpg new file mode 100644 index 0000000..79dca02 Binary files /dev/null and b/img/pp1.jpg differ diff --git a/img/team_spirit.svg b/img/team_spirit.svg new file mode 100644 index 0000000..5016e9c --- /dev/null +++ b/img/team_spirit.svg @@ -0,0 +1 @@ +team spirit \ No newline at end of file diff --git a/index.html b/index.html index 4dc0c72..2c62281 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,115 @@ - - - - + + - - + + Morning News - - - - - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes. - - - - - - - - - - + + + +
+
+ + +
+ +
+
+
+ MENU +
+

MORNING NEWS

+ Morning News +
+ +
+

MORNING BREAKING NEWS

+
+
+

What is Lorem Ipsum?

+

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into + electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus + PageMaker including versions of Lorem Ipsum. +

+
+ +
+

Where can I get some?

+

+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in + some form, by injected humour, or randomised words which don't look even slightly believable. If you are + going + to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle + of + text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making + this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a + handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem + Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. +

+
+ +
+

Where does it come from?

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical + Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at + Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem + Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable + source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes + of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular + during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in + section 1.10.32. +

+
+
+

Why do we use it?

+

+ It is a long established fact that a reader will be distracted by the readable content of a page when + looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of + letters, as opposed to using 'Content here, content here', making it look like readable English. Many + desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a + search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved + over the years, sometimes by accident, sometimes on purpose (injected humour and the like). +

+
+
+
+
+

MORE NEWS

+ +
+
+ +
+ + - - - \ No newline at end of file diff --git a/js/footer-functions.js b/js/footer-functions.js deleted file mode 100644 index c7d6a2c..0000000 --- a/js/footer-functions.js +++ /dev/null @@ -1,2 +0,0 @@ -w3IncludeHTML(); -document.write(''); diff --git a/js/header-functions.js b/js/header-functions.js deleted file mode 100644 index ff2614d..0000000 --- a/js/header-functions.js +++ /dev/null @@ -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/script.js b/js/script.js new file mode 100644 index 0000000..ad096fc --- /dev/null +++ b/js/script.js @@ -0,0 +1,42 @@ +let menuBtn = document.querySelector('.menu'); +let navClosedBtn = document.querySelector('.nav_closed'); +let navDiv = document.querySelector('.side_nav'); + +let navDisplay = () => { + navDiv.style.display='block'; +}; + +menuBtn.addEventListener('click', navDisplay); + +let navClosed = () => { + navDiv.style.display='none'; +}; +navClosedBtn.addEventListener('click', navClosed); + + + + + + + + + + + + + + + + + + + + + + + + + +// fetch("https://archive.org/metadata/principleofrelat00eins") +// .then(response => response.json()) +// .then(data => console.log(data)); \ No newline at end of file diff --git a/js/utils.js b/js/utils.js deleted file mode 100644 index bf0c12e..0000000 --- a/js/utils.js +++ /dev/null @@ -1,26 +0,0 @@ -// 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/register.html b/register.html new file mode 100644 index 0000000..0cccc20 --- /dev/null +++ b/register.html @@ -0,0 +1,75 @@ + + + + + + + Register + + + + +
+
+ + +
+
+
+
+ MENU +
+

NEW MEMBER

+
+ +
+ Team Spirit +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
First Name:
Last Name:
Email:
Date of Birth:
Phone Number:
+
+
+ +
+ Lionel Youmbi + ©Copyright Per Scholas 2020 +
+
+
+ + + + + \ No newline at end of file