QB64.org Forum

Active Forums => QB64 Discussion => Topic started by: FellippeHeitor on December 01, 2019, 05:35:22 am

Title: Any web designers in the house? - Departing from Wix.com
Post by: FellippeHeitor on December 01, 2019, 05:35:22 am
Our current landing page, that is, the one you see when you enter qb64.org in your browser and get redirected to portal.qb64.org, has been created using Wix.com's WYSIWYG website creator, since my skills are poor for html/css. Quickest solution, but rather expensive given we have to pay them a monthly fee.

Is any of you guys skilled enough to recreate what we currently have using vanilla html+css? Animations are not a requirement, it's the layout I'm after.

This is, of course, a non-paid job offer.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: FellippeHeitor on December 01, 2019, 05:41:01 am
I'm not that terrible design-wise, and I really like the current one. But when I tried to go from scratch, this is what we ended up with (and could end up going back to):

 [ This attachment cannot be displayed inline in 'Print Page' view ]  

Not a threat, just a reminder 🤣
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Calloway on December 01, 2019, 05:44:49 am
I've been doing HTML/CSS since I was seven and I'd be happy to do this, just message me at calloway at myself dot com so that I can send the files back to the right email address. It could take a week or two though as I'm currently on Holiday
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: SMcNeill on December 01, 2019, 06:01:46 am
Are the images, backgrounds, and such copywriter protected?  How much is reusable?  And even if you stop paying Wix, isn’t that just stopping payment for using the EDITOR, not the pages you’ve already made with the editor?

Can’t you simply save the page, host it else where?

If several folks are interested in this, we can make it a contest of sorts: Design your best QB64 homepage by Christmas, we’ll let the community vote till New Years, at which point the new page will be displayed and we’ll send the winner one of those QB64 mugs from the shop.  Heck, I’ll even volunteer to pay for the mug, if that’s an issue.

A little friendly competition might encourage folks to finally brush up their html/css skills and do something fun and creative with them! 

I’d say give the winner:
A pat on the back!  YAAAAY, you win!
A free coffee mug!  (If they want it.)
A spot to include their name in the “ABOUT” section of the site, which they can use to promote their work to prospective employers.  (Which could be quite useful to some folks!)
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: FellippeHeitor on December 01, 2019, 06:03:43 am
I've been doing HTML/CSS since I was seven and I'd be happy to do this, just message me at calloway at myself dot com so that I can send the files back to the right email address. It could take a week or two though as I'm currently on Holiday

Done! Thanks for joining the endeavour! ❤️
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: FellippeHeitor on December 01, 2019, 06:08:48 am
Are the images, backgrounds, and such copywriter protected?  How much is reusable?  And even if you stop paying Wix, isn’t that just stopping payment for using the EDITOR, not the pages you’ve already made with the editor?

Can’t you simply save the page, host it else where?

If several folks are interested in this, we can make it a contest of sorts: Design your best QB64 homepage by Christmas, we’ll let the community vote till New Years, at which point the new page will be displayed and we’ll send the winner one of those QB64 mugs from the shop.  Heck, I’ll even volunteer to pay for the mug, if that’s an issue.

A little friendly competition might encourage folks to finally brush up their html/css skills and do something fun and creative with them! 

I’d say give the winner:
A pat on the back!  YAAAAY, you win!
A free coffee mug!  (If they want it.)
A spot to include their name in the “ABOUT” section of the site, which they can use to promote their work to prospective employers.  (Which could be quite useful to some folks!)

None of the artwork belongs to Wix, which is why the intention is to keep it as is, only without having to rely on their editor. I, for example, can edit it away using drag and drop, but I can't see the code they generate.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: SMcNeill on December 01, 2019, 06:20:56 am
I think here's what you're looking for.  Is there something in there which is missing?
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: STxAxTIC on December 01, 2019, 06:30:11 am
The main qb64.org page has been SLOW and useless for months.

I'm all for using something just like the old version, maybe made slightly prettier.

And...You did it using WIX? Yuppie... lol
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: FellippeHeitor on December 01, 2019, 06:45:38 am
I think here's what you're looking for.  Is there something in there which is missing?

I’m paying for that code. New code, even if similar, won’t be property of Wix. That’s what Calloway offered to provide above.

The main qb64.org page has been SLOW and useless for months.

I'm all for using something just like the old version, maybe made slightly prettier.

And...You did it using WIX? Yuppie... lol

Won’t be as slow as soon as it gets rewritten.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: TempodiBasic on December 01, 2019, 07:11:35 am
Hi

the last time that I make a poor website (just to learn) I have used FrontPage with which I had fighted so much for the WYSIWYNG not so comfortable.
Then I used FirstPage2000 that brought with itself some code snippets for specific issue. http://www.evrsoft.com/1stpage3.shtml (http://www.evrsoft.com/1stpage3.shtml)
in this survey online https://blog.templatetoaster.com/best-free-html-editors/ (https://blog.templatetoaster.com/best-free-html-editors/)
Atom comes up as a good  WYSIWYG and Open source from GitHub.
But any WEB professional programmer has its preferred tool!
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Ashish on December 01, 2019, 08:07:19 am
I had created homepage for QB64 a long before when Fellippe asked me. (but it was not fully completed)
Seems like to make current one, one may require to use addional lib. like Bootstrap & jQuery
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: SMcNeill on December 01, 2019, 08:52:08 am
I had created homepage for QB64 a long before when Fellippe asked me. (but it was not fully completed)
Seems like to make current one, one may require to use addional lib. like Bootstrap & jQuery

I've been playing around this morning in making one similar to what we currently have, and here's what I've came up with so far: http://smcneill.online/qb64/qb64.html

Tell me what you guys think.  Right now, the whole thing is only about 200 lines of html (formatted for human readability), so it should be something which loads a whole lot faster for us than the current homepage.  I dunno if it's up to the community standards, but I'm just having fun playing around with it and using it as a break from everything else for a wee bit.  ;D
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Ashish on December 01, 2019, 08:59:20 am
That is beautiful SMcNeil. I did' t like black color in the background of table. A borderless table with different light background color will be good.
Menubar is good. I would like to see crosfade effect in the menus. ;)
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: RhoSigma on December 01, 2019, 09:29:44 am
That's looking very promising Steve, although the friendly sky is much to bright for my taste. What's about a thunderstorm sky or something galactic like this https://www.google.de/search?q=s%C3%A4ulen+der+sch%C3%B6pfung&source=lnms&tbm=isch&sa=X&ved=2ahUKEwi7lfPt0pTmAhVRKlAKHaUIDjgQ_AUoAXoECAwQAw&biw=1146&bih=627.

I'd also prefer to keep it as simple as possible (i.e. not using any monster libraries which slow down loading), good old HTML 4 and if needed JavaScript 1.1 (i.e. no DOM and such).

BTW - Guess you swapped the vWatch/InForm icons. I hope Fellippe will forgive you for that. :)
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: SMcNeill on December 01, 2019, 09:38:46 am
That's looking very promising Steve, although the friendly sky is much to bright for my taste. What's about a thunderstorm sky or something galactic like this https://www.google.de/search?q=s%C3%A4ulen+der+sch%C3%B6pfung&source=lnms&tbm=isch&sa=X&ved=2ahUKEwi7lfPt0pTmAhVRKlAKHaUIDjgQ_AUoAXoECAwQAw&biw=1146&bih=627.

I'd also prefer to keep it as simple as possible (i.e. not using any monster libraries which slow down loading), good old HTML 4 and if needed JavaScript 1.1 (i.e. no DOM and such).

BTW - Guess you swapped the vWatch/InForm icons. I hope Fellippe will forgive you for that. :)

It's still a work in progress, and some of the copy/pasting seems to be reversed.  I'll get it sorted out soonish.  ;)
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: SMcNeill on December 01, 2019, 10:58:54 am
So I think my little attempt is up and finished: http://smcneill.online/qb64/qb64.html

For anyone curious, here's the whole code for it, in one simple html file:

Code: Text: [Select]
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>QB64 Home Portal</title>
  5.     <head>
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  7.         <style>
  8.             body, html {
  9.                 height: 100%;
  10.                 margin: 0;
  11.             }
  12.  
  13.             .bg {
  14.                 /* The image used */
  15.                 background-image: url("img/sky-background.jpg");
  16.                 /* Full height */
  17.                 height: 100%;
  18.                 /* Center and scale the image nicely */
  19.                 background-position: center;
  20.                 background-repeat: no-repeat;
  21.                 background-size: cover;
  22.             }
  23.         </style>
  24.         <style>
  25.             body {
  26.                 font-family: Arial;
  27.             }
  28.  
  29.             /* Style the tab */
  30.             .tab {
  31.                 overflow: hidden;
  32.                 border: 1px solid #ccc;
  33.                 position: absolute;
  34.                 left: 210px;
  35.                 top: 20px;
  36.                 background-color: #f1f1f1;
  37.             }
  38.  
  39.                 /* Style the buttons inside the tab */
  40.                 .tab button {
  41.                     background-color: inherit;
  42.                     float: left;
  43.                     border: none;
  44.                     outline: none;
  45.                     cursor: pointer;
  46.                     padding: 14px 16px;
  47.                     transition: 0.3s;
  48.                     font-size: 17px;
  49.                 }
  50.  
  51.                     /* Change background color of buttons on hover */
  52.                     .tab button:hover {
  53.                         background-color: #ddd;
  54.                     }
  55.  
  56.                     /* Create an active/current tablink class */
  57.                     .tab button.active {
  58.                         background-color: #ccc;
  59.                     }
  60.  
  61.             /* Style the tab content */
  62.             .tabcontent {
  63.                 display: none;
  64.                 padding: 6px 12px;
  65.                 border: 1px solid #ccc;
  66.                 border-top: none;
  67.                 position: absolute;
  68.                 left: 210px;
  69.                 top: 160px;
  70.                 background-color: lightskyblue;
  71.             }
  72.         </style>
  73.         <style>
  74.             img {
  75.                 display: block;
  76.                 margin-left: auto;
  77.                 margin-right: auto;
  78.             }
  79.         </style>
  80.     </head>
  81.  
  82. <style>.button {background-color: skyblue; /* Green */
  83.         border: none;
  84.         color: white;
  85.         padding: 10px;
  86.         text-align: center;
  87.         text-decoration: none;
  88.         display: inline-block;
  89.         font-size: 16px;
  90.  
  91.         cursor: pointer;}
  92.     .button1 {border-radius: 2px;}
  93.     .button2 {border-radius: 4px;}
  94.     .button3 {border-radius: 8px;}
  95.     .button4 {border-radius: 12px;}
  96.     .buttonx {border-radius: 80%;}
  97. </style>
  98. <style> table, th, td {border: 1px solid white;
  99.         color: White;
  100.         padding: 10px;
  101.         background-color: Black}
  102. </style>
  103. <style>p {text-indent: 25px;}</style>
  104.  
  105.  
  106.  
  107. <body>
  108.  
  109.  
  110.  
  111.     <img src="img/QB64-1-3-logo-transparency.png" alt="QB64 Logo'" style="float:left;width:200px;height:200px;">
  112.     <h1 align="center" style="color:White" ;>QB64 Home Portal</h1>
  113.  
  114.     <div class="tab">
  115.         <button class="tablinks" onclick="openTabs(event, 'About')">About</button>
  116.         <button class="tablinks" onclick="openTabs(event, 'Download')">Download</button>
  117.         <button class="tablinks" onclick="openTabs(event, 'TeamStuff')">Team Software</button>
  118.         <button class="tablinks" onclick="openTabs(event, 'Social')">Socialize</button>
  119.         <button class="tablinks" onclick="openTabs(event, 'Wiki')">Wiki</button>
  120.         <button class="tablinks" onclick="openTabs(event, 'Utilities')">Utilities</button>
  121.     </div>
  122.  
  123.     <div class="bg"></div>
  124.  
  125.     <div id="About" class="tabcontent">
  126.         <h1>From the 80s to eternity</h1>
  127.         <h3>How BASIC made its way into the 21st century</h3>
  128.         <br />
  129.         <p>The BASIC language has been the front door into programming for countless people. That holds true for us. After having been exposed to it in the early contacts with computers, most people have developed a love for programming that not only goes on today but also extends to the language itself. Contrary to what some may say, having learned BASIC has given to many the basis for a long-standing career writing computer software.</p>
  130.         <br />
  131.         <p>An Australian guy once decided that using emulation to be able to run QuickBASIC/QBasic in modern systems was a drag and decided to change that, and thus QB64 was born (originally as QB32). What it does is translate BASIC code into C++, which then gets compiled into native binaries for Windows, Linux and macOS.</p>
  132.         <br />
  133.         <p>QB64 not only allows for older programs written in BASIC to run smoothly in today's modern systems but it also allows for modern software development as it extends the language to use advanced features available in operating systems nowadays as well as OpenGL, which is the library used for rendering across different platforms.</p>
  134.     </div>
  135.  
  136.     <div id="Download" class="tabcontent">
  137.         <table align="center">
  138.             <tr>
  139.                 <th style="width:25%;color:Gold;">Screenshot and Link</th>
  140.                 <th style="width:75%;color:Gold;">Description</th>
  141.             </tr>
  142.             <tr>
  143.                 <td>
  144.                     <a href="https://github.com/Galleondragon/qb64/releases/tag/v1.3">
  145.                         <img src="img/QB64-1-3-logo-transparency.png" alt="QB64 v1.3" class="center">
  146.                     </a>
  147.                     <p align="center">QB64 v1.3</p>
  148.                 </td>
  149.                 <td>
  150.                     <p align="center">QB64 Stable Release</p>
  151.                     <p>This is the QB64 stable release and recommended for most people.  Add more descriptive junk here.</p>
  152.                 </td>
  153.             </tr>
  154.             <tr>
  155.                 <td>
  156.                     <a href="http://www.qb64.org/devbuilds.php">
  157.                         <img src="img/QB64-1-3-logo-transparency.png" alt="QB64 Dev Build" class="center">
  158.                     </a>
  159.                     <p align="center">QB64 Dev Build</p>
  160.                 </td>
  161.                 <td>
  162.                     <p align="center">QB64 Development Build</p>
  163.                     <p>This is the latest, greatest version of QB64 as worked upon by our developers.  WARNING: May not be 100$ bug free, though we try not to add any into the language.</p>
  164.                 </td>
  165.             </tr>
  166.         </table>
  167.     </div>
  168.  
  169.     <div id="TeamStuff" class="tabcontent">
  170.         <table align="center">
  171.             <tr>
  172.                 <th style="width:25%;color:Gold;">Screenshot and Link</th>
  173.                 <th style="width:75%;color:Gold;">Description</th>
  174.             </tr>
  175.             <tr>
  176.                 <td>
  177.                     <a href="http://www.qb64.org/inform">
  178.                         <img src="https://static.wixstatic.com/media/e3b049_025ef09c2a5f4dcc987b38f125728aa1~mv2.png" alt="QB64 v1.3" style="width:150px;height:150px;">
  179.                     </a>
  180.                     <p align="center">Inform</p>
  181.                 </td>
  182.                 <td>
  183.                     <p align="center">Inform</p>
  184.                     <p>Fellipe can type a nice description of what vWatch is here for the world to see!</p>
  185.                 </td>
  186.             </tr>
  187.             <tr>
  188.                 <td>
  189.                     <a href="http://www.qb64.org/vwatch">
  190.                         <img src="https://static.wixstatic.com/media/e3b049_842ab0c2ac1c488a8501e5834bb48183~mv2.png" alt="vWatch64" style="width:150px;height:150px;">
  191.                     </a>
  192.                     <p align="center">vWatch64</p>
  193.                 </td>
  194.                 <td>
  195.                     <p align="center">vWatch64</p>
  196.                     <p>Fellipe can type a nice description of what vWatch is here for the world to see!</p>
  197.                 </td>
  198.             </tr>
  199.         </table>
  200.     </div>
  201.  
  202.     <div id="Social" class="tabcontent">
  203.         <table align="center">
  204.             <tr>
  205.                 <th style="width:25%;color:Gold;">Link</th>
  206.                 <th style="width:75%;color:Gold;">Description</th>
  207.             </tr>
  208.             <tr>
  209.                 <td>
  210.                     <a href="http://www.qb64.org/forum" class="button button4">The QB64 Forums</a>
  211.                 </td>
  212.                 <td>
  213.                     <p>A permanent message board for people to come visit us, ask questions, share code, and get help with their problems related to QB64.</p>
  214.                 </td>
  215.             </tr>
  216.             <tr>
  217.                 <td>
  218.                     <a href="https://discord.gg/mwfWyQq" class="button button4">QB64 Discord Server</a>
  219.                 </td>
  220.                 <td>
  221.                     <p>QB64's home on Discord.  Feel free to come visit us and chat there anytime!</p>
  222.                 </td>
  223.             </tr>
  224.             <tr>
  225.                 <td>
  226.                     <a href="http://www.qb64.org/ircpage.html" class="button button4">QB64 IRC Chatroom</a>
  227.                 </td>
  228.                 <td>
  229.                     <p>QB64's official home on IRC.</p>
  230.                 </td>
  231.             </tr>
  232.         </table>
  233.     </div>
  234.  
  235.     <div id="Wiki" class="tabcontent">
  236.         <table align="center">
  237.             <tr>
  238.                 <th style="width:25%;color:Gold;">Link</th>
  239.                 <th style="width:75%;color:Gold;">Description</th>
  240.             </tr>
  241.             <tr>
  242.                 <td>
  243.                     <a href="http://www.qb64.org/wiki/Main_Page" class="button button4">The QB64 Wiki</a>
  244.                 </td>
  245.                 <td>
  246.                     <p>Our official Wiki and source of most of the documentation pertaining to QB64.</p>
  247.                 </td>
  248.             </tr>        
  249.             <tr>
  250.                 <td>
  251.                     <a href="https://www.portal.qb64.org/version-1-3-changelog" class="button button4">QB64 Change Log</a>
  252.                 </td>
  253.                 <td>
  254.                     <p>The list of most recent changes made to the last stable version of QB64.</p>
  255.                 </td>
  256.             </tr>
  257.             <tr>
  258.                 <td>
  259.                     <a href="http://www.qb64.org/articles/articles.html" class="button button4">Articles</a>
  260.                 </td>
  261.                 <td>
  262.                     <p>An assortment of user articles, tutorials, and other stuff QB64 related.</p>
  263.                 </td>
  264.             </tr>
  265.             <tr>
  266.                 <td>
  267.                     <a href="http://www.qb64.org/historical_qb64/" class="button button4">QB64 Archive</a>
  268.                 </td>
  269.                 <td>
  270.                     <p>Historical versions of QB64 preserved here and available to the public.</p>
  271.                 </td>
  272.             </tr>
  273.         </table>
  274.     </div>
  275.  
  276.     <div id="Utilities" class="tabcontent">
  277.        <table align="center">
  278.             <tr>
  279.                 <th style="width:25%;color:Gold;">Link</th>
  280.                 <th style="width:75%;color:Gold;">Description</th>
  281.             </tr>
  282.             <tr>
  283.                 <td>
  284.                     <a href="http://www.qb64.org/basbin" class="button button4">BASBin</a>
  285.                 </td>
  286.                 <td>
  287.                     <p>Need to share a code snippet but don't need all the fuss of traditional online tools?  BASBin is what you're after!</p>
  288.                     <p>Just paste code, hit the button, and share the link away.</p>
  289.                     <p>Files are wiped regularly, so treat it as the temporary storage it is, OK?</p>
  290.                 </td>
  291.             </tr>
  292.             <tr>
  293.                 <td>
  294.                     <a href="http://www.qb64.org/binbin" class="button button4">BINBin</a>
  295.                 </td>
  296.                 <td>
  297.                     <p>Or maybe you need to share an image, or other type of binary file. If that's the case, BINBin is for you!</p>
  298.                     <p>Select the file to share, hit the button, and share the link.</p>
  299.                     <p>Files are wiped regularly, so treat it as the temporary storage it is, OK?</p>
  300.                 </td>
  301.             </tr>
  302.         </table>
  303.     </div>
  304.  
  305.  
  306.     <script>
  307.         function openTabs(evt, cityName) {
  308.             var i, tabcontent, tablinks;
  309.             tabcontent = document.getElementsByClassName("tabcontent");
  310.             for (i = 0; i < tabcontent.length; i++) {
  311.                 tabcontent[i].style.display = "none";
  312.             }
  313.             tablinks = document.getElementsByClassName("tablinks");
  314.             for (i = 0; i < tablinks.length; i++) {
  315.                 tablinks[i].className = tablinks[i].className.replace(" active", "");
  316.             }
  317.             document.getElementById(cityName).style.display = "block";
  318.             evt.currentTarget.className += " active";
  319.         }
  320.     </script>
  321.  
  322.  
  323. </body>
  324. </html>

