diff --git a/App-store/index.html b/App-store/index.html new file mode 100644 index 0000000..3f21091 --- /dev/null +++ b/App-store/index.html @@ -0,0 +1,132 @@ + + + + + + + + + + + + + + Applications + + + + + +
+
+
+
+
+
+
+
+
+
LTE
+
+
+
+ + +
+ +
+ +

Weather

+
+ +
+ +

Grading System

+
+ +
+ +

Match Love

+
+ +
+ +

To-Do

+
+ +
+ + + +
+ +
+ +

Contact

+
+ +
+ +

SHOPiMART

+
+ +
+ +

Clock

+
+ +
+ +

Camera

+
+ +
+ + +
+ +
+ +

Photos

+
+ +
+ +

FaceTime

+
+ + + +
+ + + + +
+
+ + + + +
+ +
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/App-store/script.js b/App-store/script.js new file mode 100644 index 0000000..15b9de6 --- /dev/null +++ b/App-store/script.js @@ -0,0 +1,8 @@ +time.innerHTML = new Date().toLocaleTimeString([], { + hour: '2-digit', + minute: '2-digit' +}) + +const goHome = () => { + window.location.href = "/Home/index.html" +} \ No newline at end of file diff --git a/App-store/style.css b/App-store/style.css new file mode 100644 index 0000000..8e1f7ad --- /dev/null +++ b/App-store/style.css @@ -0,0 +1,366 @@ +body{ + display: flex; + justify-content: center; +} + +.firstbox{ + background-color: black; + border-radius: 50px; + height: 90vh; + width:20%; + position: relative; + display: flex; + justify-content: center; + top: 30px; + box-shadow: 1px 4px 10px rgb(58, 57, 57); + +} + +.secondbox{ + position: relative; + top: 14px; + background-color: whitesmoke; + height: 88vh; + width: 90%; + border-radius: 37px; + background-image: url('/Images/iphone13.jpg'); + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} +.upperBox{ + position: relative; + background-color: black; + height: 3vh; + width: 50% !important; + border-bottom-left-radius: 15px; + border-bottom-right-radius: 15px; + left: 53px; + /* z-index: 1; */ + +} + +.upperSmallBox{ + position: relative; + height: 1vh; + width: 6vh; + background-color: gray; + border: none; + border-radius: 70px; + left: 37px; + top: 4px; +} +.upperCircle{ + position: relative; + height: 1vh; + width: 6%; + background-color: gray; + border: none; + border-radius: 100%; + left: 85px; + top: -2px; +} + +.volumeUp{ + height: 6vh; + position: relative; + background-color: black; + border: none; + top: 140px; + left: 19px; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + cursor: pointer; + +} + +.volumeDown{ + height: 6vh; + position: relative; + background-color:black; + border: none; + top: 190px; + left: 7px; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + cursor: pointer; + +} + +.powerBtn{ + height: 9vh; + position: relative; + background-color: black; + border: none; + top: 150px; + right: 8px; + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; + cursor: pointer; + +} + +.mainIcon{ + position: relative; + /* border: 1px solid red; */ + display: flex; + top: 20px; + height: 10vh; + gap: 5px; + left: 5px; +} + +#weather{ + position: relative; + height: 7vh; + top: 7px; + width: 95% !important; + left: 5px; + border-radius: 10px; +} + +.grade{ + position: relative; + left: 4px; +} + +#exam{ + position: relative; + height: 7vh; + top: 7px; + left: 10px; + width: 75% !important; +} + +#gradetext{ + margin-left: 11px !important; +} + +#love{ + position: relative; + height: 7vh; + top: 7px; + left:8px; + width: 90% !important; +} + +#lovetext{ + margin-left: 11px !important; +} + +#todo{ + position: relative; + height: 7vh; + top: 7px; + left: 5px; + width: 90% !important; +} + +#do{ + margin-left: 5px !important; +} + + +.appIconDiv{ + position: relative; + height:8vh; + top: 230px; + background-color: rgb(56, 43, 43); + border: none; + border-radius: 18px; + +} +.appIcon{ + position: relative; + display: flex; + gap: 20px; + left: 14px; +} +#phone{ + position: relative; + border-radius: 10px; + height: 6vh; + top: 7px; + +} +#contact{ + position: relative; + border-radius: 10px; + height: 7vh; + top: 7px; + width: 100% !important; +} +#message{ + position: relative; + border-radius: 10px; + height: 6vh; + top: 7px; + +} +#music{ + position: relative; + border-radius: 10px; + height: 6vh; + top: 7px; + +} + +.staySafe{ + display: flex; + justify-content: space-between; + /* border: 1px solid red; */ + margin-top: -10px; + +} + +#safe{ + /* border: 1px solid red; */ + margin-left: 10px; + font-size: 10px; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', + Geneva, Verdana, sans-serif; +} + +.signals{ + /* border: 1px solid red; */ + margin-right: 10px; + display: flex; + gap: 5px; +} + +#signal{ + height: 2vh; +} + +#lte{ + color: #FFFFFF; + font-size: 10px; + position: relative; + top: -2px !important; + left: 2px; +} + +#time{ + color: #FFFFFF; + font-size: 12px; + position: relative; + left: 10px; +} + +.app-names{ + color: #FFFFFF; + font-size: 9px; + text-align: center; +} + +.mainIcon-2{ + position: relative; + /* border: 1px solid red; */ + display: flex; + top: 40px; + height: 10vh; + gap: 5px; + left: 5px; +} + +.safari{ + position: relative; + left: 7px; +} + +#safari{ + position: relative; + border-radius: 10px; + height: 6vh; + top: 7px; + width: 100% !important; +} + +#shopimart{ + position: relative; + height: 7vh; + top: 7px; + left: 10px; + width: 67% !important; +} + +.shop{ + position: relative; + left: 13px; +} + +#clock{ + position: relative; + height: 7vh; + top: 7px; + left:18px; + width: 77% !important; + border-radius: 10px; +} + +.clock{ + position: relative; + left: 9px; +} +#clocktext{ + margin-left: 30px; +} + +#camera{ + position: relative; + height: 7vh; + top: 7px; + left: 15px; + width: 78% !important; + border-radius: 10px; +} + +.camera{ + position: relative; + left: 10px; +} + +#camText{ + margin-left: 20px !important; +} + +.mainIcon-3{ + position: relative; + /* border: 1px solid red; */ + display: flex; + top: 60px; + height: 10vh; + gap: 5px; + left: 5px; +} + +.photo{ + position: relative; + left: 7px; +} + +#photo{ + position: relative; + border-radius: 10px; + height: 7vh; + top: 7px; + width: 100% !important; +} + +#facetime{ + position: relative; + height: 7vh; + top: 7px; + left: 10px; + width: 85% !important; + border-radius: 10px; +} + +.facetime{ + position: relative; + left: 13px; +} +#facetext{ + margin-left: 12px; +} + diff --git a/Home/index.html b/Home/index.html new file mode 100644 index 0000000..7e34cda --- /dev/null +++ b/Home/index.html @@ -0,0 +1,48 @@ + + + + + + + + + + + + + Mobile Phone + + + + + +
+ + + +
+
+
+
+
+
+
+
+ +
+
+ + +
+

