Category:

blog-post

retrouvé ici les meilleurs articles sur la programmation

button-ripple-effect-on-click-using-css-vanilla-javascript

by personne 16 août 2022

Code HTML

				
					<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ui button </title>
	<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>



	<div class="block-btn">
		<button class="lire-plus">Lire plus</button>
		<button class="envoyer">Envoyer</button>
		<button class="connexion">Connexion</button>
		<button class="inscription">Inscription</button>
	</div>

	<script src="main.js"></script>
<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));

(function () {

    var PenciLazy = new LazyLoad({
        elements_selector: '.penci-lazy',
        data_bg: 'bgset',
        class_loading: 'lazyloading',
        class_entered: 'lazyloaded',
        class_loaded: 'pcloaded',
        unobserve_entered: true
    });

    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations, observer) {
        PenciLazy.update();
    });

    observer.observe(document, {
        subtree: true,
        attributes: true
    });
})();
</script>
</body>
</html>

Code CSS

nous allons maintenant mettre en place notre style CSS pour donner une forme à nos boutons avec des couleurs différentes. le @import : c’est l’importation de la police depuis google font.

				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

body{
	height: 100vh;
	margin: 0;
	padding: 0;
	display: grid;
	place-items:  center;
}
.block-btn{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.lire-plus{
	background: #6200ee;
}
.envoyer{
	background: #0fb294;
}
.connexion{
	background: #0f056b;
}
.inscription{
	background: #ee1851;
}

button{
	margin: 1rem;
	position: relative;
	overflow: hidden;
	transition: background 400ms;
	color: #fff;
	padding: 1rem 2rem;
	font-size: 1.5rem;
	outline: none;
	border: none;
	cursor: pointer;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
}
span.ripple{
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	animation: ripple 600ms linear;
	background-color: rgba(255, 255, 255, 0.7);
}
@keyframes ripple{
	to{
		transform: scale(4);
		opacity: 0;
	}
}

Code JS

definition de notre fonction Javascript pour qu’a chaque clique du bouton il y aura un effet transparent qui anime ce dernier.

				
					function createRipple(event) {
	
	const button = event.currentTarget;

	const circle = document.createElement("span");
	const diameter = Math.max(button.clientWidth, button.clientHeight);
	const radius = diameter / 2;


	circle.style.width = circle.style.height = `${diameter}px`;
	circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
	circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
	circle.classList.add("ripple");


	const ripple = button.getElementsByClassName("ripple")[0];

	if (ripple) {
		ripple.remove();
	} 
	button.appendChild(circle);
}

const buttons = document.getElementsByTagName("button");
for (const button of buttons){
	button.addEventListener("click", createRipple);
}

0 comment 73 views

circle-progress-bar-using-html-css

by personne 25 août 2022

Salut les amis, aujourd’hui dans ce blog, vous allez apprendre à créer Circle Progress bar en HTML et CSS. Plus tôt, j’ai partagé de nombreux blogs liés au JavaScript comme des exercices, menus, calendrier etc.

Si vous n’avez pas encore visionné ces tutoriels, veuillez les vérifier également. Je pense que vous aimerez ces tutos et apprendrez beaucoup de choses sur HTML CSS JavaScript et PHP.

Pour créer un cercle progress bar en utilisant HTML et CSS vous devez créer deux fichiers : fichiers HTML et un fichier CSS. Une fois que vous avez créé ces fichiers, copiez juste collez simplement les codes donnés dans vos fichier respectifs.

Tout d’abord, créez un fichier HTML avec le nom index.html et collez les codes donnés dans votre fichier HTML. N’oubliez pas que vous devez créer un fichier avec une extension .html

				
					<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>
		Responsive circle barre 
	</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-sm-6">
				<div class="progress blue">
					<span class="progress-left">
						<span class="progress-bar"></span>
					</span>
					<span class="progress-right">
						<span class="progress-bar"></span>
					</span>
					<div class="progress-value">90%</div>
				</div>
			</div>
			<div class="col-md-4 col-sm-6">
				<div class="progress yellow">
					<span class="progress-left">
						<span class="progress-bar"></span>
					</span>
					<span class="progress-right">
						<span class="progress-bar"></span>
					</span>
					<div class="progress-value">75%</div>
				</div>
			</div>
			<div class="col-md-4 col-sm-6">
				<div class="progress pink">
					<span class="progress-left">
						<span class="progress-bar"></span>
					</span>
					<span class="progress-right">
						<span class="progress-bar"></span>
					</span>
					<div class="progress-value">60%</div>
				</div>
			</div>
		</div>
	</div>
<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));

(function () {

    var PenciLazy = new LazyLoad({
        elements_selector: '.penci-lazy',
        data_bg: 'bgset',
        class_loading: 'lazyloading',
        class_entered: 'lazyloaded',
        class_loaded: 'pcloaded',
        unobserve_entered: true
    });

    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations, observer) {
        PenciLazy.update();
    });

    observer.observe(document, {
        subtree: true,
        attributes: true
    });
})();
</script>
</body>
</html>

Deuxièmement, créez un fichier CSS avec le nom style.css et collez les codes donnés dans votre fichier CSS. N’oubliez pas que vous devez créer un fichier avec une extension .css.

				
					body{
	margin: 10%;
	margin-left: 20%;
	background: linear-gradient(-30deg, #0f056b, #0fb294, #0fb294);
	display: flex;
	justify-content: center;
	align-items: center;
}
body::before{
	content: '';
	position: absolute;
	left: 8%;
	bottom: 2%;
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, .5);
	animation: dev 3s linear infinite;
}
@keyframes dev
{
	0%, 100%{
		transform: translateX(50px);
	}
	50%{
		transform: translateX(100px) scale(.8);
	}
}
body::after{
	content: '';
	position: absolute;
	left: 80%;
	top: 12%;
	z-index: -1;
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, .5);
	animation: tech 3s linear infinite;
}
@keyframes tech
{
	0%, 100%{
		transform: translateX(50px);
	}
	50%{
		transform: translateX(100px) scale(.8);
	}
}
.progress{
	width: 150px;
	height: 150px;
	line-height: 150px;
	background: none;
	margin: 0 auto;
	box-shadow: none;
	position: relative;
}
.progress:after{
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 15px solid #f2f5f5;
	position: absolute;
	top: 0;
	left: 0;
}
.progress > span{
	width: 50%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 1;
}
.progress .progress-left{
	left: 0;
}
.progress .progress-bar{
	width: 100%;
	height: 100%;
	background: none;
	border-width: 15px;
	border-style: solid;
	position: absolute;
	top: 0;
}
.progress .progress-left .progress-bar{
	left: 100%;
	border-top-right-radius: 80px;
	border-bottom-right-radius: 80px;
	border-left: 0;
	-webkit-transform-origin: center left;
	transform-origin: center left;
}
.progress .progress-right{
	right: 0;
}
.progress .progress-right .progress-bar{
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: leadingOne 1.8s linear forwards;
}
.progress .progress-value{
	width: 100%;
	height: 100%;
	font-size: 24px;
	color: rgb(250, 245, 245);
	text-align: center;
	position: absolute;
}
.progress.blue .progress-bar{
	border-color: #26abfd;
}
.progress.blue .progress-left .progress-bar{
	animation: leandingTwo 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
	border-color: #fdc426;
}
.progress.yellow .progress-left .progress-bar{
	animation: leandingThree 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
	border-color: #f83754;
}
.progress.pink .progress-left .progress-bar{
	animation: leandingFor 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar{
	border-color: #f83754;
}
.progress.green .progress-left .progress-bar{
	animation: leandingFive 1.2s linear forwards 1.8s;
}

@keyframes leadingOne{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@keyframes leandingTwo{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(144deg);
		transform: rotate(144deg);
	}
}
@keyframes leandingThree{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}
@keyframes leandingFor{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(36deg);
		transform: rotate(36deg);
	}
}

