mahmmoudkinawy/khlaf

## khlaf
<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


    <!-- Bootstrap CSS -->
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: green;
        }

        nav {
            background: #599458;
            width: 100%;
            overflow: auto;
        }

        ul {
            margin: 20px;
            padding: 0;
            list-style: none;
        }

        .container {
            max-width: 1200px;
            margin: auto;
            background: #f2f2f2;
            overflow: auto;
        }

        .gallery {
            margin: 5px;
            border: 1px solid #ccc;
            float: left;
            width: 390px;
        }

        .gallery img {
            width: 100%;
            height: 45%;
            border-image: 100;
        }

        .desc {
            padding: 15px;
            text-align: center;
        }

        h1 {
            text-align: center;
            color: red;
            background-image: gray;
            background: yellow;
        }

        input {
            background: #304850;
        }
    </style>

</head>

<body>
    <nav class="navbar navbar-expand-lg navbar fixed-top">
        <ul>
            <a href="#home"></a><button class="btn"><i class="fa fa-home"></i> Home</button></a>
            <a href="#category"><button class="btn"><i class="fa fa-bars"></i> Category</button></a>
            <a href="#contact_us"><button class="btn"><i class="fa fa-phone"></i> Contact us</button></a>
        </ul>
    </nav>
    <p id="home"></p>
    <h1>This Is The Home Page</h1>
    <img src="https://neswan.cc/wp-content/uploads/2020/08/4390.jpg" width="1350" height="550">

    </br>
    </br>

    <p id="category"></p>
    <h1>this is the category</h1>
    <div class="container">
        <div class="gallery">
            <img src="https://pic.i7lm.com/wp-content/uploads/2019/10/%D8%AA%D8%AD%D9%85%D9%8A%D9%84-%D8%B5%D9%88%D8%B1-%D8%B7%D8%A8%D9%8A%D8%B9%D8%A9-%D8%BA%D8%A7%D8%A8%D8%A7%D8%AA-780x405.jpg">
        </div>
        <div class="gallery">
            <img src="https://albidaoui.ma/wp-content/uploads/2019/06/%D8%B7%D9%82%D8%B3.jpeg">
        </div>
        <div class="gallery">
            <img src="https://imagess.net/wp-content/uploads/2017/04/3728-3.jpg">
        </div>
        <div class="gallery">
            <img src="https://www.noonawareness.com/file/2020/07/4444444444444444.jpg">
        </div>
        <div class="gallery">
            <img src="https://www.لمسه.com/content/uploads/2017/02/1080p-Nature-Wallpaper-768x432.jpg">
        </div>
        <div class="gallery">
            <img src="https://lh6.googleusercontent.com/proxy/en0xhQMzl0mccTndBO8h_2BP13blrK6-jj9R9iYxGFmIBt3Jy6Z7DgiT6Y94bStbf2i6yjXb0OrXjs2GeVivyvsGgMLsl5itTdSjgU_jDwpm9SKrVcEONpS0xJbaN69Q=w1200-h630-p-k-no-nu">
        </div>
    </div>
    </br>
    </br>
    <p id="contact_us"></p>
    <h1> contact us </h1>
    ID: <input type="number" value=""></br>
    </br>
    Name: <input type="text" value=""></br>
    </br>
    Address:<input type="text" value=""></br>
    </br>
    Email: <input type="email" value=""></br>
    </br>
    Phone: <input type="phone" value=""></br>
    </br>
    <input type="submit" value="submit">


</body>

</html>
	<!DOCTYPE html>

	<html>

	<head>

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



	<!-- Bootstrap CSS -->
	<style>
	* {
	box-sizing: border-box;
	}

	body {
	margin: 0;
	background: green;
	}

	nav {
	background: #599458;
	width: 100%;
	overflow: auto;
	}

	ul {
	margin: 20px;
	padding: 0;
	list-style: none;
	}

	.container {
	max-width: 1200px;
	margin: auto;
	background: #f2f2f2;
	overflow: auto;
	}

	.gallery {
	margin: 5px;
	border: 1px solid #ccc;
	float: left;
	width: 390px;
	}

	.gallery img {
	width: 100%;
	height: 45%;
	border-image: 100;
	}

	.desc {
	padding: 15px;
	text-align: center;
	}

	h1 {
	text-align: center;
	color: red;
	background-image: gray;
	background: yellow;
	}

	input {
	background: #304850;
	}
	</style>

	</head>

	<body>
	<nav class="navbar navbar-expand-lg navbar fixed-top">
	<ul>
	<a href="#home"></a><button class="btn"><i class="fa fa-home"></i> Home</button></a>
	<a href="#category"><button class="btn"><i class="fa fa-bars"></i> Category</button></a>
	<a href="#contact_us"><button class="btn"><i class="fa fa-phone"></i> Contact us</button></a>
	</ul>
	</nav>
	<p id="home"></p>
	<h1>This Is The Home Page</h1>
	<img src="https://neswan.cc/wp-content/uploads/2020/08/4390.jpg" width="1350" height="550">

	</br>
	</br>

	<p id="category"></p>
	<h1>this is the category</h1>
	<div class="container">
	<div class="gallery">
	<img src="https://pic.i7lm.com/wp-content/uploads/2019/10/%D8%AA%D8%AD%D9%85%D9%8A%D9%84-%D8%B5%D9%88%D8%B1-%D8%B7%D8%A8%D9%8A%D8%B9%D8%A9-%D8%BA%D8%A7%D8%A8%D8%A7%D8%AA-780x405.jpg">
	</div>
	<div class="gallery">
	<img src="https://albidaoui.ma/wp-content/uploads/2019/06/%D8%B7%D9%82%D8%B3.jpeg">
	</div>
	<div class="gallery">
	<img src="https://imagess.net/wp-content/uploads/2017/04/3728-3.jpg">
	</div>
	<div class="gallery">
	<img src="https://www.noonawareness.com/file/2020/07/4444444444444444.jpg">
	</div>
	<div class="gallery">
	<img src="https://www.لمسه.com/content/uploads/2017/02/1080p-Nature-Wallpaper-768x432.jpg">
	</div>
	<div class="gallery">
	<img src="https://lh6.googleusercontent.com/proxy/en0xhQMzl0mccTndBO8h_2BP13blrK6-jj9R9iYxGFmIBt3Jy6Z7DgiT6Y94bStbf2i6yjXb0OrXjs2GeVivyvsGgMLsl5itTdSjgU_jDwpm9SKrVcEONpS0xJbaN69Q=w1200-h630-p-k-no-nu">
	</div>
	</div>
	</br>
	</br>
	<p id="contact_us"></p>
	<h1> contact us </h1>
	ID: <input type="number" value=""></br>
	</br>
	Name: <input type="text" value=""></br>
	</br>
	Address:<input type="text" value=""></br>
	</br>
	Email: <input type="email" value=""></br>
	</br>
	Phone: <input type="phone" value=""></br>
	</br>
	<input type="submit" value="submit">


	</body>

	</html>