diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..808d287 Binary files /dev/null and b/.DS_Store differ diff --git a/Frame/HomeScreenMockup.png b/Frame/HomeScreenMockup.png index 49c6471..afa395e 100644 Binary files a/Frame/HomeScreenMockup.png and b/Frame/HomeScreenMockup.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b5f035d --- /dev/null +++ b/index.html @@ -0,0 +1,102 @@ + + + + IOS mockup + + + + +

10:39 AM

+
Singtel
+
+
+
+
+
+ +
+
+
+ email +
+
+ sandbox +
+
+ calc +
+
+ fitness +
+
+ radio +
+ +
+ twitter +
+ +
+ explore +
+ +
+ health +
+ +
+ pages +
+ +
+ clock +
+ +
+ astronomy +
+ +
+ hashtag +
+ +
+ meditate +
+ +
+ notes +
+ +
+ history +
+ +
+ bejeweled +
+ +
+ venmo +
+ +
+ + + +
+
diamond
+
venmo
+
venmo
+
venmo
+ +
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..5bd5af7 --- /dev/null +++ b/script.js @@ -0,0 +1,27 @@ +function batt(){ + let a; + a= document.getElementById("animation"); + a.innerHTML= ""; + a.style.color = "green"; + setTimeout(function(){ + a.innerHTML = ""; + },1500); + +setTimeout(function(){ + a.innerHTML = ""; + a.style.color="orange"; + },3000); + +setTimeout(function(){ + a.innerHTML = ""; + a.style.color="red"; + },4500); + +setTimeout(function(){ + a.innerHTML = ""; + a.style.color="red"; + },6000); +} + batt(); + setInterval(batt,15000); + diff --git a/style.css b/style.css new file mode 100644 index 0000000..8e26bcc --- /dev/null +++ b/style.css @@ -0,0 +1,644 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); + + +*{ + box-sizing: border-box; + margin: 0 auto; +} + +body, html { + background-image: url("Wallpaper/Default.jpg"); + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position:relative; + font-family: 'Roboto', sans-serif; + overflow:hidden; +} + +header > h1 { + position:relative; + z-index:10; + color:white; + text-align:center; + padding:10px; + font-size:28px; +} + +.wrap{ + position:absolute; + right:0; + top:0; + padding:10px; + font-size:28px; +} + +.signal{ + position:absolute; + left:0; + top:0; + padding:10px; + font-size:28px; + color:white; +} + + + +.parent { +padding:30px; +z-index:10; +position:relative; +} + +.background{ + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity:0.25; + background-color:grey; + margin:0 auto; + height:1513px; + width:100%; + z-index:1; + position:absolute; +} + + +.parent::after { + content: ""; + clear:both; + display:table; +} + +img{ + height:180px; + width:180px; + float:left; + border-radius:25%; + margin:25px 25px 70px 25px; + +} + +div#email::after { + content: "Mail"; + font-size:28px; + color: white; + position:absolute; + top:245px; + left:118px; +} + +div#sandbox::after { + content: "Sandbox"; + font-size:28px; + color: white; + position:absolute; + top:245px; + left:322px; +} + +div#calc::after { + content: "Calculator"; + font-size:28px; + color: white; + position:absolute; + top:245px; + left:543px; +} + +div#fitness::after { + content: "Fitness"; + font-size:28px; + color: white; + position:absolute; + top:245px; + left:790px; +} + +div#radio::after { + content: "Radio"; + font-size:28px; + color: white; + position:absolute; + top:520px; + left:109px; +} + +div#twitter::after { + content: "Twitter"; + font-size:28px; + color: white; + position:absolute; + top:520px; + left:333px; +} + +div#explore::after { + content: "Exploration"; + font-size:28px; + color: white; + position:absolute; + top:520px; + left:536px; +} + +div#health::after { + content: "Health"; + font-size:28px; + color: white; + position:absolute; + top:520px; + left:793px; +} + +div#pages::after { + content: "Pages"; + font-size:28px; + color: white; + position:absolute; + top:790px; + left:105px; +} + +div#clock::after { + content: "Clock"; + font-size:28px; + color: white; + position:absolute; + top:790px; + left:338px; +} + +div#astronomy::after { + content: "Astronomy"; + font-size:28px; + color: white; + position:absolute; + top:790px; + left:538px; +} + +div#hashtag::after { + content: "Hashtag"; + font-size:28px; + color: white; + position:absolute; + top:790px; + left:783px; +} + +div#meditate::after { + content: "Meditate"; + font-size:28px; + color: white; + position:absolute; + top:1065px; + left:91px; +} + +div#notes::after { + content: "Notes"; + font-size:28px; + color: white; + position:absolute; + top:1065px; + left:337px; +} + +div#history::after { + content: "History"; + font-size:28px; + color: white; + position:absolute; + top:1065px; + left:562px; +} + +div#bejeweled::after { + content: "Bejeweled"; + font-size:28px; + color: white; + position:absolute; + top:1065px; + left:773px; +} + +div#venmo::after { + content: "Venmo"; + font-size:28px; + color: white; + position:absolute; + top:1340px; + left:100px; +} + + +.dock::after{ + content: ""; + clear:both; + display:table; +} + +.dock{ + padding:30px; +} + +.link{ + position:fixed; + left:464px; + display:inline-block; + color:white; + bottom:240px; +} + +.link2{ + position:fixed; + left:494px; + display:inline-block; + color:#D4D4D4; + bottom:240px; +} + +a{ +color:white; +text-decoration: none; +cursor:pointer; +} + +a:hover{ + cursor:pointer; +} + + + +@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait){ + +img{ + height:150px; + width:150px; + float:left; + border-radius:25%; + margin:40px; + +} + +div#email::after { + content: "Mail"; + font-size:28px; + color: white; + position:absolute; + top:235px; + left:118px; +} + +div#sandbox::after { + content: "Sandbox"; + font-size:28px; + color: white; + position:absolute; + top:235px; + left:322px; +} + +div#calc::after { + content: "Calculator"; + font-size:28px; + color: white; + position:absolute; + top:235px; + left:543px; +} + +div#fitness::after { + content: "Fitness"; + font-size:28px; + color: white; + position:absolute; + top:235px; + left:790px; +} + +div#radio::after { + content: "Radio"; + font-size:28px; + color: white; + position:absolute; + top:460px; + left:109px; +} + +div#twitter::after { + content: "Twitter"; + font-size:28px; + color: white; + position:absolute; + top:460px; + left:333px; +} + +div#explore::after { + content: "Exploration"; + font-size:28px; + color: white; + position:absolute; + top:460px; + left:536px; +} + +div#health::after { + content: "Health"; + font-size:28px; + color: white; + position:absolute; + top:460px; + left:793px; +} + +div#pages::after { + content: "Pages"; + font-size:28px; + color: white; + position:absolute; + top:688px; + left:105px; +} + +div#clock::after { + content: "Clock"; + font-size:28px; + color: white; + position:absolute; + top:688px; + left:338px; +} + +div#astronomy::after { + content: "Astronomy"; + font-size:28px; + color: white; + position:absolute; + top:688px; + left:538px; +} + +div#hashtag::after { + content: "Hashtag"; + font-size:28px; + color: white; + position:absolute; + top:688px; + left:783px; +} + +div#meditate::after { + content: "Meditate"; + font-size:28px; + color: white; + position:absolute; + top:918px; + left:91px; +} + +div#notes::after { + content: "Notes"; + font-size:28px; + color: white; + position:absolute; + top:918px; + left:337px; +} + +div#history::after { + content: "History"; + font-size:28px; + color: white; + position:absolute; + top:918px; + left:562px; +} + +div#bejeweled::after { + content: "Bejeweled"; + font-size:28px; + color: white; + position:absolute; + top:918px; + left:773px; +} + +div#venmo::after { + content: "Venmo"; + font-size:28px; + color: white; + position:absolute; + top:1144px; + left:102px; +} + +.dock::after{ + content: ""; + clear:both; + display:table; +} + +.dock{ + padding:30px; + position:relative; + top: 220px; +} + + +} + + + + +@media only screen and (min-device-width: 768px) and (orientation : portrait){ + +img{ + height:120px; + width:120px; + float:left; + border-radius:25%; + margin:25px 60px 25px 50px; + +} + +div#email::after { + content: "Mail"; + font-size:24px; + color: white; + position:absolute; + top:180px; + left:116px; +} + +div#sandbox::after { + content: "Sandbox"; + font-size:24px; + color: white; + position:absolute; + top:180px; + left:322px; +} + +div#calc::after { + content: "Calculator"; + font-size:24px; + color: white; + position:absolute; + top:180px; + left:543px; +} + +div#fitness::after { + content: "Fitness"; + font-size:24px; + color: white; + position:absolute; + top:180px; + left:790px; +} + +div#radio::after { + content: "Radio"; + font-size:24px; + color: white; + position:absolute; + top:350px; + left:109px; +} + +div#twitter::after { + content: "Twitter"; + font-size:24px; + color: white; + position:absolute; + top:350px; + left:330px; +} + +div#explore::after { + content: "Exploration"; + font-size:24px; + color: white; + position:absolute; + top:350px; + left:536px; +} + +div#health::after { + content: "Health"; + font-size:24px; + color: white; + position:absolute; + top:350px; + left:793px; +} + +div#pages::after { + content: "Pages"; + font-size:24px; + color: white; + position:absolute; + top:517px; + left:105px; +} + +div#clock::after { + content: "Clock"; + font-size:24px; + color: white; + position:absolute; + top:517px; + left:338px; +} + +div#astronomy::after { + content: "Astronomy"; + font-size:24px; + color: white; + position:absolute; + top:517px; + left:538px; +} + +div#hashtag::after { + content: "Hashtag"; + font-size:24px; + color: white; + position:absolute; + top:517px; + left:783px; +} + +div#meditate::after { + content: "Meditate"; + font-size:24px; + color: white; + position:absolute; + top:686px; + left:91px; +} + +div#notes::after { + content: "Notes"; + font-size:24px; + color: white; + position:absolute; + top:688px; + left:333px; +} + +div#history::after { + content: "History"; + font-size:24px; + color: white; + position:absolute; + top:688px; + left:557px; +} + +div#bejeweled::after { + content: "Bejeweled"; + font-size:24px; + color: white; + position:absolute; + top:688px; + left:768px; +} + +div#venmo::after { + content: "Venmo"; + font-size:24px; + color: white; + position:absolute; + top:860px; + left:102px; +} + +.dock::after{ + content: ""; + clear:both; + display:table; +} + +.dock{ + padding:30px; + position:relative; + top: 140px; +} + +.background{ + height:1124px; +} + +.link, .link2{ + bottom:195px; +} + +} + +