C’est tout, maintenant vous avez réussi à créer votre cercle Progress bar en HTML et CSS. Si votre code ne fonctionne pas ou si vous rencontrez des problèmes, veuillez suivre le tutoriel YouTube disponible ici: suivre la vidéo complète sur YouTube . C’est gratuit ..

1 comment 114 views

corrections-fiche-tp-1-bonjour

by personne 18 août 2022

				
					#include<stdio.h>
#include<stdlib.h>
    int main()
    {
    printf("bonjour \n");
    system("pause");
    return 0;
    }

0 comment 107 views

Creer un menu Horizontal en html et css

by personne 25 août 2022

Creation de Menu Dropdown

Tout d’abord, créez un fichier HTML avec le nom index.html et collez les codes donnés dans votre fichier HTML. N’oubliez pas que vous devez créer un fichier avec une extension .html

				
					<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Dropdown Menu using HTML and CSS</title>
	<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
  	<div class="container">
  		<nav>
  			<ul>
  				<li><a href="">ACCUEIL</a></li>
  				<li><a href="">PRESENTATION</a>
  					<ul>
		  				<li><a href="">One</a></li>
		  				<li><a href="">Two</a></li>
		  				<li><a href="">Three</a></li>
  						
  					</ul>
  					<li><a href="">REALISATION</a>
  						<ul>
			  				<li><a href="">demo 1</a></li>
			  				<li><a href="">demo 2</a></li>
			  				<li><a href="">demo 3</a>
			  					<ul>
					  				<li><a href="">sous demo 1</a></li>
					  				<li><a href="">sous demo 2</a></li>
					  				<li><a href="">sous demo 3</a>
					  					<ul>
							  				<li><a href="">sous demo 1</a></li>
							  				<li><a href=""> sous demo 2</a></li>
							  				<li><a href=""> sous demo 3</a></li>
					  						
					  					</ul>
					  				</li>
			  						
			  					</ul>
			  				</li>
  							
  						</ul>
  					</li>
  				</li>
  				<li><a href="">SERVICES</a></li>
  				<li><a href="">PRODUCTIONS</a></li>
  				<li><a href="">A-PROPOS</a></li>
  				<li><a href="">CONTACTS</a></li>
  			</ul>
  		</nav>
  	</div>

<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));

(function () {

    var PenciLazy = new LazyLoad({
        elements_selector: '.penci-lazy',
        data_bg: 'bgset',
        class_loading: 'lazyloading',
        class_entered: 'lazyloaded',
        class_loaded: 'pcloaded',
        unobserve_entered: true
    });

    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations, observer) {
        PenciLazy.update();
    });

    observer.observe(document, {
        subtree: true,
        attributes: true
    });
})();
</script>
</body>
</html>

Code CSS :

Deuxièmement, créez un fichier CSS avec le nom style.css et collez les codes donnés dans votre fichier CSS. N’oubliez pas que vous devez créer un fichier avec une extension .css .

				
					body{
	margin: 5px;
	padding: 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	line-height: 32px;
	color: #fff;
}

nav{
	background-color: #008ea1;
}
nav ul{
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}
nav ul li{
	display: inline-block;
	background-color: #008ea1;
}
nav a{
	display: block;
	padding: 0 10px;
	color: #fff;
	line-height: 60px;
	font-size: 20px;
	text-decoration: none;
}
nav ul ul{
	display: none;
	position: absolute;
	top: 60px;
}
nav a:hover{
	background-color: #f8e80c;
}
nav ul li:hover > ul{
	display: inherit;
}
nav ul ul li {
	width: 170px;
	float: none;
	display: list-item;
	position: relative;
}
nav ul ul ul li{
	position: relative;
	top: -60px;
	left: 170px;
}
li > a::after{
	content: ' ^';
}
li > a:only-child::after{
	content: '';
}

1 comment 125 views

Créer un Site WEB Gratuitement, Facilement et Rapidement

by personne 25 août 2022

Salut les amis, aujourd’hui dans ce blog, vous allez apprendre à créer facilement un très beau site web en HTML et CSS. Plus tôt, j’ai partagé de nombreux blogs liés au HTML CSS et JavaScript comme des exercices, menus, Admin Dashboard etc..

Si vous n’avez pas encore visionné ces tutoriels, veuillez les vérifier également. Je pense que vous aimerez ces tutos et apprendrez beaucoup de choses sur HTML CSS JavaScript et PHP.

Pour créer un site web en utilisant HTML et CSS vous pouvez créer autant de fichier que vous voulez et cela dépend de vos besoins et vos nombre de page dont souhaitez créer. alors dans notre cas vous devez créer trois fichiers : deux HTML(index.html et un fichier contact.html) ainsi créez un dossier nommer CSS ou vous allez créer à l’interieur deux fichier CSS (style.css) et contact.css . Une fois que vous avez créé ces fichiers, copiez juste collez simplement les codes donnés dans vos fichier respectifs.

par ailleurs vous pouvez utiliser des images comme nous l’avons fait avec ce tuto. dans ce cas vous allez créer un dossier images ou vous allez placer tous vos images pour une meilleurs organisation de vos fichiers

NB : choisissez les images qui vous convient et n’oubliez pas de mettre les noms des images respectifs dans le code

Pour un didacticiel vidéo complet de ce tutoriel de création de site web en HTML et CSS, vous pouvez regarder la vidéo YouTube donnée.

Tout d’abord, créez un fichier HTML avec le nom index.html et collez les codes donnés dans votre fichier HTML. N’oubliez pas que vous devez créer un fichier avec une extension .html

				
					<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>learn programming</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />

</head>

    <body>
        <main>
            <section class="msk_container">
                <div class="msk_entete">
                    <div class="msk_text"><h1>Learn Programming</h1>
                        <h2>le temps de l'afrique pour le web</h2>
                        <a class="more" href="#">savoir plus</a>
                    </div>
                </div>
                <div class="msk_nav">                     
                        <nav class="nave">
                             <ul class="nav_ul">
                                 <a href="#" class="nav_a"> Accueil</a>
                                 <a href="#" class="nav_a"> Services</a>
                                 <a href="#" class="nav_a"> Membres</a>
                                 <a href="contacter.html" class="nav_a"> Contact</a>
                                 <a href="#" class="nav_a">A propos</a>
                             </ul>
                        </nav>
                     
                </div>
                <div class="msk_cadres">
                    <div class="msk_card">
                        <div class="imdd">
                            <img decoding="async" id="image" class="dav" src="img/01.jpg">
                        </div>
                        <div class="des">
                             <h1 class="mol">Developpement web</h1>
                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </div>
                    <div class="msk_card">
                        <div class="des">
                            <h1 class="mol"> Photographie</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                        <div class="imdd">
                            <img decoding="async" src="img/02.jpg" class="dav">
                        </div>
                    </div>
                    <div class="msk_card">
                        <div class="imdd">
                           <img decoding="async" src="img/03.jpg" class="dav"> 
                        </div>
                        <div class="des">
                            <h2 class="mol"> Developpement mobile</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </div>
                    <!-- fin des cards -->
                </div>
            </section>

            <footer>
                <code>
                    <p class="p">Creation de learn programming</p>
                    <p class="p">Developpement web</p>
                    <address class="p">+221 77 052 59 09</address>
                    <address class="p"> gueyeazou201629@gmail.com</address>
                </code>
            </footer>
        </main>
           
    <script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));