Basically one menu, one script, a few tables, and that's it!  I like simple and functional.  ;)
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 01, 2019, 06:56:48 pm
 I thought I'd take a shot at a knockoff of the current main page.

Here is the HTML / CSS code, now with active links and GoDaddy pop-up window.

Code: Text: [Select]
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4.   <meta content="text/html; charset=ISO-8859-1"
  5.  http-equiv="content-type">
  6.   <meta name="viewport"
  7.  content="width=device-width, initial-scale=1.0">
  8.   <title>qb64-responsive-webpage</title>
  9.   <style type="text/css">
  10. html {
  11. scroll-behavior: smooth;
  12. }
  13. #navdots {
  14. font-size: 30px;
  15. position: fixed;
  16. top: 130px;
  17. right: 16px;
  18. }
  19. #navdots a:link {
  20. color: rgba(33, 44, 63, .6);
  21. text-decoration: none;
  22. }
  23. /* visited link */
  24. #navdots a:visited {
  25. color: rgba(33, 44, 63, .6);
  26. }
  27. /* mouse over link */
  28. #navdots a:hover {
  29. color: rgba(33, 44, 63, .3);
  30. }
  31. /* selected link */
  32. #navdots a:active {
  33. color: black;
  34. }
  35. /* Horizontal Links Menu for Desktop / Laptop Systems ------------------------ */
  36. #nav, #nav ul {
  37. /* Top border */
  38. float: left;
  39. width: 100%;
  40. list-style: none;
  41. line-height: 2em;
  42. color: white;
  43. font-weight: bold;
  44. padding: 0;
  45. border: solid #eda;
  46. border-width: 0px 0;
  47. margin: 0;
  48. }
  49. #nav a {
  50. display: inline;
  51. width: 9.5em;
  52. color: #FFFFFF;
  53. text-decoration: none;
  54. padding: .33em .25em;
  55. }
  56. #nav li {
  57. /* Spaces each link header */
  58. float: left;
  59. padding-left: 0em;
  60. width: 7em;
  61. }
  62. #nav li ul {
  63. /* Width of the drop-down menu border box. */
  64. position: absolute;
  65. left: -999em;
  66. height: auto;
  67. width: 10.9em;
  68. font-weight: normal;
  69. border-width: .25em;
  70. text-align: left;
  71. margin: 0;
  72. background: rgb(255, 106, 0);
  73. }
  74. /* Width of highlighted links in drop-down menu. */
  75. #nav li li {
  76. padding: .25em;
  77. width: 10.4em;
  78. }
  79. #nav li:hover ul {
  80. left: auto;
  81. color: rgb(255, 106, 0);
  82. }
  83. #nav li:hover {
  84. color: rgb(255, 106, 0);
  85. background: blue;
  86. }
  87. #content {
  88. clear: left;
  89. }
  90. #content a:hover {
  91. color: rgb(255, 106, 0);
  92. text-decoration: none;
  93. }
  94. /* Vertical Links Menu for Mobile / Tablet Devices ------------------------ */
  95. #mobile-nav a {
  96. width: 9.5em;
  97. color: black;
  98. text-decoration: none;
  99. padding: 0em .45em;
  100. line-height: 50px;
  101. }
  102. #mobile-nav, #mobile-nav ul {
  103. /* Top border */
  104. width: 100%;
  105. list-style: none;
  106. line-height: 2em;
  107. color: white;
  108. font-weight: bold;
  109. padding: 0;
  110. border: solid #eda;
  111. border-width: 0px 0;
  112. margin: 0;
  113. }
  114. #mobile-nav li ul {
  115. /* Width of the drop-down menu border box. */
  116. position: absolute;
  117. left: -999em;
  118. height: auto;
  119. width: 10.9em;
  120. font-weight: normal;
  121. border-width: .25em;
  122. text-align: left;
  123. margin: 0;
  124. background: rgb(255, 106, 0);
  125. }
  126. /* Width of highlighted links in drop-down menu. */
  127. #mobile-nav li li {
  128. padding: .25em;
  129. width: 10.4em;
  130. }
  131. #mobile-nav li:hover, #mobile-nav li:focus, #mobile-nav li:active {
  132. color: rgb(255, 106, 0);
  133. background: blue;
  134. }
  135. #mobile-nav li:hover ul, #mobile-nav li:focus ul, #mobile-nav li:active ul{
  136. left: 7.2em;
  137. display: inline;
  138. /* Use for non-image hamburger: color: rgb(255, 106, 0); */
  139. }
  140. /* Mobile / Tablet Wrapper */
  141. #mobile-nav {
  142. width: 100%;
  143. /* background: #000; */
  144. /* Navigation bar sticky on top.
  145. position: sticky;
  146. top: 0;
  147. */
  148. }
  149. /* Hide Hamburger Menu Symbol */
  150. #mobile-nav label, #hamburger {
  151. display: none;
  152. }
  153. /* Mobile Tablet Resolutions. Display only when resolution is 1150px or less. */
  154. @media screen and (min-width: 1150px){
  155. #mobile-nav table {
  156. display: none;
  157. }
  158. }
  159. @media screen and (max-width: 1150px){
  160. /* Show Hamburger */
  161. #mobile-nav label {
  162. display: inline-block;
  163. position:absolute; left: 290px; top: 10px;
  164. /* color: #fff; background: #a02620; Again, for non-image hamburger menu.
  165. font-style: normal;
  166. font-size: 1.2em;
  167. padding: 10px; */
  168. }
  169. /* Toggle show/hide menu on checkbox click */
  170. #mobile-nav table {
  171. display: none;
  172. }
  173. #mobile-nav input:checked ~ table {
  174. display: block;
  175. }
  176. }
  177. /* Buttons ----------------------------- */
  178. .classname {
  179. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
  180. background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
  181. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
  182. background-color:#ffc477;
  183. -webkit-border-top-left-radius:0px;
  184. -moz-border-radius-topleft:0px;
  185. border-top-left-radius:0px;
  186. -webkit-border-top-right-radius:0px;
  187. -moz-border-radius-topright:0px;
  188. border-top-right-radius:0px;
  189. -webkit-border-bottom-right-radius:0px;
  190. -moz-border-radius-bottomright:0px;
  191. border-bottom-right-radius:0px;
  192. -webkit-border-bottom-left-radius:0px;
  193. -moz-border-radius-bottomleft:0px;
  194. border-bottom-left-radius:0px;
  195. text-indent:0;
  196. border:1px solid #eeb44f;
  197. display:inline-block;
  198. color:#ffffff;
  199. font-family:Arial;
  200. font-size:22px;
  201. font-weight:bold;
  202. font-style:normal;
  203. height:40px;
  204. line-height:40px;
  205. width:180px;
  206. text-decoration:none;
  207. text-align:center;
  208. }.classname:hover {
  209. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
  210. background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
  211. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
  212. background-color:#fb9e25;
  213. }.classname:active {
  214. position:relative;
  215. top:1px;
  216. }
  217. /* Responsive Actions ------------------ */
  218. .pageformat{
  219. margin: 0;
  220. text-align: center;
  221. font-family: segoe UI semibold;
  222. font-size: 18px;
  223. margin: 0;
  224. /* Off-white page. Uses a bright white footer bar coded elsewhere. */
  225. background-color: #f8f8ff;
  226. }
  227. /* Display is inclusive of all screen width resolutions 200px to 1720 px. */
  228. @media screen and (max-width: 1720px) {
  229. body {
  230. padding: 0
  231. min-width: 200px;
  232. max-width: 1720px;
  233. width: 100%;
  234. }
  235. }
  236. @media screen and (min-width: 680px) { .hidden1 {
  237. display: none;
  238. }
  239. }
  240. /* Under 680px resolutiion hidden2 elements disappear. */
  241. @media screen and (max-width: 680px) { .hidden2 {
  242. display: none;
  243. }
  244. }
  245. /* Under 1150px resolutiion hidden2 and hidden-div elements disappear. */
  246. @media screen and (max-width: 1150px) { .hidden-horz-menu-and-slide-show-top-margin {
  247. display: none;
  248. clear: both;
  249. }
  250. }
  251. @media screen and (min-width: 1150px) { .hidden-div {
  252. display: none;
  253. }
  254. }
  255. /* Over 680 resolution hidden-div elements disappear: */
  256. Keeps text for QB64 header below top of screen when present and directly under icon on smaller screens. */
  257. @media screen and (max-width: 680px) { .hidden-div {
  258. display: none;
  259. }
  260. }
  261. /* Slide Show -------------------------- */
  262. * {box-sizing: border-box}
  263. .mySlides {display: none}
  264. img {vertical-align: middle;}
  265. /* Slideshow container */
  266. .slideshow-container {
  267. max-width: 500px;
  268. position: relative;
  269. margin: auto;
  270. }
  271. /* Next and previous buttons */
  272. .prev, .next {
  273. cursor: pointer;
  274. position: absolute;
  275. top: 53%;
  276. width: auto;
  277. padding: 3px;
  278. margin-top: -22px;
  279. color: white;
  280. background: rgb(255, 106, 0);
  281. font-weight: bold;
  282. font-size: 18px;
  283. transition: 0.6s ease;
  284. border-radius: 0 3px 3px 0;
  285. user-select: none;
  286. }
  287. /* Position "next button" to the right */
  288. .next {
  289. left: 271px;
  290. border-radius: 3px 0 0 3px;
  291. }
  292. .prev {
  293. right: 271px;
  294. border-radius: 3px 0 0 3px;
  295. }
  296. /* On hover, add a black background color with a little bit see-through */
  297. .prev:hover, .next:hover {
  298. background-color: rgba(0,0,0,0.8);
  299. }
  300. /* Fading animation */
  301. .fade {
  302. -webkit-animation-name: fade;
  303. -webkit-animation-duration: 1.5s;
  304. animation-name: fade;
  305. animation-duration: 1.5s;
  306. }
  307. @-webkit-keyframes fade {
  308. from {opacity: .4} to {opacity: 1}
  309. }
  310. @keyframes fade {
  311. from {opacity: .4} to {opacity: 1}
  312. }
  313. /* On smaller screens, decrease text size */
  314. @media only screen and (max-width: 300px) {
  315. .prev, .next,.text {font-size: 11px}
  316. }
  317. #inline {
  318. display: inline;
  319. vertical-align: top;
  320. }
  321. .img-link, .img-link2 {
  322. border: 0px solid ;
  323. vertical-align: middle;
  324. }
  325. .padded-hidden {
  326. padding: 0px 15px 0px 15px;
  327. }
  328. @media screen and (max-width:450px) { .padded-hidden {
  329. display: none;
  330. }
  331. }
  332. /* Bottom Menu Fixed ------------------- */
  333. .navbar {
  334. overflow: hidden;
  335. background-color: #fff; /* alternate grey #333; */
  336. position: fixed;
  337. bottom: 0;
  338. width: 100%;
  339. border-top: 1px solid grey;
  340. }
  341. .navbar a {
  342. float: left;
  343. display: block;
  344. color: #f2f2f2;
  345. text-align: center;
  346. padding: 10px 16px 8px;
  347. text-decoration: none;
  348. font-size: 17px;
  349. }
  350. .navbar a:hover {
  351. background: #f1f1f1;
  352. color: black;
  353. }
  354. .mobile-image-table{
  355. display: inline;
  356. text-align: center;
  357. margin-left: auto;
  358. margin-right: auto;
  359. border-collapse: collapse;
  360. padding: 0px;
  361. margin-top: 0px;
  362. }
  363. .mobile-icons-text-row {
  364. text-align: center;
  365. vertical-align: bottom;
  366. font-size: 12px;
  367. line-height: 22px;
  368. }
  369. .mobile-icons-image {
  370. padding: 0px;
  371. width: 17px;
  372. height: 15px;
  373. } .mobile-icons-image-row {
  374. text-align: center;
  375. vertical-align: top;
  376. }
  377.   </style>
  378. </head>
  379. <body style="margin: 0pt;">
  380. <div id="navdots">
  381. <p><a href="#about">●</a></p>
  382. <p><a href="#download">●</a>
  383. </p>
  384. <p><a href="#utilities">●</a>
  385. </p>
  386. </div>
  387. <div class="pageformat">
  388. <div style="background-image: url(bg.jpg); padding-bottom: 40px;">
  389. <table
  390.  style="text-align: center; margin-left: auto; margin-right: auto;"
  391.  border="0" cellpadding="0">
  392.   <tbody>
  393.     <tr>
  394.       <td style="text-align: center;">
  395.       <table style="float: left; text-align: left; width: 300px;"
  396.  border="0" cellpadding="0" cellspacing="0">
  397.         <tbody>
  398.           <tr>
  399.             <td class="hidden1"
  400.  style="vertical-align: middle; text-align: center; width: 20%;">&nbsp;</td>
  401.             <td style="vertical-align: middle; text-align: center;"><!-- <div id="mobile-nav"><label for="hamburger">&#9776;</label> -->
  402.             <div id="mobile-nav"><label for="hamburger"><img
  403.  style="width: 40px; height: 36px;" alt=""
  404.  src="mini-menu.png"></label><input id="hamburger"
  405.  type="checkbox"><a name="top"></a><a
  406.  href="https://www.portal.qb64.org" target="_blank"><img
  407.  class="img-link" style="margin-top: 20px;"
  408.  alt="QB64-1-3-logo" src="QB64-1-3-logo-transparency.png"></a>
  409.             <table
  410.  style="position: absolute; left: 0px; top: 0px; text-align: left; margin-top: 0px; padding-top: 80px; background-color: rgb(192, 192, 192); width: 290px; height: 400px;"
  411.  border="0" cellpadding="0" cellspacing="0">
  412.               <tbody>
  413.                 <tr>
  414.                   <td style="text-align: left; vertical-align: top;">
  415.                   <ul>
  416.                     <li> <a href="#">HOME</a>
  417.                       <ul>
  418.                         <li><a href="#top">QB64
  419. Home Page</a></li>
  420.                       </ul>
  421.                     </li>
  422.                     <li><a href="#">ABOUT</a>
  423.                       <ul>
  424.                         <li><a href="#about">About
  425. QB64</a></li>
  426.                       </ul>
  427.                     </li>
  428.                     <li><a href="#">DOWNLOAD</a>
  429.                       <ul>
  430.                         <li><a
  431.  href="https://github.com/Galleondragon/qb64/releases/tag/v1.3"
  432.  target="_blank" rel="nofollow">QB64
  433. V 1.3</a></li>
  434.                         <li><a
  435.  href="https://www.qb64.org/devbuilds.php">Dev
  436. Build</a></li>
  437.                         <li><a
  438.  href="https://www.qb64.org/historical_qb64/">Historical
  439. Versions</a></li>
  440.                         <li><a
  441.  href="https://www.qb64.org/inform">Inform
  442. for QB64</a></li>
  443.                         <li><a
  444.  href="https://www.qb64.org/vwatch">VWatch
  445. for QB64</a></li>
  446.                       </ul>
  447.                     </li>
  448.                     <li style="padding-left: 0px;"><a
  449.  href="#">SOCIALIZE</a>
  450.                       <ul>
  451.                         <li><a
  452.  href="https://www.qb64.org/forum" target="_blank">Forum</a></li>
  453.                         <li><a
  454.  href="https://discord.gg/mwfWyQq" target="_blank">QB64
  455. Discord Server</a></li>
  456.                         <li><a
  457.  href="https://www.qb64.org/ircpage.html" target="_blank">QB64
  458. IRC Chat</a></li>
  459.                       </ul>
  460.                     </li>
  461.                     <li><a href="#">QB64-WIKI</a>
  462.                       <ul>
  463.                         <li><a
  464.  href="https://www.qb64.org/articles/articles.html"
  465.  target="_blank">Articles</a></li>
  466.                       </ul>
  467.                     </li>
  468.                     <li><a href="#">UTILITIES</a>
  469.                       <ul>
  470.                         <li><a
  471.  href="https://www.qb64.org/basbin">BASBin</a></li>
  472.                         <li><a
  473.  href="https://www.qb64.org/binbin">BINBin</a></li>
  474.                       </ul>
  475.                     </li>
  476.                   </ul>
  477.                   </td>
  478.                 </tr>
  479.               </tbody>
  480.             </table>
  481.             </div>
  482.             </td>
  483.             <td class="hidden1"
  484.  style="vertical-align: top; text-align: left; width: 20%;"></td>
  485.           </tr>
  486.         </tbody>
  487.       </table>
  488.       <table style="float: none; text-align: left;" border="0"
  489.  cellpadding="0" cellspacing="0">
  490.         <tbody>
  491.           <tr>
  492.             <td class="hidden-horz-menu-and-slide-show-top-margin"
  493.  style="vertical-align: middle; height: 190px; text-align: center;">
  494.             <ul id="nav">
  495.               <li> <a href="#">HOME</a>
  496.                 <ul>
  497.                   <li><a href="#top">QB64
  498. Home Page</a></li>
  499.                 </ul>
  500.               </li>
  501.               <li><a href="#">ABOUT</a>
  502.                 <ul>
  503.                   <li><a href="#about">About
  504. QB64</a></li>
  505.                 </ul>
  506.               </li>
  507.               <li><a href="#">DOWNLOAD</a>
  508.                 <ul>
  509.                   <li><a
  510.  href="https://github.com/Galleondragon/qb64/releases/tag/v1.3"
  511.  target="_blank" rel="nofollow">QB64
  512. V 1.3</a></li>
  513.                   <li><a
  514.  href="https://www.qb64.org/devbuilds.php">Dev
  515. Build</a></li>
  516.                   <li><a
  517.  href="https://www.qb64.org/historical_qb64/">Historical
  518. Versions</a></li>
  519.                   <li><a href="https://www.qb64.org/inform">Inform
  520. for QB64</a></li>
  521.                   <li><a href="https://www.qb64.org/vwatch">VWatch
  522. for QB64</a></li>
  523.                 </ul>
  524.               </li>
  525.               <li style="padding-left: 0px;"><a href="#">SOCIALIZE</a>
  526.                 <ul>
  527.                   <li><a href="https://www.qb64.org/forum"
  528.  target="_blank">Forum</a></li>
  529.                   <li><a href="https://discord.gg/mwfWyQq"
  530.  target="_blank">QB64
  531. Discord Server</a></li>
  532.                   <li><a
  533.  href="https://www.qb64.org/ircpage.html" target="_blank">QB64
  534. IRC Chat</a></li>
  535.                 </ul>
  536.               </li>
  537.               <li><a href="#">QB64-WIKI</a>
  538.                 <ul>
  539.                   <li><a
  540.  href="https://www.qb64.org/articles/articles.html"
  541.  target="_blank">Articles</a></li>
  542.                 </ul>
  543.               </li>
  544.               <li><a href="#">UTILITIES</a>
  545.                 <ul>
  546.                   <li><a href="https://www.qb64.org/basbin">BASBin</a></li>
  547.                   <li><a href="https://www.qb64.org/binbin">BINBin</a></li>
  548.                 </ul>
  549.               </li>
  550.             </ul>
  551.             <br>
  552. &nbsp;<br>
  553.             </td>
  554.           </tr>
  555.         </tbody>
  556.       </table>
  557.       <table style="float: left; text-align: left; width: 300px;"
  558.  border="0" cellpadding="0" cellspacing="0">
  559.         <tbody>
  560.           <tr>
  561.             <td style="text-align: center; vertical-align: top;">
  562.             <table
  563.  style="text-align: left; margin-left: auto; margin-right: auto;"
  564.  border="0" cellpadding="0" cellspacing="0">
  565.               <tbody>
  566.                 <tr>
  567.                   <td nowrap="nowrap">
  568.                   <div class="hidden-div"
  569.  style="height: 30px;"></div>
  570.                   <div style="text-align: center;"><span
  571.  style="font-size: 36px; font-weight: bold; color: rgb(255, 255, 255);">QB64
  572. V 1.3<br>
  573. Out Now!</span></div>
  574.                   </td>
  575.                 </tr>
  576.                 <tr>
  577.                   <td
  578.  style="text-align: center; padding-top: 40px; padding-bottom: 40px;"><a
  579.  href="https://github.com/Galleondragon/qb64/releases/tag/v1.3"
  580.  class="classname" target="_blank" rel="nofollow">Download
  581. &gt;&gt;&gt;</a><br>
  582. &nbsp;<br>
  583.                   <a
  584.  href="https://www.portal.qb64.org/version-1-3-changelog"
  585.  class="classname">Changelog</a><br>
  586.                   <a
  587.  href="https://www.patreon.com/bePatron?u=13795043&amp;redirect_uri=https%3A%2F%2Ffellippepip.wixsite.com%2Fqb64&amp;utm_medium=widget&amp;utm_source=wix"
  588.  target="_blank" rel="nofollow"><img
  589.  class="img-link2"
  590.  style="margin-top: 48px; margin-bottom: 18px; width: 92px; height: 26px;"
  591.  alt="donate" src="btn_donate_LG.gif"></a><br>
  592.                   <span style="text-decoration: underline;"><img
  593.  style="width: 178px; height: 36px;" alt="Patron"
  594.  src="patron.png"></span><a
  595.  href="https://www.patreon.com/bePatron?u=13795043&amp;redirect_uri=https%3A%2F%2Ffellippepip.wixsite.com%2Fqb64&amp;utm_medium=widget&amp;utm_source=wix"><br>
  596.                   </a></td>
  597.                 </tr>
  598.               </tbody>
  599.             </table>
  600.             </td>
  601.           </tr>
  602.           <tr>
  603.             <td class="hidden1"
  604.  style="vertical-align: middle; text-align: center;"><iframe
  605.  src="[youtube]https://www.youtube.com/embed/TBHLAyUtAPI[/youtube]"
  606.  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  607.  allowfullscreen="" frameborder="0" height="175"
  608.  width="250"></iframe> </td>
  609.           </tr>
  610.         </tbody>
  611.       </table>
  612.       <table style="float: none; text-align: center;"
  613.  border="0" cellpadding="0" cellspacing="0">
  614.         <tbody>
  615.           <tr>
  616.             <td class="hidden2"
  617.  style="vertical-align: middle; text-align: center;"><iframe
  618.  src="[youtube]https://www.youtube.com/embed/TBHLAyUtAPI[/youtube]"
  619.  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  620.  allowfullscreen="" frameborder="0" height="400"
  621.  width="650"></iframe> </td>
  622.           </tr>
  623.         </tbody>
  624.       </table>
  625.       </td>
  626.     </tr>
  627.   </tbody>
  628. </table>
  629. </div>
  630. <table id="inline"
  631.  style="text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 10px;"
  632.  border="0" cellpadding="0" cellspacing="0">
  633.   <tbody>
  634.     <tr>
  635.       <td class="padded-hidden"></td>
  636.       <td
  637.  style="padding: 0px 10px 20px; max-width: 660px; vertical-align: top; text-align: center;"><a
  638.  name="about"></a>
  639.       <p class="hidden2"
  640.  style="margin: 20px 0px 0px 10px; font-size: 32px; font-weight: bold;">From
  641. the 80s to Eternity</p>
  642.       <p class="hidden1"
  643.  style="margin: 20px 0px 0px 8px; font-size: 24px; font-weight: bold;">From
  644. the 80s to Eternity</p>
  645.       <p
  646.  style="margin-top: 4px; font-size: 14px; color: rgb(102, 102, 102);">How
  647. BASIC made its
  648. way into the 21st century </p>
  649.       <p
  650.  style="margin-top: 0px; text-align: justify; color: rgb(102, 102, 102);">The
  651. BASIC language has
  652. been the front door into
  653. programming for countless people. That holds true for us. After having
  654. been exposed to
  655. it in the early contacts with computers, most people have developed a
  656. love for programming that not only goes on today but also extends to
  657. the language itself. Contrary to what some may say, having learned
  658. BASIC has given to many the basis for a long-standing career writing
  659. computer software.</p>
  660.       <p style="text-align: justify; color: rgb(102, 102, 102);">An
  661. Australian
  662. guy
  663. once decided that using
  664. emulation to be able to run
  665. QuickBASIC/QBasic in modern systems was a drag and decided to change
  666. that, and thus QB64 was born (originally as QB32). What it does is
  667. translate BASIC code into C++, which then gets compiled into native
  668. binaries for Windows, Linux and macOS. </p>
  669.       <p style="text-align: justify; color: rgb(102, 102, 102);">QB64
  670. not only
  671. allows
  672. for older programs written in
  673. BASIC to run smoothly in today's modern systems but it also allows for
  674. modern
  675. software development as it extends the language to use advanced
  676. features available in operating systems nowadays as well as OpenGL,
  677. which is the library used for rendering across different platforms.</p>
  678.       </td>
  679.       <td class="padded-hidden"></td>
  680.     </tr>
  681.   </tbody>
  682. </table>
  683. <table id="inline"
  684.  style="text-align: center; margin-left: auto; margin-right: auto; border-collapse: collapse;"
  685.  border="0" cellpadding="0">
  686.   <tbody>
  687.     <tr>
  688.       <td class="padded-hidden"></td>
  689.       <td style="vertical-align: top; text-align: center;">
  690.       <table
  691.  style="margin-left: auto; margin-right: auto; border-collapse: collapse; margin-bottom: 30px;"
  692.  border="0" cellpadding="0" cellspacing="0">
  693.         <tbody>
  694.           <tr>
  695.             <td class="hidden-horz-menu-and-slide-show-top-margin"><!-- Required for IE, which doesn't take height in td tags. -->
  696.             <div style="display: block; height: 96px;">&nbsp;</div>
  697.             </td>
  698.           </tr>
  699.           <tr>
  700.             <td
  701.  style="text-align: center; vertical-align: bottom; padding-bottom: 10px;">
  702.             <table
  703.  style="border-style: ridge; border-color: rgb(0, 0, 0); margin-left: auto; background-color: rgb(0, 0, 0); border-collapse: collapse;"
  704.  border="12" cellpadding="0" cellspacing="0">
  705.               <tbody>
  706.                 <tr>
  707.                   <td
  708.  style="vertical-align: middle; text-align: center;">
  709.                   <table
  710.  style="margin-top: 12px; margin-bottom: 16px; background-color: rgb(255, 255, 255); width: 100%; text-align: left;"
  711.  border="0" cellpadding="0" cellspacing="0">
  712.                     <tbody>
  713.                       <tr>
  714.                         <td
  715.  style="width: 20px; background-color: rgb(0, 0, 0);">&nbsp;&nbsp;</td>
  716.                         <td
  717.  style="vertical-align: middle; text-align: center;">
  718.                         <div class="slideshow-container">
  719.                         <div class="mySlides fade"><img
  720.  src="qb64-ide.jpg" style="height: 190px; width: 270px;"></div>
  721.                         <div class="mySlides fade"><img
  722.  src="qb64-slide-2.jpg" style="height: 190px; width: 270px;"></div>
  723.                         <div class="mySlides fade"><img
  724.  src="qb64-slide-3.jpg" style="height: 190px; width: 270px;">
  725.                         </div>
  726.                         <a class="prev"
  727.  onclick="plusSlides(-1)">❮</a> <a class="next"
  728.  onclick="plusSlides(1)">❯</a> </div>
  729.                         </td>
  730.                         <td
  731.  style="width: 20px; background-color: rgb(0, 0, 0);">&nbsp;&nbsp;</td>
  732.                       </tr>
  733.                     </tbody>
  734.                   </table>
  735.                   </td>
  736.                 </tr>
  737.               </tbody>
  738.             </table>
  739.             </td>
  740.           </tr>
  741.         </tbody>
  742.       </table>
  743.       </td>
  744.       <td class="padded-hidden"></td>
  745.     </tr>
  746.   </tbody>
  747. </table>
  748. <table style="text-align: left; width: 100%;" border="0"
  749.  cellpadding="0" cellspacing="0">
  750.   <tbody>
  751.     <tr>
  752.       <td align="center" valign="middle"><a
  753.  name="download"></a>
  754.       <table
  755.  style="padding-top: 50px; padding-bottom: 70px; text-align: left; background-color: rgb(192, 192, 192); border-collapse: separate; width: 100%;"
  756.  border="0" cellpadding="12" cellspacing="18">
  757.         <tbody>
  758.           <tr>
  759.             <td colspan="1" rowspan="1"
  760.  style="vertical-align: top; text-align: center; width: 50%;"><a
  761.  name="download"></a> <img
  762.  style="width: 125px; height: 82px;" alt="download"
  763.  src="download.png">
  764.             <p
  765.  style="font-size: 30px; font-weight: bold; margin-top: 20px; margin-bottom: 0px;">DOWNLOAD</p>
  766.             <p
  767.  style="margin-top: 16px; margin-bottom: 40px; color: rgb(52, 52, 52);">You
  768. can either get the stable build or help us beta test the
  769. development build.</p>
  770.             <a
  771.  style="margin-bottom: 16px; margin-left: 20px; margin-right: 20px;"
  772.  href="https://github.com/Galleondragon/qb64/releases/tag/v1.3"
  773.  class="classname" target="_blank" rel="nofollow">QB64
  774. V1.3</a><a style="margin-left: 20px; margin-right: 20px;"
  775.  href="https://www.qb64.org/devbuilds.php" class="classname">QB64
  776. Dev Build</a> </td>
  777.           </tr>
  778.           <tr>
  779.             <td colspan="1" rowspan="1" align="center"
  780.  valign="top">
  781.             <div style=""><span style="font-size: 24px;">Historical
  782. Versions<br>
  783.             </span>
  784.             <p
  785.  style="margin-top: 16px; margin-bottom: 0px; color: rgb(52, 52, 52);">Collection
  786. of old QB64 versions for historical
  787. purposes. </p>
  788.             </div>
  789.             </td>
  790.           </tr>
  791.           <tr>
  792.             <td colspan="1" rowspan="1" align="center"
  793.  valign="top"><a
  794.  href="https://www.qb64.org/historical_qb64/" class="classname">Go
  795. to Archive</a> </td>
  796.           </tr>
  797.         </tbody>
  798.       </table>
  799.       <p
  800.  style="font-size: 30px; font-weight: bold; margin-top: 30px; margin-bottom: 10px;">More
  801. QB64 Team Software</p>
  802.       <span style="color: rgb(102, 102, 102);">Great
  803. companions to QB64</span>
  804.       <table
  805.  style="text-align: center; margin-top: 20px; margin-left: auto; margin-right: auto;"
  806.  border="0" cellpadding="0" cellspacing="0">
  807.         <tbody>
  808.           <tr>
  809.             <td align="center" valign="middle">
  810.             <table id="inline"
  811.  style="text-align: left; margin-left: auto; margin-right: auto;"
  812.  border="0" cellpadding="0" cellspacing="0">
  813.               <tbody>
  814.                 <tr>
  815.                   <td class="padded-hidden"></td>
  816.                   <td
  817.  style="padding: 0px 10px; vertical-align: middle; text-align: center; min-width: 250px;">
  818.                   <a href="https://www.qb64.org/vwatch"
  819.  target="_blank"><img class="img-link" alt="VWatch"
  820.  src="beehive.png"></a>
  821.                   <p
  822.  style="text-align: center; font-size: 30px; margin-top: 10px;"><a
  823.  href="https://www.qb64.org/vwatch" target="_blank"
  824.  style="color: rgb(102, 102, 102);">VWatch</a></p>
  825.                   <div
  826.  style="max-width: 300px; color: rgb(102, 102, 102); text-align: justify;">The
  827. debugging features you loved using in QuickBASIC are now available
  828. to help you squash those hard-to-find bugs in your projects. Made with
  829. QB64.</div>
  830.                   </td>
  831.                   <td class="padded-hidden"></td>
  832.                 </tr>
  833.               </tbody>
  834.             </table>
  835.             <table id="inline"
  836.  style="text-align: left; margin-left: auto; margin-right: auto;"
  837.  border="0" cellpadding="0" cellspacing="0">
  838.               <tbody>
  839.                 <tr>
  840.                   <td class="padded-hidden"></td>
  841.                   <td
  842.  style="padding: 0px 10px; vertical-align: middle; text-align: center; min-width: 250px;">
  843.                   <a href="https://www.qb64.org/inform"
  844.  target="_blank"><img class="img-link" alt="InForm"
  845.  src="Application-icon.png"></a>
  846.                   <p
  847.  style="text-align: center; font-size: 30px; margin-top: 10px;"><a
  848.  href="https://www.qb64.org/inform" target="_blank"
  849.  style="color: rgb(102, 102, 102);">Inform</a></p>
  850.                   <div
  851.  style="max-width: 300px; color: rgb(102, 102, 102); text-align: justify;">Design
  852. feature-rich graphical interfaces that blend in perfectly with
  853. today's Operating Systems all without leaving BASIC behind. Made with
  854. QB64.</div>
  855.                   </td>
  856.                   <td class="padded-hidden"></td>
  857.                 </tr>
  858.               </tbody>
  859.             </table>
  860.             </td>
  861.           </tr>
  862.         </tbody>
  863.       </table>
  864.       </td>
  865.     </tr>
  866.   </tbody>
  867. </table>
  868. <a name="utilities"></a>
  869. <p
  870.  style="font-size: 30px; font-weight: bold; margin-top: 60px; margin-bottom: 10px;">Utilities</p>
  871. <p
  872.  style="margin-top: 0px; margin-bottom: 20px; color: rgb(102, 102, 102);">It's
  873. all about
  874. sharing.</p>
  875. <div class="pageformat">
  876. <table
  877.  style="width: 90%; text-align: center; margin-top: 12px; margin-left: auto; margin-right: auto;"
  878.  border="0" cellpadding="0" cellspacing="0">
  879.   <tbody>
  880.     <tr>
  881.       <td align="center" valign="middle">
  882.       <table id="inline"
  883.  style="text-align: left; margin-left: auto; margin-right: auto;"
  884.  border="0" cellpadding="0" cellspacing="0">
  885.         <tbody>
  886.           <tr>
  887.             <td class="padded-hidden"></td>
  888.             <td class="hidden2"
  889.  style="vertical-align: middle; text-align: center; min-width: 300px;">
  890.             <a href="https://www.qb64.org/basbin"
  891.  target="_blank"><img class="img-link"
  892.  style="margin-top: 10px;" alt="BASBin" src="basbin.png"></a></td>
  893.             <td class="padded-hidden"></td>
  894.           </tr>
  895.         </tbody>
  896.       </table>
  897.       <table id="inline"
  898.  style="text-align: left; margin-left: auto; margin-right: auto;"
  899.  border="0" cellpadding="0" cellspacing="0">
  900.         <tbody>
  901.           <tr>
  902.             <td class="padded-hidden"></td>
  903.             <td style="vertical-align: middle; text-align: center;">
  904.             <p
  905.  style="text-align: center; font-size: 24px; margin-top: 10px; margin-bottom: 10px;"><a
  906.  href="https://www.qb64.org/basbin" target="_blank"
  907.  style="color: rgb(102, 102, 102);">BASBin</a></p>
  908.             <table
  909.  style="text-align: left; margin-left: auto; margin-right: auto; max-width: 660px;"
  910.  border="0" cellpadding="0" cellspacing="0">
  911.               <tbody>
  912.                 <tr>
  913.                   <td
  914.  style="vertical-align: middle; text-align: center;">
  915.                   <div
  916.  style="color: rgb(102, 102, 102); text-align: justify; padding-left: 5px; padding-right: 5px;">Need
  917. to
  918. share a code snippet but don't need all the fuss of traditional
  919. online tools? <br>
  920. &nbsp; <br>
  921. BASBin is what you're after. Just paste code, hit the button, and share
  922. the link away.<br>
  923. &nbsp; <br>
  924. Files are wiped regularly, so treat it as the temporary storage it is,
  925. OK?</div>
  926.                   </td>
  927.                 </tr>
  928.               </tbody>
  929.             </table>
  930.             </td>
  931.             <td class="padded-hidden"></td>
  932.           </tr>
  933.         </tbody>
  934.       </table>
  935.       <table
  936.  style="text-align: center; margin-top: 40px; margin-left: auto; margin-right: auto;"
  937.  border="0" cellpadding="0" cellspacing="0">
  938.         <tbody>
  939.           <tr>
  940.             <td align="center" valign="middle">
  941.             <table id="inline"
  942.  style="text-align: left; margin-left: auto; margin-right: auto;"
  943.  border="0" cellpadding="0" cellspacing="0">
  944.               <tbody>
  945.                 <tr>
  946.                   <td class="padded-hidden"></td>
  947.                   <td
  948.  style="vertical-align: middle; text-align: center;">
  949.                   <p
  950.  style="text-align: center; font-size: 24px; margin-top: 10px; margin-bottom: 10px;"><a
  951.  href="https://www.qb64.org/binbin" target="_blank"
  952.  style="color: rgb(102, 102, 102);">BINBin</a></p>
  953.                   <table
  954.  style="text-align: left; margin-left: auto; margin-right: auto; margin-bottom: 0px; max-width: 660px;"
  955.  border="0" cellpadding="0" cellspacing="0">
  956.                     <tbody>
  957.                       <tr>
  958.                         <td
  959.  style="vertical-align: middle; text-align: center;">
  960.                         <div
  961.  style="padding: 0px 5px 20px; text-align: justify; color: rgb(102, 102, 102);">Or
  962. maybe you need to share an image, or other type of binary file. If
  963. that's the case, BINBin is for you.
  964. ​<br>
  965. &nbsp;<br>
  966. Select the file to share, hit the button, and share the link. Files are
  967. wiped regularly, so treat it as the temporary storage it is,
  968. OK?</div>
  969.                         </td>
  970.                       </tr>
  971.                     </tbody>
  972.                   </table>
  973.                   </td>
  974.                   <td class="padded-hidden"></td>
  975.                 </tr>
  976.               </tbody>
  977.             </table>
  978.             <table id="inline"
  979.  style="text-align: left; margin-left: auto; margin-right: auto;"
  980.  border="0" cellpadding="0" cellspacing="0">
  981.               <tbody>
  982.                 <tr>
  983.                   <td class="padded-hidden"></td>
  984.                   <td class="hidden2"
  985.  style="vertical-align: middle; text-align: center; min-width: 300px;">
  986.                   <a href="https://www.qb64.org/binbin"
  987.  target="_blank"><img class="img-link"
  988.  style="margin-top: 30px;" alt="BINbin" src="binbin.png"></a></td>
  989.                   <td class="padded-hidden"></td>
  990.                 </tr>
  991.               </tbody>
  992.             </table>
  993.             </td>
  994.           </tr>
  995.         </tbody>
  996.       </table>
  997.       <script>
  998. var slideIndex = 1;
  999. showSlides(slideIndex);
  1000. function plusSlides(n) {
  1001. showSlides(slideIndex += n);
  1002. }
  1003. function currentSlide(n) {
  1004. showSlides(slideIndex = n);
  1005. }
  1006. function showSlides(n) {
  1007. var i;
  1008. var slides = document.getElementsByClassName("mySlides");
  1009. var dots = document.getElementsByClassName("dot");
  1010. if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length}
  1011. for (i = 0; i < slides.length; i++) {
  1012. slides[i].style.display = "none"; }
  1013. for (i = 0; i < dots.length; i++) {
  1014. dots[i].className = dots[i].className.replace(" active", "");
  1015. }
  1016. slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";
  1017. }
  1018.       </script>
  1019.       </td>
  1020.     </tr>
  1021.   </tbody>
  1022. </table>
  1023. </div>
  1024. <table
  1025.  style="width: 100%; text-align: center; margin-top: 12px; margin-left: auto; margin-right: auto;"
  1026.  border="0" cellpadding="0" cellspacing="0">
  1027.   <tbody>
  1028.     <tr>
  1029.       <td align="center" valign="middle">
  1030.       <div class="hidden1"
  1031.  style="background-color: rgb(10, 40, 60);">
  1032.       <table
  1033.  style="margin-top: 30px; width: 75%; max-width: 300px; text-align: left; margin-left: auto; margin-right: auto; background-color: rgb(10, 40, 60);"
  1034.  border="0" cellpadding="10" cellspacing="10">
  1035.         <tbody>
  1036.           <tr>
  1037.             <td
  1038.  style="text-align: center; width: 25%; vertical-align: middle;"><span
  1039.  style="font-size: 14px; color: rgb(255, 255, 255);">
  1040.             <p>QB64 created by Galleon</p>
  1041. QB64 and QB64.org<br>
  1042. maintained by the QB64 Team<br>
  1043. &nbsp;<br>
  1044.             </span><span
  1045.  style="font-size: 30px; color: rgb(255, 255, 255);"><span>✉&nbsp;</span><span
  1046.  style="font-size: 14px; color: rgb(255, 255, 255);"><a
  1047.  style="color: rgb(255, 255, 255); text-decoration: none;"
  1048.  href="mailto:mailto:contact@qb64.org">contact@qb64.org</a></span></span></td>
  1049.           </tr>
  1050.           <tr>
  1051.             <td align="center" valign="middle">
  1052.             <table
  1053.  style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;"
  1054.  border="0" cellpadding="0" cellspacing="8">
  1055.               <tbody>
  1056.                 <tr>
  1057.                   <td style="vertical-align: top; text-align: right;">
  1058.                   <a href="https://facebook.com/qb64team"
  1059.  target="_blank"><img class="img-link"
  1060.  alt="facebook" src="facebook.png"></a></td>
  1061.                   <td
  1062.  style="vertical-align: top; text-align: center;"> <a
  1063.  href="https://twitter.com/qb64team" target="_blank"><img
  1064.  class="img-link" alt="twitter" src="twitter.png"></a></td>
  1065.                   <td style="vertical-align: top; text-align: left;">
  1066.                   <a href="https://discord.gg/mwfWyQq"
  1067.  target="_blank"><img class="img-link" alt="discord"
  1068.  src="discord.png"></a></td>
  1069.                 </tr>
  1070.                 <tr>
  1071.                   <td colspan="3" rowspan="1"
  1072.  align="center" valign="top"><a
  1073.  href="https://seal.godaddy.com/verifySeal?sealID=s7O1ji22cenVtIwnfCl7clR4i4ReipQtxu6jPditkUkv2RadKqB3DpgJrnuL"
  1074.  onclick="return popup(this, 'info')" target="_blank"
  1075.  rel="nofollow"><img class="img-link"
  1076.  style="margin-top: 12px; width: 131px; height: 32px;"
  1077.  alt="GoDaddy" src="godaddy.gif"></a> </td>
  1078.                 </tr>
  1079.               </tbody>
  1080.             </table>
  1081.             <br>
  1082.             <br>
  1083.             <span style="font-size: 14px; color: rgb(255, 255, 255);">&copy;
  1084. 2019 by QB64 Team<br>
  1085. &nbsp;<br>
  1086. &nbsp;<br>
  1087.             </span></td>
  1088.           </tr>
  1089.         </tbody>
  1090.       </table>
  1091.       </div>
  1092.       <div class="hidden2"
  1093.  style="background-color: rgb(10, 40, 60);">
  1094.       <table
  1095.  style="margin-top: 50px; width: 75%; text-align: left; margin-left: auto; margin-right: auto; background-color: rgb(10, 40, 60);"
  1096.  border="0" cellpadding="10" cellspacing="10">
  1097.         <tbody>
  1098.           <tr>
  1099.             <td
  1100.  style="text-align: center; width: 25%; vertical-align: middle;"><img
  1101.  style="margin-top: 0px; margin-right: 0px; width: 150px; height: 150px;"
  1102.  alt="QB64-1-3-logo" src="QB64-1-3-logo-transparency.png">
  1103.             </td>
  1104.             <td
  1105.  style="text-align: center; width: 25%; vertical-align: middle;"><span
  1106.  style="font-size: 14px; color: rgb(255, 255, 255);">
  1107.             <p>QB64 created by Galleon</p>
  1108. QB64 and QB64.org maintained by the QB64 Team</span> </td>
  1109.             <td
  1110.  style="text-align: center; width: 25%; vertical-align: middle;"><span
  1111.  style="font-size: 14px; color: rgb(255, 255, 255);"><a
  1112.  style="color: rgb(255, 255, 255); text-decoration: none;"
  1113.  href="mailto:mailto:contact@qb64.org"><span
  1114.  style="font-size: 30px; line-height: 36px;">✉&nbsp;</span>contact@qb64.org</a>
  1115.             </span></td>
  1116.             <td
  1117.  style="text-align: center; width: 25%; vertical-align: middle;">
  1118.             <table
  1119.  style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;"
  1120.  border="0" cellpadding="0" cellspacing="8">
  1121.               <tbody>
  1122.                 <tr>
  1123.                   <td align="center" valign="top"> <a
  1124.  href="https://facebook.com/qb64team" target="_blank"><img
  1125.  class="img-link" alt="facebook" src="facebook.png"></a>
  1126.                   </td>
  1127.                   <td align="center" valign="top"> <a
  1128.  href="https://twitter.com/qb64team" target="_blank"><img
  1129.  class="img-link" alt="twitter" src="twitter.png"></a></td>
  1130.                   <td align="center" valign="top"> <a
  1131.  href="https://discord.gg/mwfWyQq" target="_blank"><img
  1132.  class="img-link" alt="discord" src="discord.png"></a></td>
  1133.                   <td
  1134.  style="vertical-align: top; text-align: center; width: 50%;"></td>
  1135.                 </tr>
  1136.                 <tr>
  1137.                   <td colspan="4" rowspan="1"
  1138.  align="center" valign="top"><a
  1139.  href="https://seal.godaddy.com/verifySeal?sealID=s7O1ji22cenVtIwnfCl7clR4i4ReipQtxu6jPditkUkv2RadKqB3DpgJrnuL"
  1140.  onclick="return popup(this, 'info')" target="_blank"
  1141.  rel="nofollow"><img class="img-link"
  1142.  style="margin-top: 12px; width: 131px; height: 32px;"
  1143.  alt="GoDaddy" src="godaddy.gif"></a> </td>
  1144.                 </tr>
  1145.               </tbody>
  1146.             </table>
  1147.             </td>
  1148.           </tr>
  1149.           <tr>
  1150.             <td colspan="4" rowspan="1" align="center"
  1151.  valign="top"><span
  1152.  style="font-size: 14px; color: rgb(255, 255, 255);">&copy;
  1153. 2019 by QB64 Team</span></td>
  1154.           </tr>
  1155.         </tbody>
  1156.       </table>
  1157.       </div>
  1158.       </td>
  1159.     </tr>
  1160.   </tbody>
  1161. </table>
  1162. </div>
  1163. <!-- =============================================== Fixed Footer ======================================== -->
  1164. <div class="navbar">
  1165. <table class="hidden1"
  1166.  style="min-width: 320px; text-align: center; margin-left: auto; margin-right: auto; border-collapse: collapse;"
  1167.  border="0" cellpadding="0" cellspacing="0">
  1168.   <tbody>
  1169.     <tr>
  1170.       <td> <a href="htpps://www.facebook.com">
  1171.       <table class="mobile-image-table" cellpadding="0">
  1172.         <tbody>
  1173.           <tr>
  1174.             <td class="mobile-icons-image-row"><img
  1175.  src="facebook-mobile.png" alt="facebook"
  1176.  class="mobile-icons-image"> </td>
  1177.           </tr>
  1178.           <tr>
  1179.             <td class="mobile-icons-text-row">Facebook</td>
  1180.           </tr>
  1181.         </tbody>
  1182.       </table>
  1183.       </a> <a href="htpps://www.twitter.com">
  1184.       <table class="mobile-image-table" cellpadding="0">
  1185.         <tbody>
  1186.           <tr>
  1187.             <td class="mobile-icons-image-row"><img
  1188.  class="mobile-icons-image" alt="twitter"
  1189.  src="twitter-mobile.png"> </td>
  1190.           </tr>
  1191.           <tr>
  1192.             <td class="mobile-icons-text-row">Twitter&nbsp;</td>
  1193.           </tr>
  1194.         </tbody>
  1195.       </table>
  1196.       </a> <a href="http://www.qb64.org/forum">
  1197.       <table class="mobile-image-table" cellpadding="0">
  1198.         <tbody>
  1199.           <tr>
  1200.             <td class="mobile-icons-image-row"><img
  1201.  class="mobile-icons-image" alt="forum"
  1202.  src="forum-mobile.png"> </td>
  1203.           </tr>
  1204.           <tr>
  1205.             <td class="mobile-icons-text-row">Forum</td>
  1206.           </tr>
  1207.         </tbody>
  1208.       </table>
  1209.       </a><a href="https://www.qb64.org/ircpage.html">
  1210.       <table class="mobile-image-table" cellpadding="0">
  1211.         <tbody>
  1212.           <tr>
  1213.             <td class="mobile-icons-image-row"><img
  1214.  class="mobile-icons-image" alt="chat"
  1215.  src="chat-mobile.png"> </td>
  1216.           </tr>
  1217.           <tr>
  1218.             <td class="mobile-icons-text-row">Chatroom</td>
  1219.           </tr>
  1220.         </tbody>
  1221.       </table>
  1222.       </a> </td>
  1223.     </tr>
  1224.   </tbody>
  1225. </table>
  1226. </div>
  1227. <script>
  1228. var slideIndex = 1;
  1229. showSlides(slideIndex);
  1230. function plusSlides(n) {
  1231. showSlides(slideIndex += n);
  1232. }
  1233. function currentSlide(n) {
  1234. showSlides(slideIndex = n);
  1235. }
  1236. function showSlides(n) {
  1237. var i;
  1238. var slides = document.getElementsByClassName("mySlides");
  1239. var dots = document.getElementsByClassName("dot");
  1240. if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length}
  1241. for (i = 0; i < slides.length; i++) {
  1242. slides[i].style.display = "none"; }
  1243. for (i = 0; i < dots.length; i++) {
  1244. dots[i].className = dots[i].className.replace(" active", "");
  1245. }
  1246. slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";
  1247. }
  1248. /* Popup Window ------------------------ */
  1249. function popup (mylink, windowname)
  1250. {
  1251. if (! window.focus)return true;
  1252. var href;
  1253. if (typeof(mylink) == 'string')
  1254. href=mylink;
  1255. else
  1256. href=mylink.href;
  1257. window.open(href, windowname, 'width=475,height=340,left=10,top=10,location=center,resizable=yes,scrollbars=yes,toolbar=no');
  1258. return false;
  1259. }
  1260. </script>
  1261. </body>
  1262. </html>
  1263.  

