Today I submitted my Games 4 Change submission. The topic on it was broad ranging from diversity to equity. Now for that, I built a website for the submission. So first, I created a new html file. I typed in the basic html code, which are <!doctype html> tag, <html> tags, <meta> tags, <title> tags, <head> tags, and <body> tags. Secondly, I inserted <link rel> tags to insert my CSS stylesheet and favicon into the website. Thirdly inside the <body> tags, I inserted my content there. I typed in <div> tags with a class name of bannerDiv and a name of top. Inside those <div> tags, I placed in <center> tags and inside those <center> tags, I put <img src> tags to place my banner on the top of the website. Next I typed in another <div> tags with a class name of navbar. Inside the <div> tags, I typed in another <div> tag with a class name of dropdown. Inside the <div> tags with the class name of dropdown, I typed in <button> tags with a class name of dropbtn, onclick name of myFunction(), and the unicode for a 3 line hamburger menu icon between the button tags. After the <button> tags, I inserted <div> tags with a class name of dropdown-content and an id of myDropdown. Inside the <div> tags with a class name of dropdown-content, I inserted <a> tags with text between them. That code I typed in was the navbar and the 3 line hamburger menu. After that, I typed in <center> tags. Inside the <center> tags, I typed in a whole bunch of text. I started with <h1> tags with Equality & Equity inside. Next I typed in a <br> tag to make a line break. After that, I typed in <div> tags with a class name of eeDiv. Inside the <div> tags, I typed in <h2> tags with Equality inside. I typed in a <br> tag to make a line break again. I typed in <h5> tags that displayed the definition of equality with <cite> tags and <i> tags to some words italic. Then I typed in <p> tags with <a> tags, <img> src> tags, and text inside to make the image align with the text. I duplicated all the content from <div> tags with eeDiv class and pasted it under a <br> tag after the <div> tags with eeDiv class. I changed the name of the classes and text to relate to equity. Then I coded in a back to the top button with <button> tags, that have an id of bTopBtn and a class name of topBtn. Inside the button, I placed in <a> tags with an href of #Top and a style of color:Black; and text-decoration: none;. Inside the <a> tags, I typed in Back to the Top! Afterwords, I typed in <footer> tags with a class name of ft. Inside the <footer> tags, I typed in <p> tags to insert text into the footer. At the end of the html document, I placed down <script> tags. Inside the script tags, I typed in function myFunction() { document.getElementById("myDropdown").classList.toggle("show");}, and window.onclick = function(e) {if (!e.target.matches('.dropbtn')) {var myDropdown = document.getElementById("myDropdown"); if (myDropdown.classList.contains('show')) { myDropdown.classList.remove('show');}}}. I duplicated the file and made 3 more files simular to the html file I discussed. I changed the texts of the other files to match its theme/topic. For the CSS, I typed in @charset "UTF-8";, html{height: 100%;}, body {margin: 0; padding: 0; height: 100%; font-size: 28px; font-family: Arial, Times, Helvetica, sans-serif; background-color: #D7D7D7; background-image:linear-gradient(to bottom, #D3D3D3, #ffffff); background-repeat: no-repeat; background-attachment: fixed;}, h1 {font-style: normal; font-family: "Arial Black", Impact, Gadget, sans-serif; font-display: auto;}, h2 {font-style: normal; font-family: "Arial Black", Impact, Gadget, sans-serif; font-display: auto;}, h5 {font-style: normal; font-family: "Arial", Gadget, sans-serif; font-display: auto;}, p {font-style: normal; font-family: "Times New Roman", Times, serif; font-display: auto;}, .navbar {overflow: hidden; background-color: #0032FF;}, .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}, .dropdown { float: left; overflow: hidden; width: 50px;}, .dropdown .dropbtn {cursor: pointer; font-size: 50px; border: none; outline: none; color: white; align-content: center; padding-left: 1px; padding-right: 1px; background-color: inherit; font-family: Arial, Helvetica, "Noto Sans", sans-serif; margin: 0px; width: 100%;}, .navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {background-color: #0185F3;}, .dropdown-content {display: none;position: absolute; background-color: #f9f9f9; min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}, .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; font-size: 25px;}, .dropdown-content a:hover {background-color: #ddd;}, .show {display: block;}, .bannerDiv {background-color: #272626;}, .imgBanner { max-width: 100%; max-height: inherit; object-fit: cover;}, .eeDiv {padding-bottom: 80px;}, .imgSide {display: inline-block; max-width: 25%; max-height: inherit; float: right; clear: right; padding: 0px; margin: 0px 0px 15px 15px; overflow:hidden;},
.textSide{text-align: left; vertical-align: middle; margin-left: 10px; margin-right: 10px; font-size: 30px;}, .ft {background-color: yellow; color: black; font-style: italic; margin: 10px; padding: 0px; clear:both; font-size: 16px;}, .topBtn { padding: 15px 25px; font-size: 24px; text-align: center; cursor: pointer; outline: none; color: #fff; background-color: #40E0D0; border: none; border-radius: 15px; box-shadow: 0 9px #999;}, .topBtn:hover {background-color: #00FFFF} .topBtn:active {
background-color: #40E0D0; box-shadow: 0 5px #666; transform: translateY(4px);}, and media queries that change specific attributes of the website to be compatible with the device the user is handling. Lastly, I saved all files and uploaded my submission. Knowing how to build a website on a topic is important to a web designer because it allows him or her to do their job effectively and efficiently.
Link to website:
http://techteach.us/Web2020/ZWeiJian/GFC/gfcee.html
No comments:
Post a Comment