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 https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" 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" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<div className="grid-container">
<header className="row">
<div><a className="brand">amazona</a></div>
<div>
<a>Cart</a>
<a>Signin</a>
</div>
</header>
<main>
<div className='row center'>
<Product></Product>
</div>
</main>
<footer className="row center">© 2020 All right reserved.</footer>
</div>
);
}
......
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',
sans-serif;
-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-areas:
"header"
"main"
"footer";
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;
}
.row.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',
monospace;
/* 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