(function () {

    var PenciLazy = new LazyLoad({
        elements_selector: '.penci-lazy',
        data_bg: 'bgset',
        class_loading: 'lazyloading',
        class_entered: 'lazyloaded',
        class_loaded: 'pcloaded',
        unobserve_entered: true
    });

    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations, observer) {
        PenciLazy.update();
    });

    observer.observe(document, {
        subtree: true,
        attributes: true
    });
})();
</script>
</body>

</html>

Ensuite, créez un autre fichier HTML avec le nom contact.html et collez les codes donnés dans votre fichier HTML. N’oubliez pas que vous devez créer un fichier avec une extension .html

				
					<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>contact</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/contact.css" />
    

</head>

	<body>
	   <main>
	   	 <h1>Nous Contacter</h1>
	   	 <form action="post">
	   	 	  <div class="fr_g">
	   	 	  	<label for="nom"> Votre nom</label>
	   	 	  	<input class="input" type="text" name="nom" id="nom">
	   	 	  </div>

	   	 	  <div class="fr_g">
	   	 	  	<label for="nom"> Votre email</label>
	   	 	  	<input class="input" type="text" name="email" id="email">
	   	 	  </div>

	   	 	  <label for="mms"> votre message</label>
	   	 	  <textarea class="text" name="mms" cols="80" rows="15"></textarea>
	   	 	  <input type="submit" class="btn" name="" value="Envoyer">
	   	 </form>
	   </main>
	<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));

(function () {

    var PenciLazy = new LazyLoad({
        elements_selector: '.penci-lazy',
        data_bg: 'bgset',
        class_loading: 'lazyloading',
        class_entered: 'lazyloaded',
        class_loaded: 'pcloaded',
        unobserve_entered: true
    });

    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations, observer) {
        PenciLazy.update();
    });

    observer.observe(document, {
        subtree: true,
        attributes: true
    });
})();
</script>
</body>

</html>

