-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (154 loc) · 5.64 KB
/
index.html
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css" media="screen">
<link rel="stylesheet" href="font/stylesheet.css" type="text/css">
<link rel="stylesheet" href="animate.css" type="text/css">
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="" />
<title>TP2</title>
</head>
<body>
<header>
<div class="logo">
<img src="images/logo.jpg" alt="">
</div>
</header>
<nav>
<ul>
<a href="#">
<li>Accueil</li>
</a>
<a href="#">
<li>A propos</li>
</a>
<a href="#">
<li>Rejoignez-nous</li>
</a>
<a href="#">
<li>nos projets</li>
</a>
<a href="#">
<li>Contact</li>
</a>
</ul>
</nav>
<section class="content_1">
<article id="shake">
<h2>Edition.</h2>
<div>
<img src="images/picto-cerveau.jpg" alt="" />
</div>
<p>Notre métier ? Conceptualiser des sites de qualité avec du contenu pertinent, pour simplifiquer et faciliter l'expérience des utilisateurs et délivrer des services à gaute valeur ajoutée.....</p>
</article>
<article id="swing">
<h2>Trafic.</h2>
<div>
<img src="images/picto-panneau.jpg" alt="" />
</div>
<p>Grâce à un ensemble d'outils novateurs, à une connaissances approfondie du trafic et à une équipe soudée et expérimentée. La performance de nos actions nous permet de générer un maximum de leads.....</p>
</article>
<article id="tada">
<h2>Performance.</h2>
<div>
<img src="images/picto-graph.jpg" alt="" />
</div>
<p>Fort d'une expérience de 10 ans dans l'univers du digital, notre équipe énergétique rassemble toutes les qualités nécessaires pour constituer une agence affiliée des plus performantes qui soit.....</p>
</article>
</section>
<section class="content_2">
<h2>Expérimenter, développer et arbrer le trafic, pour en faire profiter nos partenaire, c'est notre métier</h2>
<div>
<a href="#">Rejoignez-nous!</a>
</div>
</section>
<section class="content_3">
<h2>Projets</h2>
<div>
<article>
<h3>taxi-booking.com</h3>
<div>
<img src="images/reference1.jpg" alt="" />
</div>
<p>Taxi-booking vous met en relation avec plus de 10 000 taxcis référencés partout en France et en Europe.</p>
<a href="www.taxi-booking.com">www.taxi-booking.com</a>
</article>
<article>
<h3>comparatif-cybermarché.com</h3>
<div>
<img src="images/reference2.jpg" alt="" />
</div>
<p>Comparatif-cybermarché, il n'y a rien de plus utile que de pouvoir comparer les prix et produits des enseignes de supermarchés en ligne et de bénéficier de codes promos attractifs.</p>
<a href="www.taxi-booking.com">www.comparatif-cybermarché.com</a>
</article>
<article>
<h3>obtenir-son-rio.fr</h3>
<div>
<img src="images/reference3.jpg" alt="" />
</div>
<p>Obtenir-son-rio, vous permet de récupérer votre RIO et d'accéder aux offres des opérateurs en toute simplicité.</p>
<a href="www.taxi-booking.com">www.obtenir-son-rio.fr</a>
</article>
</div>
</section>
<img src="images/infinite-scrolling.png" alt="" id="scroll_top"/>
<footer>
<article>
<h3>Copyright</h3>
<p>Iut blois</p>
</article>
<article>
<h3>A propos</h3>
<p>Compétitivité, force et travail en équipe sont nos maîtres mots</p>
</article>
<article>
<h3>Suivez-nous !</h3>
<a href="#"><img src="images/picto-fb.jpg" alt="" /></a>
<a href="#"><img src="images/picto-twitter.jpg" alt="" /></a>
</article>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 300)
{
$('#scroll_top').fadeIn();
}
else
{
$('#scroll_top').fadeOut();
}
});
$("#shake").hover(
function(){
$(this).find('div img').addClass('animated shake');
},
function(){
$(this).find('div img').removeClass('animated shake');
});
$("#swing").hover(
function(){
$(this).find('div img').addClass('animated swing');
},
function(){
$(this).find('div img').removeClass('animated swing');
});
$("#tada").hover(
function(){
$(this).find('div img').addClass('animated tada');
},
function(){
$(this).find('div img').removeClass('animated tada');
});
$('#scroll_top').click(function(){
$('html, body').animate(
{
scrollTop: $('body').offset().top
},500);
});
</script>
</body>
</html>