Add files via upload

cryptocam1982 · web-flow · commit dd29830d7639 · 2025-06-23T14:25:09.000+02:00
Add assignment files
diff --git a/.phcode.json b/.phcode.json
@@ -0,0 +1 @@
+{}
diff --git a/index.html b/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>My first website in HTML</title>
+        <link rel="stylesheet" href="styles.css" />
+        <script src="script.js"></script>
+    </head>
+    <body>
+        <h1 class="title">Hello World</h1>
+        <h2>This is Cam trying to learn frontend development.</h2>
+        <br>
+        <button onclick="Yaaay()">Click me</button>
+    <section>
+            <h1>This is my first website, which I am creating by scratch</h1>
+            <p>I am currently following a course on FreeCodecamp. I just finished the first section, called HTML
+            basics.</p>
+        </section>
+    <section>
+        <p>This an image I took from a free stock images website, just to showcase my skills of 
+        how to add an image into my existing HTML code.</p>
+        <figure>
+          <img src="https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg" alt="a big image"
+        width="475" height="400"> 
+            <figcaption>This is an image from Pexels</figcaption>
+        </figure>
+        </section>
+        <section>
+            <h3>This is what an embedded Google Maps looks like.</h3>
+            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d10704.698855428405!2d4.272079874418961!3d52.04216582383364!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1750680104006!5m2!1snl!2snl"
+                    title="Google Maps"
+                    width="500" height="350" 
+                    style="border:0;" allowfullscreen="" loading="lazy" 
+                    referrerpolicy="no-referrer-when-downgrade">
+            </iframe>
+        </section>
+            <br>
+            <section>
+            <h1>How to use Phcode, click on the video below.</h1>
+                <iframe width="560" height="315" 
+                        src="https://www.youtube.com/embed/MgESh4fOQbk?si=bpBF4lkaubGpVslD" 
+                        title="YouTube video player" frameborder="0" 
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                    
+                </section>
+        <p>So, I am  really surprised of myself. I started learning HTML just a week and a half ago, and I'm already 
+        capable of building a simple one pager.</p>
+        <h2>I hope you enjoyed looking at my website. Don't worry, I'll get better in the future if I keep practicing.</h2>
+        <br>
+        <footer>
+            <p>Connect with me on  <a href="https://www.linkedin.com/in/cameliaena/" target="_blank">
+      LinkedIn
+                 </a>
+            </p>
+        </footer>
+        
+             
+    </body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,13 @@
+let numButtonClicks = 0;
+function buttonClicked() {
+    numButtonClicks = numButtonClicks + 1;
+    document.getElementById("mainDiv").textContent =
+        "Button Clicked times: " + numButtonClicks;
+
+    // First pop-up
+    alert("You clicked the button! Total clicks: " + numButtonClicks);
+
+    // Second pop-up
+    alert("Congratulations, you made it!");
+}
+
diff --git a/styles.css b/styles.css
@@ -0,0 +1,6 @@
+.title {
+    color: rgb(50, 0, 255);
+}
+body {
+    background-color: rgba(34, 183, 196, 0.29);
+}