Ainsi, créez un fichier CSS avec le nom style.css et collez les codes donnés dans votre fichier CSS. N’oubliez pas que vous devez créer un fichier avec une extension .css.

				
					body{
	transition: 1s;
	height: auto;
	margin: 0;
	background-color: rgb(230, 230, 230);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
main{
	background-color: #fff;
	box-shadow: 30px 0px 40px rgb(196, 196, 196), -30px 0px 40px rgb(196, 196, 196);
	margin: auto;
	max-width: 900px;
}
.msk_container{
	width: 100%;

}
h1{
	margin: 0;
	font-size: 2.5rem;
	text-transform: uppercase;
	font-weight: 400;
}
h2{
	margin: 0;
	font-size: 1.5rem;
	font-weight: 400;
}
.msk_nav{
	background-color: #0096aa79;
}
.msk_text{
	display: inline-block;
	text-align: center;
}
.more{
	transition: 0.5s;
	margin-top: 80px;
	display: inline-block;
	color: #333;
	padding: 4px 6px;
	text-decoration: none;
	border: 1px solid rgb(0, 0, 0);
	border-radius: 50px;
}
.more:hover{
	background-color: orange;
	color: #fff;
	border: none;
}
.nav_a{
	transition: 0.5s;
	padding: 10px;
	margin: 0;
	border-right: 3px solid rgb(255, 255, 255);
	border-left: 3px solid rgb(255, 255, 255);
	text-decoration: none;
	color: rgb(255, 255, 255);
}
.nav_a:hover{
	background-color: coral;
	z-index: 3333;
	transform: scale(1.2, 1.2);
}
.nav_ul{
	padding: 0;
	justify-content: space-around;
	margin: 0;
	list-style: none;
	display: flex;
}
.msk_entete{
	align-items: center;
	height: 50vh;
	flex-wrap: wrap;
	display: flex;
	flex: 0 1 40vw;
	justify-content: center;
}
.msk_cadres{
	padding-top: 10px;
}
.nave{
	height: auto;
	margin: auto;
}
.dav{
	height: 300px;
}
.mol{
	text-align: center;
}
.des{
	padding: 15px;
}
.msk_card{
	margin-top: 10px;
	align-items: center;
	overflow: hidden;
	border-top: 1px solid gray;
	display: flex;
}
.p{
	letter-spacing: 3px;
	margin: 2px;
}
footer{
	line-height: 1;
	padding: 7px;
	text-align: center;
	color: #fff;
	background-color: rgb(0, 180, 180);
}

Enfin, créez un fichier CSS avec le nom contact.css et collez les codes donnés dans votre fichier CSS. N’oubliez pas que vous devez créer un fichier avec une extension .css.

				
					body{
	background-color: rgb(230, 230, 230);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
main{
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 30px 0px 40px rgb(196, 196, 196), -30px 0px 40px rgb(196, 196, 196);
	margin: auto;
	width: 800px;
}
h1{
	border-radius: 4px 4px;
	color: #fff;
	background-color: rgb(255, 46, 19);
}
form{
	padding: 10px;
}
.btn{
	width: 150px;
	height: 50px;
	padding: 10px;
	border-radius: 30px;
	border: none;
	color: #fff;
	font-size: 16px;
	background-color: blueviolet;
	margin-top: 10px;
	display: block;
	cursor: pointer;
}
.text{
	border-radius: 4px;
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
	box-shadow: 0px 0px 1px;
	border: none;
	display: block;
}
.fr_g{
	margin-bottom: 15px;
	display: block;
	width: 30%;
}
.input{
	transition: 0.3s;
	border-radius: 4px;
	font-size: 13px;
	padding: 10px;
	height: 40px;
	border: none;
	box-shadow: 0px 0px 1px;
	box-sizing: border-box;
	width: 100%;
}
.input:focus{
	direction: none;
	border: none;
	box-shadow: 0px 0px 10px;
}

1 comment 96 views

git-commands

by personne 16 novembre 2022

Bienvenue dans cet post, aujourd’hui nous allons découvrir ensemble quelques commandes git qui pourraient vous etre utile pour carriere en tant que developpeur.

Tout d’abord qui ‘est-ce que git ?.

En effet git est un logiciel qui est aujourd’hui le système de gestion le plus performant et pertinent. GIT a été développé par Linus Torvalds en 2005. Aujourd’hui, des millions d’entreprises l’utilisent pour gérer efficacement leur code et la version de celui-ci.

NB: Avant d’exécuter l’une de ces commandes que nous allons vous partager, il faut impérativement installer git sur votre système.

Comme nous l’avons évoqué plus haut, nous allons vous partager aujourd’hui des commandes git qui seront indispensable pour bien comprendre ce logiciel :

git config :

L’une des commandes git les plus utilisées est git config. On l’utilise pour configurer les préférences de l’utilisateur.

git init :

initialise un nouveau dépôt git.

git add .

ajoute des fichiers à la zone de préparation

git status :

utilisé pour vérifier l’état de la zone de staging, ainsi que le répertoire de travail

git log :

utilisé pour afficher l’intégralité de l’historique des commits

git commit -m “message” :

utilisé pour valider des fichiers (localement) sur le référentiel

git clone :

utilisé pour télécharger le code existant à partir du référentiel distant

git branch :

utilisé pour lister toutes les succursales locales sur la machine

git merge (nom de la branche) :

fusionner la branche fournie avec la branche de travail actuelle

git branch (nom de la branche) :

utilisé pour créer une nouvelle branche localement

git branch -d (nom de la branche) :

utilisé pour supprimer une branche

git branch -m (nouvelle branche) :

utilisé pour renommer la branche de travail actuelle

git checkout (nom branche) :

utilisé pour passer de la branche courante à une autre

git push (remote) (nom branche) :

utilisé pour enregistrer tous les commits dans le référentiel distant.

git checkout -b (nom branche) :

créer une nouvelle branche et passer à la nouvelle

git pull remote :

utilisé pour retirer toutes les mises à jour du référentiel distant.

git rm (nom ficher) :

utilisé pour supprimer un fichier du répertoire de travail.

git stash :

utilisé pour supprimer temporairement les modifications non validées .

git reset:

annuler les modifications apportées aux fichiers locaux et restaurer au dernier commit .

git diff:

affiche la différence entre les fichiers dans deux commits ou entre un commit et votre référentiel actuel.

1 comment 153 views

HTML

by personne 5 août 2022

0 comment 71 views

input types html

by personne 3 octobre 2022

1- Le input type= »file »

définit un champ de sélection de fichier et un bouton « Parcourir » pour les téléchargements de fichiers. .

				
					<input type="file">

Résultat

2- Input Type Hidden

→ Le input type= »hidden » définit un champ de saisie caché (non visible pour un utilisateur).

→ Un champ caché permet aux développeurs Web d’inclure des données qui ne peuvent pas être vues ou modifiées par les utilisateurs lorsqu’un formulaire est soumis.

				
					<input type="hidden">

3-input type Month

→ Le input type= »month » permet à l’utilisateur de sélectionner un mois et une année.

				
					<input type="month">

Résultat

4- Input Type Number

→ Le input type= »number » définit un champ de saisie numérique.

				
					<input type="number">

Résultat

5- Input Type Range

→ Le input type= »range » définit un contrôle permettant de saisir un nombre dont la valeur exacte n’a pas d’importance (comme un curseur).

				
					<input type="range">

Résultat

6 – input type= »date »

->Les éléments input dont l’attribut type vaut date permettent de créer des champs où saisir des dates, via un champ texte dont la valeur est validée ou avec un sélecteur de date.

				
					<input type="date" name="" id="">

Résultat

0 comment 69 views

php-crud-mysql-bootstrap-5-create-read-update-delete

by personne 2 septembre 2022

Dans ce didacticiel PHP CRUD, nous allons créer une application PHP CRUD entièrement fonctionnelle avec Bootstrap 5, PHP et MySQL.

PHP CRUD signifie Créer, Lire, Mettre à jour, Supprimer, ce qui est un moyen facile de mémoriser tous les composants nécessaires à une application de site Web entièrement dynamique. Nous allons utiliser des instructions MySQL appelées INSERT , SELECT , UPDATE et DELETE qui correspondent à la fonctionnalité CRUD.

Vous allez aussi apprendre à ajouter des données dans une basse de données, de supprimer un étudiant, ajouter un étudiant, de mettre à jour les informations d’un étudiant, de lister les étudiants ainsi que leurs détails. vous allez aussi apprendre à utiliser les classes Bootstrap, de faire la responsivités etc.

Pour un didacticiel vidéo complet de ce tutoriel application CRUD PHP, vous pouvez regarder la vidéo YouTube donnée. Nb: n’oubliez de visiter les autres vidéos disponible sur la chaine et n’oubliez pas aussi de vous abonner à la chaine pour

Avant de commencer, vous devez au préalable se rendre dans phpMyAdmin pour créer une base de données.

Ensuite nous passons directement à la création de notre fichier de configuration php qui nous permet de faire connecter la base de données récemment crée au niveau de phpmyadmin avec notre travail.

Créez un fichier avec le nom connect.php. copiez et collez les codes donnés dans votre fichier PHP. N’oubliez pas que vous devez créer un fichier avec une extension .php

				
					<?php 
 $con = mysqli_connect('localhost', 'root', '');
 	if (!$con) {
 		die("database connection failed" . mysqli_error($con));
 	}

 $select_db = mysqli_select_db($con, 'php_crud_app');
 	if (!$select_db) {
 		die("database selected failed" . mysqli_error($con));
 	}

 ?>

Ensuite Créez un fichier avec le nom navbar.php. qui nous permet de créer la barre de navigation entre les différentes pages qu’on va crée par la suite; copiez et collez les codes donnés dans votre fichier PHP. N’oubliez pas que vous devez créer un fichier avec une extension .php

				
					
<nav class="navbar navbar-expand-lg navbar-light bg-nav">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sen Dev Tech</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav m-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="view.php">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="index.php">Ajouter un Etudiant</a>
        </li>
    
      </ul>
      <span class="navbar-text">
        Profil Admin
      </span>
    </div>
  </div>
</nav>

Créez un fichier avec le nom index.php. copiez et collez les codes donnés dans votre fichier PHP.

				
					<?php 

require_once ('connect.php');
	if (isset($_POST) & !empty($_POST)) {
		$nom = ($_POST['nom']);
		$prenom = ($_POST['prenom']);
		$email = ($_POST['email']);
		$gender = $_POST['gender'];
		$age = $_POST['age'];

		$CreateSql = "INSERT INTO `etudiant` (first_name, 	last_name, email, gender, age)  VALUES('$nom', '$prenom', '$email', '$gender', '$age') ";
		$res = mysqli_query($con, $CreateSql) or die(mysqli_error($con));
		if ($res) {
			$message = "insertion reussi avec succès";
		}else{
			$erreur = "erreur d'insertion a la base";
		}
	}

 ?>


<!DOCTYPE html>
<html>
<head>
	<title>crud app php</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="style.css" >

</head>
<body>
	<?php 	
		include 'navbar.php';
	 ?>

	<div class="container">
		<div class="row pt-4">
			<?php if (isset($message)) { ?>
				<div class="alert alert-success" role="alert">
					<?php echo $message; ?>
				</div> <?php } ?>

				<?php if (isset($erreur)) { ?>
				<div class="alert alert-danger" role="alert">
					<?php echo $erreur; ?>
				</div> <?php } ?>

			<form action="" method="POST" class="form-horizontal col-md-6 pt-4">
				<h2>Crud App by sen dev tech</h2>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Nom</label>
					<div class="col-sm-10">
						<input type="text" name="nom" placeholder="Nom" class="form-control" id="input1">
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">prenom</label>
					<div class="col-sm-10">
						<input type="text" name="prenom" placeholder="prenom" class="form-control" id="input1">
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Email</label>
					<div class="col-sm-10">
						<input type="email" name="email" placeholder="e-mail" class="form-control" id="input1">
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Genre</label>
					<div class="col-sm-10">
						<label>
							<input type="radio" name="gender" id="optionsRadios" value="h" checked>
							H
						</label>
						<label>
							<input type="radio" name="gender" id="optionsRadios" value="f" checked>
							F
						</label>
						
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Age</label>
					<div class="col-sm-10">
						<select name="age" class="form-control">
							<option>Ton age</option>
							<option value="20">20</option>
							<option value="21">21</option>
							<option value="22">22</option>
							<option value="23">23</option>
							<option value="24">24</option>

						</select>
					</div>
				</div>

				<div class="pt-4">
					<input type="submit" value="submit" class="btn btn-primary m-3">
					<a href="view.php">
						<button class="btn btn-success m-3" type="button">
							voir la liste
						</button>
					</a>
				</div>
			</form>
		</div>
	</div>
	
	
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));

