Theme Inputs and Buttons. Change font and background
This commit is contained in:
parent
2105b4d1b0
commit
9b05dd44b6
|
@ -1,23 +1,63 @@
|
|||
* {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
|
||||
}
|
||||
header{
|
||||
padding: 50px;
|
||||
|
||||
|
||||
padding-top: 30px;
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
padding-bottom: 40px;
|
||||
font-weight: bolder;
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
|
||||
}
|
||||
body{
|
||||
background-image: url("https://images.unsplash.com/photo-1528459584353-5297db1a9c01?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1075&q=80");
|
||||
background:url("https://images.unsplash.com/photo-1485579149621-3123dd979885?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.container{
|
||||
margin:10px 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
input[type=text]{
|
||||
width:40%;
|
||||
width:43%;
|
||||
background: white;
|
||||
border:2px solid #aaa;
|
||||
border-radius:4px;
|
||||
border-radius:20px;
|
||||
margin:8px 0;
|
||||
outline:none;
|
||||
padding:8px;
|
||||
box-sizing:border-box;
|
||||
transition:.3s;
|
||||
}
|
||||
.change{
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
button[type=submit]{
|
||||
border: 1px solid #000000;
|
||||
border-radius: 15px;
|
||||
background: white;
|
||||
padding: 10px 20px;
|
||||
font-size:20px ;
|
||||
font-family: "montserrat";
|
||||
cursor: pointer;
|
||||
margin: 10px;
|
||||
color: #000000;
|
||||
transition: 0.8s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
button[type=submit]:hover{
|
||||
color:white;
|
||||
}
|
||||
|
||||
input[type=text]:focus{
|
||||
border-color: dodgerBlue;
|
||||
|
|
|
@ -6,17 +6,21 @@
|
|||
<title>Mock Car API Admin</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='admin.css')}}" type="text/css">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Mock Data API</h1>
|
||||
</header>
|
||||
|
||||
<div class="change">
|
||||
<input class="input-box" type="text" name="key" id="key" placeholder="Key">
|
||||
<input class="input-box" type="text" name="value" id="value" placeholder="Valid JSON values">
|
||||
</div>
|
||||
<div class='button-dec'>
|
||||
<div class='container'>
|
||||
<button type="submit" id="#submit" onclick="updateData()">Change / Add</button>
|
||||
</div>
|
||||
<div class="table-dec">
|
||||
|
|
Loading…
Reference in New Issue