<!-- index.php -->
<!-- template_responsive.php
Ref my: _dev_no_tables01.php and _nav_links_inline_blocks.php
Uses: CSS Layout - display: inline-block & inline-block to Create Navigation Links & Gradient background-image & more
For no left or right cclumn
comment out the left and right include statements
include 'inc_floatleft_list.php';
include 'inc_floatleft_div.php';
comment out css class*="col-" float left
replace it with left and right margin = auto
else the main screen div will float to the left of the screen
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>WKQK Home Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<style>
* {
/* text-align: center; */
/* background-color: rgb(234, 234, 234); */
}
/* background color in the header */
.hdr_background{
background-color: rgb(255,255,204); /* 255,255,204 = lite yellow -- 255,255,0 = yellow */
/* background-image: linear-gradient(#12B95E, #97F9C3); */ /* green to green */
}
/* used in inline-block navigation links at top of the page */
.nav {
/* background-color: yellow; */
/* background-image: linear-gradient(#97F9C3, #12B95E); */
list-style-type: none;
height: auto;
text-align: center;
margin: 0;
padding: .5%; /* moves block contents away from inside edges */
}
/* used in inline-block navigation links at top of the page */
.nav li {
display: inline-block;
height: auto;
margin: .5%; /* seperates block from things outside it */
font-size: 100%;
padding: .3%; /* moves block contents away from inside edges */
border: 1px solid #b7bdb9;
background-color: #ffff99;
}
/* unused */
.hdr_img {
background-image: url("images/header13x147px.png");
background-repeat: repeat-x;
background-size: 5% 100%; /* controls hroz pic size vert pic size*/
}
/* unused */
.pgheaderX {
font-family: Arial;
font-size: 25px;
line-height: 30px;
font-weight: bold;
color: white;
text-align: center;
}
/* unused */
.container_rel {
position: relative;
}
/* unused */
/* use this to center text inside an image area */
.center {
position: absolute;
top: 50%; /* put top of the text top half way down inside the image area */
left: 50%; /* put text left end half way over inside the image area */
/* note the text is still not centered in the screen so do the below to get it there */
transform: translate(-50%, -50%); /* move the text half way up from where it is and half way to the left of where it is */
font-size: 18px;
}
/* unused */
* {
box-sizing: border-box;
}
/* ----- css is used below this point ----- */
/* in the code at the end of the row class this happens */
/*
the "row" class below uses the css "after" selector to insert stuff after the element to which the "row" class is assigned
css "after" selector will perform various task after the container to which it was assigned, in this case the container to which the "row" class has been assigned
css "content" property inserts the content in the quotes "after" the class section of code - in this case it inserts nothing as indicaed by ""
css "float" property tells the element to float left or right of its container
css "clear" property ends the float left, right, or both.
css "display" property controls how an element is displayed such as inline, block, inline-block, table, etc.
css "table" value table is a "value" for the "display" property
it allows using divs as table elements
in this case, at the end of the div container with the "row" class you can use divs as table elements
see this video for a good explination and simple example of using css table
instead of display table you can use display block
but you must use display with some value like table or block else the page doesn't display correctly
*/
.row::after {
content: "";
clear: both;
display: table; /*block works too*/
}
[class*="col-"] {
/*float: left; */ /* this line only with left or right container */
margin-left: auto; /* leave in to center when no left or right containers */
margin-right: auto; /* leave in to center when no left or right containers */
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
background-image: linear-gradient(#12B95E, #97F9C3);
padding: 8px;
margin-bottom: 7px;
color: #494a49;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-image: linear-gradient(#97F9C3, #12B95E);
}
.aside {
background-image: linear-gradient(#12B95E, #97F9C3);
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
text-align: center;
font-size: 12px;
color: black;
background-color: rgb(255,255,204); /* 255,255,204 = lite yellow -- 255,255,0 = yellow */
/* background-image: linear-gradient(#12B95E, #97F9C3); */ /* green gradient */
padding: 5px;
}
/* media query breakpoint 1 - for mobile */
[class*="col-"] {
width: 100%;
}
/* media query breakpoint 2 - for tablets */
@media only screen and (min-width: 600px) {
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
/* media query breakpoint 2 - for desktops */
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body style="background-color: rgb(255, 255, 204);"> <!-- Define Page Background Color -->
<a id="top"></a> <!-- bookmark top of page so long scrolling pages can be directed to go back to the top -->
<!-- Header Code Start -->
<div class="hdr_background center_only"> <!--hdr_background in each pages CSS - center_only in style.css file -->
<span id="pgheader">WKQK <!-- pgheader in style.css file -->
</span>
<br>
<span style="font-weight: bold; color: blue;" id="text14px" > <!-- id from style.css -->
Space Coast Information Radio </span>
<br>
<span style="font-weight: bold; color: red;" id="text14px" > <!-- id from style.css -->
Information for Visitors and New Residents
</span>
<br>
<span style="font-weight: bold;">
<!-- Header Menue - which uses less veritical space than the alternative button boxes code below -->
<a href="index.php">Home</a> -
<!-- <a href="http://www.radio1300.com/listen.php">Listen Live</a> - -->
<a href="listen.php">Listen Live</a> -
<a href="accommodations.php">Accommodations</a> -
<a href="ThingsToDo.php">Things To Do</a> -
<a href="rebrokers.php">House Hunting</a> -
<a href="newbie.php">Moving In</a> -
<a href="education.php">Schools</a> -
<a href="about.php">About</a> -
<a href="contact.php">Contact</a> -
<a href="links.php">Weather</a> -
<a href="links.php">More</a>
</span>
<!-- Header Menu Alternative - which puts links in button boxes - controlled by css "nav" and "nav li" in index.php
<ul class="nav normaltext">
<li><a href="index.php">Home</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact_form.php">Contact</a></li>
</ul>
-->
</div>
<!-- <hr style="width: 100%; height: 2px; border-bottom: 2px solid red;"> -->
<!-- Header Code End -->
<!-- Div 1 start -- Define Page Background Color - starting below the header and ending before the footer -->
<div style="text-align: center; font-family: Arial; height: auto;" alink="#3333ff" link="#3333ff" vlink="blue">
<!-- Div 2 start -- Main Page Code Start -- left column - center section - right column -->
<div class="row">
<!-- class=row applys css instructions "after" the div ends - including clears floats
the "row" class above is assigned to this "div container"
it does nothing until after the div ends
then it applys the css "after" selector instructions -- so after this div the "row" class instructions below execuite...
content: ""; says don't automatically insert anything like an image or some text after the div
(you could insert text or an image after by putting it between the quote marks)
clear: both; clear any floating containers or elements
display: table; table is one of the possible values for the display property
it defines the next element to behave like a <table> element
so divs can be used like table elements
display: block; also works
display: value; (like table or block) is required or the page display properly
-->
<!-- left column -->
<span style="font-size: x-large;"> <!-- font-size: x-large start for entire Div 3 aka MAIN PAGE -->
<!-- Div 3 starts -- MAIN PAGE -- Center Section Starts -->
<div class="col-9 col-s-9"> <!-- col-9 = 75% width for desktops -->
<hr>
<span style="font-size: 65%;"></span>
<br>
<span style="font-size: large; color: blue;); font-weight: bold;">
Information for Visitors, Travelers, and<br>
Those Relocating to, or Considering Relocating to, the Space Coast.
</span><br>
<br>
<span style="font-weight: bold; color: red;">- Listen and Learn About -</span><br>
<span style="font-size: large;">Port Canaveral<br>
Cocoa Beach<br>
Cape Canaveral<br>
And All Points Brevard
</span><br>
<span style="font-size: large;">
<span style="color: red; font-weight: bold;">- including -</span><br>
Space Stuff<br>
Things To Do<br>
Places to Go<br>
<span style="color: red; font-weight: bold;"></span>
Places to Stay<br>
Re-Lo Info<br>
</span>
<hr style="width: 100%; height: 2px;">
<span style="font-weight: bold; color: red;">Alternate Ways To Stream WKQK</span><br>
<span style="font-size: large;">
<span style="font-weight: bold;">Amazon Alexa:</span> Say - "Alexa, Stream W K Q K"<br>
<span style="font-weight: bold;">Google Home:</span> Say - "OK Google, Stream W K Q K"<br>
<span style="font-weight: bold;">TuneIn.com:</span> Search for - W K Q K<br>
<span style="font-weight: bold;">TuneIn App:</span> Search for - W K Q K<br>
</span>
<hr style="width: 100%; height: 2px;">
<span style="font-size: x-small">
<a href="index.php">WKQK</a> is owned and operated by the local small business
<a href="http://www.321corp.com/">321 Corporation</a> -
<a href="https://publicfiles.fcc.gov/am-profile/wkqk">WKQK Public Inspection File</a> -
<a href="WKQK_Assignment_Notice.html">FCC Applications</a>
Serving Florida's Space Coast
</span>
<!-- Main Page Ends Here -->
</span> <!-- font-size: x-large for all Div 3 aka MAIN PAGE end -->
<!-- This is code is all inside the "main div" from the responsive edit321.com site- kept here temporarly for reference.
Note that there is nothing special regarding "responsive" in this code. It is all about font-family and song size it seems.
-->
<!--
<font size="+1">
<span style="font-family: Arial;">
<font style="font-weight: bold; color: rgb(51, 51, 255); font-family: Comic Sans MS;" size="+2">
Professional Independent Editor
</font>
<br>
<br>
Highly experienced
</span>
<br>
<br>
This TEST LINE is outside the span, but inside font size tags.<br>
Note that it defaults to the font-family specified in the current div<br>
<br>
</font>
<font size="+1"><span style="font-family: Arial;">book</span></font>
<font size="+1">
<span style="font-family: Arial;"> and print media editor.</span>
<br>
<br>
<span style="font-family: Arial;">Edited countless books, periodicals, business documents, professional papers, letters, marketing materials, resumes, websites.</span>
<br>
<br>
<span style="font-family: Arial;">Contact me to discuss your project, large or small.</span>
<br>
<br>
<br>
<br>
<font size="+2"><span style="font-family: Arial;">Don't let</span></font>
<br>
<span style="font-family: Arial;">poor </span>
</font>
<font size="+1"><span style="font-family: Arial;">structure, </span></font>
<font size="+1"><span style="font-family: Arial;">consistency, </span></font>
<font size="+1">
<span style="font-family: Arial;">grammar, and punctuation </span><br>
<span style="font-family: Arial;">degrade the value of your creative work</span>
</font>
<br>
<span style="font-family: Arial;"></span>
<img src="images/SuprisedReader.png" alt="SuprisedReader.png">
<br>
<font size="+1"><span style="font-family: Arial;">in the eyes of an informed reader!</span></font>
-->
<!-- end reference code -->
</div> <!-- Div 3 ends -- Main Page -- Center Section Ends -->
<!-- right column -->
</div> <!-- Div 2 ends -- Main Page Code Ends -- left column - center section - right column -->
<br>
<!-- footer -->
<span class="footer">
Copyright 2023 - WKQK, 321 Corporation - All Rights Reserved
</spn>
</div> <!-- Div 1 ends -- Define Page Background Color - starting below the header and ending before the footer -->
</body>
</html>