(function () {

    var PenciLazy = new LazyLoad({
        elements_selector: '.penci-lazy',
        data_bg: 'bgset',
        class_loading: 'lazyloading',
        class_entered: 'lazyloaded',
        class_loaded: 'pcloaded',
        unobserve_entered: true
    });

    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations, observer) {
        PenciLazy.update();
    });

    observer.observe(document, {
        subtree: true,
        attributes: true
    });
})();
</script>
</body>
</html>

Créez un fichier avec le nom view.php. copiez et collez les codes donnés dans votre fichier PHP.

				
					<?php 
	require_once ('connect.php');
	$ReadSql = "SELECT * FROM `etudiant` ";

	$res = mysqli_query($con, $ReadSql);

 ?>


<!DOCTYPE html>
<html>
<head>
	<title>crud app php</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="style.css" >

</head>
<body>

	<?php 	
		include 'navbar.php';
	 ?>
	
	<div class="container">
		<div class="row pt-4">
			<h2>crup app by sen dev tech</h2>

			<a href="index.php">
				<button class="btn btn-primary" type="">
					Ajouter un Etudiant
				</button>
			</a>
		</div>

		<table class="table table-striped mt-3">
			<thead>
				<tr>
					<th>id</th>
					<th>Nom complet</th>
					<th>email</th>
					<th>Age</th>
					<th>genre</th>
					<th>Actions</th>
				</tr>
			</thead>

			<tbody>
				<?php while ($r = mysqli_fetch_assoc($res)) {
				?>

				<tr>
					<th scope="row"><?php echo $r['id']; ?></th>
					<td><?php echo $r['first_name'] ." ". $r['last_name']; ?></td>
					<td><?php echo $r['email']; ?></td>
					<td><?php echo $r['age']; ?></td>
					<td><?php echo $r['gender']; ?></td>

					<td>
						<a href="update.php?id=<?php echo $r['id']; ?>" class="m-2">
							<i class="fa fa-edit fa-2x"></i>
						</a>
						<i class="fa fa-trash fa-2x red-icon"
						 data-bs-toggle="modal"
						 data-bs-target="#exampleModal<?php echo $r['id']; ?>">
						 	
						 </i>

						 <div class="modal fade" id="exampleModal<?php echo $r['id']; ?>" role="dialog">
						 	<div class="modal-dialog">
						 		<div class="modal-content">
						 			<div class="modal-body">
						 				<p>etes vous sur de vouloir supprimer cette etudiant ?</p>
						 			</div>
						 			<div class="modal-footer">
						 				<button type="button" class="btn btn-primary"
						 				data-bs-dismiss="modal">Annuler</button>
						 				<a href="delete.php?id=<?php echo $r['id']; ?>">
						 					<button class="btn btn-danger" type="button">Confirmer</button>
						 				</a>
						 			</div>
						 		</div>
						 	</div>
						 </div>
					</td>
				</tr>
			<?php } ?>
			</tbody>
		</table>


	</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));

(function () {

    var PenciLazy = new LazyLoad({
        elements_selector: '.penci-lazy',
        data_bg: 'bgset',
        class_loading: 'lazyloading',
        class_entered: 'lazyloaded',
        class_loaded: 'pcloaded',
        unobserve_entered: true
    });

    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations, observer) {
        PenciLazy.update();
    });

    observer.observe(document, {
        subtree: true,
        attributes: true
    });
})();
</script>
</body>
</html>

Créez un fichier avec le nom update.php. copiez et collez les codes donnés dans votre fichier PHP. en effet, ce code nous permet de mettre à jour c’est à dire de modifier les données depuis notre base données

				
					<?php 

require_once ('connect.php');

	$id = $_GET['id'];
	$selSql = "SELECT * FROM `etudiant` WHERE id=$id";
	$res = mysqli_query($con, $selSql);
	$r = mysqli_fetch_assoc($res);

	if (isset($_POST) & !empty($_POST)) {
		$nom = ($_POST['nom']);
		$prenom = ($_POST['prenom']);
		$email = ($_POST['email']);
		$gender = $_POST['gender'];
		$age = $_POST['age'];

		$UpdateSql = "UPDATE `etudiant` SET first_name='$nom',	last_name='$prenom', email='$email', gender='$gender', age='$age'  WHERE id=$id ";

		$res = mysqli_query($con, $UpdateSql);
		if ($res) {
			header("location: view.php");
		}else{
			$erreur = "la mise à jour a échoué.";
		}
	}

 ?>


<!DOCTYPE html>
<html>
<head>
	<title>crud app php</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="style.css" >

</head>
<body>
	<?php 	
		include 'navbar.php';
	 ?>

	<div class="container">
		<div class="row pt-4">
				<?php if (isset($erreur)) { ?>
				<div class="alert alert-danger" role="alert">
					<?php echo $erreur; ?>
				</div> <?php } ?>

			<form action="" method="POST" class="form-horizontal col-md-6 pt-4">
				<h2>Crud App by sen dev tech</h2>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Nom</label>
					<div class="col-sm-10">
						<input type="text" name="nom" placeholder="Nom" 
						class="form-control" id="input1"
						value="<?php echo $r['first_name'] ?>">
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">prenom</label>
					<div class="col-sm-10">
						<input type="text" name="prenom" placeholder="prenom" class="form-control" id="input1"
						value="<?php echo $r['last_name'] ?>">
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Email</label>
					<div class="col-sm-10">
						<input type="email" name="email" placeholder="e-mail" class="form-control" id="input1"
						value="<?php echo $r['email'] ?>">
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Genre</label>
					<div class="col-sm-10">
						<label>
							<input type="radio" name="gender" id="optionsRadios" 
							value="h" <?php if($r['gender'] == 'h'){ echo "checked";} ?>>
							H
						</label>
						<label>
							<input type="radio" name="gender" id="optionsRadios" value="f" <?php if($r['gender'] == 'f'){ echo "checked";} ?>>
							F
						</label>
						
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Age</label>
					<div class="col-sm-10">
						<select name="age" class="form-control">
							<option>Ton age</option>
							<option value="20" <?php if($r['age'] == '20'){ echo "selected";} ?>>20</option>

							<option value="21"  <?php if($r['age'] == '21'){ echo "selected";} ?>>21</option>

							<option value="22"  <?php if($r['age'] == '22'){ echo "selected";} ?> >22</option>

							<option value="23" <?php if($r['age'] == '23'){ echo "selected";} ?> >23</option>

							<option value="24" <?php if($r['age'] == '24'){ echo "selected";} ?>>24</option>

						</select>
					</div>
				</div>

				<div class="pt-4">
					<input type="submit" value="submit" class="btn btn-primary m-3">
					
				</div>
			</form>
		</div>
	</div>
	
	
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));

(function () {

    var PenciLazy = new LazyLoad({
        elements_selector: '.penci-lazy',
        data_bg: 'bgset',
        class_loading: 'lazyloading',
        class_entered: 'lazyloaded',
        class_loaded: 'pcloaded',
        unobserve_entered: true
    });

    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations, observer) {
        PenciLazy.update();
    });

    observer.observe(document, {
        subtree: true,
        attributes: true
    });
})();
</script>
</body>
</html>