Here is a zip file that contains the artwork and the html file. The CSS style is included in the head. Just unzip with 7-zip to any folder. The images are called from that folder, but they could easily be switched and called fro an image subfolder.

I've only viewed this if Firefox. Mobile devices, Edge, Explorer, Chrome, Apple, Opera, etc. should be tested if you are interested in using the code.

  [ This attachment cannot be displayed inline in 'Print Page' view ]  

Pete

Edited: Updated to include responsive resizing format for mobile devices. Open in Firefox browser fullscreen and resize it laterally to approximate tablet and cell phone sizes. Content will adjust, accordingly. Click the "hamburger" symbol for menu when cell phone / tablet size.

Edited: Updated some cross-browser compatibility fixes.

Edited: Added the three dot scrolling feature to version 19, which is the version in the copy/paste code section. Version 18 in the zip file is the same, but without the three dot navigation feature.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: bplus on December 01, 2019, 07:19:20 pm
Wow Pete!

(I have no idea how much work that was?)

Steve's fine too, even without the phallic symbols in the cosmos :D
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: FellippeHeitor on December 01, 2019, 07:25:57 pm
@Pete, I'll check it out now.

@bplus: did you find a dick in our home page?
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: SMcNeill on December 01, 2019, 07:26:39 pm
And that's a pretty dang good approximation of the site there, Pete!  Like you, I couldn't grab some of the background images and such, so when I had to replace them, I figured I'd just tweak things a bit to make it a little more to my personal style/liking. 

