-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (153 loc) · 8.11 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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/circle.css">
<link rel="stylesheet" href="assets/css/slider.css">
</head>
<body>
<div class="container-fluid">
<div class="col-lg-3 col-sm-12 menu" id="menu">
<div class="row">
<i class="fas fa-times" id="cross" onclick="menuClickHide()"></i>
</div>
<div class="linkMenu">
<div class="row">
<p><a href="#" onclick="menuClickHide()">One link</a></p>
</div>
<div class="row">
<a href="#" onclick="menuClickHide()"><p class="submenu">Link lorem 1</p></a>
</div>
<div class="row">
<a href="#" onclick="menuClickHide()"><p class="submenu">Link ipsum 2</p></a>
</div>
<div class="row">
<p><a href="#" onclick="menuClickHide()">Two links</a></p>
</div>
<div class="row">
<p><a href="#" onclick="menuClickHide()">Three links</a></p>
</div>
</div>
</div>
<div id="content">
<nav class="navbar navbar-light bg-light">
<img src="assets/img/logo.png" alt="logo goweb" title="logo" class="margin-left-little">
<!--<i class="fas fa-bars" class="margin-right-little" id="menu"></i> pas le bon logo -->
<img src="assets/img/bars_menu.png" alt="bars_menu" title="bars_menu" id="menuLogo" class="margin-right-little" onclick="menuClickShow()">
</nav>
<div class="row">
<div class="offset-1 col-lg-2 col-sm-2 margin-left-medium margin-top-medium ">
<div class="white sticky">
<div class="backgroundBlue">
<div class="padding-null padding-bottom-little padding-top-little col-12">
<div class="col-12">
<p><b>Un évènement <i class="fas fa-calendar-day right"></i></b></p>
<div class="padding-bottom-little">
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
</div>
</div>
</div>
</div>
<div class="backgroundGreen">
<div class="padding-null padding-bottom-little padding-top-little col-12">
<div class="col-12">
<p><b>Un favori</b> <i class="far fa-heart right"></i></p>
<div class="padding-bottom-little"><p>Lorem ipsum dolor sit amet consectetur</p></div>
</div>
</div>
</div>
<div class="backgroundRed">
<div class="padding-null padding-bottom-little padding-top-little col-12">
<div class="col-12">
<p><b>Un favori</b> <i class="far fa-comment-alt right"></i></p>
<div class="padding-bottom-little"><p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7 col-sm-7 margin-left margin-top-medium">
<h1>Un petit titre</h1>
<p class="width-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="row">
<div class="col-lg-5 col-sm-12 col-xs-12 query">
<div class="card">
<div class="card-title center padding-top-little">
<b>Une progress bar cute</b>
<div class="big-font"><b><i class="fas fa-chart-line"></i><span id="result">75</span>%</b></div>
</div>
<div class="card-body">
<div class="progress">
<div class="progress-bar" role="progressbar" id="progressBar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="card margin-top-little">
<div class="card-title center padding-top-little">
<b>Un donut méga cool</b>
</div>
<div class="card-body">
<div class="col-lg-6 col-sm-12 margin-left">
<p class="margin-left-middle"><b><span id="resultDonut">60</span>%</b></p>
<div class="circle circle-60"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12 col-xs-12 query imgquery">
<div class="card slider">
<input type="radio" name="images" id="img1" checked>
<input type="radio" name="images" id="img2">
<input type="radio" name="images" id="img3">
<div class="slide_img" id="one">
<img src="assets/img/maythe4th.png">
<label for="img2" class="pre"></label>
<label for="img3" class="next"></label>
</div>
<div class="slide_img" id="two">
<img src="assets/img/img_two.jpg">
<label for="img3" class="pre"></label>
<label for="img1" class="next"></label>
</div>
<div class="slide_img" id="three">
<img src="assets/img/maythe4thbewithyou.gif">
<label for="img1" class="pre"></label>
<label for="img2" class="next"></label>
</div>
<div class="nav">
<label for="img1" id="dot1" class="dots"></label>
<label for="img2" id="dot2" class="dots"></label>
<label for="img3" id="dot3" class="dots"></label>
</div>
<div class="card-body">
<div class="col-lg-6 col-sm-12 margin-left">
<div class=""></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 padding-top-medium padding-bottom-medium">
<p class="width-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<footer>
<nav class="navbar navbar-light bg-light">
<img src="assets/img/goweb.png" alt="logo goweb" title="logo" class="center">
</nav>
</footer>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/js/script.js"></script>
</body>
</html>