Créez un fichier avec le nom delete.php. copiez et collez les codes donnés dans votre fichier PHP.

				
					<?php 

require_once ('connect.php');

	$id = $_GET['id'];
	$DelSql = "DELETE FROM `etudiant` WHERE id=$id";

	$res = mysqli_query($con, $DelSql);
	if ($res) {
		header("Location: view.php");
	}else{
		echo "Failed to delete";
	}

 ?>

En fin nous allons créer un fichier avec le nom style.css qui nous permet de mettre en forme notre application et de bien organiser notre travail.

Alors copiez et collez les codes donnés dans votre fichier CSS. N’oubliez pas que vous devez créer un fichier avec une extension .css

				
					.bg-nav{
	box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
	background: #fff;
	z-index: 1000;
}
.navbar .navbar-brand{
	color: #0f056b;
	font-weight: bold;
}
.navbar-light .navbar-nav .nav-link {
    color: #666;
    font-weight: bold;
}
.navbar-light .navbar-nav .nav-link:hover{
    color: #fff;
    background: #0f056b;
    border-radius: 5px;
}
.navbar-text{
	color: #666;
    font-weight: bold;
}
.container{
	margin-top: 2rem;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
}
.red-icon{
	color: red;
	cursor: pointer;
}

C’est tout, maintenant vous avez réussi à créer votre Application de Gestion des étudiants en Bootstrap PHP et MySQL. Si votre code ne fonctionne pas ou si vous rencontrez des problèmes, veuillez suivre le tutoriel YouTube disponible ici : suivre la vidéo complète sur YouTube . C’est gratuit

0 comment 908 views

responsive-admin-dashboard-en-html-et-css

by personne 25 août 2022

Dans ce tutoriel je vous apprends à créer un Dashboard Admin tout responsive avec du HTML et CSS uniquement.

En effet vous allez découvrir dans cet article des notions solide pour créer une interface admin adaptée à votre besoin et vous allez aussi apprendre en profondeur HTML et CSS sur les animations, les grid, flex-box, comment créer un sidebar, un menu…

Dans un premier temps vous devez télécharger Fontawesome pour les icons ou bien utilisé le lien cdn cliquez ici , si vous avez de la connexion bien évidement.

Apres avoir télécharger les outils nécessaire nous allons maintenant créer notre Sidebar en premier :

				
					<div class="sidebar">
		<div class="sidebar-brand">
			<h2><span class="fa fa-user-o"> </span> Learn Programming</h2>
		</div>

		<div class="sidebar-menu">
			<ul>
				<li><a href="#" class="active"><span class="fa fa-home"></span><span>Accueil</span></a></li>
				<li><a href="#"><span class="fa fa-tasks"></span><span>Taches</span></a></li>
				<li><a href="#"><span class="fa fa-th-large"></span><span>Blog</span></a></li>
				<li><a href="#"><span class="fa fa-line-chart"></span><span>Statistiques</span></a></li>
				<li><a href="#"><span class="fa fa-address-book"></span><span>A-propos</span></a></li>
				<li><a href="#"><span class="fa fa-clipboard"></span><span>Projets</span></a></li>
				<li><a href="#"><span class="fa fa-money"></span><span>Bilans</span></a></li>
				<li><a href="#"><span class="fa fa-registered"></span><span>Enregistrement</span></a></li>
				<li><a href="#"><span class="fa fa-user"></span><span>Contact</span></a></li>
			</ul>
		</div>
	</div>

le code CSS de notre Sidebar:

				
					*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	list-style-type: none;
	text-decoration: none;
	font-family: 'verdana';
}
.sidebar{
	width: 300px;
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	background: #008ea1;
	z-index: 100;
	transition: width 300ms;
}
.sidebar-brand{
	height: 90px;
	padding: 1rem 0rem 1rem 2rem;
	color: #fff;
}
.sidebar-brand span{
	display: inline-block;
	margin-right: 1rem;
}
.sidebar-menu{
	margin-top: 1rem;
}
.sidebar-menu a{
	padding-left: 1rem;
	display: block;
	color: #fff;
	font-size: 1.1rem;
}
.sidebar-menu li{
	width: 100%;
	margin-bottom: 2rem;
	padding-left: 10%;
}
.sidebar-menu a span:first-child{
	padding-left: 1rem;
	font-size: 1.5rem;
}
.sidebar-menu a.active{
	background: #fff;
	padding-top: 1rem;
	padding-bottom: 1rem;
	color: #008ea1;
	border-radius: 30px 0px 0px 0px;
}
.content{
	transition: margin-left 300ms;
	margin-left: 22%;
}

NB: Apres la creation de notre sidebar, nous avons crée une div avec la classe content qui va englober notre contenu mais ce dernier est aussi accompagné d’une balise main. donc cela veut dire que tout le reste de notre code se trouve entre ces deux.

Pour plus de compréhension, vous pouvez aussi suivre la vidéo sur YouTube en cliquant ici

Creation de notre navbaar:

				
					<div class="content">
				<header>
					<p><label for="menu"><span class="fa fa-bars"></span></label><span class="accueil">Accueil</span></p>

					<div class="search-wrapp">
						<span class="fa fa-search"></span>
						<input type="search" name="" placeholder="recherche">
					</div>

					<div id="dropdown" class="user-wrapp">
						<div>
							<h4>Alassane</h4>
							<small>Admin</small>
						</div>
						<img decoding="async" src="images/pp.jpg" width="30" height="30" class="logo-admin">
						<div class="dropdown-content">
							<p>Profil</p>
							<p>Deconnexion</p>
						</div>
					</div>
				</header>

Remarque: si vous constatez bien le code, j’ai crée la div mais je ne les pas fermé; c’est à la fin du code global que vous allez le fermé.

Code CSS du navbar :

				
					header{
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 1rem;
	box-shadow: 2px 5px 15px 2px rgb(0 0 0 / 10%);
	position: fixed;
	left: 22%;
	width: calc(100% - 22%);
	top: 0;
	z-index: 100;
	transition: left 300ms;
}
.accueil{
	font-size: 1.5rem;
	padding-right: 1rem;
	margin-left: 15px;
	color: #008ea1;
}
.search-wrapp{
	border: 1px solid #008ea1;
	border-radius: 20px;
	height: 38px;
	display: flex;
	align-items: center;
	overflow-x: hidden;
}
.search-wrapp input{
	height: 100%;
	padding: .5rem;
	border: none;
	outline: none;
}
.search-wrapp span{
	display: inline-block;
	padding: 0rem 1rem;
	font-size: 1.5rem;
	color: #008ea1;
}
.user-wrapp{
	display: flex;
	align-items: center;
}
.user-wrapp img{
	border-radius: 50%;
	margin-right: 5rem;
}
.user-wrapp small{
	color: #ccc;
	display: inline-block;
}
.logo-admin{
	cursor: pointer;
}
#dropdown{
	position: relative;
	display: inline-block;
}
.dropdown-content{
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	height: 80px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 5px;
	z-index: 1;
}
#dropdown:hover .dropdown-content{
	display: block;
	cursor: pointer;
}
.dropdown-content p{
	padding: .5rem;
}