I've been playing around, on and off, with the concept for most of the day now, and I'm pretty happy with what I've got, and I'll probably be using it as a personal "QB64 home page" for my own little experimental server.  See what you think of it, and feel free to offer any suggestions.  (And pass me the link to the network54 site; I'll add it to mine for my own personal reference as well, under the "Social" tab.)  ;)

http://smcneill.online/qb64/qb64.html -- You can give it a test run here, if you're interested.   
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: bplus on December 01, 2019, 07:32:05 pm
Fellippe, did you try RhoSigma's link / suggestion for background material for Steve? (reply #13)
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: FellippeHeitor on December 01, 2019, 07:34:17 pm
@Pete: that's really close to the current layout, man. Thanks for taking time as well.

@Steve: again, thanks for the effort, it's much appreciated.

@bplus: I didn't, will do. See, the point is not giving it a new face just yet. The current layout is not even 8 months old and it matches our twitter, facebook, youtube materials as well.

BTW, here's the bg image: https://www.qb64.org/images/bg.jpg
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 01, 2019, 08:21:24 pm
OK, I modified my post and zip file to include the background image. If you already have that background image in the folder with the other artwork I posted, just copy the code from the edited post, and you won't have to bother with the 7-zip again.

Pete
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 02, 2019, 06:15:01 am
It's been awhile since I made slide-show like stuff, but here is a way to duplicate the manual part of the slides on the homepage. I had to make 3 slides up, as I don't have the ones in the hompage slide viewer...

Code: Text: [Select]
  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4.   <meta content="text/html; charset=ISO-8859-1"
  5.  http-equiv="content-type">
  6.   <meta name="viewport"
  7.  content="width=device-width, initial-scale=1.0">
  8.   <title>qb64-responsive-webpage</title>
  9.   <style type="text/css">
  10. html {
  11. scroll-behavior: smooth;
  12. }
  13. body {
  14. margin: 0pt;
  15. }
  16. #navdots {
  17. font-size: 30px;
  18. position: fixed;
  19. top: 130px;
  20. right: 16px;
  21. }
  22. #navdots a:link {
  23. color: rgba(33, 44, 63, .6);
  24. text-decoration: none;
  25. }
  26. /* visited link */
  27. #navdots a:visited {
  28. color: rgba(33, 44, 63, .6);
  29. }
  30. /* mouse over link */
  31. #navdots a:hover {
  32. color: rgba(33, 44, 63, .3);
  33. }
  34. /* selected link */
  35. #navdots a:active {
  36. color: black;
  37. }
  38. /* Horizontal Links Menu for Desktop / Laptop Systems ------------------------ */
  39. #nav, #nav ul {
  40. /* Top border */
  41. float: left;
  42. width: 100%;
  43. list-style: none;
  44. line-height: 2em;
  45. color: white;
  46. font-weight: bold;
  47. padding: 0;
  48. border: solid #eda;
  49. border-width: 0px 0;
  50. margin: 0;
  51. }
  52. #nav a {
  53. display: inline;
  54. width: 9.5em;
  55. color: #FFFFFF;
  56. text-decoration: none;
  57. padding: .33em .25em;
  58. }
  59. #nav li {
  60. /* Spaces each link header */
  61. float: left;
  62. padding-left: 0em;
  63. width: 7em;
  64. }
  65. #nav li ul {
  66. /* Width of the drop-down menu border box. */
  67. position: absolute;
  68. left: -999em;
  69. height: auto;
  70. width: 10.9em;
  71. font-weight: normal;
  72. border-width: .25em;
  73. text-align: left;
  74. margin: 0;
  75. background: rgb(255, 106, 0);
  76. }
  77. /* Width of highlighted links in drop-down menu. */
  78. #nav li li {
  79. padding: .25em;
  80. width: 10.4em;
  81. }
  82. #nav li:hover ul {
  83. left: auto;
  84. color: rgb(255, 106, 0);
  85. }
  86. #nav li:hover {
  87. color: rgb(255, 106, 0);
  88. background: blue;
  89. }
  90. #content {
  91. clear: left;
  92. }
  93. #content a:hover {
  94. color: rgb(255, 106, 0);
  95. text-decoration: none;
  96. }
  97. /* Vertical Links Menu for Mobile / Tablet Devices ------------------------ */
  98. #mobile-nav a {
  99. width: 9.5em;
  100. color: black;
  101. text-decoration: none;
  102. padding: 0em .45em;
  103. line-height: 50px;
  104. }
  105. #mobile-nav, #mobile-nav ul {
  106. /* Top border */
  107. width: 100%;
  108. list-style: none;
  109. line-height: 2em;
  110. color: white;
  111. font-weight: bold;
  112. padding: 0;
  113. border: solid #eda;
  114. border-width: 0px 0;
  115. margin: 0;
  116. }
  117. #mobile-nav li ul {
  118. /* Width of the drop-down menu border box. */
  119. position: absolute;
  120. left: -999em;
  121. height: auto;
  122. width: 10.9em;
  123. font-weight: normal;
  124. border-width: .25em;
  125. text-align: left;
  126. margin: 0;
  127. background: rgb(255, 106, 0);
  128. }
  129. /* Width of highlighted links in drop-down menu. */
  130. #mobile-nav li li {
  131. padding: .25em;
  132. width: 10.4em;
  133. }
  134. #mobile-nav li:hover, #mobile-nav li:focus, #mobile-nav li:active {
  135. color: rgb(255, 106, 0);
  136. background: blue;
  137. }
  138. #mobile-nav li:hover ul, #mobile-nav li:focus ul, #mobile-nav li:active ul{
  139. left: 7.2em;
  140. display: inline;
  141. /* Use for non-image hamburger: color: rgb(255, 106, 0); */
  142. }
  143. /* Mobile / Tablet Wrapper */
  144. #mobile-nav {
  145. width: 100%;
  146. /* background: #000; */
  147. /* Navigation bar sticky on top.
  148. position: sticky;
  149. top: 0;
  150. */
  151. }
  152. /* Hide Hamburger Menu Symbol */
  153. #mobile-nav label, #hamburger {
  154. display: none;
  155. }
  156. /* Mobile Tablet Resolutions. Display only when resolution is 1150px or less. */
  157. @media screen and (min-width: 1150px){
  158. #mobile-nav table {
  159. display: none;
  160. }
  161. }
  162. @media screen and (max-width: 1150px){
  163. /* Show Hamburger */
  164. #mobile-nav label {
  165. display: inline-block;
  166. position:absolute; left: 290px; top: 10px;
  167. /* color: #fff; background: #a02620; Again, for non-image hamburger menu.
  168. font-style: normal;
  169. font-size: 1.2em;
  170. padding: 10px; */
  171. }
  172. /* Toggle show/hide menu on checkbox click */
  173. #mobile-nav table {
  174. display: none;
  175. }
  176. #mobile-nav input:checked ~ table {
  177. display: block;
  178. }
  179. }
  180. /* Buttons ----------------------------- */
  181. .classname {
  182. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
  183. background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
  184. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
  185. background-color:#ffc477;
  186. -webkit-border-top-left-radius:0px;
  187. -moz-border-radius-topleft:0px;
  188. border-top-left-radius:0px;
  189. -webkit-border-top-right-radius:0px;
  190. -moz-border-radius-topright:0px;
  191. border-top-right-radius:0px;
  192. -webkit-border-bottom-right-radius:0px;
  193. -moz-border-radius-bottomright:0px;
  194. border-bottom-right-radius:0px;
  195. -webkit-border-bottom-left-radius:0px;
  196. -moz-border-radius-bottomleft:0px;
  197. border-bottom-left-radius:0px;
  198. text-indent:0;
  199. border:1px solid #eeb44f;
  200. display:inline-block;
  201. color:#ffffff;
  202. font-family:Arial;
  203. font-size:22px;
  204. font-weight:bold;
  205. font-style:normal;
  206. height:40px;
  207. line-height:40px;
  208. width:180px;
  209. text-decoration:none;
  210. text-align:center;
  211. }.classname:hover {
  212. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
  213. background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
  214. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
  215. background-color:#fb9e25;
  216. }.classname:active {
  217. position:relative;
  218. top:1px;
  219. }
  220. /* Responsive Actions ------------------ */
  221. .pageformat{
  222. margin: 0;
  223. text-align: center;
  224. font-family: segoe UI semibold;
  225. font-size: 18px;
  226. margin: 0;
  227. /* Off-white page. Uses a bright white footer bar coded elsewhere. */
  228. background-color: #f8f8ff;
  229. }
  230. /* Display is inclusive of all screen width resolutions 200px to 1720 px. */
  231. @media screen and (max-width: 1720px) {
  232. body {
  233. padding: 0;
  234. min-width: 200px;
  235. max-width: 1720px;
  236. width: 100%;
  237. }
  238. }
  239. @media screen and (min-width: 680px) { .hidden1 {
  240. display: none;
  241. }
  242. }
  243. /* Under 680px resolutiion hidden2 elements disappear. */
  244. @media screen and (max-width: 680px) { .hidden2 {
  245. display: none;
  246. }
  247. }
  248. /* Under 1150px resolutiion hidden2 and hidden-div elements disappear. */
  249. @media screen and (max-width: 1150px) { .hidden-horz-menu-and-slide-show-top-margin {
  250. display: none;
  251. clear: both;
  252. }
  253. }
  254. @media screen and (min-width: 1150px) { .hidden-div {
  255. display: none;
  256. }
  257. }
  258. /* Over 680 resolution hidden-div elements disappear:
  259. Keeps text for QB64 header below top of screen when present and directly under icon on smaller screens. */
  260. @media screen and (max-width: 680px) { .hidden-div {
  261. display: none;
  262. }
  263. }
  264. /* Slide Show -------------------------- */
  265. * {box-sizing: border-box}
  266. .mySlides {display: none}
  267. img {vertical-align: middle;}
  268. /* Slideshow container */
  269. .slideshow-container {
  270. max-width: 500px;
  271. position: relative;
  272. margin: auto;
  273. }
  274. /* Next and previous buttons */
  275. .prev, .next {
  276. cursor: pointer;
  277. position: absolute;
  278. top: 53%;
  279. width: auto;
  280. padding: 3px;
  281. margin-top: -22px;
  282. color: white;
  283. background: rgb(255, 106, 0);
  284. font-weight: bold;
  285. font-size: 18px;
  286. transition: 0.6s ease;
  287. border-radius: 0 3px 3px 0;
  288. user-select: none;
  289. }
  290. /* Position "next button" to the right */
  291. .next {
  292. left: 271px;
  293. border-radius: 3px 0 0 3px;
  294. }
  295. .prev {
  296. right: 271px;
  297. border-radius: 3px 0 0 3px;
  298. }
  299. /* On hover, add a black background color with a little bit see-through */
  300. .prev:hover, .next:hover {
  301. background-color: rgba(0,0,0,0.8);
  302. }
  303. /* Fading animation */
  304. .fade {
  305. -webkit-animation-name: fade;
  306. -webkit-animation-duration: 1.5s;
  307. animation-name: fade;
  308. animation-duration: 1.5s;
  309. }
  310. @-webkit-keyframes fade {
  311. from {opacity: .4} to {opacity: 1}
  312. }
  313. @keyframes fade {
  314. from {opacity: .4} to {opacity: 1}
  315. }
  316. /* On smaller screens, decrease text size */
  317. @media only screen and (max-width: 300px) {
  318. .prev, .next,.text {font-size: 11px}
  319. }
  320. .display-inline {
  321. display: inline;
  322. vertical-align: top;
  323. }
  324. .img-link, .img-link2 {
  325. border: 0px solid ;
  326. vertical-align: middle;
  327. }
  328. .padded-hidden {
  329. padding: 0px 15px 0px 15px;
  330. }
  331. @media screen and (max-width:450px) { .padded-hidden {
  332. display: none;
  333. }
  334. }
  335. /* Bottom Menu Fixed ------------------- */
  336. .navbar {
  337. overflow: hidden;
  338. background-color: #fff; /* alternate grey #333; */
  339. position: fixed;
  340. bottom: 0;
  341. width: 100%;
  342. border-top: 1px solid grey;
  343. }
  344. .navbar a {
  345. float: left;
  346. display: block;
  347. color: #f2f2f2;
  348. text-align: center;
  349. padding: 10px 16px 8px;
  350. text-decoration: none;
  351. font-size: 17px;
  352. }
  353. .navbar a:hover {
  354. background: #f1f1f1;
  355. color: black;
  356. }
  357. .mobile-image-table{
  358. display: inline;
  359. margin-top: 0px;
  360. text-align: center;
  361. margin-left: auto;
  362. margin-right: auto;
  363. border-collapse: collapse;
  364. padding: 0px;
  365. }
  366. .mobile-icons-text-row {
  367. text-align: center;
  368. vertical-align: bottom;
  369. font-size: 12px;
  370. line-height: 22px;
  371. }
  372. .mobile-icons-image {
  373. padding: 0px;
  374. width: 17px;
  375. height: 15px;
  376. } .mobile-icons-image-row {
  377. text-align: center;
  378. vertical-align: top;
  379. }
  380.   </style>
  381. </head>
  382. <body>
  383. <div id="navdots">
  384. <p><a href="#about">&#9679;</a></p>
  385. <p><a href="#download">&#9679;</a>
  386. </p>
  387. <p><a href="#utilities">&#9679;</a>
  388. </p>
  389. </div>
  390. <div class="pageformat">
  391. <div
  392.  style="background-image: url(bg.jpg); background-attachment: fixed; padding-bottom: 40px;">
  393. <table
  394.  style="text-align: center; margin-left: auto; margin-right: auto;"
  395.  border="0" cellpadding="0">
  396.   <tbody>
  397.     <tr>
  398.       <td style="text-align: center;">
  399.       <table style="float: left; text-align: left; width: 300px;"
  400.  border="0" cellpadding="0" cellspacing="0">
  401.         <tbody>
  402.           <tr>
  403.             <td class="hidden1"
  404.  style="vertical-align: middle; text-align: center; width: 20%;">&nbsp;</td>
  405.             <td style="vertical-align: middle; text-align: center;"><!-- <div id="mobile-nav"><label for="hamburger">&#9776;</label> -->
  406.             <div id="mobile-nav"><label for="hamburger"><img
  407.  style="width: 40px; height: 36px;" alt=""
  408.  src="mini-menu.png"></label><input id="hamburger"
  409.  type="checkbox"><a name="top"></a><a
  410.  href="https://www.portal.qb64.org" target="_blank"><img
  411.  class="img-link" style="margin-top: 20px;"
  412.  alt="QB64-1-3-logo" src="QB64-1-3-logo-transparency.png"></a>
  413.             <table
  414.  style="position: absolute; left: 0px; top: 0px; text-align: left; margin-top: 0px; padding-top: 80px; background-color: rgb(192, 192, 192); width: 290px; height: 400px;"
  415.  border="0" cellpadding="0" cellspacing="0">
  416.               <tbody>
  417.                 <tr>
  418.                   <td style="text-align: left; vertical-align: top;">
  419.                   <ul>
  420.                     <li> <a href="#">HOME</a>
  421.                       <ul>
  422.                         <li><a href="#top">QB64
  423. Home Page</a></li>
  424.                       </ul>
  425.                     </li>
  426.                     <li><a href="#">ABOUT</a>
  427.                       <ul>
  428.                         <li><a href="#about">About
  429. QB64</a></li>
  430.                       </ul>
  431.                     </li>
  432.                     <li><a href="#">DOWNLOAD</a>
  433.                       <ul>
  434.                         <li><a
  435.  href="https://github.com/Galleondragon/qb64/releases/tag/v1.3"
  436.  target="_blank" rel="nofollow">QB64
  437. V 1.3</a></li>
  438.                         <li><a
  439.  href="https://www.qb64.org/devbuilds.php">Dev
  440. Build</a></li>
  441.                         <li><a
  442.  href="https://www.qb64.org/historical_qb64/">Historical
  443. Versions</a></li>
  444.                         <li><a
  445.  href="https://www.qb64.org/inform">Inform
  446. for QB64</a></li>
  447.                         <li><a
  448.  href="https://www.qb64.org/vwatch">VWatch
  449. for QB64</a></li>
  450.                       </ul>
  451.                     </li>
  452.                     <li style="padding-left: 0px;"><a
  453.  href="#">SOCIALIZE</a>
  454.                       <ul>
  455.                         <li><a
  456.  href="https://www.qb64.org/forum" target="_blank">Forum</a></li>
  457.                         <li><a
  458.  href="https://discord.gg/mwfWyQq" target="_blank">QB64
  459. Discord Server</a></li>
  460.                         <li><a
  461.  href="https://www.qb64.org/ircpage.html" target="_blank">QB64
  462. IRC Chat</a></li>
  463.                       </ul>
  464.                     </li>
  465.                     <li><a href="#">QB64-WIKI</a>
  466.                       <ul>
  467.                         <li><a
  468.  href="https://www.qb64.org/articles/articles.html"
  469.  target="_blank">Articles</a></li>
  470.                       </ul>
  471.                     </li>
  472.                     <li><a href="#">UTILITIES</a>
  473.                       <ul>
  474.                         <li><a
  475.  href="https://www.qb64.org/basbin">BASBin</a></li>
  476.                         <li><a
  477.  href="https://www.qb64.org/binbin">BINBin</a></li>
  478.                       </ul>
  479.                     </li>
  480.                   </ul>
  481.                   </td>
  482.                 </tr>
  483.               </tbody>
  484.             </table>
  485.             </div>
  486.             </td>
  487.             <td class="hidden1"
  488.  style="vertical-align: top; text-align: left; width: 20%;"></td>
  489.           </tr>
  490.         </tbody>
  491.       </table>
  492.       <table style="float: none; text-align: left;" border="0"
  493.  cellpadding="0" cellspacing="0">
  494.         <tbody>
  495.           <tr>
  496.             <td class="hidden-horz-menu-and-slide-show-top-margin"
  497.  style="vertical-align: middle; height: 190px; text-align: center;">
  498.             <ul id="nav">
  499.               <li> <a href="#">HOME</a>
  500.                 <ul>
  501.                   <li><a href="#top">QB64
  502. Home Page</a></li>
  503.                 </ul>
  504.               </li>
  505.               <li><a href="#">ABOUT</a>
  506.                 <ul>
  507.                   <li><a href="#about">About
  508. QB64</a></li>
  509.                 </ul>
  510.               </li>
  511.               <li><a href="#">DOWNLOAD</a>
  512.                 <ul>
  513.                   <li><a
  514.  href="https://github.com/Galleondragon/qb64/releases/tag/v1.3"
  515.  target="_blank" rel="nofollow">QB64
  516. V 1.3</a></li>
  517.                   <li><a
  518.  href="https://www.qb64.org/devbuilds.php">Dev
  519. Build</a></li>
  520.                   <li><a
  521.  href="https://www.qb64.org/historical_qb64/">Historical
  522. Versions</a></li>
  523.                   <li><a href="https://www.qb64.org/inform">Inform
  524. for QB64</a></li>
  525.                   <li><a href="https://www.qb64.org/vwatch">VWatch
  526. for QB64</a></li>
  527.                 </ul>
  528.               </li>
  529.               <li style="padding-left: 0px;"><a href="#">SOCIALIZE</a>
  530.                 <ul>
  531.                   <li><a href="https://www.qb64.org/forum"
  532.  target="_blank">Forum</a></li>
  533.                   <li><a href="https://discord.gg/mwfWyQq"
  534.  target="_blank">QB64
  535. Discord Server</a></li>
  536.                   <li><a
  537.  href="https://www.qb64.org/ircpage.html" target="_blank">QB64
  538. IRC Chat</a></li>
  539.                 </ul>
  540.               </li>
  541.               <li><a href="#">QB64-WIKI</a>
  542.                 <ul>
  543.                   <li><a
  544.  href="https://www.qb64.org/articles/articles.html"
  545.  target="_blank">Articles</a></li>
  546.                 </ul>
  547.               </li>
  548.               <li><a href="#">UTILITIES</a>
  549.                 <ul>
  550.                   <li><a href="https://www.qb64.org/basbin">BASBin</a></li>
  551.                   <li><a href="https://www.qb64.org/binbin">BINBin</a></li>
  552.                 </ul>
  553.               </li>
  554.             </ul>
  555.             <br>
  556. &nbsp;<br>
  557.             </td>
  558.           </tr>
  559.         </tbody>
  560.       </table>
  561.       <table style="float: left; text-align: left; width: 300px;"
  562.  border="0" cellpadding="0" cellspacing="0">
  563.         <tbody>
  564.           <tr>
  565.             <td style="text-align: center; vertical-align: top;">
  566.             <table
  567.  style="text-align: left; margin-left: auto; margin-right: auto;"
  568.  border="0" cellpadding="0" cellspacing="0">
  569.               <tbody>
  570.                 <tr>
  571.                   <td nowrap="nowrap">
  572.                   <div class="hidden-div"
  573.  style="height: 30px;"></div>
  574.                   <div style="text-align: center;"><span
  575.  style="font-size: 36px; font-weight: bold; color: rgb(255, 255, 255);">QB64
  576. V 1.3<br>
  577. Out Now!</span></div>
  578.                   </td>
  579.                 </tr>
  580.                 <tr>
  581.                   <td
  582.  style="text-align: center; padding-top: 40px; padding-bottom: 40px;"><a
  583.  href="https://github.com/Galleondragon/qb64/releases/tag/v1.3"
  584.  class="classname" target="_blank" rel="nofollow">Download
  585. &gt;&gt;&gt;</a><br>
  586. &nbsp;<br>
  587.                   <a
  588.  href="https://www.portal.qb64.org/version-1-3-changelog"
  589.  class="classname">Changelog</a><br>
  590.                   <a
  591.  href="https://www.patreon.com/bePatron?u=13795043&amp;redirect_uri=https%3A%2F%2Ffellippepip.wixsite.com%2Fqb64&amp;utm_medium=widget&amp;utm_source=wix"
  592.  target="_blank" rel="nofollow"><img
  593.  class="img-link2"
  594.  style="margin-top: 48px; margin-bottom: 18px; width: 92px; height: 26px;"
  595.  alt="donate" src="btn_donate_LG.gif"></a><br>
  596.                   <span style="text-decoration: underline;"><img
  597.  style="width: 178px; height: 36px;" alt="Patron"
  598.  src="patron.png"></span><a
  599.  href="https://www.patreon.com/bePatron?u=13795043&amp;redirect_uri=https%3A%2F%2Ffellippepip.wixsite.com%2Fqb64&amp;utm_medium=widget&amp;utm_source=wix"><br>
  600.                   </a></td>
  601.                 </tr>
  602.               </tbody>
  603.             </table>
  604.             </td>
  605.           </tr>
  606.           <tr>
  607.             <td class="hidden1"
  608.  style="vertical-align: middle; text-align: center;">
  609.  <!-- COMMENTED OUT UNDER src=... allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" -->
  610.  <iframe
  611.  src="[youtube]https://www.youtube.com/embed/TBHLAyUtAPI[/youtube]"
  612.  frameborder="0" height="175"
  613.  width="250"></iframe> </td>
  614.           </tr>
  615.         </tbody>
  616.       </table>
  617.       <table style="float: none; text-align: center;"
  618.  border="0" cellpadding="0" cellspacing="0">
  619.         <tbody>
  620.           <tr>
  621.             <td class="hidden2"
  622.  style="vertical-align: middle; text-align: center;">
  623.  <!-- COMMENTED OUT UNDER src=... allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" -->
  624.  <iframe
  625.  src="[youtube]https://www.youtube.com/embed/TBHLAyUtAPI[/youtube]"
  626.  frameborder="0" height="400"
  627.  width="650"></iframe> </td>
  628.           </tr>
  629.         </tbody>
  630.       </table>
  631.       </td>
  632.     </tr>
  633.   </tbody>
  634. </table>
  635. </div>
  636. <table class="display-inline"
  637.  style="text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 10px;"
  638.  border="0" cellpadding="0" cellspacing="0">
  639.   <tbody>
  640.     <tr>
  641.       <td class="padded-hidden"></td>
  642.       <td
  643.  style="padding: 0px 10px 20px; max-width: 660px; vertical-align: top; text-align: center;"><a
  644.  name="about"></a>
  645.       <p class="hidden2"
  646.  style="margin: 20px 0px 0px 10px; font-size: 32px; font-weight: bold;">From
  647. the 80s to Eternity</p>
  648.       <p class="hidden1"
  649.  style="margin: 20px 0px 0px 8px; font-size: 24px; font-weight: bold;">From
  650. the 80s to Eternity</p>
  651.       <p
  652.  style="margin-top: 4px; font-size: 14px; color: rgb(102, 102, 102);">How
  653. BASIC made its
  654. way into the 21st century </p>
  655.       <p
  656.  style="margin-top: 0px; text-align: justify; color: rgb(102, 102, 102);">The
  657. BASIC language has
  658. been the front door into
  659. programming for countless people. That holds true for us. After having
  660. been exposed to
  661. it in the early contacts with computers, most people have developed a
  662. love for programming that not only goes on today but also extends to
  663. the language itself. Contrary to what some may say, having learned
  664. BASIC has given to many the basis for a long-standing career writing
  665. computer software.</p>
  666.       <p style="text-align: justify; color: rgb(102, 102, 102);">An
  667. Australian
  668. guy
  669. once decided that using
  670. emulation to be able to run
  671. QuickBASIC/QBasic in modern systems was a drag and decided to change
  672. that, and thus QB64 was born (originally as QB32). What it does is
  673. translate BASIC code into C++, which then gets compiled into native
  674. binaries for Windows, Linux and macOS. </p>
  675.       <p style="text-align: justify; color: rgb(102, 102, 102);">QB64
  676. not only
  677. allows
  678. for older programs written in
  679. BASIC to run smoothly in today's modern systems but it also allows for
  680. modern
  681. software development as it extends the language to use advanced
  682. features available in operating systems nowadays as well as OpenGL,
  683. which is the library used for rendering across different platforms.</p>
  684.       </td>
  685.       <td class="padded-hidden"></td>
  686.     </tr>
  687.   </tbody>
  688. </table>
  689. <table class="display-inline"
  690.  style="text-align: center; margin-left: auto; margin-right: auto; border-collapse: collapse;"
  691.  border="0" cellpadding="0">
  692.   <tbody>
  693.     <tr>
  694.       <td class="padded-hidden"></td>
  695.       <td style="vertical-align: top; text-align: center;">
  696.       <table
  697.  style="margin-left: auto; margin-right: auto; border-collapse: collapse; margin-bottom: 30px;"
  698.  border="0" cellpadding="0" cellspacing="0">
  699.         <tbody>
  700.           <tr>
  701.             <td class="hidden-horz-menu-and-slide-show-top-margin"><!-- Required for IE, which doesn't take height in td tags. -->
  702.             <div style="display: block; height: 96px;">&nbsp;</div>
  703.             </td>
  704.           </tr>
  705.           <tr>
  706.             <td
  707.  style="text-align: center; vertical-align: bottom; padding-bottom: 10px;">
  708.             <table
  709.  style="border-style: ridge; border-color: rgb(0, 0, 0); margin-left: auto; background-color: rgb(0, 0, 0); border-collapse: collapse;"
  710.  border="12" cellpadding="0" cellspacing="0">
  711.               <tbody>
  712.                 <tr>
  713.                   <td
  714.  style="vertical-align: middle; text-align: center;">
  715.                   <table
  716.  style="margin-top: 12px; margin-bottom: 16px; background-color: rgb(255, 255, 255); width: 100%; text-align: left;"
  717.  border="0" cellpadding="0" cellspacing="0">
  718.                     <tbody>
  719.                       <tr>
  720.                         <td
  721.  style="width: 20px; background-color: rgb(0, 0, 0);">&nbsp;&nbsp;</td>
  722.                         <td
  723.  style="vertical-align: middle; text-align: center;">
  724.                         <div class="slideshow-container">
  725.                         <div class="mySlides fade"><img
  726.  src="qb64-ide.jpg" alt=""
  727.  style="height: 190px; width: 270px;"></div>
  728.                         <div class="mySlides fade"><img
  729.  src="qb64-slide-2.jpg" alt=""
  730.  style="height: 190px; width: 270px;"></div>
  731.                         <div class="mySlides fade"><img
  732.  src="qb64-slide-3.jpg" alt=""
  733.  style="height: 190px; width: 270px;">
  734.                         </div>
  735.                         <a class="prev"
  736.  onclick="plusSlides(-1)">&#10094;</a> <a class="next"
  737.  onclick="plusSlides(1)">&#10095;</a> </div>
  738.                         </td>
  739.                         <td
  740.  style="width: 20px; background-color: rgb(0, 0, 0);">&nbsp;&nbsp;</td>
  741.                       </tr>
  742.                     </tbody>
  743.                   </table>
  744.                   </td>
  745.                 </tr>
  746.               </tbody>
  747.             </table>
  748.             </td>
  749.           </tr>
  750.         </tbody>
  751.       </table>
  752.       </td>
  753.       <td class="padded-hidden"></td>
  754.     </tr>
  755.   </tbody>
  756. </table>
  757. <table style="text-align: left; width: 100%;" border="0"
  758.  cellpadding="0" cellspacing="0">
  759.   <tbody>
  760.     <tr>
  761.       <td align="center" valign="middle"><a
  762.  name="download"></a>
  763.       <table
  764.  style="padding-top: 50px; padding-bottom: 70px; text-align: left; background-color: rgb(192, 192, 192); border-collapse: separate; width: 100%;"
  765.  border="0" cellpadding="12" cellspacing="18">
  766.         <tbody>
  767.           <tr>
  768.             <td colspan="1" rowspan="1"
  769.  style="vertical-align: top; text-align: center; width: 50%;"><a
  770.  name="download"></a> <img
  771.  style="width: 125px; height: 82px;" alt="download"
  772.  src="download.png">
  773.             <p
  774.  style="font-size: 30px; font-weight: bold; margin-top: 20px; margin-bottom: 0px;">DOWNLOAD</p>
  775.             <p
  776.  style="margin-top: 16px; margin-bottom: 40px; color: rgb(52, 52, 52);">You
  777. can either get the stable build or help us beta test the
  778. development build.</p>
  779.             <a
  780.  style="margin-bottom: 16px; margin-left: 20px; margin-right: 20px;"
  781.  href="https://github.com/Galleondragon/qb64/releases/tag/v1.3"
  782.  class="classname" target="_blank" rel="nofollow">QB64
  783. V1.3</a><a style="margin-left: 20px; margin-right: 20px;"
  784.  href="https://www.qb64.org/devbuilds.php" class="classname">QB64
  785. Dev Build</a> </td>
  786.           </tr>
  787.           <tr>
  788.             <td colspan="1" rowspan="1" align="center"
  789.  valign="top">
  790.             <div style=""><span style="font-size: 24px;">Historical
  791. Versions<br>
  792.             </span>
  793.             <p
  794.  style="margin-top: 16px; margin-bottom: 0px; color: rgb(52, 52, 52);">Collection
  795. of old QB64 versions for historical
  796. purposes. </p>
  797.             </div>
  798.             </td>
  799.           </tr>
  800.           <tr>
  801.             <td colspan="1" rowspan="1" align="center"
  802.  valign="top"><a
  803.  href="https://www.qb64.org/historical_qb64/" class="classname">Go
  804. to Archive</a> </td>
  805.           </tr>
  806.         </tbody>
  807.       </table>
  808.       <p
  809.  style="font-size: 30px; font-weight: bold; margin-top: 30px; margin-bottom: 10px;">More
  810. QB64 Team Software</p>
  811.       <span style="color: rgb(102, 102, 102);">Great
  812. companions to QB64</span>
  813.       <table
  814.  style="text-align: center; margin-top: 20px; margin-left: auto; margin-right: auto;"
  815.  border="0" cellpadding="0" cellspacing="0">
  816.         <tbody>
  817.           <tr>
  818.             <td align="center" valign="middle">
  819.             <table class="display-inline"
  820.  style="text-align: left; margin-left: auto; margin-right: auto;"
  821.  border="0" cellpadding="0" cellspacing="0">
  822.               <tbody>
  823.                 <tr>
  824.                   <td class="padded-hidden"></td>
  825.                   <td
  826.  style="padding: 0px 10px; vertical-align: middle; text-align: center; min-width: 250px;">
  827.                   <a href="https://www.qb64.org/vwatch"
  828.  target="_blank"><img class="img-link" alt="VWatch"
  829.  src="beehive.png"></a>
  830.                   <p
  831.  style="text-align: center; font-size: 30px; margin-top: 10px;"><a
  832.  href="https://www.qb64.org/vwatch" target="_blank"
  833.  style="color: rgb(102, 102, 102);">VWatch</a></p>
  834.                   <div
  835.  style="max-width: 300px; color: rgb(102, 102, 102); text-align: justify;">The
  836. debugging features you loved using in QuickBASIC are now available
  837. to help you squash those hard-to-find bugs in your projects. Made with
  838. QB64.</div>
  839.                   </td>
  840.                   <td class="padded-hidden"></td>
  841.                 </tr>
  842.               </tbody>
  843.             </table>
  844.             <table class="display-inline"
  845.  style="text-align: left; margin-left: auto; margin-right: auto;"
  846.  border="0" cellpadding="0" cellspacing="0">
  847.               <tbody>
  848.                 <tr>
  849.                   <td class="padded-hidden"></td>
  850.                   <td
  851.  style="padding: 0px 10px; vertical-align: middle; text-align: center; min-width: 250px;">
  852.                   <a href="https://www.qb64.org/inform"
  853.  target="_blank"><img class="img-link" alt="InForm"
  854.  src="Application-icon.png"></a>
  855.                   <p
  856.  style="text-align: center; font-size: 30px; margin-top: 10px;"><a
  857.  href="https://www.qb64.org/inform" target="_blank"
  858.  style="color: rgb(102, 102, 102);">Inform</a></p>
  859.                   <div
  860.  style="max-width: 300px; color: rgb(102, 102, 102); text-align: justify;">Design
  861. feature-rich graphical interfaces that blend in perfectly with
  862. today's Operating Systems all without leaving BASIC behind. Made with
  863. QB64.</div>
  864.                   </td>
  865.                   <td class="padded-hidden"></td>
  866.                 </tr>
  867.               </tbody>
  868.             </table>
  869.             </td>
  870.           </tr>
  871.         </tbody>
  872.       </table>
  873.       </td>
  874.     </tr>
  875.   </tbody>
  876. </table>
  877. <a name="utilities"></a>
  878. <p
  879.  style="font-size: 30px; font-weight: bold; margin-top: 60px; margin-bottom: 10px;">Utilities</p>
  880. <p
  881.  style="margin-top: 0px; margin-bottom: 20px; color: rgb(102, 102, 102);">It's
  882. all about
  883. sharing.</p>
  884. <div class="pageformat">
  885. <table
  886.  style="width: 90%; text-align: center; margin-top: 12px; margin-left: auto; margin-right: auto;"
  887.  border="0" cellpadding="0" cellspacing="0">
  888.   <tbody>
  889.     <tr>
  890.       <td align="center" valign="middle">
  891.       <table class="display-inline"
  892.  style="text-align: left; margin-left: auto; margin-right: auto;"
  893.  border="0" cellpadding="0" cellspacing="0">
  894.         <tbody>
  895.           <tr>
  896.             <td class="padded-hidden"></td>
  897.             <td class="hidden2"
  898.  style="vertical-align: middle; text-align: center; min-width: 300px;">
  899.             <a href="https://www.qb64.org/basbin"
  900.  target="_blank"><img class="img-link"
  901.  style="margin-top: 10px;" alt="BASBin" src="basbin.png"></a></td>
  902.             <td class="padded-hidden"></td>
  903.           </tr>
  904.         </tbody>
  905.       </table>
  906.       <table class="display-inline"
  907.  style="text-align: left; margin-left: auto; margin-right: auto;"
  908.  border="0" cellpadding="0" cellspacing="0">
  909.         <tbody>
  910.           <tr>
  911.             <td class="padded-hidden"></td>
  912.             <td style="vertical-align: middle; text-align: center;">
  913.             <p
  914.  style="text-align: center; font-size: 24px; margin-top: 10px; margin-bottom: 10px;"><a
  915.  href="https://www.qb64.org/basbin" target="_blank"
  916.  style="color: rgb(102, 102, 102);">BASBin</a></p>
  917.             <table
  918.  style="text-align: left; margin-left: auto; margin-right: auto; max-width: 660px;"
  919.  border="0" cellpadding="0" cellspacing="0">
  920.               <tbody>
  921.                 <tr>
  922.                   <td
  923.  style="vertical-align: middle; text-align: center;">
  924.                   <div
  925.  style="color: rgb(102, 102, 102); text-align: justify; padding-left: 5px; padding-right: 5px;">Need
  926. to
  927. share a code snippet but don't need all the fuss of traditional
  928. online tools? <br>
  929. &nbsp; <br>
  930. BASBin is what you're after. Just paste code, hit the button, and share
  931. the link away.<br>
  932. &nbsp; <br>
  933. Files are wiped regularly, so treat it as the temporary storage it is,
  934. OK?</div>
  935.                   </td>
  936.                 </tr>
  937.               </tbody>
  938.             </table>
  939.             </td>
  940.             <td class="padded-hidden"></td>
  941.           </tr>
  942.         </tbody>
  943.       </table>
  944.       <table
  945.  style="text-align: center; margin-top: 40px; margin-left: auto; margin-right: auto;"
  946.  border="0" cellpadding="0" cellspacing="0">
  947.         <tbody>
  948.           <tr>
  949.             <td align="center" valign="middle">
  950.             <table class="display-inline"
  951.  style="text-align: left; margin-left: auto; margin-right: auto;"
  952.  border="0" cellpadding="0" cellspacing="0">
  953.               <tbody>
  954.                 <tr>
  955.                   <td class="padded-hidden"></td>
  956.                   <td
  957.  style="vertical-align: middle; text-align: center;">
  958.                   <p
  959.  style="text-align: center; font-size: 24px; margin-top: 10px; margin-bottom: 10px;"><a
  960.  href="https://www.qb64.org/binbin" target="_blank"
  961.  style="color: rgb(102, 102, 102);">BINBin</a></p>
  962.                   <table
  963.  style="text-align: left; margin-left: auto; margin-right: auto; margin-bottom: 0px; max-width: 660px;"
  964.  border="0" cellpadding="0" cellspacing="0">
  965.                     <tbody>
  966.                       <tr>
  967.                         <td
  968.  style="vertical-align: middle; text-align: center;">
  969.                         <div
  970.  style="padding: 0px 5px 20px; text-align: justify; color: rgb(102, 102, 102);">Or
  971. maybe you need to share an image, or other type of binary file. If
  972. that's the case, BINBin is for you.
  973. ​<br>
  974. &nbsp;<br>
  975. Select the file to share, hit the button, and share the link. Files are
  976. wiped regularly, so treat it as the temporary storage it is,
  977. OK?</div>
  978.                         </td>
  979.                       </tr>
  980.                     </tbody>
  981.                   </table>
  982.                   </td>
  983.                   <td class="padded-hidden"></td>
  984.                 </tr>
  985.               </tbody>
  986.             </table>
  987.             <table class="display-inline"
  988.  style="text-align: left; margin-left: auto; margin-right: auto;"
  989.  border="0" cellpadding="0" cellspacing="0">
  990.               <tbody>
  991.                 <tr>
  992.                   <td class="padded-hidden"></td>
  993.                   <td class="hidden2"
  994.  style="vertical-align: middle; text-align: center; min-width: 300px;">
  995.                   <a href="https://www.qb64.org/binbin"
  996.  target="_blank"><img class="img-link"
  997.  style="margin-top: 30px;" alt="BINbin" src="binbin.png"></a></td>
  998.                   <td class="padded-hidden"></td>
  999.                 </tr>
  1000.               </tbody>
  1001.             </table>
  1002.             </td>
  1003.           </tr>
  1004.         </tbody>
  1005.       </table>
  1006.       <script type="application/javascript">
  1007. var slideIndex = 1;
  1008. showSlides(slideIndex);
  1009. function plusSlides(n) {
  1010. showSlides(slideIndex += n);
  1011. }
  1012. function currentSlide(n) {
  1013. showSlides(slideIndex = n);
  1014. }
  1015. function showSlides(n) {
  1016. var i;
  1017. var slides = document.getElementsByClassName("mySlides");
  1018. var dots = document.getElementsByClassName("dot");
  1019. if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length}
  1020. for (i = 0; i < slides.length; i++) {
  1021. slides[i].style.display = "none"; }
  1022. for (i = 0; i < dots.length; i++) {
  1023. dots[i].className = dots[i].className.replace(" active", "");
  1024. }
  1025. slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";
  1026. }
  1027.       </script>
  1028.       </td>
  1029.     </tr>
  1030.   </tbody>
  1031. </table>
  1032. </div>
  1033. <table
  1034.  style="width: 100%; text-align: center; margin-top: 12px; margin-left: auto; margin-right: auto;"
  1035.  border="0" cellpadding="0" cellspacing="0">
  1036.   <tbody>
  1037.     <tr>
  1038.       <td align="center" valign="middle">
  1039.       <div class="hidden1"
  1040.  style="background-color: rgb(10, 40, 60);">
  1041.       <table
  1042.  style="margin-top: 30px; width: 75%; max-width: 300px; text-align: left; margin-left: auto; margin-right: auto; background-color: rgb(10, 40, 60);"
  1043.  border="0" cellpadding="10" cellspacing="10">
  1044.         <tbody>
  1045.           <tr>
  1046.             <td
  1047.  style="text-align: center; width: 25%; vertical-align: middle;">
  1048.             <div style="font-size: 14px; color: rgb(255, 255, 255);">
  1049.             <p>QB64 created by Galleon</p>
  1050. QB64 and QB64.org<br>
  1051. maintained by the QB64 Team<br>
  1052. &nbsp;<br>
  1053.             </div>
  1054.             <span style="font-size: 30px; color: rgb(255, 255, 255);"><span>&#9993;&nbsp;</span><span
  1055.  style="font-size: 14px; color: rgb(255, 255, 255);"><a
  1056.  style="color: rgb(255, 255, 255); text-decoration: none;"
  1057.  href="mailto:contact@qb64.org">contact@qb64.org</a></span></span></td>
  1058.           </tr>
  1059.           <tr>
  1060.             <td align="center" valign="middle">
  1061.             <table
  1062.  style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;"
  1063.  border="0" cellpadding="0" cellspacing="8">
  1064.               <tbody>
  1065.                 <tr>
  1066.                   <td style="vertical-align: top; text-align: right;">
  1067.                   <a href="https://facebook.com/qb64team"
  1068.  target="_blank"><img class="img-link"
  1069.  alt="facebook" src="facebook.png"></a></td>
  1070.                   <td
  1071.  style="vertical-align: top; text-align: center;"> <a
  1072.  href="https://twitter.com/qb64team" target="_blank"><img
  1073.  class="img-link" alt="twitter" src="twitter.png"></a></td>
  1074.                   <td style="vertical-align: top; text-align: left;">
  1075.                   <a href="https://discord.gg/mwfWyQq"
  1076.  target="_blank"><img class="img-link" alt="discord"
  1077.  src="discord.png"></a></td>
  1078.                 </tr>
  1079.                 <tr>
  1080.                   <td colspan="3" rowspan="1"
  1081.  align="center" valign="top"><a
  1082.  href="https://seal.godaddy.com/verifySeal?sealID=s7O1ji22cenVtIwnfCl7clR4i4ReipQtxu6jPditkUkv2RadKqB3DpgJrnuL"
  1083.  onclick="return popup(this, 'info')" target="_blank"
  1084.  rel="nofollow"><img class="img-link"
  1085.  style="margin-top: 12px; width: 131px; height: 32px;"
  1086.  alt="GoDaddy" src="godaddy.gif"></a> </td>
  1087.                 </tr>
  1088.               </tbody>
  1089.             </table>
  1090.             <br>
  1091.             <br>
  1092.             <span style="font-size: 14px; color: rgb(255, 255, 255);">&copy;
  1093. 2019 by QB64 Team<br>
  1094. &nbsp;<br>
  1095. &nbsp;<br>
  1096.             </span></td>
  1097.           </tr>
  1098.         </tbody>
  1099.       </table>
  1100.       </div>
  1101.       <div class="hidden2"
  1102.  style="background-color: rgb(10, 40, 60);">
  1103.       <table
  1104.  style="margin-top: 50px; width: 75%; text-align: left; margin-left: auto; margin-right: auto; background-color: rgb(10, 40, 60);"
  1105.  border="0" cellpadding="10" cellspacing="10">
  1106.         <tbody>
  1107.           <tr>
  1108.             <td
  1109.  style="text-align: center; width: 25%; vertical-align: middle;"><img
  1110.  style="margin-top: 0px; margin-right: 0px; width: 150px; height: 150px;"
  1111.  alt="QB64-1-3-logo" src="QB64-1-3-logo-transparency.png">
  1112.             </td>
  1113.             <td
  1114.  style="text-align: center; width: 25%; vertical-align: middle;">
  1115.             <div style="font-size: 14px; color: rgb(255, 255, 255);">
  1116.             <p>QB64 created by Galleon</p>
  1117. QB64 and QB64.org maintained by the QB64 Team</div>
  1118.             </td>
  1119.             <td
  1120.  style="text-align: center; width: 25%; vertical-align: middle;"><span
  1121.  style="font-size: 14px; color: rgb(255, 255, 255);"><a
  1122.  style="color: rgb(255, 255, 255); text-decoration: none;"
  1123.  href="mailto:contact@qb64.org"><span
  1124.  style="font-size: 30px; line-height: 36px;">&#9993;&nbsp;</span>contact@qb64.org</a>
  1125.             </span></td>
  1126.             <td
  1127.  style="text-align: center; width: 25%; vertical-align: middle;">
  1128.             <table
  1129.  style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;"
  1130.  border="0" cellpadding="0" cellspacing="8">
  1131.               <tbody>
  1132.                 <tr>
  1133.                   <td align="center" valign="top"> <a
  1134.  href="https://facebook.com/qb64team" target="_blank"><img
  1135.  class="img-link" alt="facebook" src="facebook.png"></a>
  1136.                   </td>
  1137.                   <td align="center" valign="top"> <a
  1138.  href="https://twitter.com/qb64team" target="_blank"><img
  1139.  class="img-link" alt="twitter" src="twitter.png"></a></td>
  1140.                   <td align="center" valign="top"> <a
  1141.  href="https://discord.gg/mwfWyQq" target="_blank"><img
  1142.  class="img-link" alt="discord" src="discord.png"></a></td>
  1143.                   <td
  1144.  style="vertical-align: top; text-align: center; width: 50%;"></td>
  1145.                 </tr>
  1146.                 <tr>
  1147.                   <td colspan="4" rowspan="1"
  1148.  align="center" valign="top"><a
  1149.  href="https://seal.godaddy.com/verifySeal?sealID=s7O1ji22cenVtIwnfCl7clR4i4ReipQtxu6jPditkUkv2RadKqB3DpgJrnuL"
  1150.  onclick="return popup(this, 'info')" target="_blank"
  1151.  rel="nofollow"><img class="img-link"
  1152.  style="margin-top: 12px; width: 131px; height: 32px;"
  1153.  alt="GoDaddy" src="godaddy.gif"></a> </td>
  1154.                 </tr>
  1155.               </tbody>
  1156.             </table>
  1157.             </td>
  1158.           </tr>
  1159.           <tr>
  1160.             <td colspan="4" rowspan="1" align="center"
  1161.  valign="top"><span
  1162.  style="font-size: 14px; color: rgb(255, 255, 255);">&copy;
  1163. 2019 by QB64 Team</span></td>
  1164.           </tr>
  1165.         </tbody>
  1166.       </table>
  1167.       </div>
  1168.       </td>
  1169.     </tr>
  1170.   </tbody>
  1171. </table>
  1172. </div>
  1173. <!-- =============================================== Fixed Footer ======================================== -->
  1174. <div class="navbar">
  1175. <table class="hidden1"
  1176.  style="min-width: 320px; text-align: center; margin-left: auto; margin-right: auto; border-collapse: collapse;"
  1177.  border="0" cellpadding="0" cellspacing="0">
  1178.   <tbody>
  1179.     <tr>
  1180.       <td>
  1181.       <table class="mobile-image-table">
  1182.         <tbody>
  1183.           <tr>
  1184.             <td class="mobile-icons-image-row"><a href="htpps://www.facebook.com"><img
  1185.  src="facebook-mobile.png" alt="facebook"
  1186.  class="mobile-icons-image"></a> </td>
  1187.           </tr>
  1188.           <tr>
  1189.             <td class="mobile-icons-text-row">Facebook</td>
  1190.           </tr>
  1191.         </tbody>
  1192.       </table>
  1193.      
  1194.       <table class="mobile-image-table">
  1195.         <tbody>
  1196.           <tr>
  1197.             <td class="mobile-icons-image-row"><a href="htpps://www.twitter.com"><img
  1198.  class="mobile-icons-image" alt="twitter"
  1199.  src="twitter-mobile.png"></a> </td>
  1200.           </tr>
  1201.           <tr>
  1202.             <td class="mobile-icons-text-row">Twitter&nbsp;</td>
  1203.           </tr>
  1204.         </tbody>
  1205.       </table>
  1206.        
  1207.       <table class="mobile-image-table">
  1208.         <tbody>
  1209.           <tr>
  1210.             <td class="mobile-icons-image-row"><a href="http://www.qb64.org/forum"><img
  1211.  class="mobile-icons-image" alt="forum"
  1212.  src="forum-mobile.png"></a></td>
  1213.           </tr>
  1214.           <tr>
  1215.             <td class="mobile-icons-text-row">Forum</td>
  1216.           </tr>
  1217.         </tbody>
  1218.       </table>
  1219.      
  1220.       <table class="mobile-image-table">
  1221.         <tbody>
  1222.           <tr>
  1223.             <td class="mobile-icons-image-row"> <a href="https://www.qb64.org/ircpage.html"><img
  1224.  class="mobile-icons-image" alt="chat"
  1225.  src="chat-mobile.png"></a></td>
  1226.           </tr>
  1227.           <tr>
  1228.             <td class="mobile-icons-text-row">Chatroom</td>
  1229.           </tr>
  1230.         </tbody>
  1231.       </table>
  1232.        </td>
  1233.     </tr>
  1234.   </tbody>
  1235. </table>
  1236. </div>
  1237. <script type="application/javascript">
  1238. var slideIndex = 1;
  1239. showSlides(slideIndex);
  1240. function plusSlides(n) {
  1241. showSlides(slideIndex += n);
  1242. }
  1243. function currentSlide(n) {
  1244. showSlides(slideIndex = n);
  1245. }
  1246. function showSlides(n) {
  1247. var i;
  1248. var slides = document.getElementsByClassName("mySlides");
  1249. var dots = document.getElementsByClassName("dot");
  1250. if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length}
  1251. for (i = 0; i < slides.length; i++) {
  1252. slides[i].style.display = "none"; }
  1253. for (i = 0; i < dots.length; i++) {
  1254. dots[i].className = dots[i].className.replace(" active", "");
  1255. }
  1256. slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";
  1257. }
  1258. /* Popup Window ------------------------ */
  1259. function popup (mylink, windowname)
  1260. {
  1261. if (! window.focus)return true;
  1262. var href;
  1263. if (typeof(mylink) == 'string')
  1264. href=mylink;
  1265. else
  1266. href=mylink.href;
  1267. window.open(href, windowname, 'width=475,height=340,left=10,top=10,location=center,resizable=yes,scrollbars=yes,toolbar=no');
  1268. return false;
  1269. }
  1270. </script>
  1271. </body>
  1272. </html>
  1273.  

