Theme Inputs and Buttons. Change font and background

This commit is contained in:
Anjuman 2020-12-21 20:11:32 +05:30
parent 2105b4d1b0
commit 9b05dd44b6
2 changed files with 52 additions and 8 deletions

View File

@ -1,23 +1,63 @@
* { * {
font-family: 'Roboto', sans-serif; padding:0px;
margin:0px;
} }
header{ header{
padding: 50px;
padding-top: 30px;
padding-right: 30px;
padding-left: 30px;
padding-bottom: 40px;
font-weight: bolder;
font-size: 30px;
color: white;
} }
body{ 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]{ input[type=text]{
width:40%; width:43%;
background: white;
border:2px solid #aaa; border:2px solid #aaa;
border-radius:4px; border-radius:20px;
margin:8px 0; margin:8px 0;
outline:none; outline:none;
padding:8px; padding:8px;
box-sizing:border-box; box-sizing:border-box;
transition:.3s; 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{ input[type=text]:focus{
border-color: dodgerBlue; border-color: dodgerBlue;

View File

@ -6,17 +6,21 @@
<title>Mock Car API Admin</title> <title>Mock Car API Admin</title>
<link rel="stylesheet" href="{{ url_for('static', filename='admin.css')}}" type="text/css"> <link rel="stylesheet" href="{{ url_for('static', filename='admin.css')}}" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com"> <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> </head>
<body> <body>
<header> <header>
<h1>Mock Data API</h1> <h1>Mock Data API</h1>
</header> </header>
<div class="change"> <div class="change">
<input class="input-box" type="text" name="key" id="key" placeholder="Key"> <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"> <input class="input-box" type="text" name="value" id="value" placeholder="Valid JSON values">
</div> </div>
<div class='button-dec'> <div class='container'>
<button type="submit" id="#submit" onclick="updateData()">Change / Add</button> <button type="submit" id="#submit" onclick="updateData()">Change / Add</button>
</div> </div>
<div class="table-dec"> <div class="table-dec">