Simple Table With UIKIT

<!DOCTYPE html>
<html lang="en">
<head>
    <title>SIMPLE TABLE WITH UIKIT | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="SIMPLE TABLE WITH UIKIT">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet" />
</head>
<body class="uk-padding">

<table class="uk-table uk-table-striped">
    <thead>
        <tr>
            <th><strong>POSITION</strong></th>
            <th><strong>STATE</strong></th>
            <th><strong>Name</strong></th>
			<th><strong>Picture</strong></th>
			<th><strong>Actions</strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th width="5%">1</th>
            <th width="15%">
				<div class="checkbox mt-3 mb-3 text-right">
				 <label class="text-muted">
				   <input type="checkbox" class="ios-switch green  bigswitch" checked />
				   <div>
					 <div></div>
				   </div>
				 </label>
			   </div>		
			</th>
            <th width="15%">Name name one</th>
			<th width="20%">
			  <img width="20%" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg">
			  <br>Picture1name.png
			</th>
			<th width="25%">
				<a><i class="uk-text-primary fa fa-2x fa-edit"></i></a>
				<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-up"></i></a>
				<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-down"></i></a>
				<a><i class="uk-text-danger fa fa-2x fa-trash"></i></a>
		    </th>
        </tr>
		<tr>
            <th width="5%">2</th>
            <th width="15%">
				<div class="checkbox mt-3 mb-3 text-right">
				 <label class="text-muted">
				   <input type="checkbox" class="ios-switch green  bigswitch" checked />
				   <div>
					 <div></div>
				   </div>
				 </label>
			   </div>		
			</th>
            <th width="15%">Name name two</th>
			<th width="20%">
				<img width="20%" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg">
				<br>Picture1name.png
			  </th>
			<th width="25%">
				<a><i class="uk-text-primary fa fa-2x fa-edit"></i></a>
				<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-up"></i></a>
				<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-down"></i></a>
				<a><i class="uk-text-danger fa fa-2x fa-trash"></i></a>
		    </th>
        </tr>
		<tr>
            <th width="5%">3</th>
            <th width="15%">
				<div class="checkbox mt-3 mb-3 text-right">
				 <label class="text-muted">
				   <input type="checkbox" class="ios-switch green  bigswitch" />
				   <div>
					 <div></div>
				   </div>
				 </label>
			   </div>		
			</th>
            <th width="15%">Name name three</th>
			<th width="20%">
				<img width="20%" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg">
				<br>Picture1name.png
			</th>
			<th width="25%">
				<a><i class="uk-text-primary fa fa-2x fa-edit"></i></a>
				<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-up"></i></a>
				<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-down"></i></a>
				<a><i class="uk-text-danger fa fa-2x fa-trash"></i></a>
		    </th>
        </tr>
		<tr>
            <th width="5%">4</th>
            <th width="15%">
				<div class="checkbox mt-3 mb-3 text-right">
				 <label class="text-muted">
				   <input type="checkbox" class="ios-switch green  bigswitch" checked />
				   <div>
					 <div></div>
				   </div>
				 </label>
			   </div>		
			</th>
            <th width="15%">Name name four</th>
			<th width="20%">
				<img width="20%" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg">
				<br>Picture1name.png
			</th>
			<th width="25%">
				<a><i class="uk-text-primary fa fa-2x fa-edit"></i></a>
				<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-up"></i></a>
				<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-down"></i></a>
				<a><i class="uk-text-danger fa fa-2x fa-trash"></i></a>
		    </th>
        </tr>
		<tr>
            <th width="5%">
			  <input class="uk-input uk-form-width-small w100" type="number" placeholder="Position">
			</th>
            <th width="15%">
				<div class="checkbox mt-3 mb-3 text-right">
				 <label class="text-muted">
				   <input type="checkbox" class="ios-switch green  bigswitch" checked />
				   <div>
					 <div></div>
				   </div>
				 </label>
			   </div>		
			</th>
            <th width="15%">
			   <input class="uk-input uk-form-width-small w100" type="text" placeholder="Name">
			 </th>
			<th width="20%">
			  <input type="text" class="uk-input uk-form-width-small w100" placeholder="LINK Picture" type="url">
			</th>
			<th width="25%">
				<button class="uk-button uk-button-primary uk-button-small w100">
				   <i class="fa fa-plus"></i> Add new
				</button>
		    </th>
        </tr>
    </tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit-icons.min.js"></script>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.w100{
	width: 100%;
}

input[type="checkbox"] { 
    position: absolute;
    opacity: 0;
}

/* Normal Track */
input[type="checkbox"].ios-switch + div {
    vertical-align: middle;
    width: 40px;    height: 20px;
    border: 1px solid rgba(0,0,0,.4);
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-transition-duration: .4s;
    -webkit-transition-property: background-color, box-shadow;
    box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);
    margin: 15px 1.2em 15px 2.5em;
}

/* Big Track */
input[type="checkbox"].bigswitch.ios-switch + div {
    width: 50px;    height: 25px;    margin-bottom: 0px;
}

/* Green Track */
input[type="checkbox"].green.ios-switch:checked + div {
    background-color: #00e359;
    border: 1px solid rgba(0, 162, 63,1);
    box-shadow: inset 0 0 0 10px rgba(0,227,89,1);
}

/* Normal Knob */
input[type="checkbox"].ios-switch + div > div {
    float: left;
    width: 18px; height: 18px;
    border-radius: inherit;
    background: #ffffff;
    -webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: transform, background-color, box-shadow;
    -moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
    -moz-transition-duration: 0.4s;
    -moz-transition-property: transform, background-color;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    margin-top: 1px;
    margin-left: 1px;
}

/* Big Knob */
input[type="checkbox"].bigswitch.ios-switch + div > div {
    width: 23px; height: 23px;
    margin-top: 1px;
}

/* Checked Big Knob (Blue Style) */
input[type="checkbox"].bigswitch.ios-switch:checked + div > div {
    -webkit-transform: translate3d(25px, 0, 0);
    -moz-transform: translate3d(16px, 0, 0);
}

/* Green Knob */
input[type="checkbox"].green.ios-switch:checked + div > div {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 162, 63,1);
}

                                    
Vidéo background en html5 style02

Vidéo background en html5 style02

Vidéo background en html5 style01

Vidéo background en html5 style01

Table bootstrap with Datatable

Table bootstrap with Datatable

Simple Table With UIKIT

Simple Table With UIKIT

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Pagination with Jquery

Pagination with Jquery

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Input range slider HTML style04

Input range slider HTML style04

Image hover 06

Image hover 06

Image hover 01

Image hover 01

Buttons Styles Inspirations

Buttons Styles Inspirations

Ajouter multiple input dynamique

Ajouter multiple input dynamique