It would be easy to add this to the homepage I created in my original post.

Needed graphics attached. Just save them to the same folder you copy/paste/save the html code in this post.

  [ This attachment cannot be displayed inline in 'Print Page' view ]  

Pete
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: TempodiBasic on December 03, 2019, 04:43:20 am
@Steve  I 'm not able to reach your site
http://smcneill.online/qb64/qb64.html (http://smcneill.online/qb64/qb64.html) Opera says me "Impossible to reach the site"

@Pete
please leave the path of images correlate to the current directory and not to absolute path
Code: HTML5: [Select]
  1.  <tbody>
  2.           <tr>
  3.             <td
  4. style="vertical-align: middle; text-align: center; width: 20px; background-color: rgb(0, 0, 0);"></td>
  5.             <td style="vertical-align: middle; text-align: center;">
  6.             <div class="slideshow-container">
  7.             <div class="mySlides fade"><img
  8. src="file:///C:/qb64-web-page/qb64-ide.jpg" style="width: 100%;"></div>
  9.             <div class="mySlides fade"><img
  10. src="file:///C:/qb64-web-page/qb64-slide-2.jpg"
  11. style="width: 100%;"></div>
  12.             <div class="mySlides fade"><img
  13. src="file:///C:/qb64-web-page/qb64-slide-3.jpg"
  14. style="width: 100%;">
  15.             </div>
  16.             <a class="prev" onclick="plusSlides(-1)"></a>
  17.             <a class="next" onclick="plusSlides(1)"></a>
  18.             </div>