Ainsi je vais maintenant crée la balise main qui lui aussi va se fermé à la fin du code.

				
					<main>
					<div class="cards">
						 <div class="card-single">
						 	<div>
						 		<h2>2.000.000</h2>
						 		<small>Ventes</small>
						 	</div>
						 	<div>
						 		<span class="fa fa-shopping-cart"></span>
						 	</div>
						 </div>

						 <div class="card-single">
						 	<div>
						 		<h2>+30</h2>
						 		<small>Stock</small>
						 	</div>
						 	<div>
						 		<span class="fa fa-newspaper-o"></span>
						 	</div>
						 </div>


						 <div class="card-single">
						 	<div>
						 		<h2>58</h2>
						 		<small>Fournisseur</small>
						 	</div>
						 	<div>
						 		<span class="fa fa-outdent"></span>
						 	</div>
						 </div>

						 <div class="card-single">
						 	<div>
						 	<h2>20k</h2>
						 	<small>Communauté</small>
						 	</div>
						 	<div>
						 	<span class="fa fa-group"></span>
						 </div>

					 </div>
					</div>

code CSS des cards:

				
					
main{
	margin-top: 80px;
	background-color: #ebf6ff;
	padding: 2rem 1.5rem;
	min-height: calc(100vh);
}
.cards{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 2rem;
	margin-top: 1rem;
}
.card-single{
	display: flex;
	background-color: #fff;
	justify-content: space-between;
	padding: 2rem;
	border-radius: 10px;
	box-shadow: 2px 5px 10px 2px rgb(0 0 0 / 10%);
}
.card-single span:first-child{
	color: #f8e80c;
}
.card-single span:last-child{
	font-size: 2rem; 
}
.card-single small{
	color: grey;
}
.card-single:hover{
	background-color: #008ea1;
	color: #fff;
}

Nb: vous devez aussi savoir que le code est une continuité.

Code des deux tableaux et les statistiques :

				
					<div class="composant">
						<div class="ventes">
							<div class="case">
								<div class="header-case">
									<h2>Listes produits</h2>
									<button class="button">voir plus <span class="fa fa-arrow-right"></span></button>
								</div>
								<div class="body-case">
									<div class="tableau">
										<table width="100%">
											<thead>
												<tr>
													<td>modou</td>
													<td>pathe</td>
													<td>demba</td>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>modou</td>
													<td>dmeba</td>
													<td><span class="status-produit color-one"></span>mass</td>
												</tr>
												<tr>
													<td>modou</td>
													<td>dmeba</td>
													<td><span class="status-produit color-two"></span>mass</td>
												</tr>
												<tr>
													<td>modou</td>
													<td>dmeba</td>
													<td><span class="status-produit color-three"></span>mass</td>
												</tr>
												<tr>
													<td>modou</td>
													<td>dmeba</td>
													<td><span class="status-produit color-four"></span>mass</td>
												</tr>
												<tr>
													<td>modou</td>
													<td>dmeba</td>
													<td><span class="status-produit color-five"></span>mass</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>


						<div class="stock">
							<div class="case">
								<div class="header-case">
									<h2>Clients fideles</h2>
								</div>

								<div class="body-case"> 
									<div class="all-users">
										<div class="infos">
											<img loading="lazy" decoding="async" src="images/pp.jpg" width="30" height="30">
											<div>
												<h4>Omar</h4>
												<small>Embulant</small>
											</div>
										</div>

										<div class="user-contact">
											<span class="fa fa-facebook"></span>
											<span class="fa fa-whatsapp"></span>
											<span class="fa fa-phone"></span>
										</div>
									</div>
									<div class="all-users">
										<div class="infos">
											<img loading="lazy" decoding="async" src="images/pp.jpg" width="30" height="30">
											<div>
												<h4>Omar</h4>
												<small>Embulant</small>
											</div>
										</div>

										<div class="user-contact">
											<span class="fa fa-facebook"></span>
											<span class="fa fa-whatsapp"></span>
											<span class="fa fa-phone"></span>
										</div>
									</div>
									<div class="all-users">
										<div class="infos">
											<img loading="lazy" decoding="async" src="images/pp.jpg" width="30" height="30">
											<div>
												<h4>Omar</h4>
												<small>Embulant</small>
											</div>
										</div>

										<div class="user-contact">
											<span class="fa fa-facebook"></span>
											<span class="fa fa-whatsapp"></span>
											<span class="fa fa-phone"></span>
										</div>
									</div>
									<div class="all-users">
										<div class="infos">
											<img loading="lazy" decoding="async" src="images/pp.jpg" width="30" height="30">
											<div>
												<h4>Omar</h4>
												<small>Embulant</small>
											</div>
										</div>

										<div class="user-contact">
											<span class="fa fa-facebook"></span>
											<span class="fa fa-whatsapp"></span>
											<span class="fa fa-phone"></span>
										</div>
									</div>
									<div class="all-users">
										<div class="infos">
											<img loading="lazy" decoding="async" src="images/pp.jpg" width="30" height="30">
											<div>
												<h4>Omar</h4>
												<small>Embulant</small>
											</div>
										</div>

										<div class="user-contact">
											<span class="fa fa-facebook"></span>
											<span class="fa fa-whatsapp"></span>
											<span class="fa fa-phone"></span>
										</div>
									</div>

									
								</div>
								<button class="btn">voir plus <span class="fa fa-arrow-right"></span></button>
							</div>

						</div>


						<div class="statistiques">
							<div class="statistique-barre bar1"></div>
							<div class="statistique-barre bar2"></div>
							<div class="statistique-barre bar3"></div>
							<div class="statistique-barre bar4"></div>
							<div class="statistique-barre bar5"></div>
							<div class="statistique-barre bar6"></div>
							<div class="statistique-barre bar4"></div>
							<div class="statistique-barre bar5"></div>
							<div class="statistique-barre bar6"></div>
							<div class="statistique-barre bar4"></div>
							<div class="statistique-barre bar5"></div>
							<div class="statistique-barre bar6"></div>
						</div>


						<div class="legende">
							<h4>Legende</h4>
							<table>
								<tr>
									<td><span class="evolution color-one"></span>Riz</td>
								</tr>
								<tr>
									<td><span class="evolution color-two"></span>Mil</td>
								</tr>
							</table>
							<div class="txt-deco">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
								tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
								quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
								</p>
							</div>
						</div>
					</div>