Click on the power button
to switch the phone on!

+
+ +
+ + + \ No newline at end of file diff --git a/Home/style.css b/Home/style.css new file mode 100644 index 0000000..36f9317 --- /dev/null +++ b/Home/style.css @@ -0,0 +1,105 @@ +.container{ + display: flex; + justify-content: center; + position: relative; + left: 230px; + +} + +.instruction{ + padding: 50px !important; + padding-top: 130px !important; +} + +.firstbox{ + background-color: black; + border-radius: 50px; + height: 90vh; + width:20%; + position: relative; + display: flex; + justify-content: center; + top: 30px; + box-shadow: 1px 4px 10px rgb(58, 57, 57); + +} + +.secondbox{ + position: relative; + top: 14px; + background-color: whitesmoke; + height: 88vh; + width: 100%; + border-radius: 37px; + background-color: rgb(19, 15, 15); +} +.upperBox{ + position: relative; + background-color: black; + height: 3vh; + width: 47% !important; + border-bottom-left-radius: 15px; + border-bottom-right-radius: 15px; + left: 70px; +} + +.upperSmallBox{ + position: relative; + height: 1vh; + width: 6vh; + background-color: gray; + border: none; + border-radius: 70px; + left: 37px; + top: 4px; +} +.upperCircle{ + position: relative; + height: 1vh; + width: 6%; + background-color: gray; + border: none; + border-radius: 100%; + left: 85px; + top: -2px; +} + +.volumeUp{ + height: 6vh; + position: relative; + background-color: black; + border: none; + top: 140px; + left: 19px; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + cursor: pointer; + +} + +.volumeDown{ + height: 6vh; + position: relative; + background-color:black; + border: none; + top: 190px; + left: 7px; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + cursor: pointer; + +} + +.powerBtn{ + height: 9vh; + position: relative; + background-color: black; + border: none; + top: 150px; + right: 8px; + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; + cursor: pointer; + +} + diff --git a/Images/app store.png b/Images/app store.png new file mode 100644 index 0000000..5421aac Binary files /dev/null and b/Images/app store.png differ diff --git a/Images/apple music.jpg b/Images/apple music.jpg new file mode 100644 index 0000000..d8b6da0 Binary files /dev/null and b/Images/apple music.jpg differ diff --git a/Images/apple music.png b/Images/apple music.png new file mode 100644 index 0000000..cc08428 Binary files /dev/null and b/Images/apple music.png differ diff --git a/Images/camera.jpg b/Images/camera.jpg new file mode 100644 index 0000000..e794024 Binary files /dev/null and b/Images/camera.jpg differ diff --git a/Images/clock.png b/Images/clock.png new file mode 100644 index 0000000..d98e5e5 Binary files /dev/null and b/Images/clock.png differ diff --git a/Images/contact.jpg b/Images/contact.jpg new file mode 100644 index 0000000..e0cfc0b Binary files /dev/null and b/Images/contact.jpg differ diff --git a/Images/contact.png b/Images/contact.png new file mode 100644 index 0000000..9669ca3 Binary files /dev/null and b/Images/contact.png differ diff --git a/Images/examicon.png b/Images/examicon.png new file mode 100644 index 0000000..5d0e953 Binary files /dev/null and b/Images/examicon.png differ diff --git a/Images/facetime.png b/Images/facetime.png new file mode 100644 index 0000000..b89c550 Binary files /dev/null and b/Images/facetime.png differ diff --git a/Images/icon.png b/Images/icon.png new file mode 100644 index 0000000..138eb7d Binary files /dev/null and b/Images/icon.png differ diff --git a/Images/imessage.jpg b/Images/imessage.jpg new file mode 100644 index 0000000..f38d564 Binary files /dev/null and b/Images/imessage.jpg differ diff --git a/Images/iphone-15-pro.jpeg b/Images/iphone-15-pro.jpeg new file mode 100644 index 0000000..5fd8e0e Binary files /dev/null and b/Images/iphone-15-pro.jpeg differ diff --git a/Images/iphone.jpg b/Images/iphone.jpg new file mode 100644 index 0000000..f867a2c Binary files /dev/null and b/Images/iphone.jpg differ diff --git a/Images/iphone13.jpg b/Images/iphone13.jpg new file mode 100644 index 0000000..070440b Binary files /dev/null and b/Images/iphone13.jpg differ diff --git a/Images/iphone14.jpg b/Images/iphone14.jpg new file mode 100644 index 0000000..b7cd9cf Binary files /dev/null and b/Images/iphone14.jpg differ diff --git a/Images/iphone15.jpg b/Images/iphone15.jpg new file mode 100644 index 0000000..d262687 Binary files /dev/null and b/Images/iphone15.jpg differ diff --git a/Images/lock.png b/Images/lock.png new file mode 100644 index 0000000..296f374 Binary files /dev/null and b/Images/lock.png differ diff --git a/Images/lock2.png b/Images/lock2.png new file mode 100644 index 0000000..8bf50e0 Binary files /dev/null and b/Images/lock2.png differ diff --git a/Images/loveicon.png b/Images/loveicon.png new file mode 100644 index 0000000..94143de Binary files /dev/null and b/Images/loveicon.png differ diff --git a/Images/message.png b/Images/message.png new file mode 100644 index 0000000..ee98b04 Binary files /dev/null and b/Images/message.png differ diff --git a/Images/music.png b/Images/music.png new file mode 100644 index 0000000..13f6eef Binary files /dev/null and b/Images/music.png differ diff --git a/Images/phoneicon.jpg b/Images/phoneicon.jpg new file mode 100644 index 0000000..0fceef6 Binary files /dev/null and b/Images/phoneicon.jpg differ diff --git a/Images/photos.jpg b/Images/photos.jpg new file mode 100644 index 0000000..a434d8b Binary files /dev/null and b/Images/photos.jpg differ diff --git a/Images/safari-2.jpg b/Images/safari-2.jpg new file mode 100644 index 0000000..831a0d3 Binary files /dev/null and b/Images/safari-2.jpg differ diff --git a/Images/safari.jpg b/Images/safari.jpg new file mode 100644 index 0000000..75d8e3f Binary files /dev/null and b/Images/safari.jpg differ diff --git a/Images/shopimart.jpg b/Images/shopimart.jpg new file mode 100644 index 0000000..82ebaa9 Binary files /dev/null and b/Images/shopimart.jpg differ diff --git a/Images/todoicon.png b/Images/todoicon.png new file mode 100644 index 0000000..99d320c Binary files /dev/null and b/Images/todoicon.png differ diff --git a/Images/wallpaper1.jpg b/Images/wallpaper1.jpg new file mode 100644 index 0000000..096eac0 Binary files /dev/null and b/Images/wallpaper1.jpg differ diff --git a/Images/wallpaper2.jpg b/Images/wallpaper2.jpg new file mode 100644 index 0000000..73ec2e5 Binary files /dev/null and b/Images/wallpaper2.jpg differ diff --git a/Images/wallpaper3.jpg b/Images/wallpaper3.jpg new file mode 100644 index 0000000..52718d5 Binary files /dev/null and b/Images/wallpaper3.jpg differ diff --git a/Images/wallpaper4.jpg b/Images/wallpaper4.jpg new file mode 100644 index 0000000..49f250b Binary files /dev/null and b/Images/wallpaper4.jpg differ diff --git a/Images/wallpaper5.jpg b/Images/wallpaper5.jpg new file mode 100644 index 0000000..2ade2e8 Binary files /dev/null and b/Images/wallpaper5.jpg differ diff --git a/Images/weathericon.jpg b/Images/weathericon.jpg new file mode 100644 index 0000000..4934919 Binary files /dev/null and b/Images/weathericon.jpg differ diff --git a/Images/weathericon.png b/Images/weathericon.png new file mode 100644 index 0000000..dc88e5f Binary files /dev/null and b/Images/weathericon.png differ diff --git a/index.html b/index.html index 910d0fe..179850d 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,60 @@ + - - - Document + + + + + + + + + + Mobile Phone + -

