From 52494bbc204ddaa851a94d7f1d6a27b254531cf5 Mon Sep 17 00:00:00 2001 From: Hilman Azfar Date: Fri, 7 Aug 2020 08:20:22 +0800 Subject: [PATCH 1/2] Completed layout for Iphone 5 --- index.css | 112 ++++++++++++++++++++++++++++++++++++++++++++ index.html | 133 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 245 insertions(+) create mode 100644 index.css create mode 100644 index.html diff --git a/index.css b/index.css new file mode 100644 index 0000000..f6e3e2b --- /dev/null +++ b/index.css @@ -0,0 +1,112 @@ +* { + box-sizing: border-box; + font-family: sans-serif; + margin: 0; + padding: 0; +} + +body { + background: url('Wallpaper/Default.jpg') no-repeat; + background-size: cover; + height: 100vh; + /*padding-top: 2.5vh;*/ +} + +header { +/* position: fixed; + top: 0; + left: 0;*/ + height: 2.5vh; + width: 100%; + text-align: center; + color: white; + font-size: 30px; + padding: 5px 15px 0 15px; + /*border: 1px solid lightyellow;*/ +} +/*heads up bar*/ +header>svg:first-child { + float: left; + color: pink; +} + +header>svg:last-child { + float: right; + color: red; +} +/*main app area*/ +.main { + /*border: 1px solid deeppink;*/ + position: relative; + height: 84.5vh; + padding: 45px 38px 38px 38px; +} + +.filter { + backdrop-filter: brightness(0.9); + -webkit-backdrop-filter: brightness(0.9); +} +/*app layout starts here*/ +.app:after { + content: ""; + clear: both; + display: table; +} + +.card { + float: left; + width: calc((100% - (38px * 8)) / 4); + height: calc((84.5vh - (44px * 6)) / 6); + margin: 0 38px 34px 38px; + text-align: center; +} + +.card img { + max-width: 100%; + border-radius: 25%; +} + +.card p { + font-size: 25px; + color: #D7D6DB; + +} + +/*page indicators here*/ +.pagination { + position: absolute; + bottom: 10px; + left: calc(50% - (110px / 2)); +} + +.pagination-btn { + display: inline-block; + margin: 0 8px; + height: 15px; + width: 15px; + border-radius: 50%; + background-color: white; + opacity: 0.5; +} +/*dock*/ +footer { + position: fixed; + bottom: 0; + left: 0; + height: 13vh; + /*border: 1px solid blueviolet;*/ + padding: 34px 38px; +} + +footer:before { + content: ""; + clear: both; + display: table; +} + +footer img { + float: left; + width: calc((100% - (38px * 8)) / 4); + margin: 0 38px; + border-radius: 25%; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..bd7bc7a --- /dev/null +++ b/index.html @@ -0,0 +1,133 @@ + + + + IOS mock up + + + +
+
+ + 10:00 + +
+
+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +

App name

+
+
+ +
+
+ + + \ No newline at end of file From 18ea448a1a965c494ae95e4d817b6800cd46ad3b Mon Sep 17 00:00:00 2001 From: Hilman-Azfar <59684921+Hilman-Azfar@users.noreply.github.com> Date: Fri, 7 Aug 2020 09:17:43 +0800 Subject: [PATCH 2/2] Removed additional apps --- index.html | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/index.html b/index.html index bd7bc7a..20f20c6 100644 --- a/index.html +++ b/index.html @@ -99,22 +99,6 @@

App name

-
- -

App name

-
-
- -

App name

-
-
- -

App name

-
-
- -

App name

-