In this project, I created the mobile version of the website in conjunction with my teammates who did the desktop version and game for the website. To start, I first opened a HTML document, CSS document, and a JavaScript document from Dreamweaver. In my HTML document, I had the <html>, <head>, <meta>, <title>, and <body> tags already placed in via Dreamweaver. I typed in <meta> tags that described my webpage and kept web page proportions. After that, I typed in <link> tags and <script> tags that linked CSS and JavaScript files. Next, I typed in <nav> tags that encapsulates my navigation bar. Inside the the <nav> tags, I put <div> tags with class="mainNav". Inside the <div> with class="mainNav", I have one <div> tags with class="container" onclick="hamburgerMenu(this)", another <div> tags with class="dropdown-Content" id="dropLinks", and <div> tags with class="sideBtn". The <div> tags with class="container" has 3 empty divs with class="bar1", class="bar2", and class="bar3". That makes up the hamburger menu. The <div> tags with class="dropdown-Content" has a list that contains links to other webpages. It uses <ul>, <li>, and <a> tags. For <div> tags with class="sideBtn", it has an image banner that presents the title of the page. After the <nav> tags, the <main> tags are next which contain <div> tags with id="content". Inside the div, there is a <h1> tag with class="txt" and id="hTxt" that describe the webpage. There is also <p> tags with class="txt" and id="pTxt" that explain the topic of the webpage. After the <main> tags, comes the <footer> tags which have surrounding <div> tags inside it with id="ft". Inside the <div> tags with id="ft", I have a table that displays links. I used <table>, <tbody>, <tr>, <th>, and <a> tags to make it possible. The other webpages are variations of the homepage in which I talked about previously and have similar code.
CSS of the website:
--------------------------------------------------------------------------------------------------------------------------
@charset "utf-8";
/* CSS Document */
html {
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
position: auto;
background-color: #f7f7f7;
color: #260f00;
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "DejaVu Sans Condensed", "Helvetica, Arial", "sans-serif";
}
html,
body {
overflow-x: hidden;
}
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.mainNav .dropdown {
display: none;
}
.mainNav a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-Content {
display: none;
position: static;
background-color: inherit;
min-width: 100%;
min-height: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 0;
}
.dropdown-Content a {
display: inline-block;
padding: 0;
margin: 0;
float: none;
text-align: center;
text-decoration: none;
font-size: 25px;
color: white;
}
.dropdown-Content a:hover {
background-color: #ddd;
}
.container {
vertical-align: middle;
float: left;
top: 0;
left: 0;
cursor: pointer;
min-height: 100%;;
min-width: auto;
}
.container:hover {
background-color: rgba(56,56,56,0.90);
}
.bar1, .bar2, .bar3 {
display: block;
width: 35px;
height: 5px;
background-color: #fcfcfc;
margin: 6px 0;
transition: 0.4s;
}
.bar1, .bar2, .bar3 {
background-color: #ffffff;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.cL a {
padding: 0;
margin: 0;
}
#navList {
list-style: none;
}
.clickBoxes {
display: block;
width: 100%;
height: 100%;
float: left;
}
.clickBoxes:hover {
background-color: aquamarine;
}
.clickTxt {
float: left;
margin-left: 2%;
}
.show {
display: block;
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
min-width: 100%;
min-height: 100%;
margin-left: 0.25%;
}
#container {
min-height: 100%;
min-width: 100%;
}
#content {
display: block;
position: static;
}
.txt {
padding-left: 2.5%;
}
#hTxt {
font-size: 36px;
}
#pTxt {
font-size: 24px;
line-height: 1.6;
}
#vape-img{
width: 40%;
float: right;
margin: 3%;
}
#ft {
width: 100%;
height: auto;
position: relative;
background-color: darkgray;
text-align: center;
}
#ftLinks {
padding: 0;
margin: 0 auto;
min-width: 100%;
min-height: 100%;
}
.extra {
cursor: pointer;
margin-left: 10px;
margin-right: 10px;
}
.slide {
left: 0;
transition: left 0.3s;
}
#source-list{
line-height: 1.6em;
text-align: center;
}
#game {
min-width: 400px;
min-height: 625px;
}
/**
Credit goes to https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/ for the media query sizes.
**/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: 0.25%;
}
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: 0.25%;
}
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: 0.25%;
}
#hTxt {
font-size: 40px;
}
#pTxt {
font-size: 28px;
line-height: 1.6;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: 0.25%;
}
#hTxt {
font-size: 40px;
}
#pTxt {
font-size: 28px;
line-height: 1.6;
}
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/**changes the top navigation into a side navigation**/
.mainNav {
display: block;
position: fixed;
min-width: 19%;
min-height: 80%;
padding: 15px;
margin-top: 5%;
top: 50%;
left: -14%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 1.6;
text-decoration: none;
border-radius: 0 20px 20px 0;
z-index: 50;
}
/**makes the side navigation open**/
.mainNav:hover {
left: 0%;
}
/**Makes the hamburger icon disapear**/
.bar1, .bar2, .bar3 {
display: none;
}
/**Makes the links visible**/
.dropdown-Content {
display: block;
box-shadow: none;
}
/**makes the banner go to the top with the help of Jquery**/
.sideBtn {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 0;
padding: 0;
margin: 0;
}
#banner {
margin-left: 0;
}
#content {
position: relative;
padding: 10%;
}
.txt {
padding-left: 2.5%;
}
#hTxt {
font-size: 45px;
}
#pTxt {
font-size: 30px;
line-height: 1.6;
}
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
.txt {
padding-left: 3%;
}
#hTxt {
font-size: 60px;
}
#pTxt {
font-size: 35px;
line-height: 1.6;
}
}
/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
}
/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
}
/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
}
/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
}
/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
}
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
}
/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
}
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
}
/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
}
/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
}
/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
}
--------------------------------------------------------------------------------------------------------------------------
Mainly the css was used for positioning, sizing, and decoration of the website.
JavaScript:
--------------------------------------------------------------------------------------------------------------------------
// JavaScript Document
//Congressional App Jquery File
$(document).ready(function() {
$(".container").on('click', function(e) {
$(".container").toggleClass("change");
$(".dropdown-Content").toggleClass("show");
});
if ($(".mainNav").css("position") == "fixed") {
var $bannerImg = $('.mainNav > .sideBtn');
$bannerImg.parent().after($bannerImg);
}
});
--------------------------------------------------------------------------------------------------------------------------
Mainly the JS was used to make the navigation bar functional.
Knowing how to build a website using HTML, CSS, and JavaScript is important to a web designer since it enables them to do their job effectively and efficiently.
No comments:
Post a Comment