Hello, how are you?

+ + +
+
+
+
+
+
+ +
+
+ MTN-Stay Safe + +
+
+
+ LTE +
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/note.txt b/note.txt new file mode 100644 index 0000000..4d77799 --- /dev/null +++ b/note.txt @@ -0,0 +1,8 @@ +NOTE on GIT + +--All Branches are to add and commit and push to their branches and then make a pull request on GITHUB but leave the merging for Master + -git add . + -git commit -m "initial commit" + -git push -u origin "branch_name" +--Master is meant to merge the requests and pull to view the source code on VSCODE + -git pull \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..52ff9fa --- /dev/null +++ b/script.js @@ -0,0 +1,9 @@ +time.innerHTML = new Date().toLocaleTimeString([], { + hour: '2-digit', + minute: '2-digit' +}) +date.innerHTML = new Date().toLocaleDateString() + +const homeButton = () =>{ + window.location="App-store/index.html" +} \ No newline at end of file diff --git a/style.css b/style.css index e69de29..f67091c 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,160 @@ +body { + display: flex; + justify-content: center; +} + +.firstbox { + background-color: black; + border-radius: 50px; + height: 90vh; + width: 20%; + position: relative; + display: flex; + justify-content: center; + top: 30px; + box-shadow: 1px 4px 10px rgb(58, 57, 57); +} + +.secondbox { + position: relative; + top: 14px; + background-color: whitesmoke; + height: 88vh !important; + width: 100%; + border-radius: 37px; + background-image: url("./Images/iphone13.jpg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} +.upperBox { + position: relative; + background-color: black; + height: 3vh; + width: 47% !important; + border-bottom-left-radius: 15px; + border-bottom-right-radius: 15px; + left: 70px; +} + +.upperSmallBox { + position: relative; + height: 1vh; + width: 6vh; + background-color: gray; + border: none; + border-radius: 70px; + left: 37px; + top: 4px; +} +.upperCircle { + position: relative; + height: 1vh; + width: 6%; + background-color: gray; + border: none; + border-radius: 100%; + left: 85px; + top: -2px; +} + +.volumeUp { + height: 6vh; + position: relative; + background-color: black; + border: none; + top: 140px; + left: 19px; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + cursor: pointer; +} + +.volumeDown { + height: 6vh; + position: relative; + background-color: black; + border: none; + top: 190px; + left: 7px; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + cursor: pointer; +} + +.powerBtn { + height: 9vh; + position: relative; + background-color: black; + border: none; + top: 150px; + right: 8px; + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; + cursor: pointer; +} + +.staySafe { + display: flex; + justify-content: space-between; + /* border: 1px solid red; */ + margin-top: -10px; +} + +#safe { + /* border: 1px solid red; */ + margin-left: 25px; + font-size: 10px; + font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", + "Lucida Sans Unicode", Geneva, Verdana, sans-serif; +} + +.signals { + /* border: 1px solid red; */ + margin-right: 25px; + display: flex; + gap: 5px; +} + +#signal { + height: 2vh; +} + +#lte { + color: #ffffff; + font-size: 10px; + position: relative; + top: -2px !important; + left: 2px; +} + +.timeContainer { + position: relative; + color: white; + /* border: 1px solid red; */ + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + height: 76vh; + top: 10px; +} + +.timeContainer2 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 7px; + font-size: 30px; + font-weight: 600; +} +#homeButton { + width: 120px; + cursor: pointer; + border: none; + border-radius: 10px; + position: relative; + top: 9px; + left: 3px; +}