add mockup magma website

SamBelmor · Aug 12, 2018 · b4e99b5 · b4e99b5
commit b4e99b5
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 0 deletions.
diff --git a/img/arrow-down.svg b/img/arrow-down.svg
diff --git a/img/background.jpg b/img/background.jpg
diff --git a/img/contact-us.png b/img/contact-us.png
diff --git a/img/magma-logo.png b/img/magma-logo.png
diff --git a/img/magma2.ico b/img/magma2.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Ruby on Rails development, ecommerce design | MagmaLabs</title>
+  <link rel="shortcut icon" href="img/magma2.ico">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <header>
+      <img src="img/magma-logo.png" alt="magma" class="img1">
+      <ul>
+        <li>OUR SERVICES</li>
+        <li><img src="img/arrow-down.svg" alt="arrow"></li>
+        <li>CASE STUDIES</li>
+        <li>ABOUT US</li>
+        <li>BLOG</li>
+        <li class="red">CONTACT US</li>
+      </ul>
+    </header>
+    <section>
+      <h2 class="red">Empowering innovation <br>through collaboration</h2>
+      <p>Building partnerships with clients to <a href="#">design</a> user-centric <a href="#">web solutions</a>, beautiful <br> <a href="#">ecommerce sites</a>, and engaging <a href="#">mobile apps</a>.</p>
+      <ul>
+        <li><span>&bull;</span> Ruby on Rails</li>
+        <li><span>&bull;</span>Solidus/Spree</li>
+        <li><span>&bull;</span>React Native</li>
+        <li><span>&bull;</span>UX design</li>
+      </ul>
+    </section>
+    <footer>
+      <img src="img/contact-us.png" alt="">
+    </footer>
+  </div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,77 @@
+body {
+  background-image: url("img/background.jpg");
+  background-size: 130%;
+  font-family: Lato-Light,sans-serif;
+}
+
+header .img1 {
+  height: 40px;
+  background: rgba(255, 0, 0, 0);
+  margin: 15px 0 0 20px;
+}
+
+header ul {
+  float: right;
+  list-style: none;
+  margin-right: 30px;
+  padding-top: 20px;
+}
+
+header ul li {
+  line-height: 1.375em;
+  font-size: 1em;
+  font-weight: 400;
+  float: left;
+  margin-left: 35px;
+}
+
+ul img {
+  width: 20px; 
+  height: 20px;
+  margin-left: -25px;
+}
+
+.red, section span  {
+  color: #f84848;
+}
+
+section {
+  text-align: center;
+  margin-top: 6%;
+}
+
+h2 {
+  font-size: 2.75em;
+  font-weight: 100;  
+}
+
+body, a {
+  color: #fff;
+}
+
+section p {
+  font-size: 1.25em;
+  line-height: 1.625em;
+}
+
+section ul {
+  margin-top: 6%;
+  margin-left: 20%;
+  font-size: 1.2em;
+  list-style: none;
+}
+
+section ul li {
+  float: left;
+  margin-left: 50px;
+}
+
+section span {
+  margin-right: 10px;
+}
+
+footer {
+  margin-top: 16%;
+  text-align: center;
+}
+