I can see your work when I reset the src path to current directory ".\Namefile.jpg"
I think that you can get this easily setting an option in your editor HTML.

@Fellippe
Just for curiosity
do you need only a new Homepage  to link to the other sections of the website as Wiki & Articles, Forum & Social, Download, News, Utility, Link etc etc.  Or more and more?
do you like a Homepage in the same shape of the today Homepage or with other specific items?
I think this is important to guide the helpers that are coming in act
 
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: SMcNeill on December 03, 2019, 05:01:55 am
Sorry about that.  Stupid Windows rebooted the machine with an update and didn’t restart the server last night.  You should be able to reach and test things now.  ;)
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: FellippeHeitor on December 03, 2019, 07:01:43 am
Quote
@Fellippe
Just for curiosity
do you need only a new Homepage  to link to the other sections of the website as Wiki & Articles, Forum & Social, Download, News, Utility, Link etc etc.  Or more and more?
do you like a Homepage in the same shape of the today Homepage or with other specific items?
I think this is important to guide the helpers that are coming in act

I’m looking for the same experience of the current home page, but without the proprietary code that currently makes it up.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Qwerkey on December 03, 2019, 10:07:44 am
Blimey!  What a huge range of talent we have (we already know this, of course, but I'm galvanised* into repeating this here).  If Fellippe were to organise this talent into a professional organisation (don't!), what a top-tier company it would become.

