نمونه کامپوننت های react
در این دوره می توانید از تمامی کامپوننت های نمایش داده شده در سایتِ نمونه (ویدیوی زیر) بطور رایگان استفاده کنید
دسته ها
دستهها
- php (1)
- امنیت (6)
- اندروید (3)
- اینترنت (2)
- برنامه نویسی (14)
- بوت استرپ (1)
- پایتون (1)
- تازه ها (22)
- ترفند ها (30)
- تکنولوژی های جدید (1)
- جاوا (2)
- جاوا اسکریپت (2)
- سئو (1)
- سخت افزار (4)
- صنعت بازی (1)
- صنعت رباتیک (1)
- طراحی وب (14)
- عکاسی (1)
- فضاهای ذخیره سازی (1)
- فلاتر (1)
- گوشی های هوشمند (1)
- متفرقه (1)
- موبایل (3)
- نرم افزار (17)
- هوش مصنوعی (4)
- وب (1)
- وردپرس (7)
- ویدئو های آموزشی (24)
مطالب دوره
کامپوننت Category
import { useState } from "react";
import "../Css/Category.css";
function Category(props) {
const [isButtonShown, setIsButtonShown] = useState(false);
const background = "images/"+props.background;
const backgroundStyle={
backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)), url("${background}")`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
};
return (
<div
className="category-box-overlay"
style={backgroundStyle}
>
<div
className="category-box"
onMouseEnter={() => setIsButtonShown(true)}
onMouseLeave={() => setIsButtonShown(false)}
>
<p
className="category-title"
style={{
paddingTop: isButtonShown ? "25%" : "40%",
marginBottom: isButtonShown ? "30px" : "0px"
}}
>
{props.title}
</p>
{isButtonShown && (
<span className="category-show-more">
بیشتر ببینید
<i className="pi pi-arrow-right "></i>
</span>
)}
</div>
</div>
);
}
export default Category;
.category-box {
transition: transform 350ms;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 270px;
width: 270px;
}
.category-box:hover {
transform: translateY(-0px);
background-color: #5c858b;
opacity: 0.9;
}
.category-box-overlay {
box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.2);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 270px;
width: 270px;
margin: 10px;
transition: transform 350ms;
cursor: pointer;
}
.category-box-overlay:hover {
transform: translateY(-20px);
}
.category-title {
color: white;
font-size: 20px;
font-weight: 700;
}
.category-show-more {
transition: all 0.2s !important;
cursor: pointer;
margin-top: 0px;
padding: 10px 20px 10px 20px;
background: transparent;
border: 0.1px solid #ffffff;
color: #ffffff;
font-size: 18px;
border-color: #ffffff;
}
.category-show-more:hover {
border: 2px solid #ffffff;
background: transparent !important;
color: #ffffff !important;
}
.show-more button {
font-size: 18px;
background: transparent;
border: 0px;
color: #ffffff;
cursor: pointer;
}
.category-show-more .pi-arrow-right {
vertical-align: middle;
margin-left: 10px;
}
کامپوننت NewProduct
import "../Css/NewProduct.css";
import { useState } from "react";
function NewProduct(props) {
const [isButtonShown, setIsButtonShown] = useState(false);
const background = "images/" + props.background;
const price = props.price + " تومان";
const backgroundStyle = {
backgroundImage: ` url("${background}")`,
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
};
return (
<div>
<div
className="product-box-overlay"
style={backgroundStyle}
onMouseEnter={() => setIsButtonShown(true)}
onMouseLeave={() => setIsButtonShown(false)}
></div>
<div
className="product-box"
onMouseEnter={() => setIsButtonShown(true)}
onMouseLeave={() => setIsButtonShown(false)}
style={{
transform: isButtonShown ? "translateY(-40px)" : "translateY(0px)",
background: isButtonShown ? "#ffffff" : "transparent",
}}
>
<p className="product-title">{props.title}</p>
<p className="product-price">{price}</p>
<span className="product-show-more">
اضافه به سبد خرید
<i className="pi pi-shopping-cart "></i>
</span>
</div>
</div>
);
}
export default NewProduct;
.product-box {
cursor: pointer;
transition: transform 350ms;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
width: 250px;
margin: 0px 15px 0px 15px;
padding-top: 5px;
}
.product-box:hover {
transform: translateY(-40px);
background-color: #ffffff;
opacity: 0.9;
}
.product-box-overlay {
box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.2);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 250px;
width: 250px;
margin: 15px 15px 0px 15px;
transition: transform 350ms;
cursor: pointer;
}
.product-title {
color: #252525;
font-size: 16px;
font-weight: 700;
text-align: right;
padding-right: 20px;
padding-left: 20px;
padding-top: 0%;
margin-bottom: 0px;
}
.product-price {
color: #252525;
font-size: 16px;
font-weight: 700;
text-align: right;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 30px;
direction: rtl;
}
.product-show-more {
transition: all 0.2s !important;
cursor: pointer;
margin-top: 30px;
padding: 10px 20px 10px 20px;
background: #5c858b;
border: 0.1px solid #ffffff;
color: #ffffff;
border-color: #ffffff;
font-size: 14px;
}
.product-show-more:hover {
background: #e3cdc2 !important;
border: 0.1px solid #ffffff;
color: #252525 !important;
}
.product-show-more .pi {
vertical-align: middle;
margin-left: 10px;
}
/*سایز موبایل*/
@media only screen and (max-width: 768px) {
.product-box {
background-color: #ffffff !important;
margin-bottom: 30px !important;
}
}
کامپوننت FeaturedCategories
import "../Css/FeaturedCategories.css";
function FeaturedCategories() {
return (
<div className="featured-cat-list">
<div className="first-col">
<p className="title"> می خواهید پوستی کاملاً سالم داشته باشید؟</p>
<p className="sub-title"> خرید کنید</p>
</div>
<div className="second-col">
<div className="second-col section1">
<p className="title"> رز و درخشش</p>
<p className="sub-title"> خرید کنید</p>
</div>
<div className="second-col section2">
<p className="title">ناب ترین رایحه ها</p>
<p className="sub-title"> خرید کنید</p>
</div>
</div>
<div className="third-col">
<p className="title"> با طعم ویتامین سی</p>
<p className="description">
ساخته شده با آنتی اکسیدان های طبیعی، لوسیون های ما پوستی شفاف و سالم
را برایتان به ارمغان می آورند{" "}
</p>
<p className="sub-title"> خرید کنید</p>
</div>
</div>
);
}
export default FeaturedCategories;
.featured-cat-list {
height: 720px;
display: flex;
position: relative;
padding: 100px 200px 100px 200px;
overflow: hidden;
}
.first-col {
width: 33.333%;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url("https://manufacturer.stylemixthemes.com/cosmetics/wp-content/uploads/sites/18/2019/08/photo-1514569369508-d2a48d3a423c.jpeg");
background-position: center;
background-repeat: no-repeat;
background-size: 130%;
cursor: pointer;
transition: background-size 500ms ease-in;
-moz-transition: background-size 500ms ease-in;
-ms-transition: background-size 500ms ease-in;
-o-transition: background-size 500ms ease-in;
-webkit-transition: background-size 500ms ease-in;
}
.first-col:hover {
background-size: 150%;
}
.second-col {
width: 33.333%;
margin: 0px 20px 0px 20px;
}
.third-col {
width: 33.333%;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url("https://manufacturer.stylemixthemes.com/cosmetics/wp-content/uploads/sites/18/2019/08/photo-1560977749-a69424365969.jpeg");
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
background-size: 130%;
transition: background-size 500ms ease-in;
-moz-transition: background-size 500ms ease-in;
-ms-transition: background-size 500ms ease-in;
-o-transition: background-size 500ms ease-in;
-webkit-transition: background-size 500ms ease-in;
}
.third-col:hover {
background-size: 150%;
}
.second-col.section1 {
display: inline-block;
position: relative;
height: 46%;
width: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url("https://manufacturer.stylemixthemes.com/cosmetics/wp-content/uploads/sites/18/2019/08/photo-1543422655-ac1c6ca993ed.jpeg");
background-position: center center;
background-repeat: no-repeat;
background-size: 130%;
transition: background-size 500ms ease-in;
-moz-transition: background-size 500ms ease-in;
-ms-transition: background-size 500ms ease-in;
-o-transition: background-size 500ms ease-in;
-webkit-transition: background-size 500ms ease-in;
margin-bottom: 7%;
margin-left: 0px;
margin-right: 0px;
cursor: pointer;
}
.second-col.second-col.section1:hover {
background-size: 150%;
}
.second-col.section2 {
margin-top: 6%;
margin-left: 0px;
margin-right: 0px;
display: inline-block;
position: relative;
height: 47%;
width: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url("https://manufacturer.stylemixthemes.com/cosmetics/wp-content/uploads/sites/18/2019/08/photo-1543857261-f71238eb4188.jpeg");
background-position: center center;
background-repeat: no-repeat;
background-size: 140%;
transition: background-size 500ms ease-in;
-moz-transition: background-size 500ms ease-in;
-ms-transition: background-size 500ms ease-in;
-o-transition: background-size 500ms ease-in;
-webkit-transition: background-size 500ms ease-in;
cursor: pointer;
}
.second-col.section2:hover {
background-size: 150%;
}
.featured-cat-list .title {
color: #ffffff;
font-size: 25px;
padding: 50px 70px 0px 70px;
line-height: 45px;
text-align: center;
}
.featured-cat-list .sub-title {
color: #ffffff;
font-size: 18px;
padding: 0px 70px 50px 70px;
line-height: 45px;
text-align: center;
text-decoration: underline;
}
.featured-cat-list .description {
color: #ffffff;
font-size: 16px;
padding: 10px 70px 50px 70px;
line-height: 25px;
text-align: center;
}
.third-col .title {
margin-top: 150px;
}
/*سایز موبایل*/
@media only screen and (max-width: 768px) {
.featured-cat-list {
padding: 0px 0px 5px 0px !important;
display: table !important;
}
.first-col,
.second-col,
.third-col {
width: 100% !important;
height: 33% !important;
margin: 0px !important;
}
.second-col {
margin: 0px !important;
}
.first-col .sub-title {
margin-bottom: 0px !important;
}
}
کامپوننت Banner1
import "../Css/Banner1.css";
function Banner1(props) {
return (
<div className="banner-container">
<h3 className="title">{props.title}</h3>
<h2 className="subtitle">{props.subtitle}</h2>
</div>
);
}
export default Banner1;
.banner-container {
height: 350px;
background-color: #ffffff;
vertical-align: middle;
padding: 80px;
}
.banner-container .title {
color: #252525;
font-size: 30px;
}
.banner-container .subtitle {
font-size: 40px;
font-weight: 900;
color: #c9a654;
}
/*سایز موبایل*/
@media only screen and (max-width: 768px) {
.banner-container {
height: 300px !important;
}
}
کامپوننت WeblogBanner
ابتدا با دستور زیر کتابخانه
react-multi-carousel
را نصب کنید:
npm install react-multi-carousel --save
import { useState } from "react";
import "../Css/WeblogBanner.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
function WeblogBanner() {
const responsive = {
superLargeDesktop: {
// the naming can be any, depends on you.
breakpoint: { max: 4000, min: 3000 },
items: 5,
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 2,
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2,
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
},
};
const background1 = "images/photo-1558893885-06a2e8f6ece1.jpeg";
const background2 = "images/photo-1554057009-4bb718be3f32.jpeg";
const background3 = "images/photo-1518145060901-fb6d403515f0.jpeg";
const background4 = "images/photo-1562887284-eb863165ebc8.jpeg";
const title1 = "انتخاب شنل به عنوان بهترین برند عطر سال";
const title2 = "ارغوان، برندی جدید در محصولات آرایشی";
const title3 = "کارخانه جدید زیبا با مساحتی حدود 20 هکتار احداث شد";
const title4 = "با تمامی محصولات مراقبت پوستی ما آشنا شوید";
const date1 = "یازدهم شهریور 1401";
const date2 = "بهمن 11 1401";
const date3 = "شهریور 11 1401";
const date4 = "شهریور 11 1401";
const [isHovered, setIssHovered] = useState(false);
const [isPost1Hovered, setIsPost1Hovered] = useState(false);
const [isPost2Hovered, setIsPost2Hovered] = useState(false);
const [isPost3Hovered, setIsPost3Hovered] = useState(false);
const [isPost4Hovered, setIsPost4Hovered] = useState(false);
return (
<div className="weblog-banner">
<div className="posts">
<Carousel
responsive={responsive}
swipeable={false}
draggable={false}
showDots={true}
arrows={false}
infinite={true}
autoPlay={true}
autoPlaySpeed={3000}
keyBoardControl={true}
dotListClass="custom-dot-list-style"
itemClass="carousel-item-padding-40-px"
>
<div
className="post-item"
style={{
backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)), url("${background1}")`,
}}
onMouseEnter={() => setIsPost1Hovered(true)}
onMouseLeave={() => setIsPost1Hovered(false)}
>
<div
className="post-title"
style={{
transform: isPost1Hovered
? "translateY(-80px)"
: "translateY(0px)",
}}
>
{title1}
</div>
<div
className="post-date"
style={{
transform: isPost1Hovered
? "translateX(-250px)"
: "translateX(0px)",
}}
>
{date1}
<i className="pi pi-clock"></i>
</div>
</div>
<div
className="post-item"
style={{
backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)), url("${background2}")`,
}}
onMouseEnter={() => setIsPost2Hovered(true)}
onMouseLeave={() => setIsPost2Hovered(false)}
>
<div
className="post-title"
style={{
transform: isPost2Hovered
? "translateY(-80px)"
: "translateY(0px)",
}}
>
{title2}
</div>
<div
className="post-date"
style={{
transform: isPost2Hovered
? "translateX(-250px)"
: "translateX(0px)",
}}
>
{date2}
<i className="pi pi-clock"></i>
</div>
</div>
<div
className="post-item"
style={{
backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)), url("${background3}")`,
}}
onMouseEnter={() => setIsPost3Hovered(true)}
onMouseLeave={() => setIsPost3Hovered(false)}
>
<div
className="post-title"
style={{
transform: isPost3Hovered
? "translateY(-80px)"
: "translateY(0px)",
}}
>
{title3}
</div>
<div
className="post-date"
style={{
transform: isPost3Hovered
? "translateX(-250px)"
: "translateX(0px)",
}}
>
{date3}
<i className="pi pi-clock"></i>
</div>
</div>
<div
className="post-item"
style={{
backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)), url("${background4}")`,
}}
onMouseEnter={() => setIsPost4Hovered(true)}
onMouseLeave={() => setIsPost4Hovered(false)}
>
<div
className="post-title"
style={{
transform: isPost4Hovered
? "translateY(-80px)"
: "translateY(0px)",
}}
>
{title4}
</div>
<div
className="post-date"
style={{
transform: isPost4Hovered
? "translateX(-250px)"
: "translateX(0px)",
}}
>
{date4}
<i className="pi pi-clock"></i>
</div>
</div>
</Carousel>
</div>
<div className="info">
<h3 className="title">اخبار و مقاله های جدید</h3>
<p className="subtitle">
ما با حرفه ای ترین برندها کار میکنیم و همیشه از پروژه های جدید استقبال
می کنیم
</p>
<span
className="button"
onMouseEnter={() => setIssHovered(true)}
onMouseLeave={() => setIssHovered(false)}
>
<button
style={{
transform: isHovered ? "translateX(-20px)" : "translateX(0px)",
}}
>
مشاهده کامل اخبار
</button>
<i
className="pi pi-minus"
style={{
transform: isHovered ? "translateX(-20px)" : "translateX(0px)",
}}
></i>
</span>
</div>
</div>
);
}
export default WeblogBanner;
.weblog-banner {
height: 500px;
background: transparent;
position: relative;
display: flex;
padding: 100px 100px 50px 100px;
text-align: right;
}
.info {
position: relative;
display: inline-block;
width: 30%;
margin-left: 50px;
}
.info h3 {
font-size: 30px;
margin-bottom: 50px;
}
.info p {
margin-bottom: 50px;
}
.posts {
position: relative;
display: inline-block;
width: 60%;
margin-left: 50px;
margin-right: 50px;
height: 300px;
}
.weblog-banner .button {
font-size: 18px;
vertical-align: middle;
color: #c9a654;
cursor: pointer;
}
.weblog-banner .button .pi {
margin-left: 5px;
vertical-align: middle;
font-weight: bold;
}
.button .pi {
transition: transform 350ms;
}
.button button {
color: #c9a654;
background: transparent;
transition: transform 350ms;
font-weight: bold;
font-size: 18px;
border: 0px none;
cursor: pointer;
}
.post-item {
height: 350px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 50px;
cursor: pointer;
position: relative;
}
.react-multi-carousel-dot button {
width: 8px !important;
height: 8px !important;
border-color: #a5a5a5;
border-width: 0px !important;
background-color: #a5a5a5;
vertical-align: middle;
margin: 0px 8px 0px 8px !important;
}
.react-multi-carousel-dot--active button {
background: #ffffff !important;
border-color: #c9a654 !important;
width: 12px !important;
height: 12px !important;
border-width: 2px !important;
}
.post-item .post-title {
color: #ffffff;
text-align: right;
padding: 260px 30px 0px 30px;
font-size: 20px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
right: 0;
transition: transform 350ms;
}
.post-item .post-date {
color: #ffffff;
text-align: right;
position: absolute;
top: 0;
left: 0;
padding-top: 0px;
font-size: 16px;
transition: transform 350ms;
padding: 260px 30px 0px 30px;
right: 0px;
margin-right: -250px;
}
.post-item .post-date:hover {
transform: translateX(+100%);
}
.post-item .pi {
vertical-align: middle;
font-size: 16px;
margin-left: 10px;
}
@-webkit-keyframes slide {
100% {
right: 0;
}
}
@keyframes slide {
100% {
right: 0;
}
}
/*سایز موبایل*/
@media only screen and (max-width: 768px) {
.weblog-banner {
display: table !important;
padding: 0px 0px 0px 0px !important;
}
.posts , .info
{
width: 100% !important;
margin: 0px !important;
display: table !important;
}
}
/*سایز موبایل*/
@media only screen and (max-width: 768px)
{
.posts{
display: grid !important;
}
.weblog-banner
{
padding: 50px 20px 0px 20px !important;
}
.info
{
padding:30px 10px 0px 10px !important
}
}
کامپوننت Services
import "../Css/Services.css";
import Service from "./Service";
function Services(props) {
return (
<div className="services">
<Service
className="service1"
title="ارسال رایگان"
subtitle="تا نهایت 2 روز کاری"
icon="pi pi-car"
/>
<Service
className="service2"
title="بیش از 80 برند"
subtitle="به روزرسانی روزانه"
icon="pi pi-star"
/>
<Service
className="service3"
title="ارسال به تمام نقاط دنیا"
subtitle="اطلاعات بیشتر را ببینید"
icon="pi pi-globe"
/>
<Service
className="service4"
title="پشتیبانی 24 ساعته"
subtitle="مشاوره رایگان با تیم ما"
icon="pi pi-phone"
/>
</div>
);
}
export default Services;
Service.js:
import "../Css/Services.css";
function Service(props)
{
return(
<div className="service">
<i className={props.icon}></i>
<h3 className="title">{props.title}</h3>
<p className="subtitle">{props.subtitle}</p>
</div>
);
}
export default Service;
.services
{
background-color: #ffffff;
height: 350px;
position: relative;
display: flex;
padding: 100px 100px 50px 100px;
margin-top: 50px;
}
.service
{
width: 25%;
position: relative;
display: inline-block;
}
.service .pi
{
font-size: 40px;
color: #5c858b;
margin-bottom: 0px;
}
/*سایز موبایل*/
@media only screen and (max-width: 768px)
{
.services
{
display: table !important;
padding: 100px 50px 50px 50px !important;
}
.service
{
width: 100% !important;
margin-bottom: 50px !important;
}
.title, .subtitle
{
margin: 0px !important;
margin-bottom: 10px !important;
}
}
کامپوننت MainNavigation
import { Link } from "react-router-dom";
import "./MainNavigation.css";
import { useState, useEffect } from "react";
import { InputText } from "primereact/inputtext";
import "react-slideshow-image/dist/styles.css";
import { Button } from "primereact/button";
import { Dialog } from "primereact/dialog";
import { Password } from "primereact/password";
import Register from "./Register";
function MainNavigation() {
const [login, setLogin] = useState(false);
const [signup, setSignup] = useState(false);
return (
<header className="header">
<ul className="login">
<li>
<Button
label="ورود"
className="login-button"
onClick={() => setLogin(true)}
/>{" "}
<Dialog
header="ورود به سایت"
visible={login}
style={{ width: "40vw" }}
onHide={() => setLogin(false)}
>
<div>
<ul className="add_product_field">
<li className="label">
<label htmlFor="username">نام کاربری</label>
</li>
<li>
{" "}
<InputText id="username" />
</li>
</ul>
<div style={{ marginTop: "2rem" }}>
<ul className="add_product_field">
<li className="label">
<label htmlFor="password">رمز عبور</label>
</li>
<li>
{" "}
<Password inputId="password" toggleMask />
</li>
</ul>
</div>
<div
style={{
marginTop: "4rem",
marginLeft: "0rem",
display: "table",
margin: "auto",
}}
>
<Link to="/dashboard">
<Button
label="ورود"
onClick={() => {
setLogin(false);
}}
/>
</Link>
</div>
</div>
</Dialog>
</li>
<li>
<Button
label="ثبت نام"
className="register-button"
onClick={() => setSignup(true)}
/>
<Dialog
header="فرم ثبت نام"
visible={signup}
style={{ width: "50vw" }}
onHide={() => setSignup(false)}
>
<Register />
</Dialog>
</li>
</ul>
{/* <nav>
<ul>
<li>
<Link to="/new-product">محصول جدید</Link>
</li>
<li>
<Link to="/">همه محصولات</Link>
</li>
</ul>
</nav> */}
<div className="logo">
<Link to="/">
<ul>
<li className="logo-image">
<img src={require("../logo_fin.png")} />
</li>
<li>
<p>فروشگاه زیبا</p>
</li>
</ul>
</Link>
</div>
</header>
);
}
export default MainNavigation;
.logo {
width: 35% !important;
}
.logo p {
color: #0f0b0bc2 !important;
font-size: 1.8rem;
font-weight: bold;
}
.logo img {
width: 70px;
height: 70px;
}
.login-button {
color: #0f0b0bc2 !important;
font-size: 1rem;
}
.header {
width: 100%;
height: 5rem;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
padding: 0 10%;
}
.login {
width: 35% !important;
}
.login-button {
background-color: transparent !important;
}
.register-button {
}
.header nav {
width: 30% !important;
}
.header ul {
list-style: none;
margin: 0;
}
.header li {
float: right !important;
margin-right: 20px !important;
}
.login li {
float: left !important;
}
.header a {
text-decoration: none;
font-size: 1.1rem;
color: white;
}
.header a:hover,
.header a.active,
.header a:active {
color: #81adb3;
}
.badge {
background-color: red;
color: white;
border-radius: 12px;
padding: 0 1rem;
margin-left: 0.5rem;
}
.logo-image {
margin-top: 15px;
}
/*سایز موبایل*/
@media only screen and (max-width: 768px) {
.logo {
width: 100% !important;
margin-right: 10px !important;
}
.logo line-height {
margin-top: 0px !important;
}
.logo p {
font-size: 18px !important;
}
.login .p-button {
padding: 10px;
font-size: 14px !important;
}
.login {
width: 100% !important;
margin: 0px !important;
}
.header li {
margin-right: 0px !important;
}
.logo img {
width: 50px !important;
height: 50px !important;
}
.logo-image {
margin-top: 0px !important;
}
}
کامپوننت Footer
import "./Footer.css";
function Footer() {
return (
<div className="footer-and-copyright">
<div className="footer">
<div className="footer-overlay"></div>
</div>
<div className="copyright">
<p>کپی رایت 1401 - تمامی حقوق برای فروشگاه زیبا محفوظ است </p>
</div>
</div>
);
}
export default Footer;
.footer {
height: 400px !important;
background-color: #fff;
background-image: url("../photo-1562886889-4ff7af0602ef.jpeg");
background-size: cover;
transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}
.footer-overlay {
background-color: #282828;
height: 400px !important;
opacity: 0.86;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
.copyright {
height: 50px;
background-color: black;
color: white;
padding-top: 1px;
padding-bottom: 2px;
}
کامپوننت MainSlider
import "./MainSlider.css";
import { Button } from "primereact/button";
function MainSlider(props) {
return (
<div className="App-header">
<br />
<ul className="slider_title">
<li>
<h2>{props.title}</h2>
</li>
<li>
<p>{props.subtitle}</p>
</li>
<li style={{ marginTop: "50px" }}>
<Button
label={props.link_title}
className="p-button-raised slider-botton"
/>
</li>
</ul>
</div>
);
}
export default MainSlider;
.slider_title {
list-style: none;
text-align: right;
color: white;
margin-top: 10%;
margin-right: 10%;
}
.slider_title h2 {
font-size: 40px !important;
}
.slider_title p {
font-size: 20px !important;
}
.slider-botton {
background-color: white !important;
color: black !important;
border-color: #5c858b !important;
padding-right: 60px !important;
padding-left: 60px !important;
border-radius: 0px !important;
}
.slider-botton:hover {
background-color: #5c858b !important;
color: white !important;
border-color: #ffffff !important;
}