having another crack at this

e-s-l · Jun 15, 2024 · 897727c · 897727c
1 parent 08338c4
commit 897727c
Show file tree

Hide file tree

Showing 59 changed files with 1,091 additions and 203 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+## Experimental Website Practice
+
+
diff --git a/SMPTE_color_bars/1kHz_44100Hz_16bit_05sec.wav b/SMPTE_color_bars/1kHz_44100Hz_16bit_05sec.wav
diff --git a/SMPTE_color_bars/Cursor_3.cur b/SMPTE_color_bars/Cursor_3.cur
diff --git a/SMPTE_color_bars/Cursor_5.cur b/SMPTE_color_bars/Cursor_5.cur
diff --git a/SMPTE_color_bars/Cursor_5_1.cur b/SMPTE_color_bars/Cursor_5_1.cur
diff --git a/SMPTE_color_bars/arrow.cur b/SMPTE_color_bars/arrow.cur
diff --git a/SMPTE_color_bars/icon_95.png b/SMPTE_color_bars/icon_95.png
diff --git a/SMPTE_color_bars/index.html b/SMPTE_color_bars/index.html
diff --git a/SMPTE_color_bars/smpte_color_bars.html b/SMPTE_color_bars/smpte_color_bars.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport">
+        <meta http-equiv="refresh" content="1; url='../old_attempt/index.html'">
+        <meta content="device-width, initial-scale=1.0">
+        <title>SMTPE Colo(u)r Bars</title>
+        <link rel="stylesheet" href="./smtpe_color_bars_styles.css">
+    </head>
+    <audio autoplay>
+        <source src="1kHz_44100Hz_16bit_05sec.wav" type="audio/wav">
+    </audio>
+        <body>
+         <a href="index.html">
+            <div class="smpte">
+                <div class="color-bar">
+                    <div class="top gray"></div>
+                    <div class="bottom blue"></div>
+                </div>
+                <div class="color-bar">
+                    <div class="top yellow"></div>
+                    <div class="bottom black"></div>
+                </div>
+                <div class="color-bar">
+                    <div class="top cyan"></div>
+                    <div class="bottom magenta"></div>
+                </div>
+                <div class="color-bar">
+                    <div class="top green"></div>
+                    <div class="bottom black"></div>
+                </div>
+                <div class="color-bar">
+                    <div class="top magenta"></div>
+                    <div class="bottom cyan"></div>
+                </div>
+                <div class="color-bar">
+                    <div class="top red"></div>
+                    <div class="bottom black"></div>
+                </div>
+                <div class="color-bar">
+                    <div class="top blue"></div>
+                    <div class="bottom gray"></div>
+                </div>
+            </div>
+           </a>
+        </body>
+</html>
diff --git a/SMPTE_color_bars/smtpe_color_bars_styles.css b/SMPTE_color_bars/smtpe_color_bars_styles.css
@@ -0,0 +1,49 @@
+/* ... */
+
+body {
+    display: flex;
+    margin: 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    margin: 0;
+    opacity: 100;
+    filter: blur(2px)
+}
+
+a {
+    cursor:
+        url(Cursor_3.cur), pointer;
+}
+
+/* ... */
+
+.smpte {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+}
+
+.color-bar {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.color-bar .top {
+    height: 90%;
+}
+
+.color-bar .bottom {
+    height: 10%;
+}
+
+.gray { background-color: rgb(104, 104, 104); }
+.yellow { background-color: rgb(180,180,16); }
+.cyan { background-color: rgb(16,180,180); }
+.green { background-color: rgb(16, 180, 16); }
+.magenta { background-color: rgb(180, 16, 180); }
+.red { background-color: rgb(180, 16, 16); }
+.blue { background-color: rgb(16, 16, 180); }
+.black  { background-color: rgb(16, 16, 16); }
diff --git a/about-styles.css b/about-styles.css
@@ -0,0 +1,37 @@
+/* Reset CSS */
+html{
+    margin: 0;
+    padding: 0;
+    scroll-behavior: smooth;
+    box-sizing:border-box;
+}
+
+/*Resposive image reset*/
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+/**************************************************/
+
+body {
+    background-image: url('./images/analog_camera_2.JPG');
+    background-repeat: repeat;
+    width: 100vw;
+    height: 100vh;
+
+}
+
+.main {
+    backdrop-filter: hue-rotate(240deg)  blur(5px);
+    padding: 20px;
+    margin: 5%;
+    border-radius: 2%;
+}
+
+h1 {
+    text-align: center;
+}
+
+/*...*/
diff --git a/about.html b/about.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport">
+        <meta content="device-width, initial-scale=1.0">
+        <title>About</title>
+        <link rel="stylesheet" href="about-styles.css">
+    </head>
+    <body>
+        <div class="main">
+            <h1>Hello</h2>
+            <p>yooo</p>
+            <p>ooooy</p>
+        </div>
+    </body>
+</html>
diff --git a/cv-styles.css b/cv-styles.css
@@ -0,0 +1,26 @@
+/* Reset CSS */
+html{
+    margin: 0;
+    padding: 0;
+    scroll-behavior: smooth;
+    box-sizing:border-box;
+}
+
+/*Resposive image reset*/
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+/**************************************************/
+
+body {
+    background-image: url('./images/analog_camera_3.JPG');
+    background-repeat: repeat;
+    width: 100vw;
+    height: 100vh;
+
+}
+
+/*...*/
diff --git a/cv.html b/cv.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport">
+        <meta content="device-width, initial-scale=1.0">
+        <title>CV</title>
+        <link rel="stylesheet" href="cv-styles.css">
+    </head>
+    <body>
+    </body>
+</html>
diff --git a/images/Cursor_5_1.cur b/images/Cursor_5_1.cur
diff --git a/images/analog_camera_1.JPG b/images/analog_camera_1.JPG
diff --git a/images/analog_camera_2.JPG b/images/analog_camera_2.JPG
diff --git a/images/analog_camera_3.JPG b/images/analog_camera_3.JPG
diff --git a/images/analog_camera_4.JPG b/images/analog_camera_4.JPG
diff --git a/images/bg800bulbs.jpg b/images/bg800bulbs.jpg
diff --git a/images/cable-1.png b/images/cable-1.png
diff --git a/images/geo250.jpg b/images/geo250.jpg
diff --git a/images/hi-def-wireframe.jpg b/images/hi-def-wireframe.jpg
diff --git a/images/htgreen-hero-canvas.jpg b/images/htgreen-hero-canvas.jpg
diff --git a/images/htgreen-hero.jpg b/images/htgreen-hero.jpg
diff --git a/images/htgreen-hero.psd b/images/htgreen-hero.psd
diff --git a/images/htgreen-layout.jpg b/images/htgreen-layout.jpg
diff --git a/images/logo32.png b/images/logo32.png
diff --git a/images/logo960wt.jpg b/images/logo960wt.jpg
diff --git a/images/pv250.jpg b/images/pv250.jpg
diff --git a/images/pw2.jpg b/images/pw2.jpg
diff --git a/images/testimonials/j-g-brown-200.jpg b/images/testimonials/j-g-brown-200.jpg
diff --git a/images/testimonials/r-sanderson-200.jpg b/images/testimonials/r-sanderson-200.jpg
diff --git a/images/testimonials/s-p-hill-200.jpg b/images/testimonials/s-p-hill-200.jpg
diff --git a/images/turbine250.jpg b/images/turbine250.jpg
diff --git a/index.html b/index.html
@@ -2,107 +2,33 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>HT Green</title>
-        <link rel="stylesheet" href="./styles.css">
+        <meta name="viewport">
+        <meta content="device-width, initial-scale=1.0">
+        <title>Contents</title>
+        <link rel="stylesheet" href="styles.css">
     </head>
-
     <body>
-        <!--Small logo, about us and testimonials, above banner image-->
-        <header>
-            <a id="top-of-page"> 
-            <img id="logo" src="images/logo32.png" alt="Company Logo">   
-            </a> 
-            <a href="#about-us"><p>About Us</p></a>
-            <a href="#testimonials"><p>Testimonials</p></a>
-        </header>
-
-        <!--acts as title of page. should really use id. -->
-        <div class="banner">
-            <img src="images/htgreen-hero.jpg" alt="Company Banner">
-        </div>
-
-        <!--The three info parts of the website. Using sections since have headings and therefore more appropriate than divs.-->
-        <section class="main-sections">
-            <h1>Towards a zero electricity bill</h1>
-            <p>Sick of getting big power bills? You've replaced all the old bulbs with LEDs, got a new fridge and super-efficient heat pump and youre still paying around $1200 a year? Your next step is to let HT Green work with you to design and install a system that uses solar, wind or geothermal that's guaranteed to wipe that power bill for now and into the future.</p>
-        </section>
-
-        <section class="main-sections">
-            <h1>Solar PV Solutions</h1>
-            <p>Solar Photovoltaic systems have come of age. Installers now can guarantee reliable cost-free power to your home or business. ROI is now taking less time than ever thanks to the ever decreasing equipment costs and better technology.</p>
-            <p>If you have battery storage such as a Tesla Powerwall or similar Lithium Ion chemistry solutions then you can take your savings even further.</p>
-            <p>Call us now to discuss which solution is the best fit for your home.</p>
-            <img src="images/pv250.jpg" alt="A house with solar panels.">
-        </section>
-
-        <section class="main-sections">
-            <h1>Geothermal</h1>
-            <p>Energy from the earth. It sounds simple because it is. The earth is warmer than the air and we can use this to heat your home. HT Green can engineer a solution to fit your situation to give you free plentiful home warming energy year-round.</p>
-            <p>Geothermal power is cost effective, reliable, and environmentally friendly, but has previously been geographically limited to areas near tectonic plate boundaries. Recent technological advances have dramatically expanded the range and size of viable resources, especially for direct applications such as home heating.</p>
-            <p>Geothermal wells tend to release greenhouse gases trapped deep within the earth, but these emissions are much lower than those of conventional fossil fuels. As a result, geothermal power has the potential to help mitigate global warming if widely deployed instead of fossil fuels.</p>
-            <img src="images/geo250.jpg" alt="A geothermal vent.">
-        </section>
-
-        <section class="main-sections">
-            <h1>Wind Turbines</h1>
-            <p>If you have the space and the aspect, we have the know-how to engineer a wind turbine system that generates electricity when the wind blows. Team a wind turbine with a solar PV system and you increase your energy generation potential. </p>
-            <p>New to wind power? HT Green can show you more about how a wind turbine works, the benefits of wind energy and how a wind turbine is installed.</p>
-            <p>If you're not sure on the type of turbine you need, before you buy from us, contact one of our wind power experts for the right advice.</p>
-            <img src="images/turbine250.jpg" alt="Wind turbines.">
-        </section>
-
-        <!--this is bascially also a main sections sections, but has different bordering-->
-        <section id="about-us">
-            <h1>About Us</h1>
-            <p>HT Green was established in 1997. We specialise in green technologies such as solar, wind turbines, geothermal and now small-scale hydro plants. </p>
-            <p>Company Directors Robert and Janet Wilkins built HT Green from the ground up with a small business grant and big dreams to power homes and businesses with energy derived from natural sources.</p>
-
-        </section>
-
-        <!--buttons break up the page-->
-        <!--   <div class="center"><a href="#top-of-page"><button class="back-to-top" >Back to top</button></a></div> --> 
-        <div class="center"><form action="#top-of-page"><button class="back-to-top" type="submit">Back to top</button></form></div>
-
-        <!--the second main section of the webpage-->
-        <section id="testimonials">
-            <h1>Testimonials</h1>
-
-            <div class="testimony">
-                <!-- image (float right) -->
-                <img src="images/testimonials/j-g-brown-200.jpg" alt="j-g-brown">
-                <p>"We installed our solar panels last year and our electricity bill is now less than zero. We actually went into credit in late Spring!"</p>
-                <h2>June & Gavin Brown, Surrey Hills NSW</h2>
-            </div>
-
-            <div class="testimony">
-                <!-- image (float right) -->
-                <img src="images/testimonials/s-p-hill-200.jpg" alt="s-p-hill">
-                <p>"We toyed with the idea of installing a hydro system a while back
-                    and never got around to it but thanks to HT Green's Hydro Oasis
-                    System it was easy! Our creek supplies our total energy needs."</p>
-                <h2>Sandra & Peter Hill, Adelaide SA.</h2>
-            </div>
-
-            <div class="testimony">
-                <!-- image (float right) -->
-                <img src="images/testimonials/r-sanderson-200.jpg" alt="r-sanderson">
-                <p>"I can look forward to no more electricity bills! HT Green took
-                    care of everything; recommended!"</p>
-                <h2>Roberta Sanderson, TAS</h2>
-            </div>
-        </section>
-
-        <!--Same button as above-->
-        <!--   <div class="center"><a href="#top-of-page"><button class="back-to-top" >Back to top</button></a></div> --> 
-        <div class="center"><form action="#top-of-page"><button class="back-to-top" type="submit">Back to top</button></form></div>
-
-        <!--the footer, why'd i make a div here too?-->
-        <div class="end">
-            <footer>
-                <p>Copyright © 2022</p>
-            </footer>  
-        </div>
-
+        <nav>
+            <ul class="top">
+                <li>I.
+                    <ul class="sub-list">
+                        <li><a href="./about.html">About</a></li>
+                        <li><a href="./cv.html">Research</a></li>
+                        <li><a href="https://github.com/e-s-l">Code</a></li>
+                    </ul>
+                </li>
+                <li>II.
+                    <ul>
+                        <li><a href="./SMPTE_color_bars/smpte_color_bars.html">Site 1</a></li>
+                    </ul>
+                </li>
+                <li>III.
+                    <ul>
+                        <li><a href="./index.html">...</a></li>
+                    </ul>
+
+                </li>
+            </ul>
+        </nav>
     </body>
-</html>
+</html>
diff --git a/old_attempt/README.md b/old_attempt/README.md
@@ -0,0 +1,2 @@
+# p3arl95.github.io
+Experimental Website Practice