code CSS.

				
					.composant{
	margin-top: 3.5rem;
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: 69% auto; 
}
.case{
	background-color: #fff;
	border-radius: 10px;
}
.header-case, .body-case{
	padding: .5rem
}
.header-case{
	display: flex;
	justify-content: space-between;
	align-items: center;

}
.header-case button{
	background-color: #008ea1;
	border-radius: 10px;
	color: #fff;
	font-size: .8rem;
	padding: .5rem 1rem;
	border: none;
	cursor: pointer;
}
.btn{
	background-color: #008ea1;
	border-radius: 10px;
	color: #fff;
	font-size: .8rem;
	padding: .5rem 1rem;
	border: none;
	cursor: pointer;
	margin-bottom: 1rem;
	margin-left: 5px;

}
table{
	border-collapse: collapse;
}
thead tr{
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
thead td{
	font-weight: 700;
}
td{
	padding: .5rem 1rem;
}
td .status-produit{
	display: inline-block;
	height: 15px;
	width: 15px;
	margin-right: 1rem;
	border-radius: 50%;
}
.status-produit.color-one{
	background-color: #ec1c24;
}
.status-produit.color-two{
	background-color: #fff200;
}
.status-produit.color-three{
	background-color: #b83dba;
}
.status-produit.color-four{
	background-color: #00a8f3;
}
.status-produit.color-five{
	background-color: #b83dba;
}
tr td:last-child{
	display: flex;
	align-items: center;
}
.tableau{
	overflow-x: auto;
	width: 100%;
}
.all-users{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .5rem .7rem;

}
.infos{
	display: flex;
	align-items: center;
}
.infos img{
	border-radius: 50%;
	margin-right: 1rem;
}
.user-contact span{
	font-size: 1.2rem;
	display: inline-block;
	margin-left: .5rem;
}
.fa-facebook{
	color: #4267B2;
	cursor: pointer;
}
.fa-whatsapp{
	color: #128C7E;
	cursor: pointer;
}
.fa-phone{
	color: #1DB954;
	cursor: pointer;
}
.fa-bars{
	cursor: pointer;
}
.statistiques{
	background-color: #fff;
	display: flex;
	height: 300px;
	align-items: flex-end;
}
.statistique-barre{
	flex-grow: 1;
	border: 1px solid #ccc;
	margin: 6px;
}
.bar1{
	height: 95%;
	background-color: #ec1c24;
}
.bar2{
	height: 55%;
	background-color: #00a8f3;
}
.bar3{
	height: 45%;
	background-color: #ec1c24;
}
.bar4{
	height: 85%;
	background-color: #00a8f3;
}
.bar5{
	height: 35%;
	background-color: #ec1c24;
}
.bar6{
	height: 95%;
	background-color: #00a8f3;
}
.legende{
	background-color: #fff;
	border-radius: 10px;
}
.legende h4{
	padding: 1rem;
}
td .evolution{
	display: inline-block;
	height: 15px;
	width: 15px;
	margin-right: 1rem;
	border-radius: 50%;
}
.evolution.color-one{
	background-color: #ec1c24;

}
.evolution.color-two{
	background-color: #00a8f3;
	
}
.txt-deco{
	padding: 1rem;
	font-weight: 500;
	color: grey;
}

Vous savez quand on vous créez votre admin vous aurez forcément besoin d’un calendrier pour pourvoir dater vos évènements et autres. ainsi nous avons à ce que vous en aurez besoin.

alors voici le code du calendrier :

				
					<div class="calendar">
						<div class="mois-annee">
							<ul>
								<li class="prev">&#10094;</li>
								<li class="next">&#10095;</li>
								<li>Mai <br /> <span>2021</span></li>
							</ul>
						</div>

						<ul class="mois">
							<li>Mo</li>
							<li>Tu</li>
							<li>We</li>
							<li>Th</li>
							<li>Fr</li>
							<li>Sa</li>
							<li>Su</li>
							
						</ul>

						<ul class="jours">
							<li>1</li>
							<li>2</li>
							<li>3</li>
							<li>4</li>
							<li>5</li>
							<li>6</li>
							<li>7</li>
							<li>8</li>
							<li>9</li>
							<li>10</li>
							<li>11</li>
							<li>12</li>
							<li>13</li>
							<li>14</li>
							<li>15</li>
							<li>16</li>
							<li>17</li>
							<li><span class="active">18</span></li>
							<li>19</li>
							<li>20</li>
							<li>21</li>
							<li>22</li>
							<li>23</li>
							<li>24</li>
							<li>25</li>
							<li>27</li>
							<li>28</li>
							<li>29</li>
							<li>30</li>
							<li>31</li>
							
						</ul>
					</div>
				</main>
		</div>

Nb: vous avez tous remarqué que c’est à la fin que j’ai fermé la balise main ainsi que la div qui contient la class content.

code CSS du calendrier :

				
					.calendar{
	padding-top: 2rem;

}
.mois-annee{
	padding: 70px 25px;
	width: 100%;
	background-color: #008ea1;
	text-align: center;
}
.mois-annee ul{
	margin: 0;
	padding: 0;
}
.mois-annee ul li{
	color: #fff;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 3px;
}
.mois-annee .prev{
	float: left;
	padding-top: 10px;
}
.mois-annee .next{
	float: right;
	padding-top: 10px;
}
.mois{
	margin: 0;
	padding: 10px 0;
	background-color: #ddd;
}
.mois li{
	display: inline-block;
	width: 13%;
	color: #666;
	text-align: center;
}
.jours{
	padding: 10px 0;
	background-color: #eee;
	margin: 0; 
}
.jours li{
	display: inline-block;
	width: 13%;
	text-align: center;
	margin-bottom: 5px;
	font-size: 12px;
	color: #777;
}
.jours li .active{
	padding: 5px;
	background-color: #008ea1;
	color: #fff !important;
}

code de notre toggle barre, c’est à dire les trois barre à coté. Nb: vous devez le mettre en haut de votre code après la balise body :

				
					<input type="checkbox" name="" id="menu">

code css :

				
					#menu:checked ~ .sidebar{
	width: 60px;
}
#menu:checked ~ .sidebar .sidebar-brand, h2 span:last-child,
#menu:checked ~ .sidebar li a span:last-child{
	display: none;
}
#menu:checked ~ .content{
	margin-left: 60px;
}
#menu:checked ~ .content header{
	width: calc(100% - 60px);
	left: 60px; 
}

code pour gérer la responsivité avec les média queries :

				
					
@media only screen and (max-width: 960px){
	.cards{
		grid-template-columns: repeat(3, 1fr);
	}
	.recent-grid{
		grid-template-columns: 60% 40%;
	}
}
@media only screen and (max-width: 768px){
	.cards{
		grid-template-columns: 100%;
	}
	.composant{
		grid-template-columns: repeat(1, 1fr);
	}
	.search-wrapp{
		display: none;
	}
	.sidebar{
		left: -100% !important;
	}
	header p{
		display: flex;
		align-items: center;
	}
	header p label{
		display: flex;
		padding-right: 0rem;
		margin-right: 1rem;
		height: 40px;
		width: 40px;
		border-radius: 50%;
		color: #fff;
		align-items: center;
		justify-content: center !important;
		background-color: #008ea1; 
	}
	header p span{
		text-align: center;
		padding-right: 0rem;
	}
	.content{
		width: 100%;
		margin-left: 0rem !important;
	}
	header{
		width: 100% !important;
		left: 0 !important;
	}
	#menu:checked ~ .sidebar {
		left: 0 !important;
		z-index: 100;
		width: 45%;
	}
	#menu:checked ~ .sidebar li a{
		padding-left: 1rem;

	}
	#menu:checked ~ .sidebar .sidebar-brand,
	#menu:checked ~ .sidebar li{
			padding-left: 2rem;
			text-align: left;
	}
	#menu:checked ~ .sidebar .sidebar-brand, h2 span:last-child,
	#menu:checked ~ .sidebar li a span:last-child{
		display: inline;
	}
	#menu:checked ~ .content{
		margin-left: 0rem !important;
	}
}
@media only screen and (max-width: 560px){
	.cards{
		grid-template-columns: 100%;

	}
}
@media only screen and (max-width: 1200px){
	.sidebar{
		width: 60px;
	}
	.sidebar .sidebar-brand, h2 span:last-child,
	.sidebar li a span:last-child{
		display: none;
	}
	.content{
		margin-left: 60px;
	}
	.content header{
		width: calc(100% - 60px);
		left: 60px;
	}
}

2 comments 1k views

Newer Posts

Older Posts