Initial commit

vetovar · Oct 12, 2023 · 1d55045 · 1d55045
1 parent f491ac2
commit 1d55045
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 0 deletions.
diff --git a/images/pizza.jpg b/images/pizza.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<title>My Favorite Pizza</title>
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
+
+<link href="style.css" rel="stylesheet" type="text/css" />
+
+</head>
+
+<body>
+
+<!-- WEB PAGE CONTENT HERE -->
+
+<div class="pageContainer">
+  <div class="imageContainer"> 
+    <img src="images/pizza.jpg" alt="Pizza with pepperoni and cheese." /> 
+  </div>
+  <div class="textContainer">
+    <h1>Pizza!</h1>
+    <p>My Favorite Toppings: </p>
+    <ul>
+      <li>Pepperoni</li>
+      <li>Mozzarella Cheese</li>
+      <li>Mushrooms</li>
+    </ul>
+  </div>
+</div>
+
+</body>
+</html>
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,64 @@
+
+/* 
+	STYLE.CSS:
+	One stylesheet to rule them all.
+	
+	selector { property:value }
+	
+*/
+
+@import url(https://fonts.googleapis.com/css?family=Fredericka+the+Great|Lato);
+
+body {
+  background-color: #5f5345;
+}
+
+.pageContainer {
+  width: 940px;
+  margin: 20px auto 0 auto;
+  padding: 20px;
+  background-color: #fff;
+}
+
+.imageContainer {
+  float: left;
+  width: 620px;
+}
+
+.textContainer {
+  float: left;
+  width: 300px;
+  margin-left: 20px;
+  margin-top: 20px;
+}
+
+img {
+  width: 100%;
+}
+
+h1 {
+  font-family: 'Fredericka the Great', cursive;
+  font-size: 64px;
+  color: #8b1b00;
+}
+
+p, li {
+  font-family: 'Lato', sans-serif;
+  font-size: 22px;
+  color: #51473b;
+}
+
+
+
+
+/* ---- Advanced ---- */
+/* This tag is a bit advanced for this lesson,  
+   but is needed to wrap the pageContainer 
+   around any sized content that is floated within it. */
+
+.pageContainer:after { 
+  content: " ";
+  display: table;
+  clear: both;
+}
+