edited buttons.css

This commit is contained in:
msosic97
2022-03-14 17:24:24 +01:00
parent 9e086ddabe
commit 99caca9e7d
10 changed files with 74 additions and 14 deletions

View File

@@ -4,8 +4,7 @@
} }
.standardBtn { .standardBtn {
width:400px; width:250px;
height: 43px;
background-color: #02ADBA; background-color: #02ADBA;
font-size: 20px; font-size: 20px;
padding: 7px 20px 7px 20px; padding: 7px 20px 7px 20px;
@@ -32,11 +31,22 @@
background-color:#9eedf3; background-color:#9eedf3;
} }
@media screen and (max-width: 900px) {
.standardBtn {
width: 250px;
background-color: #02ADBA;
font-size: 20px;
padding: 7px 20px 7px 20px;
color: white;
border: #02ADBA;
}
}
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
.standardBtn { .standardBtn {
width: 280px; width: 150px;
background-color: #02ADBA; background-color: #02ADBA;
font-size: 25px; font-size: 20px;
padding: 7px 20px 7px 20px; padding: 7px 20px 7px 20px;
color: white; color: white;
border: #02ADBA; border: #02ADBA;
@@ -47,10 +57,9 @@
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.standardBtn { .standardBtn {
width: 250px; width: 90px;
height: 43px;
background-color: #02ADBA; background-color: #02ADBA;
font-size: 25px; font-size: 15px;
padding: 7px 20px 7px 20px; padding: 7px 20px 7px 20px;
color: white; color: white;
border: #02ADBA; border: #02ADBA;

View File

@@ -21,7 +21,7 @@ header {
} }
} }
@media screen and (max-width: 300px) { @media screen and (max-width: 350px) {
.title { .title {
font-size: 20px; font-size: 20px;
} }

View File

@@ -1,12 +1,12 @@
import './App.css'; import './css/App.css';
import React from 'react'; import React from 'react';
import LandingPage from './LandingPage'; import EmailPage from './EmailPage';
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<LandingPage/> <EmailPage/>
</div> </div>
); );

View File

@@ -1,6 +1,6 @@
import Header from '../components/Header/Header'; import Header from '../components/Header/Header';
import StandardBtn from '../components/Button/StandardBtn'; import StandardBtn from '../components/Button/StandardBtn';
import './CongratsPage.css' import './css/CongratsPage.css'
function CongratsPage() { function CongratsPage() {

View File

@@ -0,0 +1,41 @@
import './css/EmailPage.css'
import Header from '../components/Header/Header';
import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
import StandardBtn from '../components/Button/StandardBtn';
function EmailPage(props) {
const header = "SLANJE OBAVJEŠTENJA";
var title1 = 'Odmah';
var title2 = 'Dnevno';
var title3 = 'ZAVRŠI';
return (
<div>
<Header header={header}/>
<ButtonsToolbar/>
<div className='buttons-container'>
<StandardBtn title={title1}/>
<StandardBtn title={title2}/>
</div>
<div>
<h1 className='h2'>OVDJE IDU EMAILFIELDS</h1>
</div>
<div>
<h2 className='h2'>*U svakom trenutku možete prekinuti slanje objava kroz
link u vašem emailu
</h2>
</div>
<div>
<StandardBtn title={title3}/>
</div>
</div>
);
}
export default EmailPage;

View File

@@ -1,7 +1,7 @@
import logo from '../assets/logo.png' import logo from '../assets/logo.png'
import StandardBtn from '../components/Button/StandardBtn'; import StandardBtn from '../components/Button/StandardBtn';
import Header from '../components/Header/Header'; import Header from '../components/Header/Header';
import './LandingPage.css' import './css/LandingPage.css'
function LandingPage() { function LandingPage() {
@@ -17,7 +17,7 @@ function LandingPage() {
<Header className='header' header={naslov}/> <Header className='header' header={naslov}/>
<div className='paragraph'> <div className='paragraph'>
<h2> Sva motorna vozila dostupna u oglasima </h2> <h2> Sva motorna vozila dostupna u oglasima </h2>
<h2> Na Vas email </h2> <h2> Na Vaš email </h2>
<h2 id='besplatno'> BESPLATNO </h2> <h2 id='besplatno'> BESPLATNO </h2>
</div> </div>

View File

@@ -0,0 +1,10 @@
.h2 {
text-align: center;
padding: 2rem;
}
.buttons-container {
display: flex;
justify-content:center;
gap: 20px;
}