Skip to content

Commit f5521c2

Browse files
Elgemp4Elgemp4
committed
Start of support for mobile
1 parent 5d4d37c commit f5521c2

File tree

2 files changed

+82
-35
lines changed

2 files changed

+82
-35
lines changed

‎CSS/mainstyle.css

+54-11
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,9 @@
1313
url('/fonts/Inter.woff2') format('woff2'),
1414
url('/fonts/Inter.woff') format('woff'),
1515
url('/fonts/Inter.ttf') format('truetype'),
16-
url('/fonts/Inter.svg#Inter') format('svg');
16+
url('/fonts/Inter.svg') format('svg');
1717
}
1818

19-
2019
.container{
2120
height: 100vh;
2221
width: 100%;
@@ -30,12 +29,11 @@
3029
display: flex;
3130
flex-direction: column;
3231
align-items: center;
33-
border-bottom: var(--accent) solid 2px;
3432
padding-left: 5%;
3533
padding-right: 5%;
3634
}
3735

38-
.panel > h1
36+
.panel h1
3937
{
4038
color: var(--accent);
4139
font-size: 3em;
@@ -51,19 +49,33 @@
5149

5250
.slider{
5351
display: flex;
54-
justify-self: center;
5552
min-width: 0;
56-
flex-direction: row;
57-
width: 90%;
53+
54+
5855
border-radius: 1rem;
5956
border: 22px solid var(--secondary-button);
60-
overflow-x: scroll;
61-
overflow-y: hidden;
62-
margin: 50px auto auto;
6357
background-color: var(--secondary-button);
6458
gap: 25px;
6559
}
6660

61+
@media screen and (orientation: landscape) {
62+
.slider{
63+
width: 90%;
64+
flex-direction: row;
65+
overflow-x: scroll;
66+
overflow-y: hidden;
67+
}
68+
}
69+
70+
@media screen and (orientation: portrait) {
71+
.slider{
72+
height: 90%;
73+
flex-direction: column;
74+
overflow-x: hidden;
75+
overflow-y: scroll;
76+
}
77+
}
78+
6779
.no_scroll_bar{
6880
scrollbar-width: none;
6981
-ms-overflow-style: none;
@@ -106,6 +118,7 @@
106118
text-align: center;
107119
}
108120

121+
/*PRESENTATION*/
109122
.logo{
110123
display: block;
111124

@@ -171,6 +184,12 @@
171184
{
172185
max-width: 600px;
173186
margin: 0 auto;
187+
text-align: justify;
188+
189+
border: solid var(--accent) 1px;
190+
border-radius: 5px;
191+
padding: 15px;
192+
background: var(--secondary-button);
174193
}
175194

176195
.contact{
@@ -194,10 +213,34 @@
194213
height: 100%;
195214
}
196215

216+
.programmation
217+
{
218+
display: grid;
219+
grid-template-columns: 100%;
220+
grid-template-rows: 20% 80%;
221+
}
222+
223+
.programmation > .title{
224+
display: flex;
225+
justify-content: center;
226+
align-items: center;
227+
grid-row: 1;
228+
grid-column: 1;
229+
230+
height: 100%;
231+
}
197232

233+
.programmation > .projects{
234+
grid-row: 2;
235+
grid-column: 1;
198236

237+
display: flex;
238+
justify-content: center;
239+
align-items: center;
199240

241+
height: 100%;
200242

243+
}
201244

202245

203246

@@ -272,7 +315,7 @@ a{
272315
transition: transform 0.2s, box-shadow 0.1s;
273316
}
274317

275-
.button i{
318+
.button > i{
276319
margin-right: 10px;
277320
}
278321
.button:hover{

‎index.html

+28-24
Original file line numberDiff line numberDiff line change
@@ -35,38 +35,42 @@ <h2>Me contacter</h2>
3535
<a class="button discord"><i class="fa-brands fa-discord"></i>Discord</a>
3636
<a class="button github" href="https://github.com/Elgemp4" target="_blank"><i class="fa-brands fa-github"></i>Github</a>
3737
</div>
38-
3938
</div>
4039
</section>
41-
<section class="panel">
42-
<h1>Mes projets de programmation</h1>
43-
<div class="slider no_scroll_bar">
44-
<button class="scroll_right"></button>
45-
<div class="card"><img src="/images/Tetris.jpeg" alt="">
46-
<div class="card_content">
47-
<h2 class="back_blur">Tetris</h2>
48-
<p class="back_blur">Un simple Tetris fait en Unity</p>
40+
<section class="panel programmation">
41+
<div class="title">
42+
<h1>Mes projets de programmation</h1>
43+
</div>
44+
<div class="projects">
45+
<div class="slider no_scroll_bar">
46+
<button class="scroll_right"></button>
47+
<div class="card"><img src="/images/Tetris.jpeg" alt="">
48+
<div class="card_content">
49+
<h2 class="back_blur">Tetris</h2>
50+
<p class="back_blur">Un simple Tetris fait en Unity</p>
51+
</div>
4952
</div>
50-
</div>
51-
<div class="card"><img src="https://placehold.co/600x400" alt="">
52-
<div class="card_content">
53-
<h2 class="back_blur">Titre</h2>
54-
<p class="back_blur">Description</p>
53+
<div class="card"><img src="https://placehold.co/600x400" alt="">
54+
<div class="card_content">
55+
<h2 class="back_blur">Titre</h2>
56+
<p class="back_blur">Description</p>
57+
</div>
5558
</div>
56-
</div>
57-
<div class="card"><img src="https://placehold.co/600x400" alt="">
58-
<div class="card_content">
59-
<h2 class="back_blur">Titre</h2>
60-
<p class="back_blur">Description</p>
59+
<div class="card"><img src="https://placehold.co/600x400" alt="">
60+
<div class="card_content">
61+
<h2 class="back_blur">Titre</h2>
62+
<p class="back_blur">Description</p>
63+
</div>
6164
</div>
62-
</div>
63-
<div class="card"><img src="https://placehold.co/600x400" alt="">
64-
<div class="card_content">
65-
<h2 class="back_blur">Titre</h2>
66-
<p class="back_blur">Description</p>
65+
<div class="card"><img src="https://placehold.co/600x400" alt="">
66+
<div class="card_content">
67+
<h2 class="back_blur">Titre</h2>
68+
<p class="back_blur">Description</p>
69+
</div>
6770
</div>
6871
</div>
6972
</div>
73+
7074
</section>
7175
<section class="panel">
7276
<h1>Mes projets "éducatifs"</h1>

0 commit comments

Comments
 (0)