diff --git a/phone specs website/index.html b/phone specs website/index.html new file mode 100644 index 00000000..fc57f20a --- /dev/null +++ b/phone specs website/index.html @@ -0,0 +1,85 @@ + + + wesbite + + + +
+ +
+
+ +
+ +
+
+ +
+

Camera

+

12MP,Wide Angle Lens

+
+
+
+ +
+

Processor

+

SnapDragon 785

+
+
+
+ +
+

Display

+

SAMOLED 120Hz

+
+
+
+ +
+

Battery

+

8000mAh

+
+
+
+
+
+ +

Features

+ +
+
+ + + + diff --git a/phone specs website/style.css b/phone specs website/style.css new file mode 100644 index 00000000..800ae80d --- /dev/null +++ b/phone specs website/style.css @@ -0,0 +1,148 @@ +*{ + margin:0; + padding:0; + font-family:sans-serif; +} + +.main +{ + width:100%; + height:100vh; + position:relative; + overflow:hidden; + background-image: linear-gradient(to right,#9c27b0,#8ecdff); + +} + +nav +{ + width:80%; + position:sticky; + margin:20px auto; + z-index: 1; +} +.logo{ + flex-basis: 20%; + +} +.logo image{ + 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:absolute; + top:50%; + left:-10%; + transform: translateY(-50%); +} + +#circle{ + width:1000px; + height:1000px; + position:absolute; + top:0; + left:0; + border-radius: 50%; + transform:rotate(0deg) ; + transition: 1s; +} + +.feature img{ + width:70px; + +} +.feature{ + position:absolute; + display:flex; + color:white; +} +.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:350px; + 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:10%; + top:50%; + transform: translateY(-50%); + text-align: center; +} +.controls h3{ + margin:15px 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; + left:0; + right:0; +}