Changed to serve as a public guestbook

w3schools-test · Apr 13, 2021 · ebb1a5c · ebb1a5c
1 parent facaeae
commit ebb1a5c
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,31 @@
-# hello-world
-Hello World repository for Git tutorial
-This is an example repository for the Git tutoial on https://www.w3schools.com
-This tutoial focuses mainly on Git and using GitHub as its remote.
+# Guestbook for w3schools.com Git tutorial
+This is the public GitHub project that you can contribute to.
+If you are just getting started, I suggest you start at the tutorial here: https://www.w3schools.com/git
 
-This repository is built step by step in the tutorial.
+# Leave a message for us!
+This repository is ment to be a place where our users can leave messages for others to see.
 
-It now includes steps for GitHub.
+You can see the result here: https://w3schools-test.github.io/
+
+We generally only have one condition: 
+We will not allow messages that are negative, or hurtful. Try to be welcome and positive!
+
+# What should my message look like?
+
+You can add almost anything to the index.html file between the indicated comments:
+
+`<!-- Insert your message below here -->`
+
+and
+
+`<!-- End user messages -->`
+
+So feel free to use your imagination!
+
+If you are not feeling very creative, you can add a quote, or small text like the examples on this page: https://www.w3schools.com/w3css/w3css_quotes.asp
+And add your name to it :)
+
+# My change was not approved :(
+
+We reserve the right remove, or not add, anything that we feel will not fit here.
+Also, this page is a community page, and the content you add may be changed later.
diff --git a/bluestyle.css b/bluestyle.css
diff --git a/img_guestbook_wall.jpg b/img_guestbook_wall.jpg
diff --git a/img_hello_git.jpg b/img_hello_git.jpg
diff --git a/img_hello_world.jpg b/img_hello_world.jpg
diff --git a/index.html b/index.html
@@ -1,16 +1,86 @@
 <!DOCTYPE html>
 <html>
-<head>
-<title>Hello World!</title>
-<link rel="stylesheet" href="bluestyle.css">
-</head>
+<title>Git Tutorial Guestbook</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
+<style>
+html,body,h1,h2,h3,h4 {font-family:"Lato", sans-serif}
+.w3-tag {height:15px;width:15px;padding:0;margin-top:6px;cursor:pointer}
+</style>
 <body>
 
-<h1>Hello world!</h1>
-<div><img src="img_hello_world.jpg" alt="Hello World from Space" style="width:100%;max-width:640px"></div>
-<p>This is the first file in my new Git Repo.</p>
-<p>This line is here to show how merging works.</p>
-<div><img src="img_hello_git.jpg" alt="Hello Git" style="width:100%;max-width:640px"></div>
+<!-- Content -->
+<div class="w3-content" style="max-width:1920px;margin-top:40px;margin-bottom:40px">
+
+  <div class="w3-panel">
+    <h1><b>GIT TUTORIAL GUESTBOOK</b></h1>
+  </div>
+
+  <!-- Slideshow -->
+  <div class="w3-container">
+    <div class="w3-display-container">
+      <img src="img_guestbook_wall.jpg" alt="Image from Nicolas Dmítrichev via unsplash.com" style="width:100%">
+      <div class="w3-display-topleft w3-container w3-padding-32">
+        <span class="w3-white w3-padding-large w3-animate-bottom">Share your message with the community</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Grid -->
+  <div class="w3-row w3-container">
+    <div class="w3-center w3-padding-64">
+      <span class="w3-xlarge w3-bottombar w3-border-dark-grey w3-padding-16">What is This?</span>
+    </div>
+    <div class="w3-col l3 m6 w3-light-grey w3-container w3-padding-16">
+      <h3>Learn</h3>
+      <p>Learn how to use Git and GitHub from our <a href="https://www.w3schools.com/git/default.asp" title="w3schools.com Git Tutorial" target="_blank" class="w3-hover-text-green">Git Tutorial</a>.</p>
+    </div>
+
+    <div class="w3-col l3 m6 w3-grey w3-container w3-padding-16">
+      <h3>Change</h3>
+      <p>Fork and Clone this <a href="https://github.com/w3schools-test/w3schools-test.github.io" title="Guestbook Git Repository" target="_blank" class="w3-hover-text-green">GitHub repository</a>, to your local Git or GitHub account.</p>
+    </div>
+
+    <div class="w3-col l3 m6 w3-dark-grey w3-container w3-padding-16">
+      <h3>Collaborate</h3>
+      <p>Add a message, following the guidelines from the <a href="https://github.com/w3schools-test/w3schools-test.github.io" title="Guestbook Git Repository" target="_blank" class="w3-hover-text-green">README.md</a>.</p>
+    </div>
+
+    <div class="w3-col l3 m6 w3-black w3-container w3-padding-16">
+      <h3>Contribute</h3>
+      <p>Add a <a href="https://github.com/w3schools-test/w3schools-test.github.io/pulls" title="GitHub Pull Request" target="_blank" class="w3-hover-text-green">pull request</a>, and see if your change gets approved and added below!</p>
+    </div>
+  </div>
+
+
+  <!-- Grid -->
+  <div class="w3-row-padding" id="about">
+    <div class="w3-center w3-padding-64">
+      <span class="w3-xlarge w3-bottombar w3-border-dark-grey w3-padding-16">Leave A Message</span>
+    </div>
+
+    <!-- Insert your message below here -->
+
+    <!-- Example message -->
+    <div class="w3-panel w3-leftbar w3-light-grey">
+      <p class="w3-xlarge w3-serif"><i>"Make it as simple as possible, but not simpler."</i></p>
+      <p>Albert Einstein</p>
+    </div>
+
+    <!-- End user messages -->
+
+  </div>
+</div>
+
+<!-- Footer -->
+
+<footer class="w3-container w3-padding-32 w3-light-grey w3-center">
+  <a href="#" class="w3-button w3-black w3-margin">To the top</a>
+  <p>Note: </p>
+  <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
+</footer>
 
 </body>
-</html>
+</html>