add btn's

This commit is contained in:
chubby 2021-11-22 17:42:32 +03:00
parent 0fb1bca57b
commit e3fcbb18b4

View File

@ -10,22 +10,24 @@
background-color: rgb(223, 223, 223);
}
.table td{
td {
padding: 10px;
border: 1px solid black;
background-color: white;
}
.input{
float: left;
margin: 15px;
}
.btn {
display: inline-block;
float: left;
padding: 10px;
background-color: rgb(253, 253, 250);
border: 2px solid rgb(247, 247, 153);
border: 2px solid rgb(196, 195, 195);
border-radius: 4px;
height: 55px;
}
.btn:hover{
@ -33,25 +35,67 @@
}
.container {
display: flex;
margin: 10px;
float: left;
padding-top: 15px;
width: 400px;
}
.color_element {
display: flex;
text-align: center;
flex-direction: column;
float: left;
margin: 0px 5px;
width: 50px;
border-radius: 2px;
}
.color_button{
width: 50px;
height: 27px;
border-radius: 2px;
}
.del_btn{
height: 27px;
background-color: white;
border: none;
}
.icon {
font-size:30px;
}
.main {
margin: 15px;
}
.del{
opacity: 0;
font-size: 20px;
}
.del:hover{
opacity: 1;
}
</style>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
</head>
<body>
<table class="table" id="qq"></table>
<div class="container">
container
<div class = "main">
<input class = "input" type="color" id="palitra">
<button class="btn">Кнопка</button>
<button class="btn" onclick="add_color()" id="btn"><i class="bi bi-plus-circle icon"></i></button>
<div class="container" id="container"></div>
</div>
<script src="main.js"></script>
</body>