-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (94 loc) · 7.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TP HTML/CSS Mamour</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="top">
<div class="page">
<div class="header">
<div class="btn-container">
<button class="lang">HTML</button>
<button class="lang">CSS</button>
<button class="lang">JS</button>
</div>
<div class="header-img">
<img src="/assets/html_css_js.jpg">
</div>
</div>
<div class="big-div">
<div class="small-div html-div">Le langage HTML</div>
<div class="bas">
<div class="small-div css-div">Le langage CSS</div>
<div class="small-div js-div">Le langage JS</div>
</div>
</div>
<div class="partie-3">
<div class="left-part">
<div class="text"><span class="N">N</span>ous allons voir dans la partie CSS :</div>
<ul>
<li><img src="/assets/pink_checkmark.png"> Les couleurs</li>
<li><img src="/assets/pink_checkmark.png"> Les bordures</li>
<li><img src="/assets/pink_checkmark.png"> Le positionnement</li>
</ul>
<span class="programme">Le programme sera effectué selon le planning ci-dessous :</span>
</div>
<div class="btn-container-2">
<span class="resume">En résumé</span>
<a href="#session1"><button class="session">Session<sub>1</sub></button></a>
<a href="#session2"><button class="session">Session<sub>2</sub></button></a>
<a href="#session3"><button class="session">Session<sub>3</sub></button></a>
</div>
</div>
<div class="table">
<div class="row">
<div class="cell head top-left"></div>
<div class="cell head">1<sup>ère</sup> Session</div>
<div class="cell head">2<sup>nde</sup> Session</div>
<div class="cell head">3<sup>ème</sup> Session</div>
</div>
<div class="row">
<div class="cell">Couleurs</div>
<div class="cell">o</div>
<div class="cell empty"></div>
<div class="cell">o</div>
</div>
<div class="row">
<div class="cell">Bordures</div>
<div class="cell x">x</div>
<div class="cell empty"></div>
</div>
<div class="row">
<div class="cell">Positionnement</div>
<div class="cell"></div>
<div class="cell">x</div>
<div class="cell o">o</div>
</div>
</div>
<div class="partie-4">
<div class="session-container">
<span id="session1" class="title">Session 1</span>
<span class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quae dolores fugiat perferendis excepturi quam numquam quos. Quam, adipisci atque nesciunt minus deleniti aperiam nostrum natus porro vitae, ducimus iste? Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius voluptas perspiciatis iusto, iure tempora iste similique aliquid, beatae nam aut laboriosam in ullam fuga, maxime deleniti provident voluptates facere dignissimos! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi consequuntur nobis, quod eum facilis dolore, similique culpa quo inventore distinctio asperiores! Similique nihil numquam quasi fugiat cumque, unde officia sunt! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum totam alias est quis ducimus repellat, sapiente maxime qui animi quibusdam ex dicta voluptas optio harum voluptatibus numquam esse, non omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis iste architecto voluptas ipsa aut quas quam eum, fuga explicabo ratione doloremque hic commodi expedita est dolores ex obcaecati voluptatum nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id laborum corporis debitis aut iste deserunt veniam tempore fugit amet. Temporibus porro mollitia voluptatum repellendus alias placeat ab modi maiores nisi!
</span>
<span class="go-top"><a href="#top">Top</a></span>
</div>
<div class="session-container">
<span id="session2" class="title">Session 2</span>
<span class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quae dolores fugiat perferendis excepturi quam numquam quos. Quam, adipisci atque nesciunt minus deleniti aperiam nostrum natus porro vitae, ducimus iste? Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius voluptas perspiciatis iusto, iure tempora iste similique aliquid, beatae nam aut laboriosam in ullam fuga, maxime deleniti provident voluptates facere dignissimos! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit labore quibusdam ut? Amet nemo ea, provident aliquam ducimus repudiandae iste ab reiciendis nesciunt ipsam? Ipsam vero odit optio pariatur accusantium? Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, quos quae? Rem numquam repudiandae molestiae ab temporibus obcaecati? Quis, quae cum nesciunt a tempora molestias consequatur. Consequuntur nam beatae fugit! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum, odit necessitatibus? At autem, sint quod omnis officia iste doloremque? Voluptatem sed omnis sint vel nam dignissimos consectetur quaerat quis pariatur! Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, neque magni fuga dignissimos inventore facere. Corporis quas quidem ab odio, quibusdam repellendus placeat odit illum, quae suscipit cumque magnam repellat?Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem optio similique fuga temporibus consequatur maxime expedita, totam adipisci dolore quisquam ducimus quidem error explicabo hic voluptate sed labore autem blanditiis?
</span>
<span class="go-top"><a href="#top">Top</a></span>
</div>
<div class="session-container">
<span id="session3" class="title">Session 3</span><span class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quae dolores fugiat perferendis excepturi quam numquam quos. Quam, adipisci atque nesciunt minus deleniti aperiam nostrum natus porro vitae, ducimus iste? Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius voluptas perspiciatis iusto, iure tempora iste similique aliquid, beatae nam aut laboriosam in ullam fuga, maxime deleniti provident voluptates facere dignissimos!Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex incidunt totam quae. Iste ea, facere perspiciatis molestiae beatae atque, quam consequatur ullam eligendi mollitia distinctio maxime sed labore libero. Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe deleniti esse, modi harum id tempora laboriosam illum voluptatum possimus sint, provident quam temporibus obcaecati laudantium mollitia officia libero explicabo. Ad. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, facilis qui error omnis suscipit consequatur. Nisi vitae, quidem non at doloribus, officiis quos atque, delectus animi expedita quas minima soluta! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam accusamus est eos exercitationem amet illo sed doloremque consectetur, omnis, consequuntur dolorem modi provident minima nesciunt velit nemo voluptatum, sequi facere!
</span>
<span class="go-top"><a href="#top">Top</a></span>
</div>
</div>
</div>
</body>
</html>