Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@bayan-almasri10
bayan-almasri10 authored Dec 3, 2023
1 parent 3368ed2 commit f7336fb
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 54 deletions.
155 changes: 105 additions & 50 deletions css/slicez.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ html{
}
body{
font-family: "poppins", sans-serif;
background-color: whitesmoke;
/* background-color: whitesmoke; */
}
a{
text-decoration: none;
Expand Down Expand Up @@ -124,7 +124,6 @@ ul{
/* component main title */
/* start header */
header{
/* background-color: var(--section-background); */
background-color: white;
box-shadow: 0 0 10px rgba(47, 47, 175, 0.451);
-webkit-box-shadow: 0 0 10px #ddd;
Expand Down Expand Up @@ -152,15 +151,19 @@ header .logo{
margin-bottom: 0px;
}
}
header .bar,
header .bars{
display: none;
}
header .main-nav{
display: flex;
}
@media (max-width:767px) {
header .bars{
display:block;
header .bar{
display:flex;
}
header .bar:hover .bars{
display:flex;
}
header .main-nav{
display: none;
Expand All @@ -171,53 +174,32 @@ header .main-nav{
font-size: 25px;
margin-right: 5px;
}
@media (max-width:767px) {
}
header .main-nav > li:hover .mega-menu{
opacity: 1;
z-index: 100;
top: calc(100% + 1px);
}
/* header .bars a:hover .mega-menu{
opacity: 1;
z-index: 100;
top: calc(100% + 1px);
} */
@media (max-width:767px){
header .bars .bar:hover .mega-menu{
display: block;
}
header .main-nav > li > a{
font-size: 12px;
@media (max-width:767px) {
header .bars .bar:hover .mega{
opacity: 1;
z-index: 100;
top: calc(100% + 1px);
}
header .bars .mega-menu .links li a{
display: flex;
justify-content: center;
align-items: center;
height: 72px;
position: relative;
color: var(--section-background);
padding: 0 30px;
font-size: 18px;
overflow: hidden;
transition: var(--main-transition);
}
}
header .main-nav > li > a{
display: flex;
justify-content: center;
align-items: center;
height: 72px;
position: relative;
/* color: white; */
color: var(--section-background);
padding: 0 30px;
font-size: 18px;
overflow: hidden;
transition: var(--main-transition);
}
@media (max-width:767px) {
header .main-nav > li > a{
header .bars .mega .links a{
font-size: 14px;
padding: 9px;
height: 40px;
Expand All @@ -234,13 +216,27 @@ header .main-nav > li > a::before{
background-color: var(--main-color);
transition: var(--main-transition);
}
/* header .main-nav > li > a:hover{
color: var(--main-color);
background-color: rgba(98, 76, 157, 0.249);
/* @media (max-width:767px) {
header .bars > li > a::before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
margin-bottom: 4px;
left: -100%;
background-color: var(--main-color);
transition: var(--main-transition);
}
} */
header .main-nav > li > a:hover::before{
left: 0;
}
/* @media (max-width:767px) {
header .bars a:hover::before{
left: 0;
}
} */
header .mega-menu{
position: absolute;
width: 30%;
Expand All @@ -255,28 +251,60 @@ header .mega-menu{
opacity: 0;
transition: top var(--main-transition), opacity var(--main-transition);
}
/* @media (max-width:767px) {
header .bars.mega .bar:hover {
width: 30%; */
/* right: 0; */

/* padding: 20px; */
/* gap: 40px;
}
} */
@media (max-width:767px){
header .mega-menu{
header .bars.mega{
position: absolute;
background-color: var(--section-background);
display: flex;
z-index: -1;
border-bottom: 4px solid var(--main-color);
top: calc(100% + 50px );
opacity: 0;
transition: top var(--main-transition), opacity var(--main-transition);
left: 0;
width: 100%;
flex-direction: column;
gap: 0;
padding: 5px;
}
header .mega-menu:hover{
header .mega:hover{
width: 100%;
}
}
header .mega-menu .links{
min-width: 240px;
flex: 1;
}
@media (max-width:767px){
header .mega .links{
min-width: 240px;
flex: 1;
}
}
header .mega-menu .links li{
position: relative;
}
header .mega-menu .links li:not(:last-child){
border-bottom: 1px solid #ececec;
}
@media (max-width:767px){
header .mega .links li{
position: relative;
}
header .mega .links li:not(:last-child){
border-bottom: 1px solid #ececec;
}
}
header .mega-menu .links li::before{
content: "";
position: absolute;
Expand All @@ -288,6 +316,19 @@ header .mega-menu .links li::before{
z-index: -1;
transition: var(--main-transition);
}
@media (max-width:767px){
header .mega .links li::before{
content: "";
position: absolute;
top:0;
left: 0;
width: 0;
height: 100%;
background-color: #fafafa;
z-index: -1;
transition: var(--main-transition);
}
}
header .mega-menu .links :hover::before{
width: 100%;
background-color: rgba(98, 76, 157, 0.249) ;
Expand All @@ -302,20 +343,24 @@ header .mega-menu .links li a{
header .mega-menu .links li a i{
margin-right: 10px;
}
header .bars input[type="checkbox"] + .bar .mega-menu {
display: none;
}

header .bars input[type="checkbox"]:checked + .bar .mega-menu {
display: block;
}
header .bars .mega-menu {
display: none;
}
header .bars input:checked + .bar .mega-menu {
display: block;
/* header .bars .bar:hover .mega{
display: flex;
} */
@media (max-width:767px){
header .mega .links li a{
color: var(--main-color);
display: block;
padding: 15px;
font-size: 18px;
font-weight: bold;
}
header .mega .links li a i{
margin-right: 10px;
}
header .bars .bar:hover .mega{
display: flex;
}
}

/* end header */
/* start landing */
.landing{
Expand Down Expand Up @@ -536,7 +581,17 @@ header .bars input:checked + .bar .mega-menu {
width:50%;
height: 50%;
display: block;
margin-left: 4%;
margin-left: 36%;
}
}
@media (max-width:426px){
.portfolio .image-container .box{
margin-left: 8%;
}
}
@media (max-width:321px){
.portfolio .image-container .box{
margin-left: 3%;
}
}
.portfolio .image-container .box:hover .caption{
Expand Down
8 changes: 4 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@
<!-- start header -->
<header>
<div class="container">
<a href="#"> <img class="logo" src="./imgs/slicez-UXUI$.png" alt=""></a>
<a href="#"> <img class="logo" src="./imgs/slicez-UXUI$.png"></a>
<a class="bar" href="#"><i class="fa-solid fa-bars"></i></a>
<div class="bars">
<a href="#"><i class="fa-solid fa-bars"></i>
<div class="mega-menu">
<div class="mega">
<ul class="links">
<li>
<a href="#home"><i class="fa-solid fa-house"></i>Home</a>
Expand Down Expand Up @@ -50,7 +50,7 @@
</li>
</ul>
</div>
</a>

</div>
<ul class="main-nav">
<li><a href="#home">Home</a></li>
Expand Down

0 comments on commit f7336fb

Please sign in to comment.