* I'm just off to remove this coating of zinc which seems to have been electroplated onto my skin.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 03, 2019, 02:09:05 pm
@TempodiBasic

Thanks my friend, I forgot to strip those out before posting that slide show viewer. I edited the code in the post.

Maybe if there is any interest in using the webpage and slide presentation, I can post a screen shot of the whole thing at my site, and link it here. I also think I can add an automatic slide show effect, but don't hold me to it.

Pete
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: FellippeHeitor on December 09, 2019, 10:56:14 pm
Oh, one more thing: our current design is responsive, which means it looks different on mobile (just like our forum theme also adapts to smaller screens). I for one have no idea how it's achieved.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 10, 2019, 04:23:29 am
Here's what I got from the www.portal.qb64.org site, when viewed on a mobile device simulator at brickandmobile.com. I'm hoping that isn't what it really appears as on a mobile device. I know Wix is supposed to provide  responsive content, but as you can see by the image, all it did in the iphone simulation is cut off the right side of the webpage, and move the three scrolling dots over to the left. That's not very "responsive" in my book. So you have to use the horizontal scroll bar, at the bottom, to view what is to the right. Well, maybe the simulator isn't presenting it properly. Is that how it actually functions on a mobile device?

  [ This attachment cannot be displayed inline in 'Print Page' view ]  

