Home Esplora Aiuto
Registrati Accedi
michtang
/
personal
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

first commit

michaelhtang 5 anni fa
commit
81c164565a
9 ha cambiato i file con 222 aggiunte e 0 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. BIN
      css_buttons_lesson.rar
  2. BIN
      css_lesson.zip
  3. BIN
      css_tables_embed.zip
  4. 4 0
      debug.log
  5. 44 0
      facts.html
  6. 63 0
      index.html
  7. BIN
      media/penguins.jpg
  8. BIN
      media/penguins_250px.jpg
  9. 111 0
      style.css

BIN
css_buttons_lesson.rar
Vedi File


BIN
css_lesson.zip
Vedi File


BIN
css_tables_embed.zip
Vedi File


+ 4 - 0
debug.log
Vedi File 

@@ -0,0 +1,4 @@
 
+[1027/193429.948:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
 
+[1029/191723.517:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
 
+[1101/200321.234:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
 
+[1102/212422.233:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

File diff suppressed because it is too large
+ 44 - 0
facts.html


+ 63 - 0
index.html
Vedi File 

@@ -0,0 +1,63 @@
 
+<!DOCTYPE html>
 
+<html lang = "en">
 
+<!--
 
+The head is used to load settings for the website. Nothing in the head is visible to the user.
 
+-->
 
+<head>
 
+  <meta charset = UTF-8">
 
+  <title>Penguins are Awesome</title>
 
+  <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
 
+</head>
 
+<body>
 
+<!--
 
+The body is where all the content visible to the user is found. It can be separated into different sections like a header, article, and footer. All text, images, links, and animations are found here.
 
+-->
 
+<header>
 
+  <h1 style="color:red;">All about Penguins</h1>
 
+</header>
 
+<nav>
 
+  <div class="button">Home</div>  <a href="facts.html"><div class="button">Facts</div></a>  <a href="http://www.google.com/" target="_blank"><div class="button">Google</div></a>
 
+</nav>
 
+<aside>
 
+  <h2>Links</h2>
 
+   <ul>
 
+     <li>Wikipedia</li>
 
+   </ul>
 
+</aside>
 
+<article>
 
+  <p>
 
+    This website is devoted to penguins.
 
+  </p>
 
+  <a href="media/penguins.jpg" target="_blank">
 
+    <img src="media/penguins_250px.jpg" alt="Baby Penguins"  />
 
+  </a>
 
+
 
+  <h2 class="redFont uppercase">Why Penguins are cool</h2>
 
+  <p class="redFont">
 
+    Penguins are cool because they live in the <strong>Southern Hemisphere</strong> in cooler waters. Many misconceptions about penguins are common. For example , many winter scenes have <b>Polar Bears</b> and Penguins in the same image when they never live together!
 
+  </p>
 
+
 
+  <p>
 
+    The <span class="redFont">claymation</span> animation <em>Pengu</em> popularized penguins with Pengu's comical experiences in modern day society.
 
+  </p>
 
+  <h2 id="habitatsHeading">Penguin Habitats</h2>
 
+  <p>
 
+    Penguins live in Antartica, but are found throughout the southern points of South America, Africa, and Australia too!
 
+  </p>
 
+  <table>
 
+    <tbody>
 
+      <tr>
 
+        <th>Date</th><th>Temperature</th>
 
+      </tr>
 
+      <tr>
 
+        <td>2020-11-01</td><td>17</td>
 
+      </tr>
 
+      <tr>
 
+        <td>2020-10-31</td><td>6</td>
 
+      </tr>
 
+    </tbody>
 
+  </table>
 
+  <iframe width="300" src="https://www.youtube.com/embed/OF0w9z_JUJs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
+</article>
 
+</body>
 
+</html>

BIN
media/penguins.jpg
Vedi File


BIN
media/penguins_250px.jpg
Vedi File


+ 111 - 0
style.css
Vedi File 

@@ -0,0 +1,111 @@
 
+@charset 'utf-8';
 
+
 
+/* Font and background changes */
 
+h2 {
 
+  color: #3BC1F6;
 
+  font-family: Arial;
 
+  font-size: 16pt;
 
+}
 
+
 
+body {
 
+  background-color: #C0EDFF;
 
+}
 
+
 
+.redFont {
 
+  color: red;
 
+}
 
+
 
+.uppercase {
 
+  text-transform: uppercase;
 
+}
 
+
 
+#habitatsHeading {
 
+  color: pink;
 
+}
 
+
 
+/* hyperlinks */
 
+a:link {
 
+  /* Link is not clicked */
 
+  text-decoration: none;
 
+}
 
+
 
+a:hover {
 
+  /* mouse is hovering over the link  */
 
+  text-decoration: none;
 
+  text-transform: uppercase;
 
+  color: #FFFFFF;
 
+}
 
+
 
+a:visited {
 
+  /* Link has already been clicked */
 
+  text-decoration: none;
 
+}
 
+
 
+/* Layouting */
 
+nav, header, article  {
 
+  //border: 5px red solid;
 
+  background-color: #5BCEFC;
 
+  padding-top: 15px;
 
+  /*margin-top: 50px; */
 
+  padding-bottom: 15px;
 
+  padding-left: 15px;
 
+  /*text-align: center; */
 
+  margin-left: 15%;
 
+  margin-right: 15%;
 
+  border-radius: 10px;
 
+  margin-bottom: 5px;
 
+}
 
+/*
 
+Add header, article after then add margin-bottom: 5px;
 
+*/
 
+
 
+nav {
 
+  background-color: white;
 
+  height: 30px;
 
+}
 
+
 
+aside {
 
+  //border: 5px red solid;
 
+  max-width: 20%;
 
+  float: right;
 
+  margin-right: 15%;
 
+  padding-right: 10px;
 
+}
 
+
 
+/* ---- Buttons ----*/
 
+
 
+.button {
 
+  border: 5px #3BC1F6 solid;
 
+  width: 65px;
 
+  text-align: center;
 
+  padding-top: 3px;
 
+  padding-bottom: 3px;
 
+  padding-left: 5px;
 
+  padding-right: 5px;
 
+  background-color: #C0EDFF;
 
+  border-radius: 10px;
 
+  float: left;
 
+  margin-right: 3px;
 
+}
 
+
 
+a:link .button {
 
+  text-transform: uppercase;
 
+}
 
+
 
+a:visited .button {
 
+  text-transform: uppercase;
 
+}
 
+
 
+a:hover .button {
 
+  text-transform: uppercase;
 
+  border-color: #C0EDFF;
 
+  background-color: #3BC1F6;
 
+}
 
+
 
+/* ---- Center and Image ----
 
+Would center all images, use classes to center the images with that class like .center-image*/
 
+img {
 
+  display: block;
 
+  margin-left:auto;
 
+  margin-right:auto;
 
+}