Commit ea27a60e authored by Rasoul Madani's avatar Rasoul Madani
Browse files

جلسه یک انجام کارهایی نصب ری اکت و آوردن ظاهر سایت در ری اکت

parent 84bdb7cd
......@@ -15,6 +15,7 @@
user's mobile device or desktop. See
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
import logo from './logo.svg';
import './App.css';
import Product from './components/Product'
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
Edit <code>src/App.js</code> and save to reload.
rel="noopener noreferrer"
Learn React
<div className="grid-container">
<header className="row">
<div><a className="brand">amazona</a></div>
<div className='row center'>
<footer className="row center">© 2020 All right reserved.</footer>
html {
font-size: 62.5%; /* 16px x 62.5% = 10px = 1rem*/
box-sizing: border-box;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100vh;
font-size: 1.6rem;
font-family: Helvetica, Arial, sans-serif;
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 5rem 1fr 5rem;
height: 100%;
header {
grid-area: header;
background-color: #203040;
main {
grid-area: main;
padding: 1rem;
footer {
grid-area: footer;
background: #203040;
color: #ffffff;
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
} {
justify-content: center;
a.brand {
color: #ffffff;
font-size: 3rem;
font-weight: bold;
header a {
color: #ffffff;
padding: 1rem;
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
/* common */
a {
text-decoration: none;
a:hover {
color: #ff8000;
h2 {
font-size: 1.6rem;
padding: 1rem 0;
img.medium {
max-width: 29rem;
width: 100%;
.rating span {
color: #f0c040;
margin: 0.1rem;
.price {
font-size: 2rem;
.card {
border: 0.1rem #c0c0c0 solid;
background-color: #f8f8f8;
border-radius: 0.5rem;
margin: 1rem;
.card-body {
padding: 1rem;
.card-body > * {
margin-bottom: 0.5rem;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment