constructorlabs · Oscarcuba · Jun 3, 2018
diff --git a/images/Hero_1.jpg b/images/Hero_1.jpg
diff --git a/images/apple.jpeg b/images/apple.jpeg
diff --git a/images/project_1.jpg b/images/project_1.jpg
diff --git a/images/project_2.jpg b/images/project_2.jpg
diff --git a/images/project_3.jpg b/images/project_3.jpg
diff --git a/images/project_4.jpg b/images/project_4.jpg
diff --git a/images/project_5.jpg b/images/project_5.jpg
diff --git a/images/projects.jpg b/images/projects.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Personal-web-site</title>
+    <link href="https://fonts.googleapis.com/css?family=Krona+One" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Krona+One%7CTitillium+Web" rel="stylesheet">
+    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
+    <link rel="stylesheet" href="main.css">
+  </head>
+
+  <body>
+    <header>
+      <div class="header_inner">
+        <h1 class="logo">DS<span>_Alex</span></h1>
+        <p>Front End Developer</p>
+      </div>
+      <!--end header_inner-->
+    </header>
+
+    <ul>
+      <li>
+        <hr>
+      </li>
+    </ul>
+
+    <div class="hero-container">
+      <div class="hero">
+        <div class="hero_img">
+          <h2>Hey there I am Alex</h2>
+        </div>
+        <aside>
+          <img src="images/apple.jpeg" alt="apple_computer" />
+          <p>Hi let's get in touch ,call <i class="fas fa-phone-square"></i> 999-999-999
+          </p>
+        </aside>
+      </div>
+      <!--end hero-->
+    </div>
+    <!--end hero container-->
+    <article>
+      <div class="article_inner">
+
+        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Lorem ipsum dolor sit amet,
+          consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+      </div>
+
+    </article>
+
+
+    <div class="galery-grid-container">
+      <div class="photo-grid">
+        <div class="photo-grid-item">
+          <figure>
+            <img src="images/project_1.jpg" alt="projects" />
+            <figcaption>Project Title <a href="#">go to project</a></figcaption>
+          </figure>
+        </div>
+        <div class="photo-grid-item">
+          <figure>
+            <img src="images/projects.jpg" alt="projects" />
+            <figcaption>Project Title <a href="#">go to project</a></figcaption>
+          </figure>
+        </div>
+        <div class="photo-grid-item">
+          <figure>
+            <img src="images/project_2.jpg" alt="projects" />
+            <figcaption>Project Title <a href="#">go to project</a></figcaption>
+          </figure>
+        </div>
+        <div class="photo-grid-item">
+          <figure>
+            <img src="images/project_3.jpg" alt="projects" />
+            <figcaption>Project Title <a href="#">go to project</a></figcaption>
+          </figure>
+        </div>
+        <div class="photo-grid-item">
+          <figure>
+            <img src="images/project_4.jpg" alt="projects" />
+            <figcaption>Project Title <a href="#">go to project</a></figcaption>
+          </figure>
+        </div>
+        <div class="photo-grid-item">
+          <figure>
+            <img src="images/project_5.jpg" alt="projects" />
+            <figcaption>Project Title <a href="#">go to project</a></figcaption>
+          </figure>
+        </div>
+      </div>
+      <!--end foto grid-->
+    </div>
+    <!--end container-->
+
+  </body>
+
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,247 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  color: #4f4f4f;
+  background-color: #fff;
+  font-family: "Titillium web", sans-serif;
+  line-height: 1.6rem;
+  font-size: 1.2em;
+}
+
+/*=======Header section=======*/
+
+header {
+  padding-top: 80px;
+  padding-bottom: 15px;
+  display: flex;
+  justify-content: center;
+}
+
+.header_inner {
+  max-width: 1200px;
+  display: flex;
+  justify-content: space-between;
+  flex: 1;
+  margin-left: 40px;
+  margin-right: 40px;
+}
+
+/*======hr element=========*/
+
+ul {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  list-style-type: none;
+}
+
+li {
+  width: 90%;
+  height: auto;
+  flex: 1;
+  padding-bottom: 30px;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+}
+
+/*========Hero & aside sections=========*/
+
+.hero-container {
+  display: flex;
+  justify-content: center;
+  flex: 1;
+  padding-left: 40px;
+}
+
+.hero {
+  max-width: 1200px;
+  height: auto;
+  display: flex;
+  flex: 1;
+}
+
+.hero_img {
+  width: 80%;
+  height: auto;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/Hero_1.jpg);
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.hero_img, h2 {
+  color: #d24301;
+  font-size: 1.5em;
+  padding-bottom: 30px;
+  padding-right: 10px;
+}
+
+aside img {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+}
+
+aside {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 15px;
+  flex: 1;
+}
+
+aside p {
+  padding-top: 50px;
+  padding-left: 33px;
+  font-size: 16px;
+  line-height: 36px;
+  text-align: center;
+}
+
+/*=======Article section======*/
+
+article {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.article_inner {
+  width: 90%;
+  height: auto;
+  align-items: center;
+  padding: 90px;
+  text-align: center;
+}
+
+/*========gallery========*/
+
+.galery-grid-container {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 80px;
+}
+
+.photo-grid {
+  width: 1200px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-left: 3px;
+  margin-right: 3px;
+}
+
+img {
+  width: 100%;
+  height: auto;
+  max-width: 350px;
+  height: 350px;
+}
+
+figure {
+  min-width: 350px;
+  text-align: center;
+  font-style: italic;
+  font-size: 1em;
+  text-indent: 0;
+  border: thin #c0c0c0 solid;
+  margin: 10px;
+}
+
+a {
+  text-decoration: underline;
+  font-weight: bold;
+  color: #fff;
+}
+
+figure:hover {
+  background-color: #d24301;
+  /*#ed490a*/
+  ;
+  color: #fff;
+}
+
+/*===stilyng elements====*/
+
+.fa-phone-square {
+  font-size: 24px;
+  color: #d24301;
+}
+
+h1 {
+  font-family: "Krona one", sans-serif;
+  color: #000;
+  font-size: 2em;
+}
+
+span {
+  color: #d24301;
+}
+
+.header>p {
+  font-size: 2em;
+}
+
+/*======Media Queries========*/
+
+@media screen and (max-width:850px) {
+  .hero {
+    max-width: 1200px;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .hero_img {
+    min-width: 100%;
+    height: 50vh;
+    margin-right: 40px;
+  }
+  .hero_img, h2 {
+    font-size: 1.3em;
+  }
+  .aside {
+    padding-top: 100px;
+    width: 100%;
+    padding-right: 40px;
+  }
+  .article {
+    width: 100%;
+    font-size: 16px;
+  }
+}
+
+@media screen and (max-width:690px) {
+  .header {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    margin-left: 40px;
+    margin-right: 40px;
+  }
+  h1, .header>p {
+    padding: 20px;
+    font-size: 1.5em;
+  }
+  .article {
+    text-align: left;
+    line-height: normal;
+  }
+}
+
+@media screen and (max-width:320px) {
+  .article, h2 {
+    display: none;
+  }
+}