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