دورة تطوير المواقع الإلكترونية #10

HTML File

     

  
  <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>my website</title>

	<!-- external linking -->
<link rel="stylesheet" type="text/css" href="style.css">

<!-- internal link  -->

<style type="text/css">
	
h1{
	color: red;
}


</style>

</head>
<body>
<!-- inline linking -->
<p style="color: white; " > hello </p>
<p>welcome</p>
<h1>my heading 1</h1>

</body>
</html>

Css File

     


 

.nav-bar{
    overflow: hidden;
    background-color: #e9e9e9;
}

.nav-bar a{
    float: left;
    display: block;
    text-align: center;
    color: lightslategray;
    background-color: lightgreen;
    text-decoration: none;
    font-size: 17px;
    padding: 12px 10px;
    transition-duration: 1s;
    transition-delay: 0.5s;
    
}

.nav-bar a:hover{
    background-color: lightseagreen;
    color: white;
    transition: 1s;
}

.nav-bar .search-bar{
    float: right;
}
.nav-bar .search-bar input[type=search]{
    padding: 5px;
    margin: 8px 0px 0px 0px;
    font-size: 17px;
    border: none;
}
.nav-bar .search-bar input[type=submit]{
    float: right;
    padding: 5px;
    margin-top: 8px;
    background-color: lightskyblue;
    font-size: 17px;
    color: white;
    border: none;
    cursor: pointer;
    transition-duration: 1s;
}

.nav-bar .search-bar input[type=submit]:hover{
background-color: lightgreen;
color: black;
transition: 1s;
}

دورة تطوير المواقع الإلكترونية #10

HTML File

Css File

إرسال تعليق

نموذج الاتصال