011 - Mobile UI

CodeBrauer · Jan 11, 2017 · 4105a7f · 4105a7f
1 parent e9434f5
commit 4105a7f
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 0 deletions.
diff --git a/011_2017-01-11_CSS_MobileLayout/README.md b/011_2017-01-11_CSS_MobileLayout/README.md
@@ -0,0 +1,5 @@
+# #011 2017-01-11: MobileLayout
+
+Just played around to make a simple mobile layout. Nothing special, pretty simple - but I like it.
+
+**Demo:** <https://codebrauer.github.io/100daysofcode/011_2017-01-11_CSS_MobileLayout/>
diff --git a/011_2017-01-11_CSS_MobileLayout/app.css b/011_2017-01-11_CSS_MobileLayout/app.css
@@ -0,0 +1,63 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Fira Sans', sans-serif;
+    font-weight: 700;
+    padding: 0;
+    margin: 0;
+    color: #fff;
+}
+
+.profile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    background: #fafafa;
+}
+
+.profile img {
+    display: block;
+    max-width: 40%;
+    border-radius: 50%;
+    margin: 50px 0;
+    box-shadow: 0px 5px 15px 0px rgba(22,22,22,0.5);
+}
+
+.item {
+    height: 20vh;
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.item i {
+    transition: transform .1s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.item:active i:last-of-type {
+    transform: translate(20px);
+}
+
+.item i:first-of-type {
+    font-size: 2rem;
+    padding-left: 7vw;
+}
+
+.item i:last-of-type {
+    font-size: 2rem;
+    padding-right: 7vw;
+    opacity: .5;
+}
+
+span {
+    display: block;
+    width: calc(100% - 75px);
+    text-align: center;
+    font-size: 1.3rem;
+    text-transform: uppercase;
+    letter-spacing: 5px;
+    opacity: 0.8;
+}
diff --git a/011_2017-01-11_CSS_MobileLayout/index.html b/011_2017-01-11_CSS_MobileLayout/index.html
@@ -0,0 +1,37 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+    <meta name="theme-color" content="#FF4552">
+
+    <title>Mobile UI</title>
+
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Fira+Sans:200,700">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
+    <link rel="stylesheet" href="app.css">
+</head>
+<body>
+    <div class="profile">
+        <img src="https://avatars3.githubusercontent.com/u/2059754?v=3&s=300">
+    </div>
+    <div class="item-wrap">
+        <div class="item" style="background-color:#EC407A">
+            <i class="icon-chemistry"></i><span>Recipes</span><i class="icon-arrow-right"></i>
+        </div>
+        <div class="item" style="background-color:#26C6DA">
+            <i class="icon-diamond"></i><span>Safe</span><i class="icon-arrow-right"></i>
+        </div>
+        <div class="item" style="background-color:#AB47BC">
+            <i class="icon-rocket"></i><span>Actions</span><i class="icon-arrow-right"></i>
+        </div>
+        <div class="item" style="background-color:#26A69A">
+            <i class="icon-settings"></i><span>Settings</span><i class="icon-arrow-right"></i>
+        </div>
+    </div>
+
+    <script src="https://cdn.rawgit.com/CodeBrauer/ebf5d310e4703b1186e7384ca1e1405d/raw/c5c1e53a82ae8370979007f8db345870e1782b78/githubcorner.js"></script>
+    <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create', 'UA-59784112-5', 'auto');ga('send', 'pageview');</script>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -6,6 +6,10 @@ A repo with 100 daily small projects (from 2017-01-01 till 2017-04-17) - every d
 
 Goal: Get a better coder, face up to new challenges, improve skills!
 
+## Day 011 (CSS)
+
+[[Demo]](https://codebrauer.github.io/100daysofcode/011_2017-01-11_CSS_MobileLayout/) - Just played around to make a simple mobile layout.
+
 ## Day 010 (PHP)
 
 [[Demo]](https://cloud.githubusercontent.com/assets/2059754/21824272/e234c63e-d77e-11e6-8dce-fdf4a537eb57.gif) - Pipe any output from the shell to my smartphone with the Pushbullet API.