1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin:0;background-color: rgb(231, 234, 236);
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
main{width:1200px;margin:auto;background-color: white;position:relative;}
.header{
background-image: url("grid.PNG");background-repeat: no-repeat;
width: 100%;
}
.header .fullwidth{
width: 100%;
vertical-align: top;
}
.header .docs{
padding-left: 20px;
}
.header .nav{
padding-left: 12px;padding-top: 4px;
}
.header .nav tr td{ position: relative;}
.header .links a{
text-transform: uppercase;
text-decoration: none;
padding-right: 33px;
font-weight: bold;
letter-spacing: 1px;
color: #17428c;
}
.header .links span{
position: absolute;
bottom: 9px;
left: 0;
display: inline-block;
width: 30px;
height: 1px;
background-color: #17428c;
}
.header .contact{
background-color: #00838e;
}
.header .contact{
display: inline-flex;
align-items:center;
padding: 8px 12px 8px 12px;
}
.header .contact a{
text-transform: unset;
color: white;
text-decoration: none;
font-size: larger;
letter-spacing: 1px;
}
.header .nav2{
margin-left: 50px;text-align: right;
}
.header .nav2 .search{
margin: 0px;
padding: 0px;
border: none;
background-color: #f5f6fa;
padding: 3px 10px 5px 10px;
}
.header .nav2 .search img{
width: 40px;
}
.header table{width: 100%;}
</style>
</head>
<body>
<main>
<table class="header">
<tr>
<td>
<img src="debut_53876-25533.avif" class="logo" />
</td>
<td class="fullwidth">
<table>
<tr>
<td class="docs">
Documentations
</td>
</tr>
<tr>
<td>
<table class="nav">
<tr>
<td class="links">
<a href="#">Produits</a>
<span></span>
</td>
<td class="links">
<a href="#">Marchés</a>
<span></span>
</td>
<td class="links">
<a href="#">service</a>
<span></span>
</td>
<td class="links">
<a href="#">groupe</a>
<span></span>
</td>
<td>
<div class="nav2">
<div class="contact">
<img src="icon.png" />
<a href="#">Contactez-nous</a>
</div>
<button class="search"><img src="loupe.png" /></button>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</main>
</body>
</html> |