parent
46045fe86d
commit
c03bd02bbd
8 changed files with 235 additions and 40 deletions
@ -1,38 +0,0 @@ |
|||||||
.App { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.App-logo { |
|
||||||
height: 40vmin; |
|
||||||
pointer-events: none; |
|
||||||
} |
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) { |
|
||||||
.App-logo { |
|
||||||
animation: App-logo-spin infinite 20s linear; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.App-header { |
|
||||||
background-color: #282c34; |
|
||||||
min-height: 100vh; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
font-size: calc(10px + 2vmin); |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
|
||||||
.App-link { |
|
||||||
color: #61dafb; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes App-logo-spin { |
|
||||||
from { |
|
||||||
transform: rotate(0deg); |
|
||||||
} |
|
||||||
to { |
|
||||||
transform: rotate(360deg); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,58 @@ |
|||||||
|
import React from 'react'; |
||||||
|
// import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
import './navBar.css'; |
||||||
|
|
||||||
|
|
||||||
|
const DesktopMenu = ({ currentUser, hidden }) => ( |
||||||
|
<div className='navBar'> |
||||||
|
<div className="header"> |
||||||
|
<div className="logo-container"> |
||||||
|
{/* <img src={logo} className="logo" /> */} |
||||||
|
|
||||||
|
<p className="logo" > پلتفرم بازوچت</p> |
||||||
|
</div> |
||||||
|
<div className="options"> |
||||||
|
<div className="option"> |
||||||
|
محصولات |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="option"> |
||||||
|
راهکار ها |
||||||
|
</div> |
||||||
|
<div className="option"> |
||||||
|
تعرفه |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="option"> |
||||||
|
منابع |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="option"> |
||||||
|
تعامل پذیری |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="headerButtons "> |
||||||
|
<div className='nav-signin-desk signInBtn'> |
||||||
|
ثبتنام / ورود |
||||||
|
</div> |
||||||
|
{/* <span className='nav-signin-mob'> |
||||||
|
<img src={navProPic} /> |
||||||
|
</span> */} |
||||||
|
|
||||||
|
<div className='tryitFree'> |
||||||
|
رایگان امتحان کنید |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
export default DesktopMenu; |
||||||
@ -0,0 +1,118 @@ |
|||||||
|
.navBar{ |
||||||
|
width:100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
background-color: white; |
||||||
|
|
||||||
|
box-shadow:0px 0px 10px rgba(0,0,0,0.2); |
||||||
|
height:90px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
|
||||||
|
.header { |
||||||
|
|
||||||
|
width: 90%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 250px; |
||||||
|
direction:rtl; |
||||||
|
font-family:'IRAN SANS'; |
||||||
|
|
||||||
|
font-size: 13px; |
||||||
|
align-items: center; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
margin:0; |
||||||
|
vertical-align: middle; |
||||||
|
padding: 20px 0px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.header .logo-container { |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
vertical-align:middle; |
||||||
|
width:25%; |
||||||
|
} |
||||||
|
.header .logo-container .logo{ |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
} |
||||||
|
.header .options { |
||||||
|
width: 35%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.header .options .option { |
||||||
|
padding: 10px 15px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.headerButtons{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
width:25%; |
||||||
|
} |
||||||
|
|
||||||
|
.headerButtons div{ |
||||||
|
padding: 10px 30px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (min-width:1000px) { |
||||||
|
.nav-signin-mob{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.signInBtn{ |
||||||
|
border:2px solid #8e44ad; |
||||||
|
border-radius:15px; |
||||||
|
color:#8e44ad; |
||||||
|
|
||||||
|
} |
||||||
|
.signInBtn:hover{ |
||||||
|
background:#8e44ad; |
||||||
|
color:white; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (max-width:1000px) { |
||||||
|
.nav-signin-mob{ |
||||||
|
display: flex; |
||||||
|
|
||||||
|
} |
||||||
|
.nav-signin-mob img{ |
||||||
|
width:35px; |
||||||
|
} |
||||||
|
.nav-signin-desk{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.signInBtn{ |
||||||
|
border:0px solid #8e44ad; |
||||||
|
border-radius:15px; |
||||||
|
color:#8e44ad; |
||||||
|
|
||||||
|
} |
||||||
|
.signInBtn:hover{ |
||||||
|
background:none; |
||||||
|
color:white; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue