Theme Inputs and Buttons. Change font and background
This commit is contained in:
		| @@ -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"> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user