~~~ ~~~ New:

~~~ ~~~ Edit contents of

~~~ ~~~ Significantly edited: Refer to database contents ~~~ */ #content_about { background-color: #000000; height: 100%; width: 100%; padding-bottom: 1em; } #content_about h1 { background-color: #000000; font-family: Helvetica, sans-serif; font-size: 2em; font-weight: bold; text-transform: uppercase; text-align: center; margin-top: 1em; } #content_about h2 { background-color: #000000; font-family: Helvetica, sans-serif; font-size: 1.25em; font-weight: bold; text-transform: uppercase; text-align: center; margin-top: 1em; } #content_about p { background-color: #000000; padding-left: 1.5em; padding-right: 1.5em; text-align: left; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~ CONSTITUTION [ID: 3] ~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~ Parents & Children |

| ~~~ ~~~ ~~~ ~~~ HTML Edit ~~~ ~~~ dashboard => phpMyAdmin => DATABASE => TABLE: PAGES ~~~ ~~~ Edit opening tag of

~~~ ~~~ Old:

~~~ ~~~ New:

+
~ ~ |
=> +
~ ~ | => + #member_overview ~ ~ | #member_overview =>
+
+
~ ~ |
=>
x 4 ~ ~ |
=>
~ ~ |
=>
+
~ ~ ~ ~ HTML Edit ~ ~ dashboard => phpMyAdmin => DATABASE => TABLE: PAGES ~ ~ Edit image source of ~ ~ Old: src="images/law.jpg" ~ ~ New: src="images/members.png" ~ ~ Add new div: Opening tag
| before
~ ~ Add & Annotate new div: Closing tag
| before member_card div close ~ ~ Delete
Role
| after
~ ~ Delete
Contact Details:
| before
Cell: ~ ~ Edit opening tag of
~ ~ Old:
~ ~ New:
~ / #content_members { background-color: #000000; display: flex; flex-direction: column; flex-grow: 1; height: 100%; width: 100%; margin-bottom: 3em; padding-bottom: 1em; } #content_members h2 { background-color: #000000; font-family: Helvetica, sans-serif; font-size: 2em; font-weight: bold; text-transform: uppercase; text-align: center; margin-top: 1em; padding: 2em; } #content_members #service-blocks { display: flex; flex-direction: column; height: 100%; width: 100%; padding-right: 1em; padding-bottom: 1em; margin-bottom: 3em; } #content_members #service-blocks #member_block { display: flex; flex-direction: column; height: 100%; width: 100%; border: 2px solid #ffffff; border-radius: 0px; padding-left: 1em; padding-right: 1em; padding-bottom: 7em; margin-right: 1em; margin-top: 1.5em; margin-bottom: 1.5em; } #content_members #service-blocks .member_card { display: flex; flex-direction: row; width: 100%; padding: 1em; } #content_members #service-blocks .member_card img { display: flex; flex-basis: 25%; max-width: 100%; max-height: 100%; padding: 1em; object-fit: contain; } #content_members #service-blocks .member_card #member_overview { display: flex; flex-direction: column; flex-basis: 75%; } #content_members #service-blocks .member_card #member_overview h3 { font-family: Helvetica, sans-serif; font-size: 1.5em; font-weight: bold; text-transform: uppercase; text-align: center; padding: 0; margin: 0; } #content_members #service-blocks .member_card #member_overview dl { } #content_members #service-blocks .member_card #member_overview dl dd { font-size: 1.25em; line-height: 1.5em; padding-right: 2em; text-align: center; } #content_members #service-blocks .member_card #member_overview dl dd h4 { } #content_members #service-blocks #member_block > dl { display: flex; flex-direction: column; } #content_members #service-blocks #member_block > dl > dt { display: flex; font-size: 1.5em; font-weight: bold; line-height: 1.5em; padding-left: 2em; } #content_members #service-blocks #member_block > dl > dd { display: flex; font-size: 1.25em; line-height: 1.5em; padding-right: 2em; } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ ARTICLE [ID: 14] ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ Parents & Children |
=>
~ ~ | .articles_listing =>
+ ~ ~ | .list => x 2 ~ ~ | => =>
x 3 ~ ~ |
x 3 ~ ~ ~ ~ HTML Edit ~ ~ dashboard => phpMyAdmin => DATABASE => TABLE: PAGES ~ ~ Edit opening tag of
~ ~ Old:
~ ~ New:
~ ~ Edit opening tag of
~ ~ Old:
~ ~ New:
~ ~ Delete opening & closing tags of
~ / #content_articles { display: flex; width: 100%; } #content_articles .articles_listing { display: flex; flex-direction: column; background-color: #000000; width: 100%; } #content_articles .articles_listing h1 { background-color: #000000; font-family: Helvetica, sans-serif; font-size: 1.75em; font-weight: bold; text-transform: uppercase; text-align: center; margin: 1.5em; } #content_articles .articles_listing .list { display: flex; flex-direction: column; border-collapse: collapse; margin: auto auto; } #content_articles .articles_listing .list tr { / display: inline-block;/ / width: fit-content;/ color: #ffffff; font-family: Helvetica, sans-serif; font-size: 1em; text-decoration: none; padding: 1em; margin: 2em; border: 2px none #ffffff; border-radius: 0px; } #content_articles .articles_listing .list tr th { border: 2px solid #ffffff; font-weight: bold; text-align: center; padding: 1em; } #content_articles .articles_listing .list tr td { border: 2px solid #ffffff; text-align: center; padding: 1em; } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ PRESS STATEMENTS [ID: 9] ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ Parents & Children |
=> .press_statement_listing ~ ~ | .press_statement_listing =>
+ ~ ~ | .list => x 2 ~ ~ | => =>
x 3 ~ ~ |
x 3 ~ ~ ~ ~ HTML Edit ~ ~ dashboard => phpMyAdmin => DATABASE => TABLE: PAGES ~ ~ Edit opening tag of
~ ~ Old:
~ ~ New:
~ ~ Edit opening tag of
~ ~ Old:
~ ~ New:
~ ~ Delete opening & closing tags of
~ ~ ~ ~ HTML Edit ~ ~ dashboard => phpMyAdmin => DATABASE => TABLE: ARTICLES ~ ~ Edit author of Constitution [Delete "space"] ~ / #content_press_statements { display: flex; width: 100%; } #content_press_statements .press_statement_listing { display: flex; flex-direction: column; background-color: #000000; width: 100%; margin: 2em; } #content_press_statements .press_statement_listing h1 { background-color: #000000; font-family: Helvetica, sans-serif; font-size: 1.75em; font-weight: bold; text-transform: uppercase; text-align: center; margin: 1.5em; } #content_press_statements .press_statement_listing .list { display: flex; flex-direction: column; border-collapse: collapse; margin: auto auto; } #content_press_statements .press_statement_listing .list tr { / display: inline-block;/ / width: fit-content;/ color: #ffffff; font-family: Helvetica, sans-serif; font-size: 1em; text-decoration: none; padding: 1em; margin: 2em; border: 2px none #ffffff; border-radius: 0px; } #content_press_statements .press_statement_listing .list tr th { border: 2px solid #ffffff; font-weight: bold; text-align: center; padding: 1em; max-width: 40%; } #content_press_statements .press_statement_listing .list tr td { border: 2px solid #ffffff; text-align: center; padding: 1em; text-overflow: ellipsis; max-width: 40%; } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ EXTERNAL LINKS [ID: 6] ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ Parents & Children |
=>
+
~ ~ |
=>
x 4 ~ ~ |
=> x 4 ~ ~ ~ ~ HTML Edit ~ ~ dashboard => phpMyAdmin => DATABASE => TABLE: PAGES ~ ~ Edit opening tag of
~ ~ Add:
~ / #content_external_links { display: flex; flex-direction: column; background-color: #000000; width: 100%; } #content_external_links h1 { background-color: #000000; font-family: Helvetica, sans-serif; font-size: 1.75em; font-weight: bold; text-transform: uppercase; text-align: center; margin-top: 1em; } #content_external_links ul { display: flex; flex-direction: column; } #content_external_links ul li { display: contents; } #content_external_links ul li a { display: inline-block; width: fit-content; color: #ffffff; font-family: Helvetica, sans-serif; font-size: 1em; font-weight: bold; text-transform: uppercase; text-decoration: none; padding: 1em; margin: 1em; border: 2px solid #ffffff; border-radius: 0px; } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ CHAMBERS [ID: 15] ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ Parents & Children |
=>
+
~ ~ | #all_chambers => #whk_chambers + #swk_chambers ~ ~ | #chambers =>
+
+ ~ ~ |
=>
x 4 ~ ~ |
=> ~ ~ ~ ~ HTML Edit ~ ~ dashboard => phpMyAdmin => DATABASE => TABLE: PAGES ~ ~ Edit image source of <img> ~ ~ Old: src="images/chambers/chambers_map.png" ~ ~ New: src="images/chambers.jpg" ~ ~ ~ ~ Edit opening tag of <div> ~ ~ Old: <div id="content"> ~ ~ New: <div id="content_chambers"> ~ ~ ~ ~ Add new div: Opening tag <div id=whk_chambers> | before <h2>Windhoek</h2> ~ ~ Add & Annotate new div: Closing tag <div> | after map close div ~ ~ Annotate closing tag of <div id="map"> ~ ~ Re-styled Street Address | 2nd <li> Windhoek ~ ~ ~ ~ Add new div: Opening tag <div id=swk_chambers> | before <h2>Swakopmund</h2> ~ ~ Add & Annotate new div: Closing tag <div> | after map close div ~ ~ Annotate closing tag of <div id="map"> ~ ~ Annotate closing tag of <div id="content_chambers"> ~ ~ Re-styled Street Address | 2nd <li> Swakopmund ~ ~ Replaced <iframe> with Swakopmund Location | 2nd <li> Swakopmund ~ / #content_chambers { background-color: #000000; flex-direction: column; flex-grow: 1; height: 100%; width: 100%; padding-bottom: 1em; } #content_chambers h1 { background-color: #000000; font-family: Helvetica, sans-serif; font-size: 1.75em; font-weight: bold; text-transform: uppercase; text-align: center; margin-top: 1em; } #content_chambers #all_chambers { display: flex; flex-direction: row; border: 0px solid #ffffff; border-radius: 0px; padding-bottom: 1em; } #content_chambers #all_chambers #whk_chambers { display: flex; flex-basis: 50%; flex-direction: column; border: 2px solid #ffffff; border-radius: 0px; margin-left: 1em; margin-right: 1em; } #content_chambers #all_chambers #swk_chambers { display: flex; flex-basis: 50%; flex-direction: column; border: 2px solid #ffffff; border-radius: 0px; margin-left: 1em; margin-right: 1em; } #content_chambers h2 { background-color: #000000; font-family: Helvetica, sans-serif; font-size: 1.5em; font-weight: bold; text-transform: uppercase; text-align: center; line-height: 1em; margin-top: 1em; margin-bottom: 0; } #content_chambers ul { padding: 0.5em; text-align: center; font-size: 1.15em; } #content_chambers ul li { } #content_chambers #map { padding-bottom: 1em; width: 100%; height: 100%; } #content_chambers #map iframe { } #content_chambers #street_view { display: flex; padding-bottom: 1em; width: 100%; height: 100%; justify-content: center; } #content_chambers #map iframe { } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ FOOTER ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ FOOTER | Private => Shared => Public Footer ~ ~ Parents & Children | <html | body | wrapper | main> => <footer> => <p> + (map) + (street-view) ~ ~ Styling | Overlaid Footer split into <p> + (map) + (street-view) ~ ~ HTML Edit ~ ~ Private => Shared => Public Footer ~ ~ - Google Maps ~ ~ Add opening tag of <div id="map"> | line 3 (After <p>) ~ ~ Populate <div id="map"> | line 3 ~ ~ Remove "width, height & style" in <iframe > | line 4 ~ ~ - Google Street View ~ ~ Add opening tag of <div id="street-view"> | line 7 (After map) ~ ~ Populate <div id="street-view"> | line 7 ~ ~ Remove "width, height & style" in <iframe > | line 8 ~ ~ - Main ~ ~ Add closing tag of <div id="main"> | line 11 (before closing tag of div(wrapper)) ~ / footer { display: flex; flex-direction: column; width: clamp(80vw, calc(60rem - 20vw), 100vw); height: 20vh; background: #000000; margin-top: auto; } footer p { display: flex; flex-grow: 1; flex-direction: column; background: #000000; align-items: center; text-align: center; justify-content: center; color: #ffffff; font-size: 1em; padding: 2em; } / #map { display: flex; flex-basis: 37.5%; flex-grow: 1; height: 100%; justify-content: center; object-fit: contain; } #street-view { display: flex; flex-basis: 37.5%; flex-grow: 1; height: 100%; justify-content: center; object-fit: contain; } / } / ~~~~ ~ ~ MEDIA QUERY: PORTRAIT ~ ~~~~~~~~~~~~~~~~~~~~~~~~~ / @media only screen and (orientation: portrait) { / ~ ~ BODY ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ BODY | Private => Shared => Public Header ~ ~ Parents & Children | <html> => <body> => <header> + <div(wrapper)> ~ ~ Styling | Site Layout (Buffers on Flanks) & Font Styling ~ / body { width: 100vw; height: 100%; margin: auto; font-family: Georgia, serif; font-size: 0.8em; color: #ffffff; line-height: 1.8em; display: flex; flex-direction: column; overflow: hidden; } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ HEADER ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ HEADER | Private => Shared => Public Header ~ ~ Parents & Children | <html | body> => <header> + <header::after> => <a | img> ~ ~ Styling | Header (Logo + Name), Background Fill & Media Queries ~ ~ HTML Edit ~ ~ Private => Shared => Public Header ~ ~ Delete opening tag of <h1> | line 13 ~ ~ Delete opening tag of </h1> | line 17 ~ ~ Remove image file <header | img src=""> | line 15 ~ ~ - url_for('/images/nba_logo_med_alpha.png') ~ ~ Add image file <header | img src=""> | line 15 ~ ~ - url_for('/images/inverted_nba_logo_med_alpha.png') ~ / header { display: flex; flex-direction: column; height: 25vh; width: 100%; } header::after { display: flex; content: ''; flex-grow: 1; background-color: #000000; } header a { display: contents; } a img { display: inline; max-height: 100%; max-width: 100%; object-fit: contain; } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ DIV(WRAPPER) ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ DIV(WRAPPER) | Public => Index ~ ~ Parents & Children | <html | body> => <div(wrapper)> => <div(main)> + <footer> ~ ~ Styling | Environment for Main, Footer & Media Queries ~ ~ HTML Edit ~ ~ Public => Index ~ ~ Insert <div id="wrapper"> opening tag | line 45 (between header & div(main)) ~ ~ Private => Shared => Public Footer ~ ~ Insert closing tag of <div(wrapper)> | line 11 (between </footer> & </div(body)>) ~ ~ Annotate closing tag of <div(wrapper)> | line 11 ~ / #wrapper { display: flex; flex-direction: column; height: 100vh; width: 100%; overflow-y: auto; scrollbar-width: none; / Firefox - Hide Scroll Bar / -ms-overflow-style: none; / Edge - Hide Scroll Bar / } #wrapper::-webkit-scrollbar{ display: none; / Chrome, Safari, Opera - Hide Scroll Bar / } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ DIV(MAIN) ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ DIV(MAIN) | Public => Index ~ ~ Parents & Children | <html | body | wrapper> => <div(main)> => <navigation> + <page> ~ ~ Styling | Environment for Navigation, Page & Media Queries ~ ~ HTML Edit ~ ~ Public => Index ~ ~ Add opening tag of <div id="main"> | line 47 (before Navigation) ~ ~ Remove opening tag of <div id="main"> | line 49 (After Navigation) ~ ~ Annotate closing tag of <div id="page"> | line 70 ~ ~ Add closing tag of <div id="main"> | line 72 ~ ~ Annotate closing tag of <div id="main"> | line 72 ~ / #main { display: flex; flex-direction: column; flex-grow: 1; min-height: 100vh; width: 100%; overflow-y: auto; scrollbar-width: none; / Firefox - Hide Scroll Bar / -ms-overflow-style: none; / Edge - Hide Scroll Bar / } #main::-webkit-scrollbar{ display: none; / Chrome, Safari, Opera - Hide Scroll Bar / } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ NAVIGATION ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ NAVIGATION | Private => Shared => Public Navigation ~ ~ Parents & Children | <html | body | wrapper> => <navigation> => <ul | li | a> ~ ~ Styling | Sticky Navigation Bar, List Items (Hover) & Media Queries ~ / navigation { / flex-basis: 25%;/ / flex-grow: 1;/ flex-direction: column; / height: 100%;/ / background-color: #000000;/ overflow-y: auto; scrollbar-width: none; / Firefox - Hide Scroll Bar / -ms-overflow-style: none; / Edge - Hide Scroll Bar / } navigation::-webkit-scrollbar{ display: none; / Chrome, Safari, Opera - Hide Scroll Bar / } navigation::after { display: none; flex-basis: 25%; flex-grow: 1; height: 100%; content: ''; background-color: #000000; } ul.subjects { display: flex; flex-direction: column; padding: 0; / padding-left: 3.5em; padding-right: 1em;/ font-family: Helvetica, sans-serif; font-size: 1.5em; text-transform: uppercase; margin: 0; } li { list-style-type: none; } ul.subjects li { / display: flex; flex-wrap: wrap;/ line-height: 2.75em; } / ul.subjects > li:hover:not(ul.pages > li) { list-style-position: outside; list-style-image: url('smallest_inverted_gavel.png'); color: #ffffff; }/ ul.subjects > li > a { padding-left: 1.5em; padding-right: 1em; border: 1px solid #000000; border-radius: 0px; } ul.subjects li a { font-weight: bold; display: flex; background: #000000; background-clip: padding-box; color: #ffffff; text-decoration: none; / padding: 3px;/ } ul.subjects li a:hover { color: #000000; background: #00000000 border-box; / #00000000 text;/ / background: #000000;/ / padding: 3px;/ border: 1px solid #ffffff; border-radius: 0px; } ul.pages { display: flex; flex-direction: column; padding: 0; / padding-left: 1em; padding-right: 1em;/ width: 100%; height: 100%; font-size: 0.75em; margin: 0; } ul.pages li { / display: flex; flex-wrap: wrap;/ line-height: 2em; } / ul.pages > li:hover { list-style-position: outside; list-style-image: url('smallest_inverted_gavel.png'); color: #ffffff; } ul.pages > li:active { list-style-position: outside; list-style-image: url('gold_smallest_inverted_gavel.png'); color: #ffffff; }/ ul.pages > li > a { padding-left: 3.5em; padding-right: 1.5em; border: 1px solid #000000; border-radius: 0px; } ul.pages li a { font-weight: bold; display: flex; background: #000000; background-clip: padding-box; color: #ffffff; text-decoration: none; / padding: 3px;/ } ul.pages li a:hover { color: #000000; background: / #00000000 text;/ #00000000 border-box; / background: #000000;/ / padding: 3px;/ border: 1px solid #ffffff; border-radius: 0px; } / a:hover { color: #ffffff; background: radial-gradient(ellipse farthest-corner at right bottom, #8A6E2F33 0%, #FEDB3733 8%, #FDB93133 14%, #5d4a1f33 30%, #9f792833 40%, #00000033 59.5%, transparent 60%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF33 0%, #D1B46433 8%, #5d4a1f33 25%, #FFFFAC33 62.5%, #8A6E2F33 100%); -webkit-background-clip: padding-box; background-clip: padding-box; padding: 3px; border: 1px solid #ffffff; border-radius: 7px; }/ / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ DIV(PAGE) ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ DIV(PAGE) | Public => Index ~ ~ Parents & Children | <html | body | wrapper | main> => (page) => (hero-image) + (content) ~ ~ Styling | Scroll-able Environment for Hero-Image (above Content) & Media Queries ~ ~ HTML Edit ~ ~ Public => Index ~ ~ Annotate closing tag of <div id="page"> | line 70 ~ / #page { display: flex; flex-basis: 75%; flex-grow: 1; flex-direction: column; height: 100%; width: 100%; font-size: 1em; /padding-bottom: 25vh;/ /If needed - Buffer <footer> / background-color: #000000; /object-fit: contain;/ overflow-y: auto; scrollbar-width: none; / Firefox - Hide Scroll Bar / -ms-overflow-style: none; / Edge - Hide Scroll Bar / } #page::-webkit-scrollbar{ display: none; / Chrome, Safari, Opera - Hide Scroll Bar / } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ DIV(HERO-IMAGE) ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ DIV(HERO-IMAGE) | Private => Shared => Static Homepage ~ ~ | dashboard => phpMyAdmin => DATABASE => TABLE: PAGES ~ ~ INFO ID: 16 [ABOUT THE NAMIBIAN BAR ASSOCIATION] ~ ~ INFO ID: 3 [CONSTITUTION] ~ ~ INFO ID: 2 [MEMBERS] ~ ~ NEWS ID: 14 [ARTICLES] ~ ~ NEWS ID: 9 [PRESS STATEMENTS] ~ ~ USEFUL INFORMATION ID: 6 [EXTERNAL LINKS] ~ ~ CONTACT US ID: 15 [CHAMBERS] ~ ~ Parents & Children | <html | body | wrapper | main | page> => (hero-image) => <img> ~ ~ Styling | Environment for Hero-Image (above Content) & Media Queries ~ / #hero-image { background-color: #000000; display: flex; height: auto; width: 100%; object-fit: contain; } #hero-image img { background-color: #000000; display: flex; max-width: 100%; object-fit: contain; } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ DIV(CONTENT) ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ DIV(CONTENT) | Private => Shared => Static Homepage ~ ~ | dashboard => phpMyAdmin => DATABASE => TABLE: PAGES ~ ~ INFO ID: 16 [ABOUT THE NAMIBIAN BAR ASSOCIATION] ~ ~ INFO ID: 3 [CONSTITUTION] ~ ~ INFO ID: 2 [MEMBERS] ~ ~ NEWS ID: 14 [ARTICLES] ~ ~ NEWS ID: 9 [PRESS STATEMENTS] ~ ~ USEFUL INFORMATION ID: 6 [EXTERNAL LINKS] ~ ~ CONTACT US ID: 15 [CHAMBERS] ~ ~ Parents & Children | <html | body | wrapper | main | page> => (content) => #VariableContent ~ ~ Styling | Environment for Hero-Image (above Content) & Media Queries ~ / #content { background-color: #000000; display: flex; flex-grow: 1; height: 100%; width: 100%; } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ STATIC HOMEPAGE ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ Parents & Children | <div id="content_static"> => <h2> ~ ~ ~ ~ HTML Edit ~ ~ Private => Shared => Static Homepage ~ ~ Edit image source of <img> | line 2 ~ ~ Old: src="images/chambers/chambers_street.jpg" | line 2 ~ ~ New: src="images/home.png" | line 2 ~ ~ Edit opening tag of <div> | line 5 ~ ~ Old: <div id="content"> | line 5 ~ ~ New: <div id="content_static"> | line 5 ~ / #content_static { background-color: #000000; display: flex; flex-grow: 1; height: 100%; width: 100%; } #content_static h2 { font-family: Helvetica, sans-serif; font-size: 2em; font-weight: bold; text-transform: uppercase; } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ ABOUT THE NAMIBIAN BAR ASSOCIATION [ID: 16] ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ Parents & Children | <div id="content_about"> => <h1> + <p> + <br> x 19 ~ ~ ~ ~ HTML Edit ~ ~ dashboard => phpMyAdmin => DATABASE => TABLE: PAGES ~ ~ Edit image source of <img> ~ ~ Old: src="images/justice.jpg" ~ ~ New: src="images/about_nba.png" ~ ~ Edit opening tag of <div> ~ ~ Old: <div id="content"> ~ ~ New: <div id="content_about"> ~ ~ Edit contents of <p> ~ ~ Significantly edited: Refer to database contents ~ / #content_about { background-color: #000000; height: 100%; width: 100%; padding-bottom: 1em; } #content_about h1 { background-color: #000000; font-family: Helvetica, sans-serif; font-size: 2em; font-weight: bold; text-transform: uppercase; text-align: center; margin-top: 1em; } #content_about h2 { background-color: #000000; font-family: Helvetica, sans-serif; font-size: 1.25em; font-weight: bold; text-transform: uppercase; text-align: center; margin-top: 1em; } #content_about p { background-color: #000000; padding-left: 1.5em; padding-right: 1.5em; text-align: left; } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ CONSTITUTION [ID: 3] ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ Parents & Children | <div id="content_constitution"> => <dd> | <a> ~ ~ ~ ~ HTML Edit ~ ~ dashboard => phpMyAdmin => DATABASE => TABLE: PAGES ~ ~ Edit opening tag of <div> ~ ~ Old: <div id="content"> ~ ~ New: <div id="content_constitution"> ~ / #content_constitution { display: flex; background-color: #000000; width: 100%; padding-top: 2em; padding-bottom: 1em; } #content_constitution dd { display: contents; } #content_constitution dd a { display: inline-flex; color: #ffffff; font-family: Helvetica, sans-serif; font-size: 1.25em; font-weight: bold; text-transform: uppercase; text-decoration: none; padding: 1em; border: 2px solid #ffffff; border-radius: 0px; } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ MEMBERS [ID: 2] ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ Parents & Children | <div id="content_members"> => <h2> + <div id="service_blocks"> ~ ~ | <div id="service_blocks"> => <?php <div class="member_card"> + <dl> ~ ~ | <?php <div class="member_card"> => <img> + #member_overview ~ ~ | #member_overview => <h3> + <br> + <dl> ~ ~ | <dl> => <dd> x 4 ~ ~ | <dd> => <h4> ~ ~ | <dl> => <dt> + <dd> ~ ~ ~ ~ HTML Edit ~ ~ dashboard => phpMyAdmin => DATABASE => TABLE: PAGES ~ ~ Edit image source of <img> ~ ~ Old: src="images/law.jpg" ~ ~ New: src="images/members.png" ~ ~ Add new div: Opening tag <div id=member_overview> | before <h3> ~ ~ Add & Annotate new div: Closing tag <div> | before member_card div close ~ ~ Delete <dt>Role</dt> | after <dl> ~ ~ Delete <dt>Contact Details:</dt> | before <dd>Cell: ~ ~ Edit opening tag of <div> ~ ~ Old: <div id="content"> ~ ~ New: <div id="content_members"> ~ / #content_members { background-color: #000000; display: flex; flex-direction: column; flex-grow: 1; height: 100%; width: 100%; margin-bottom: 3em; padding-bottom: 1em; } #content_members h2 { background-color: #000000; font-family: Helvetica, sans-serif; font-size: 2em; font-weight: bold; text-transform: uppercase; text-align: center; margin-top: 1em; padding: 2em; } #content_members #service-blocks { display: flex; flex-direction: column; height: 100%; width: 100%; padding-right: 1em; padding-bottom: 1em; margin-bottom: 3em; } #content_members #service-blocks #member_block { display: flex; flex-direction: column; height: 100%; width: 100%; border: 2px solid #ffffff; border-radius: 0px; padding-left: 1em; padding-right: 1em; padding-bottom: 7em; margin-right: 1em; margin-top: 1.5em; margin-bottom: 1.5em; } #content_members #service-blocks .member_card { display: flex; flex-direction: row; width: 100%; padding: 1em; } #content_members #service-blocks .member_card img { display: flex; flex-basis: 25%; max-width: 100%; max-height: 100%; padding: 1em; object-fit: contain; } #content_members #service-blocks .member_card #member_overview { display: flex; flex-direction: column; flex-basis: 75%; } #content_members #service-blocks .member_card #member_overview h3 { font-family: Helvetica, sans-serif; font-size: 1.5em; font-weight: bold; text-transform: uppercase; text-align: center; padding: 0; margin: 0; } #content_members #service-blocks .member_card #member_overview dl { } #content_members #service-blocks .member_card #member_overview dl dd { font-size: 1.25em; line-height: 1.5em; padding-right: 2em; text-align: center; } #content_members #service-blocks .member_card #member_overview dl dd h4 { } #content_members #service-blocks #member_block > dl { display: flex; flex-direction: column; } #content_members #service-blocks #member_block > dl > dt { display: flex; font-size: 1.5em; font-weight: bold; line-height: 1.5em; padding-left: 2em; } #content_members #service-blocks #member_block > dl > dd { display: flex; font-size: 1.25em; line-height: 1.5em; padding-right: 2em; } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ CHAMBERS [ID: 15] ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ Parents & Children | <div id="content_chambers"> => <h1> + <div id="all_chambers"> ~ ~ | #all_chambers => #whk_chambers + #swk_chambers ~ ~ | #chambers => <h2> + <ul> + <map> ~ ~ | <ul> => <li> x 4 ~ ~ | <div id="map"> => <iframe> ~ ~ ~ ~ HTML Edit ~ ~ dashboard => phpMyAdmin => DATABASE => TABLE: PAGES ~ ~ Edit image source of <img> ~ ~ Old: src="images/chambers/chambers_map.png" ~ ~ New: src="images/chambers.jpg" ~ ~ ~ ~ Edit opening tag of <div> ~ ~ Old: <div id="content"> ~ ~ New: <div id="content_chambers"> ~ ~ ~ ~ Add new div: Opening tag <div id=whk_chambers> | before <h2>Windhoek</h2> ~ ~ Add & Annotate new div: Closing tag <div> | after map close div ~ ~ Annotate closing tag of <div id="map"> ~ ~ Re-styled Street Address | 2nd <li> Windhoek ~ ~ ~ ~ Add new div: Opening tag <div id=swk_chambers> | before <h2>Swakopmund</h2> ~ ~ Add & Annotate new div: Closing tag <div> | after map close div ~ ~ Annotate closing tag of <div id="map"> ~ ~ Annotate closing tag of <div id="content_chambers"> ~ ~ Re-styled Street Address | 2nd <li> Swakopmund ~ ~ Replaced <iframe> with Swakopmund Location | 2nd <li> Swakopmund ~ / #content_chambers { background-color: #000000; flex-direction: column; flex-grow: 1; height: 100%; width: 100%; padding-bottom: 1em; } #content_chambers h1 { background-color: #000000; font-family: Helvetica, sans-serif; font-size: 1.75em; font-weight: bold; text-transform: uppercase; text-align: center; margin-top: 1em; } #content_chambers #all_chambers { display: flex; flex-direction: row; border: 0px solid #ffffff; border-radius: 0px; padding-bottom: 1em; } #content_chambers #all_chambers #whk_chambers { display: flex; flex-basis: 50%; flex-direction: column; border: 2px solid #ffffff; border-radius: 0px; margin-left: 1em; margin-right: 1em; } #content_chambers #all_chambers #swk_chambers { display: flex; flex-basis: 50%; flex-direction: column; border: 2px solid #ffffff; border-radius: 0px; margin-left: 1em; margin-right: 1em; } #content_chambers h2 { background-color: #000000; font-family: Helvetica, sans-serif; font-size: 1.5em; font-weight: bold; text-transform: uppercase; text-align: center; line-height: 1em; margin-top: 1em; margin-bottom: 0; } #content_chambers ul { padding: 0.5em; text-align: center; font-size: 1.15em; } #content_chambers ul li { } #content_chambers #map { padding-bottom: 1em; width: 100%; height: 100%; } #content_chambers #map iframe { } #content_chambers #street_view { display: flex; padding-bottom: 1em; width: 100%; height: 100%; justify-content: center; } #content_chambers #map iframe { } / ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ FOOTER ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ FOOTER | Private => Shared => Public Footer ~ ~ Parents & Children | <html | body | wrapper | main> => <footer> => <p> + (map) + (street-view) ~ ~ Styling | Overlaid Footer split into <p> + (map) + (street-view) ~ ~ HTML Edit ~ ~ Private => Shared => Public Footer ~ ~ - Google Maps ~ ~ Add opening tag of <div id="map"> | line 3 (After <p>) ~ ~ Populate <div id="map"> | line 3 ~ ~ Remove "width, height & style" in <iframe > | line 4 ~ ~ - Google Street View ~ ~ Add opening tag of <div id="street-view"> | line 7 (After map) ~ ~ Populate <div id="street-view"> | line 7 ~ ~ Remove "width, height & style" in <iframe > | line 8 ~ ~ - Main ~ ~ Add closing tag of <div id="main"> | line 11 (before closing tag of div(wrapper)) ~~~ / footer { display: flex; flex-direction: column; width: 100vw; height: 20vh; background: #000000; margin-top: auto; } footer p { display: flex; flex-grow: 1; flex-direction: column; background: #000000; align-items: center; text-align: center; justify-content: center; color: #ffffff; font-size: 1em; padding: 2em; } / #map { display: flex; flex-basis: 37.5%; flex-grow: 1; height: 100%; justify-content: center; object-fit: contain; } #street-view { display: flex; flex-basis: 37.5%; flex-grow: 1; height: 100%; justify-content: center; object-fit: contain; } } */