diff --git a/README.md b/README.md index 8501e40..bc36527 100644 --- 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 index 6524157..98efc57 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,65 @@ - - Mashup - - - + + + fz234 + + + + + + +
+ + +
+
+ +

+ altfff + This is my small biography! + I come from Italy and I am a Computer Scientist + I am really passionate about Artificial Intelligence. +

+
+
+
+

About Me

+

Hi! I am Federico and this is my website for the Startup Systems course!

+
+ +
+ + + +
+
+
+ diff --git a/style.css b/style.css new file mode 100644 index 0000000..1f9be12 --- /dev/null +++ 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; +}