If so, I think it would be better to do a mobile redirect to something like: m.qb64.org There are software packages available that help convert desktop to mobile layouts, but rally it is just a matter of adjusting to screen size, using some table or divider collapsing tricks, or just repositioning and size adjusting content. Anyway, it's a programmers forum, and I doubt there will be a lot of people coding on their iphones. ipads are a bit wider, but even so, I can hear Steve cursing all the way from Virginia when he has to bang out something on his ipad. You can always count on Steve for some good down-home, ol' fashioned "farm"iliar ones.

Pete
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: FellippeHeitor on December 10, 2019, 04:51:55 am
Quote
I'm hoping that isn't what it really appears as on a mobile device.
Not at all. It does really look intentionally different.

 [ This attachment cannot be displayed inline in 'Print Page' view ]  

[ This attachment cannot be displayed inline in 'Print Page' view ]    [ This attachment cannot be displayed inline in 'Print Page' view ]  
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 10, 2019, 03:14:02 pm
Better! What I noticed is a lot of simulation sites are not up to date. For instance, many just have up to iphone5. I checked it on my LG Aristo (2-year old now) and the site appeared as in your photo; but, since I was curious about older devices, I dug up a Samsung galaxy notepad (5 years old) and it wasn't able to display the site correctly...

  [ This attachment cannot be displayed inline in 'Print Page' view ]  

So that one misses the menu button, and for some reason, picks the footer of the site and places it near the top. I guess this is one reason I have avoided working with all but the basics of mobile website programming. Apparently, new devices need a lot of consideration. I'd still like to find a simulator, online, that display sites correctly. I almost had one, where the .org site did display correctly, but I couldn't get the links to simulate. That site also did not offer the most modern devices to display the website.

Anyway, the easiest tricks I know is not nesting tables, and using a collapsing format, to go from a horizontal to vertical orientation without changing the order of the content. Basically, it's just harder to make great looking sites when the have to be manipulated that much, but it does avoid the horizontal scrollbar.

One new thing that impressed me on the Wix layout was how the social media images, in the footer of the right side of the desktop webpage, appeared as an inline display, completely and uniformly across the bottom of the cell phone display, and the choices were changed so the forum and chat image links could be included. That is a cool effect. Maybe there is some routing script that acts like an if/then statement and changes out the footer when a mobile device is detected.

Pete
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: FellippeHeitor on December 10, 2019, 03:46:03 pm
Here’s the thing with Wix: It gave me a basic layout which I edited as I wanted. After that I saved my changes and it offered me to view it as mobile. It did a very good job repositioning things but I still had a say in lots of parts of the layout. All of that means that what you see was not entirely automatically generated.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: luke on December 10, 2019, 03:48:16 pm
Mobile formatting is achieved using a combination of thoughtful CSS rules and media queries, which are CSS conditionals based on screen size.

Naughty developers will rely on JavaScript as well, but it's very possible to achieve responsive design just with CSS.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 18, 2019, 03:58:08 pm
Well gang, I roughed out some more code to include making it "responsive" and added a hamburger menu. It also adds a mobile footer for social media links. That's all new stuff to me, which is why I decided to give it a go and continue working on the project.

https://www.qb64.org/forum/index.php?topic=1941.msg111703#msg111703

Go to the link above, re-download the zip file for the html and the old and newly added images, unzip (copy) them all to a new test folder, open that folder, and drag and drop the "qb64-responsive-webpage18.html" into your (hopefully) FireFox browser. That's the only browser I used for the markup, and other browsers might not play well, yet...

So I might want to make a couple of my sites mobile in the future, and working on this project has been a big help to that end. What I haven't done yet is upload it to a server to test the mobile appearance and the usability of the "hover" code, which should translate to a touch screen click via the via :active and :focus placed in the coding. A few other considerations I have are looking into support for all browser. IE and Edge, Microsoft products, seldom conform correctly. They usually require interesting hacks to get them to play nice. Since this responsive style is new to me, I haven't looked up any hacks or how to implement them. I'm just presuming either some hacks will be needed, or compromises will need to be made. Anyway, this was a blast for me to create, and maybe it can even be of some use to you guys here. Feel free to use any part or all of it if, it helps in anyway. BTW - I have no ego invested in it. I state that because I  know Fell pretty well, and I don't want him to spend even a New York minute on thinking about how I'm going to feel about whatever Team Odin decides to use when "we" leave Wix.

Pete 
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: RhoSigma on December 18, 2019, 04:50:00 pm
Hi Pete, hi all,

for me it's amazing to see, that we're a almost self maintaining community at qb64.org.
We have people involved in BASIC develpopment, some other (like myself) even in C++ development to advance the language itself. More than that we have specialists in Gfx (eg. bplus), in sound (eg. Petr) and in _MEM usage (Steve McNeill), we also have Pete (almost known from the "Off Topic" section;)), but now I see, he's a specialist in Web-Design too.

Also to mention the young and very talented members (thinking of names like Ashish and Prithak), who are probably the next generation of BASIC developers. (Ashish, I really like your "Hunters Revenge")

Not forgetting all the others, who enjoy and use QB64 (quietly) every day, but only write a post, if they have a problem and need some help (you're always welcome).

I'am proud to be a part of this community, and I wish everybody the best for the upcomming Christmas season, doesn't matter, if their respective religions celebrate Christmas or not. Here we are all the same, and I'm already looking forward to the next year of QB64.

Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: TempodiBasic on December 18, 2019, 06:10:40 pm
Pete
let me say wonderful!
it lacks only of a tool to come back to specific sections  in the main page like the three circle on the Wix version (for this Wix version I found that the impossibility of coming back to the top of the webpage is a significant lackness) but the game is reached.
Cool your demonstration of how to go along a new way and reach the goal.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: TempodiBasic on December 18, 2019, 08:19:40 pm
PS here results of my test loading the Pete webpage into different browser...

    Browser       results
    Opera GX       the <> buttons are wrong displayed
    Chrome          All Ok
    Opera             All Ok
    Microsoft Edge  the QB64-1-3-logo is not displayed ---> <img class="img-link" style="margin-top: 20px;" alt="QB64-1-3-logo" src="QB64-1-3-logo-transparency.png">[/url] and the <> buttons are wrong displayed

as you can see

  [ This attachment cannot be displayed inline in 'Print Page' view ]  
  [ This attachment cannot be displayed inline in 'Print Page' view ]  
  [ This attachment cannot be displayed inline in 'Print Page' view ]  
  [ This attachment cannot be displayed inline in 'Print Page' view ]  
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: FellippeHeitor on December 18, 2019, 09:32:43 pm
Pete, thank you so much for going the extra mile with this! It really does replicate the experience of the wix site and the responsiveness factor having been taken into consideration was a very welcome plus.

I'll be testing/tweaking this and likely getting it uploaded to our servers soon.

Again, thanks a million.

Fellippe.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 18, 2019, 11:09:23 pm
@Tempo: Thanks for checking it on multiple browsers, and especially for taking the time to do the illustrated screen shots!

@Fell: I'm still wondering if "hover" will translate to a menu click in mobile screen resolution. If you load it up to your server, you can check that easily enough. Also, the "grey" background for the cell phone menu can be lengthened easily enough, but please note it is positioned to the top left corner with position:absolute, so unlike the other elements, it's not in a container or a table cell.

Good luck with the tweaks. I'm not big on commenting the markup, so if you need some help finding your way around, let me know, but let me know soon, because these days, anything I don't refresh my memory on within a week, starts looking foreign to me.

Now if you will excuse me, all of this coding nonsense has taken its toll, meaning my off-topic duties have been piling up, big time! :D

Hey, glad to help the endeavor, and many thanks to you, Bill, and Luke for keeping QB alive through this site, further development; and everyone else for their help with development and code contributions. It's a real pleasure still being part of the Q-munity.

Pete
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 19, 2019, 05:02:01 am
Good news! I downloaded Opera, and it displays just fine. No problem with slide show buttons, but wait, that's not Opera GX, their new gaming browser. My hunch is that's a glitch on their end, which they will probably work out, along with whatever other bugs a new system usually has. More good news, the IE problem is actually not so much a browser issue as is is an image issue. I had copied the images from the site, but get this... when I tried to open the logo in Paint.net, it threw an error about the format! So I copied the image from the site, directly to Paint, and then saved it. The freshly re-made image displays just fine now. I made changes to all the other images with this "IE" non-display problem and I re-uploaded the zip file, so Fill, please get the latest revised copy before tweaking anything.

https://www.qb64.org/forum/index.php?topic=1941.msg111703#msg111703

OK, Last bit of good news. Since IE was not able to handle inline-flex, which is why the display looked different in IE in full screen, I changed to inline, and it works just fine now in IE and FF. I had some previous issues with inline in Firefox for some other types of displays, which is why I changed to inline-flex. I'll have to double check on this later, but the preliminary results look favorable and I changed this in the revised zip file and posted code, too.

I hope Opera will fix what I perceive to be a bug in their new gaming browser. If so, we have ourselves a good start at cross-browser compatibility. Of course the touch screen stuff still has to be checked out by somebody. My cell doesn't have a view screen. See image... Anyway, so far so good with the reported browser display issues.

Well, it's bedtime for Bonzo. And like my wife always says back... Goodnight Bonzo!

Pete

  [ This attachment cannot be displayed inline in 'Print Page' view ]  
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: TempodiBasic on December 19, 2019, 07:10:06 am
Great Pete!
Where do you bought that fantastic cellular phone?
I like it so much! I hope that the vendor sell it online.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: bplus on December 19, 2019, 11:47:37 am
LOL I am imagining an old (don't tell Pete) VHS recorder in place of camera on top of phone.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 19, 2019, 01:18:19 pm
LOL I am imagining an old (don't tell Pete) VHS recorder in place of camera on top of phone.

Oh thank God, off-topic at last!!! Well, there actually is a vendor that sells these phone CASES (in other words, no it isn't an actual phone, it's only a case to hold your phone.  They are pretty reasonably priced, but no, I don't actually own one. I posted it as a prank reply to TheBOB, in our QBasic Community forum.

https://www.tapatalk.com/groups/qbasic/viewtopic.php?p=213047#p213047

Find the link to zazzle.com, on the forum page 3rd post down,  and follow. Zazzle has a few different phone case models to choose from, and you can even personalize the dial number, but again, be warned, it's only a case, it's not an actual working phone. No one needs that kind of a Christmas expectation letdown... Oh wow dad, you got me a car!!! No son, it's only a car cover. Merry Christmas!!!

Hey, again, thanks for your research into the display of the webpage on different browsers. I was able to use that ifo to fix the issues, except the Opera GX, which I'm assuming is on their end and will be fixed in time.

Pete
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 19, 2019, 05:19:42 pm
Hi Tempo,

Is this the effect what you wanted kept in the website? I coded it separately, to try it out. I think it could be added. The Wix site uses javascript for this, but this simpler I put together is all CSS...

Code: Text: [Select]
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4.   <style type="text/css">
  5. html {
  6. scroll-behavior: smooth;
  7. }
  8. #navdots {
  9. font-size: 30px;
  10. position: fixed;
  11. top: 120px;
  12. right: 20px;
  13. }
  14. #navdots a:link {
  15. color: rgba(33, 44, 63, 1);
  16. text-decoration: none;
  17. }
  18. /* visited link */
  19. #navdots a:visited {
  20. color: rgba(33, 44, 63, 1);
  21. }
  22. /* mouse over link */
  23. #navdots a:hover {
  24. color: rgba(33, 44, 63, .5);
  25. }
  26. /* selected link */
  27. #navdots a:active {
  28. color: white;
  29. }
  30.   </style>
  31.   <title>crap9</title>
  32. </head>
  33. <body>
  34. <div id="navdots">
  35. <p><a href="#1">●</a></p>
  36. <p><a href="#2">●</a>
  37. </p>
  38. <p><a href="#3">●</a>
  39. </p>
  40. </div>
  41. <div style="text-align: center;">
  42. <p
  43.  style="margin-top: 0px; margin-bottom: 1000px; font-size: 30px; font-weight: bold;"><a
  44.  name="1"></a>[Part
  45. 1]
  46. </p>
  47. <p
  48.  style="margin-top: 0px; margin-bottom: 1000px; font-size: 30px; font-weight: bold;"><a
  49.  name="2"></a>[Part
  50. 2]
  51. </p>
  52. <p
  53.  style="margin-top: 0px; margin-bottom: 1000px; font-size: 30px; font-weight: bold;"><a
  54.  name="3"></a>[Part
  55. 3]
  56. </p>
  57. <p></p>
  58. </div>
  59. </body>
  60. </html>
  61.  

I know, the top button on the website goes to the next divider, but for demo sake I made mine go to the top, middle, and end. Anyway, if it needs to be like the Wix site, that's a very easy adjustment to make. Also, we probably need to give some thought on the height of these divided sections. It seems the entire topic should be able to fit in each screen height, but I'll have to see how that effects a mobile screen. Easy for desktop resolutions, sure, but I'll have to see how the current site handles it on my cell phone. Anyway, if you guys want to keep the "dot" effect, let me know and I'll try adding it to the existing webpage code.

Pete


Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: TempodiBasic on December 19, 2019, 06:18:51 pm
excellent!
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 20, 2019, 12:05:07 am
Alright then... I added version #19 to the zip file and I updated the copy / paste code, so no need to re-upload the zip. Just save the copy paste code as version 19 if you want to keep the two different versions separate.

Let me know if you want to make adjustments in the container sizes. It's a bit tricky, but I did add some collapsing spacing elements. In other words, my goal was to try to make the display look evenly spaced as the elements changed when downsizing the screen.

Pete
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 20, 2019, 01:29:23 pm
Here's one effect that's really simple to implement, and the Wix page has it, fix the background against scrolling. All we need is this added to the existing background statement...

<div style="background-image: url(bg.jpg); padding-bottom: 40px;">

to...

<div style="background-image: url(bg.jpg); background-attachment: fixed; padding-bottom: 40px;">

Pretty simple, and yet it's a really neat effect. I won't upload it, but like I wrote, it can easily be added along with any other tweaks.

Also, it would be nice to be able to get the existing page elements to fade out or blur when the mobile menu opens. That might require JavaScript.

Pete

Pete


Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: TempodiBasic on December 21, 2019, 06:51:45 am
Hi Pete

feedback:
in the four browsers Edge, IE, Chrome and Opera the 3 symbols at the right border of the page to navigate are 3 à bt they works fine...
here a sample
  [ This attachment cannot be displayed inline in 'Print Page' view ]  


thinking about:
in the WIX version  I find very hard to go to the top of the webpage after visiting one of the three section pointed by this menu of navigation.... and many websites use a link to the top of the page... is this kind of link  or obsolete or unuseful for QB64 webpage?

about
Quote
Let me know if you want to make adjustments in the container sizes. It's a bit tricky, but I did add some collapsing spacing elements. In other words, my goal was to try to make the display look evenly spaced as the elements changed when downsizing the screen.

I think that the answer is of Fellippe. We wait his judgment.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: Pete on December 22, 2019, 03:44:31 pm
Well I uploaded the code today to correct for a couple of validation errors I found. One interesting one... I went to validate it at W3C and I had to comment out the "full screen" attribute of the youtube frame to get it to pass. For some reason, the html validation won't accept ALLOW and it didn't help by changing the HTML Doc Type to accept frames. So for now, I just commented it out. YouTube still plays, it just won't respond to a full screen click anymore. If the full screen attributes are replaced, and they need to be replaced below the src attribute, as indicated in the comment tag, the videos can again be played full screen, but we get these two warnings (Two, because I have a larger and smaller video embedded for cell and desktop devices)...


Quote
    Error Line 610, Column 8: there is no attribute "ALLOW"

     allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"

    ✉

    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
    Error Line 611, Column 18: there is no attribute "ALLOWFULLSCREEN"

     allowfullscreen="" frameborder="0" height="175"

    ✉

    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Anyway, let me know what you guys want to do about the vid, or if you know of a fix. I mean the page will work either way, but it is nice to have a validated page, whenever possible. O, the CSS was validated as well.

Pete

PS About the Opera GX. I suspect it is just not translating the Unicode used for the < > previous, next arrows. I mean if push comes to shove a photoshop image could be inserted, instead. Unicode was used for the three menu navigation dots, the email symbol, and the previous / next slide show buttons.
Title: Re: Any web designers in the house? - Departing from Wix.com
Post by: TempodiBasic on December 22, 2019, 04:53:32 pm
in the last session of loading the webpage in different browsers i have took apart OperaGx and I use only Opera standard.
However I agree with you that it seems an error in translating the unicode code.