Skip to content

Commit 4acdd1f

Browse files
AsteroidusTvAsteroidusTv
authoredMar 12, 2023
New site style
1 parent 63e4568 commit 4acdd1f

7 files changed

+141
-85
lines changed
 

‎asterjdm.css

+107-66
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,141 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');
1+
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200&display=swap');
22

3-
.body {
4-
background: black;
5-
}
3+
body {
4+
5+
background-color: black;
6+
animation-name: fade_in;
7+
animation-duration: 1.2s;
68

7-
.asterjdm {
8-
font-family: 'Comfortaa', cursive;
9-
color: white;
10-
text-align: center;
11-
font-size: 400%;
12-
position: relative;
13-
margin-top: 10%;
14-
animation-name: slide;
15-
animation-duration: 1s;
16-
margin-bottom: auto;
179
}
1810

19-
.slogan {
20-
color: white;
21-
font-family: 'Comfortaa', cursive;
22-
text-align: center;
23-
animation-name: fade;
24-
animation-duration: 1s;
11+
.slide {
12+
13+
animation-name: slide_down;
14+
animation-duration: 1.2s;
2515
}
2616

27-
.present {
28-
color: white;
29-
font-family: 'Comfortaa', cursive;
30-
text-align: center;
31-
animation-name: fade;
32-
animation-duration: 1s;
33-
font-size: 400%;
17+
.title {
18+
19+
color: white;
20+
font-size: 150px;
21+
text-align: center;
22+
font-family: 'Nunito Sans', sans-serif;
23+
3424
}
3525

36-
.project1, .project2 {
37-
background: white;
38-
margin-top: 5px;
39-
float: left;
40-
width: 50%;
26+
.slogan {
27+
28+
29+
color: white;
30+
font-size: 30px;
31+
margin-top: -120px;
32+
text-align: center;
33+
font-family: 'Nunito Sans', sans-serif;
34+
4135
}
4236

4337
.projects {
44-
margin-top: 20%;
45-
border-color: black;
46-
border-style: solid;
47-
border-width: 20px;
48-
clear: both;
49-
overflow: auto;
50-
animation-name: fade;
51-
animation-duration: 1s;
52-
}
5338

54-
.cescosite {
55-
height: 300px;
39+
display: flex;
40+
justify-content: center;
41+
5642
}
5743

58-
.elements {
59-
padding-top: 5px;
60-
text-align: center;
44+
.projects_title {
45+
46+
color: white;
47+
font-size: 50px;
48+
text-align: center;
49+
font-family: 'Nunito Sans', sans-serif;
50+
6151
}
6252

63-
@keyframes fade {
64-
from {
65-
opacity: 0;
53+
.projects_images, .members_images {
54+
55+
width: 100px;
56+
height: 100px;
57+
flex-grow: 1;
58+
transition: 0.3s;
59+
margin-left: 5px;
60+
margin-right: 5px;
61+
align-self: center;
62+
margin-bottom: 10px;
63+
6664
}
67-
to {
68-
opacity: 1;
65+
66+
.members {
67+
68+
display: flex;
69+
justify-content: center;
70+
6971
}
72+
73+
.members_title {
74+
75+
color: white;
76+
font-size: 50px;
77+
text-align: center;
78+
font-family: 'Nunito Sans', sans-serif;
79+
7080
}
7181

72-
@keyframes slide {
73-
from {
74-
margin-top: 8%;
82+
.member {
83+
84+
margin: 10px;
85+
display: flex;
86+
max-width: 200px;
87+
align-items: center;
88+
flex-direction: column;
89+
7590
}
76-
to {
77-
margin-top: 10%;
91+
92+
.project_name, .member_name {
93+
94+
margin: 0;
95+
color: white;
96+
padding: 10px;
97+
font-size: 20px;
98+
text-align: center;
99+
font-family: 'Nunito Sans', sans-serif;
100+
78101
}
102+
103+
.projects_images:hover, .members_images:hover {
104+
105+
margin-top: -5px;
106+
box-shadow: 5px 5px 5px white;
107+
79108
}
80109

81-
@media (min-width: 1024px) {
110+
@keyframes fade_in {
82111

112+
from {
83113

114+
opacity: 0%;
84115

85-
.asterjdm {
116+
}
86117

87-
font-size: 1000%;
118+
to {
88119

89-
}
120+
opacity: 100%;
90121

91-
.project {
122+
}
92123

93-
width: 50%;
94-
display: inline-block;
95-
float: left;
96124
}
97125

98-
.cescosite {
99-
height: 400px;
126+
@keyframes slide_down {
127+
128+
129+
from {
130+
131+
margin-top: -20px;
132+
133+
}
134+
135+
to {
136+
137+
margin-top: 0px;
138+
139+
}
140+
100141
}

‎img/aster.png

44.5 KB
Loading

‎img/cescosite.png

850 KB
Loading

‎img/jdm.jpg

46.4 KB
Loading

‎img/nuagecraft.jpg

48.5 KB
Loading

‎img/ronzaigu.png

53.6 KB
Loading

‎index.html

+34-19
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,45 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<link rel="stylesheet" type="text/css" href="asterjdm.css">
7-
<title>ASTERJDM</title>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" type="text/css" href="asterjdm.css">
7+
<title>Asterjdm - Site</title>
88
</head>
9-
<body class="body">
10-
<h1 class="asterjdm">ASTERJDM</h1>
11-
<p class="slogan">Why not better ?</p>
12-
<h2 class="present">Projects</h2>
9+
<body>
10+
<div class="slide">
11+
<h1 class="title">AsterJdM</h1>
12+
<h2 class="slogan">Why not better ?</h2>
13+
14+
<h1 class="projects_title">Projects</h1>
15+
<div class="projects">
16+
<div class="member">
17+
<p class="project_name">Cescosite</p>
18+
<a href="https://rmbi.ch/cescosite"><img class="projects_images" src="./img/cescosite.png" alt="cescosite logo"></a>
19+
</div></a>
20+
</div>
1321

14-
<div class="projects">
15-
<div class="project-container">
16-
<div class="project">
17-
<div class="elements">
18-
<a href="https://rmbi.ch/cescosite"><img class="cescosite" src="cescosite.png"></a>
19-
</div>
22+
<h1 class="members_title">Members</h1>
23+
<div class="members">
24+
25+
<div class="member">
26+
<p class="member_name">Asteroidus</p>
27+
<a href="https://rmbi.ch/aster"><img class="members_images" src="./img/aster.png" alt="Asteroidus logo"></a>
28+
</div>
29+
<div class="member">
30+
<p class="member_name">Jdm</p>
31+
<a href="https://rmbi.ch/jdm"><img class="members_images" src="./img/jdm.jpg" alt="Jdm logo"></a>
32+
</div>
33+
<div class="member">
34+
<p class="member_name">Ronzaigu</p>
35+
<a href="#"><img class="members_images" src="./img/ronzaigu.png" alt="Ronzaigu logo"></a>
2036
</div>
21-
<div class="project">
22-
<div class="elements">
23-
<a href="https://rmbi.ch/aster"><img class="cescosite" src="profil.png"></a>
24-
</div>
37+
<div class="member">
38+
<p class="member_name">NuageCraft</p>
39+
<a href="https://rmbi.ch/vital"><img class="members_images" src="./img/nuagecraft.jpg" alt="NuageCraft logo"></a>
2540
</div>
41+
2642
</div>
2743
</div>
28-
2944
</body>
3045
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.