القائمة الرئيسية

الصفحات

تعديل المشاركة

help code

29 décembre 2022

(0)

menu

html

<html>

<head>

<title>MB</title>

<link rel="stylesheet" type ="text/css" href ="my site web.css">

</head>

<body>

<h1> GNAWA MAYOUSSEF </h1>

<ul>

<li>Acceuil</li>

<li>Menu</li>

<li>Acheter</li>

<li>Formule</li>

</ul>

<div class="ha">

<input type="text"/>

<label>TYPE</label>

</div><br>

</body>

<html>

css

body{

background: rgba(10, 10, 10, 0.973);

margin: 100px;

}

h1{

font-style:italic;

text-align : center ;

color: black ;

border-radius:10px 30px 40px;

margin:3px;

background-color: #00C000;}

.ha{

position: relative;

}

input{

border: solid 1.5px #154212;

border-radius: 1rem;

background: none;

padding: 1rem;

font-size: 1rem;

color: aqua;

transition: 150ms cubic-bezier(0.4,0,0.2,1);

}

label{

position: absolute;

left: 16px;

color: #e8e8e8;

pointer-events: none;

transform: translateY(1rem);

transition: 150ms cubic-bezier(0.4,0,0.2,1);

}

input:focus{

outline: none;

border: 1.5px solid #1a73e8;

}

input:focus~label{

transform: translateY(-50%) scale(0.8);

background-color: #020e26;

padding: 0 0.2em;

color: #2196f3;

}

ul {

margin:5%;

width:450 px;

display:flex;

flex-direction: row;

list-style:none;

padding:25px 0;

border-radius:25px;

border:0.1px solid #000AAA;

background-color:#180810;

box-shadow:0 4px 8px 0 #00F100 , 0 6px 20px 0 rgb(0,0,0,0.19);

}

li {

margin: auto;

color:white;

font-size:20px;

cursor:pointer;

}

li:after{

display:block;

}

li:hover:after {

transform: scaleX(1);}

Commentaires