my profile page

jeremyisr · Nov 2, 2016 · b411349 · b411349
commit b411349
Show file tree

Hide file tree

Showing 9 changed files with 161 additions and 0 deletions.
diff --git a/images/background-01.jpg b/images/background-01.jpg
diff --git a/images/bouldering.jpg b/images/bouldering.jpg
diff --git a/images/hiking.jpg b/images/hiking.jpg
diff --git a/images/movies-matrix.jpg b/images/movies-matrix.jpg
diff --git a/images/movies-taken.jpg b/images/movies-taken.jpg
diff --git a/images/profilepic-squared.jpg b/images/profilepic-squared.jpg
diff --git a/images/squash.jpg b/images/squash.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,88 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Basic info</title>
+
+    <!-- Google fonts -->
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Montserrat:400,700">
+
+    <!-- Fontawesome -->
+    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+
+    <!-- Your style -->
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+
+
+    <div class="container">
+      <div class="card">
+        <img src="images/profilepic-squared.jpg" alt="" class="image-circle">
+        <h1>Jérémy ISRAEL</h1>
+        <h2>LeWagon student</h2>
+      </div>
+
+    <!-- Description of mysef -->
+      <div class="card">
+        <h2>Description</h2>
+        <p>1m69, brown hair, 69kg, brown eyes, parisian. Interested in coding. Speak English, French and Spanish. Like to get green rakes in fullstack challenges.</p>
+      </div>
+
+      <!-- Social links  -->
+      <div class="card">
+        <h2>Social Networks</h2>
+        <ul class="inline-list">
+          <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
+          <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
+          <li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
+        </ul>
+      </div>
+
+      <!-- Interests movies-->
+      <div class="card">
+        <h2>Favorite Movies</h2>
+        <table>
+          <tr>
+            <td><img src="images/movies-matrix.jpg" alt="" class="image-movie"></td>
+            <td><h3>Matrix</h3><p>The matrix is a system Neo, and this system is our enemy !</p></td>
+          </tr>
+          <tr>
+            <td><img src="images/movies-taken.jpg" alt="" class="image-movie"></td>
+            <td><h3>Taken</h3><p>First Taken movie was really good, but the next one sucked :-) An american girl gets kidnapped while traveling to Paris, but thanks god
+            her dad is good.</p></td>
+          </tr>
+        </table>
+      </div>
+
+      <!-- Interest sports -->
+      <div class="card">
+        <h2>Favorite Sports</h2>
+        <table>
+          <tr>
+            <td><img src="images/bouldering.jpg" alt="" class="image-sport"></td>
+            <td>
+              <h3>Bouldering</h3>
+              <ul id="list-small-left-padding">Bouldering is awesome because :
+                <li>you train but you don't get bored : competitiveness helps you !</li>
+                <li>it can sometime be useful</li>
+                <li>you socialize teaching and learning techniques</li>
+              </ul>
+            </td>
+          </tr>
+          <tr>
+            <td><img src="images/squash.jpg" alt="" class="image-sport"></td>
+            <td><h3>Squash</h3>
+              <p>So awesome ! You run, you fight, you compete and it requires some strategy:-)</p>
+            </td>
+          </tr>
+          <tr>
+            <td><img src="images/hiking.jpg" alt="" class="image-sport"></td>
+            <td><h3>Hiking</h3><p>Get's you to see good stuff and to think.</p></td>
+          </tr>
+        </table>
+      </div>
+    </div>
+
+
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,73 @@
+/* Here goes your CSS */
+body {
+  background-image: url("images/background-01.jpg");
+  font-family: sans-serif;
+  color: #2B395D;
+  font-size: 15px;
+  line-height: 17px;
+}
+
+h1, h2, h3 {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: ultra-light;
+}
+
+h1, h2 {
+font-size: 23px;
+}
+
+h3 {
+  font-size: 15px;
+  padding-left: 24px;
+}
+
+h1 { color: #D90368; }
+
+a {
+  text-decoration: none;
+}
+
+p {
+  padding-left: 24px;
+}
+
+.card {
+  background-color: #F3F6FF;
+  padding: 20px;
+  margin: 15px auto;
+  width: 600px;
+  text-align: center;
+  border-radius: 5px;
+  box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
+}
+
+.image-circle {
+  border-radius: 50%;
+  width: 160px;
+}
+
+.inline-list > li {
+  display: inline;
+  padding: 20px;
+  list-style: none;
+}
+
+.image-movie {
+  width: 200px;
+  margin-top: 15px;
+}
+
+.image-sport{
+  width: 200px;
+  margin-top: 15px;
+  margin-bottom: 3px;
+}
+
+.fa{
+  font-size: 30px;
+}
+
+#list-small-left-padding{
+  padding-left: 24px;
+}
+/* Here goes your CSS */