diff --git a/Mobile specification/images/Thumbs.db b/Mobile specification/images/Thumbs.db new file mode 100644 index 00000000..0dd1cdfc Binary files /dev/null and b/Mobile specification/images/Thumbs.db differ diff --git a/Mobile specification/images/arrow.png b/Mobile specification/images/arrow.png new file mode 100644 index 00000000..3b5de3f2 Binary files /dev/null and b/Mobile specification/images/arrow.png differ diff --git a/Mobile specification/images/battery.png b/Mobile specification/images/battery.png new file mode 100644 index 00000000..358443c5 Binary files /dev/null and b/Mobile specification/images/battery.png differ diff --git a/Mobile specification/images/camera.png b/Mobile specification/images/camera.png new file mode 100644 index 00000000..1d4ff417 Binary files /dev/null and b/Mobile specification/images/camera.png differ diff --git a/Mobile specification/images/display.png b/Mobile specification/images/display.png new file mode 100644 index 00000000..5d7bafce Binary files /dev/null and b/Mobile specification/images/display.png differ diff --git a/Mobile specification/images/loogoo.png b/Mobile specification/images/loogoo.png new file mode 100644 index 00000000..b20409c7 Binary files /dev/null and b/Mobile specification/images/loogoo.png differ diff --git a/Mobile specification/images/mobile.png b/Mobile specification/images/mobile.png new file mode 100644 index 00000000..b07d5c14 Binary files /dev/null and b/Mobile specification/images/mobile.png differ diff --git a/Mobile specification/images/processor.png b/Mobile specification/images/processor.png new file mode 100644 index 00000000..a9c5eff7 Binary files /dev/null and b/Mobile specification/images/processor.png differ diff --git a/Mobile specification/index.html b/Mobile specification/index.html new file mode 100644 index 00000000..2019b78c --- /dev/null +++ b/Mobile specification/index.html @@ -0,0 +1,84 @@ + + + + Mobile Phone Specification + + + +
+ +
+
+ +
+
+ +
+

Camera

+

50MP, Ultra Wide-angle Lens,
2MP Macro Lens

+
+
+
+ +
+

Processor

+

MediaTek Dimensity 920 5G Processor

+
+
+
+ +
+

Display

+

90Hz Super AMOLED Display
Screen size: 6.4"(16.3cm)

+
+
+
+ +
+

Battery

+

60W SuperDart Charge

+
+
+
+ +
+ +

Features

+ +
+
+ + + + \ No newline at end of file diff --git a/Mobile specification/style.css b/Mobile specification/style.css new file mode 100644 index 00000000..adf10617 --- /dev/null +++ b/Mobile specification/style.css @@ -0,0 +1,129 @@ +*{ + margin: 0; + padding: 0; + font-family: sans-serif; +} +.main{ + width: 100%; + height: 100vh; + position: relative; + overflow: hidden; + background: linear-gradient(to right, #000000fe, #fff701); +} +nav{ + width: 80%; + position: sticky; + margin: 20px auto; + z-index: 1; + display: flex; + align-items: center; +} +.logo{ + flex-basis: 20%; +} +.logo img{ + width: 150px; +} +.nav-links{ + flex: 1; + text-align: right; +} +.nav-links ul li{ + list-style: none; + display: inline-block; + margin: 0 20px; +} +.nav-links ul li a{ + color: #fff; + text-decoration: none; +} +.information{ + width: 1000px; + height: 1000px; + position: fixed; + top: 50%; + left: -10%; + transform: translateY(-50%); +} +#circle{ + width: 1000px; + height: 1000px; + position: absolute; + top: 0; + left: 0; + border-radius: 50%; + transform: 0deg; + transition: 1s; + +} +.feature img{ + width: 70px;; +} +.feature{ + position: absolute; + display: flex; + color: #fff; +} +.feature div{ + margin-left: 30px; +} +.feature div p{ + margin-top: 8px; +} +.one{ + top: 450px; + right: 50px; +} +.two{ + top: 150px; + left: 350px; + transform: rotate(-90deg); +} +.three{ + bottom: 450px; + left: 50px; + transform: rotate(-180deg); +} +.four{ + bottom: 150px; + right: 350px; + transform: rotate(-270deg); +} +.mobile{ + width: 200px; + position: absolute; + top: 50%; + left: 35%; + transform: translateY(-50%); + z-index: 1; +} +.controls{ + position: absolute; + right: -40%; + top: 50%; + transform: translateY(-50%); +} +.controls h3{ + margin: 20px 0; + color: #fff; +} +#upBtn{ + width: 15px; + cursor: pointer; +} +#downBtn{ + width: 15px; + cursor: pointer; + transform: rotate(180deg); +} +.overlay{ + width: 0; + height: 0; + border-top: 500px solid #fff; + border-right: 500px solid transparent; + border-bottom: 500px solid #fff; + border-left: 500px solid #fff; + position: absolute; + left: 0; + top: 0; +}