Skip to content

Commit

Permalink
new Update (v1.1)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mhmdmhd6
mhmdmhd6 committed Jun 14, 2021
1 parent b5a8526 commit aabe11f
Show file tree
Hide file tree
Showing 12 changed files with 172 additions and 39 deletions.
Binary file added background/imac2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed background/q_imgfa_ir__5fe9e358e4dff_1.jpg
View file
Binary file not shown.
Binary file added icon/Itunes music.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion icon/account_circle_white_24dp.svg
View file

This file was deleted.

Binary file added icon/app store.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion icon/contact_mail_white_24dp.svg
View file

This file was deleted.

Binary file added icon/file explorer.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icon/gallery.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion icon/home_white_24dp.svg
View file

This file was deleted.

Binary file added icon/setting.webp
View file
Binary file not shown.
44 changes: 34 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,39 @@
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Cabin&display=swap" rel="stylesheet">
<body onload="startTime()">

<div class="navbar">
<ul class="left">
<li>Mim Academy</li>
<li>file</li>
<li>Edit</li>
<li>Help</li>
<li class="parent">Mim Academy</li>
<li class="parent"> file
<ul>
<li>
<div class="child">
<p>New File</p>
<p class="border">New Window</p>
<p>Open File</p>
<p class="border linking">Open Recent File &nbsp;&nbsp;&nbsp;>
</p>
<p>save</p>
<p class="border">save as</p>
<p>Searching</p>
<p class="border">Propertie File</p>
<p class="border">Customize</p>
<p>Exit...</p>
</div>
</li>
</ul>
</li>
<li class="parent">Edit</li>
<li class="parent">View</li>
<li class="parent">Go</li>
<li class="parent">Tools</li>
<li class="parent">Help</li>
</ul>
<ul class="right">

<li class="hidden"><img src="./icon/search_black_24dp.svg" alt=""></li>
<li class="battery hidden"><img src="./icon/battery_charging_full_black_24dp.svg" alt=""></li>
<li class="hidden"><img src="./icon/wifi_black_24dp.svg" alt=""></li>
<li class="hidden"><img src="./icon/wifi_black_24dp.svg" alt=""></li>
<li class="hidden"><img src="./icon/search_black_24dp.svg" alt=""></li>
<li>EN</li>
<li id="date"></li>

Expand Down Expand Up @@ -47,11 +68,14 @@
</ul>
</div>
<!--navbar bottom start-->

<div class="menu">
<ul class="earth">
<li class="icon"><img src="./icon/home_white_24dp.svg" alt=""></li>
<li class="icon"><img src="./icon/contact_mail_white_24dp.svg" alt=""></li>
<li class="icon"><img src="./icon/account_circle_white_24dp.svg" alt=""></li>
<li><img class="icon first" src="./icon/file explorer.jpg" alt=""></li>
<li><img class="icon" src="./icon/setting.webp" alt=""></li>
<li><img class="icon last" src="./icon/gallery.png" alt=""></li>
<li><img class="icon first" src="./icon/app store.png" alt=""></li>
<li><img class="icon first" src="./icon/Itunes music.png" alt=""></li>
</ul>
</div>
<!--navbar bottom end-->
Expand Down
164 changes: 138 additions & 26 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
*{
margin: 0;
padding: 0;
list-style: none;
}
body {
background: url(./background/q_imgfa_ir__5fe9e358e4dff_1.jpg);
background: url(./background/imac2.jpg);
background-size: cover;
max-width: 1280px;
background-position: right;
background-repeat: no-repeat;
cursor: url(./cursor/normal.cur) , default ;
}
Expand All @@ -14,8 +16,10 @@ body {
height: 25px;
position: fixed;
top: 0;
left: 0;
box-shadow: -2px -2px 10px rgb(88 88 88);
backdrop-filter: blur(5px);
background: rgba(225, 220, 227, 0.253);
display: flex;
justify-content: space-between;
align-items: center;
Expand All @@ -26,23 +30,99 @@ body {
justify-content: space-around;
align-items: center;
list-style: none;
width: 230px;
width: 430px;
}

.navbar li {
font-family: 'Cabin', sans-serif;
font-size: 15px;
cursor: url(./cursor/Link.cur) , pointer ;
}
.left .parent{
transition: 0.2s;
padding: 3px 5px;
}
.left .parent:hover{
background-color: #FD5B33;
color: white;
}

ul > li > ul {
position: absolute;
display: none;
}
ul > li:hover > ul {
display: block;
animation: opacity 200ms;
}
@keyframes opacity {
0% {
transform: translateY(-30px) scale(0);
}
100%{
transform: translateY(0px) scale(1);
}
}
.child{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
width: 154px;
height: 297px;
backdrop-filter: blur(6px);
background: rgba(225, 220, 227, 0.39);
border-radius: 7px;
margin-top: 4px;
margin-left: -10px;
backdrop-filter: opacity(0.8);
box-shadow: 0 0 7px #34282D;
}
.child p {
padding-left: 14px;
width: 91%;
padding-top: 2px;
padding-bottom: 2px;
color: black !important;
}
.border{
padding-bottom: 8px;
border-bottom: 2px solid #ff00c8;
width: 90%;
}
.child p:hover{
color: white !important;
/*background-color: rgba(67, 126, 228, 0.897);*/
background: linear-gradient(to right , #FABE4C , transparent);
}

.child > .linking > ul {
position: absolute;
display: none;
}
.child > .linking:hover > ul {
display: block;
}
div.child-child {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
backdrop-filter: blur(5px);
}



.navbar .right {
display: flex;
float: right;
justify-content: space-around;
align-items: center;
list-style: none;
width: 400px;
}
.navbar li {
font-family: 'Cabin', sans-serif;
font-size: 15px;
cursor: url(./cursor/Link.cur) , pointer ;
width: 340px;
}
.navbar .right .battery img {
transform: rotate(270deg);
transform: rotate(90deg);
}
@media screen and (max-width:600px) {
.navbar .right {
Expand All @@ -61,35 +141,67 @@ body {


/*bootom menu*/

.menu{
display: flex;
justify-content: center;
align-items: center;
}
.earth {
position: fixed;
top: 90vh;
top: 87vh;
left:0;
right:0;
margin: 0 auto;
width: 320px;
height: 60px;
width: 400px;
height: 70px;
list-style: none;
backdrop-filter: blur(5px);
box-shadow: 0 0 10px rgb(0, 0, 0);
border-top-left-radius: 14px;
border-top-right-radius: 14px;
background: rgba(225, 220, 227, 0.253);
border-radius: 14px;
display: flex;
justify-content: space-around;
align-items: center;
}
@media screen and (max-width:600px) {
.earth {
top: 80vh;
@keyframes to-top-bottom {
0%{
transform: translate(0);
}
20%{
transform: translateY(-7px);
}
40%{
transform: translateY(14px);
}
60%{
transform: translateY(-3px);
}
80%{
transform: translateY(6px);
}
100%{
transform: translateY(-3px);
}
}
.icon img{
cursor: url(./cursor/Link.cur) , pointer ;
width: 66px;
.icon{
width: 62px;
border-radius: 10px;
transition: 0.1s;
color: white;
}
.icon img:hover {
width: 85px;
filter: drop-shadow( 1px 1px 5px white) ;
}
.icon:hover{
width: 77px !important;
filter: none !important;
}
.icon:active{
width: 64px !important;
animation: to-top-bottom 1s ease-out !important;
}
.first {
width: 54px !important;
}
.last{
width: 65px;
}
.last:hover {
width: 85px !important;
}

0 comments on commit aabe11f

Please sign in to comment.