add styles to 404 and fix margin bottom
This commit is contained in:
parent
adae20b9ab
commit
5a62ee43c0
31
src/App.css
31
src/App.css
@ -27,18 +27,18 @@ body {
|
|||||||
width: 300px;
|
width: 300px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
padding: 0.2em 0.5em;
|
padding: 0.2em 0.5em;
|
||||||
font-family: JetBrainsItalic;
|
font-family: JetBrainsItalic, monospace;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
font-size: xxx-large;
|
font-size: xxx-large;
|
||||||
font-family: JetBrainsItalic;
|
font-family: JetBrainsItalic, monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2 {
|
h1, h2 {
|
||||||
font-family: mono;
|
font-family: mono, monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shortButton {
|
.shortButton {
|
||||||
@ -47,10 +47,31 @@ h1, h2 {
|
|||||||
background-color: #322C77;
|
background-color: #322C77;
|
||||||
color: antiquewhite;
|
color: antiquewhite;
|
||||||
border: #322C77;
|
border: #322C77;
|
||||||
border-radius: 5%;
|
|
||||||
font-size: medium;
|
font-size: medium;
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
font-family: JetBrainsItalic;
|
font-family: JetBrainsItalic, monospace;
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
|
margin-bottom: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notFound {
|
||||||
|
margin-top: 200px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-top: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-text {
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-top: 100px;
|
||||||
|
font-family: JetBrainsItalic, monospace;
|
||||||
|
margin-bottom: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.href {
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
@ -4,10 +4,12 @@ import {BrowserRouter, Routes, Route} from "react-router-dom";
|
|||||||
import AddLink from "./components/AddLink";
|
import AddLink from "./components/AddLink";
|
||||||
import Redirecter from './components/Redirecter'
|
import Redirecter from './components/Redirecter'
|
||||||
import NotFound from './components/NotFound'
|
import NotFound from './components/NotFound'
|
||||||
|
import {React} from "react";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
|
<h3 className="title"><a href="/" className="href">Timka ShortLink</a></h3>
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="add" element={<AddLink/>} />
|
<Route path="add" element={<AddLink/>} />
|
||||||
|
@ -37,7 +37,6 @@ class AddLink extends Component {
|
|||||||
|
|
||||||
render () {
|
render () {
|
||||||
return <div className="addForm">
|
return <div className="addForm">
|
||||||
<h3 className="title">Timka ShortLink</h3>
|
|
||||||
<div className="form">
|
<div className="form">
|
||||||
<input
|
<input
|
||||||
name="link"
|
name="link"
|
||||||
|
@ -1,9 +1,14 @@
|
|||||||
import {React, Component} from "react";
|
import {React, Component} from "react";
|
||||||
|
import "../App.css"
|
||||||
|
|
||||||
|
|
||||||
class NotFound extends Component {
|
class NotFound extends Component {
|
||||||
render () {
|
render () {
|
||||||
return <h2>Not found</h2>
|
return <div>
|
||||||
|
<h2 className="notFound">Not found or deleted.</h2>
|
||||||
|
|
||||||
|
<p className="small-text">Short any link with <a href="/" className="href">Timka ShortLink</a></p>
|
||||||
|
</div>
|
||||||
// todo add design
|
// todo add design
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user