startup-systems · fedezarf · Sep 28, 2016 · Sep 28, 2016 · Sep 28, 2016 · Sep 28, 2016
diff --git a/README.md b/README.md
@@ -1,55 +1,3 @@
-# Mashup project
+# Mashup from Federico Zarfati
 
-This project is open-ended!
-
-* [AJAX demos](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax)
-* [inspiration?](http://www.programmableweb.com/mashups)
-
-## Requirements
-
-* Build a site that uses data from at least one external API in an interesting, interactive way. (**80%**)
-* HTML validation (using the [Nu HTML Checker](https://validator.w3.org/nu/)) must pass. (**10%**)
-* JavaScript linting (using the configured [JSHint](http://jshint.com/about/)) must pass. (**10%**)
-* Replace this README with a description of the project.
-
-### Extra credit
-
-Too easy?
-
-* Build in an [object-oriented](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript) way (**10%**)
-* Add fancy interactivity/animations (**10%**)
-
-If you do either of these, please let Aidan know so he can take a look.
-
-## Tips
-
-* The JS code should be **non-trivial**. That being said... start simple! (Just get the data to show up on the page.)
-* No server-side coding is required, but feel free to create a backend in whatever language if you like, if you need one.
-* You are welcome to use any 3rd-party libraries/frameworks – just load them from a CDN (e.g. [cdnjs](http://cdnjs.com)), or put them under the [`vendor/`](vendor/) folder.
-* **Do not commit the `client_secret` (or anything else from an API that says "token" or "secret")**, as a hacker could use this to make requests on behalf of you.
-
-## Finding an API
-
-A couple things to look for in an API (or at least the endpoints you're using) for this project:
-
-* Make sure it doesn't require authentication/authorization (e.g. [OAuth](http://oauth.net/)) - at least for the endpoints that you want to use - so that you don't need a server.
-* If the API doesn't support cross-domain requests (JSONP or CORS), you will need to use [JSONProxy](https://jsonp.afeld.me/).
-
-Here is a [list of API suggestions](https://gist.github.com/afeld/4952991).
-
-## Running tests locally
-
-Within this repository directory in your [virtual machine](https://github.com/startup-systems/vm):
-
-1. [Install Node.js 6.x.](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions)
-1. Install the project dependencies.
-
-    ```bash
-    npm install
-    ```
-
-1. Run the tests.
-
-    ```bash
-    npm test -s
-    ```
+Used Google Maps APIs to show where I live!
diff --git a/index.html b/index.html
@@ -1,8 +1,65 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Mashup</title>
-  </head>
-  <body>
-  </body>
+<head>
+	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+		<title>fz234</title>
+		<link href="style.css" rel="stylesheet" type="text/css" />
+
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+
+</head>
+<body>
+<div id="wrapper">
+	<div id="header">
+    <script>
+	$(document).ready(function(){
+		$('#immagine').click(function(){
+			$('#immagine').attr('src', 'http://orig05.deviantart.net/a1df/f/2011/112/8/f/nyan_cat_gif_by_kodiakpaws-d3emqu1.gif');
+		});
+});
+</script>
+</div>
+
+	<div id="main-content">
+		<div id="left-column">
+			<div id="logo">
+			fz234 Federico Zarfati
+			</div>
+			   <p>
+					 <img src="https://avatars3.githubusercontent.com/u/2929194?v=3&s=460" id="immagine" alt="altfff" width="139" height="150" style="margin: 0 10px 10px 0;float:left;" />
+						<em>This is my small biography!</em>
+								<em>I come from Italy and I am a Computer Scientist</em>
+										<em>I am really passionate about Artificial Intelligence.</em>
+			                 </p>
+		</div>
+		<div id="right-column">
+			<div class="sidebar">
+				<h3>About Me</h3>
+				<p>Hi! I am Federico and this is my website for the Startup Systems course!</p>
+        <div id="mapc"></div>
+        <button id="btn">load map</button>
+		</div>
+<script>
+    var map;
+    function initMap() {
+      map = new google.maps.Map(document.getElementById('map'), {
+        center: {lat: -34.397, lng: 150.644},
+        zoom: 8
+      });
+    }
+    $(document).ready(function(){
+       $("#btn").click(function(){
+        $("#mapc").append('<div id="map"></div>');
+        initMap();
+        });
+     });
+</script>
+        <script async defer
+          src="https://maps.googleapis.com/maps/api/js?key=mykey">
+        </script>
+
+	</div>
+</div>
+</div>
+</body>
 </html>
diff --git a/style.css b/style.css
@@ -0,0 +1,140 @@
+/* Layout */
+
+body {
+    font:normal 12px/1.6em Arial, Helvetica, sans-serif;
+	color:#2a3845;
+	margin:0;
+	padding:0;
+	background:#FFFFFF;
+}
+
+p {
+	margin:0;
+	padding:0;
+}
+
+#wrapper {
+	margin:0 auto;
+	width:632px;
+	border-left:1px solid #f0e9eb;
+	border-right:1px solid #f0e9eb;
+}
+
+#header {
+	margin:0 1px;
+}
+
+#bg {
+	height:36px;
+	background:url('http://img840.imageshack.us/img840/9886/87926428.gif') repeat-x;
+}
+
+#main-content {
+	margin:0 auto;
+}
+
+#main-image {
+	text-align:center;
+}
+
+#left-column {
+	width:300px;
+	padding:0 30px 30px;
+	float:left;
+}
+
+#right-column {
+	width:270px;
+	float:right;
+}
+
+.sidebar {
+	width:218px;
+	margin:0 auto;
+	padding:10px 25px;
+	background:url('http://img404.imageshack.us/img404/3092/shadowh.jpg') no-repeat top;
+}
+
+#footer {
+	background:#f7f7f7;
+	border-top:1px solid #f0e9eb;
+	padding:10px 15px;
+	clear:both;
+}
+
+/* Global Styling */
+
+a:visited, a:link {
+	color:#a43b55;
+	text-decoration:underline;
+	background:none;
+}
+
+a:hover {
+	color:#a43b55;
+	text-decoration:none;
+	background:none;
+}
+
+h1 {
+	color:#446CB3;
+	margin:0 0 10px;
+	padding-bottom:10px;
+	font:normal 17px Georgia, serif;
+	border-bottom:1px solid #efece7;
+}
+
+h2 {
+	color:#446CB3;
+	margin:20px 0 10px;
+	padding-bottom:10px;
+	font:normal 17px Georgia, serif;
+	border-bottom:1px solid #efece7;
+}
+
+h3 {
+	color:#446CB3;
+	margin:10px 0;
+	padding-bottom:10px;
+	font:bold 14px Arial, Helvetica, sans-serif;
+	border-bottom:1px solid #efece7;
+}
+
+ul {
+	padding:0;
+	margin:0 0 0 17px;
+	list-style:square url('http://img525.imageshack.us/img525/1890/bulletr.gif');
+}
+
+.box {
+	background:#f7f7f7;
+	border:1px solid #446CB3;
+	padding:15px;
+}
+
+#nav {
+	background:#06a;
+	padding:10px 20px;
+	text-align:right;
+	color:#446CB3;
+}
+
+#nav a {
+	margin: 0 10px;
+}
+
+#nav a:visited, #nav a:link {
+	text-decoration:none;
+	color:#446CB3;
+}
+
+#nav a:hover {
+	text-decoration:underline;
+	color:#446CB3;
+}
+
+#logo {
+	margin-bottom:20px;
+	font:normal 18px Georgia, serif;
+	color:#446CB3;
+}