Background, title

This commit is contained in:
mikwee 2021-10-14 19:56:16 +03:00
parent f0e3057ecc
commit 07d82da3b1
6 changed files with 25 additions and 3 deletions

View file

@ -3,6 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@fontsource/roboto": "^4.5.1",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",

View file

@ -1,7 +1,20 @@
.App { .App {
background-image: '/public/background.png'; background:
linear-gradient(
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.7)
),
url('background.png');
position: fixed;
min-width: 100%;
min-height: 100%;
background-size: cover;
background-position: center;
} }
#title { #title {
text-align: center; text-align: center;
margin-top: 3%; margin-top: 3%;
font-family: "Roboto";
text-decoration: underline;
color: white;
} }

View file

@ -2,12 +2,14 @@ import logo from './logo.svg';
import './App.css'; import './App.css';
import {AwesomeButton} from 'react-awesome-button'; import {AwesomeButton} from 'react-awesome-button';
import "react-awesome-button/dist/styles.css"; import "react-awesome-button/dist/styles.css";
import roots from './roots.json' import data from './roots.json'
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<h1 id="title">{roots.title}</h1> <div id="bg"></div>
<h1 id="title">{data.title}</h1>
{}
</div> </div>
); );
} }

View file

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

View file

@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import "@fontsource/roboto/500-italic.css";
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>

View file

@ -1177,6 +1177,11 @@
minimatch "^3.0.4" minimatch "^3.0.4"
strip-json-comments "^3.1.1" strip-json-comments "^3.1.1"
"@fontsource/roboto@^4.5.1":
version "4.5.1"
resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-4.5.1.tgz#63f7b783f755d8f6727eb60198627e7e1be3ac20"
integrity sha512-3mhfL+eNPG/woMNqwD/OHaW5qMpeGEBsDwzmhFmjB1yUV+M+M9P0NhP/AyHvnGz3DrqkvZ7CPzNMa+UkVLeELg==
"@hapi/address@2.x.x": "@hapi/address@2.x.x":
version "2.1.4" version "2.1.4"
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"