Kevin/website
1
0
Fork 0
mirror of https://github.com/LJ5O/website.git synced 2026-08-11 22:54:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added presentation text

Browse Source
This commit is contained in:
LJ5O
2025-03-03 23:18:36 +01:00
parent 2df20a7c5e
commit 6fb42278cf
2 changed files with 84 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<div class="test" id="welcome_div"> <div class="" id="welcome_div">
<p id="random_citation">Random Sentence</p> <p id="random_citation">Random Sentence</p>
<div class="test" id="name_div"> <div class="test" id="name_div">
@@ -23,13 +23,13 @@
</div> </div>
<div id="social_networks" class="test"> <div id="social_networks" class="test">
<div class="network"> <div class="network">
<img src="https://picsum.photos/50" height="100%" width="100%"> <img src="https://picsum.photos/50">
</div> </div>
<div class="network"> <div class="network">
<img src="https://picsum.photos/50" height="100%" width="100%"> <img src="https://picsum.photos/50">
</div> </div>
<div class="network"> <div class="network">
<img src="https://picsum.photos/50" height="100%" width="100%"> <img src="https://picsum.photos/50">
</div> </div>
</div> </div>
</div> </div>
@@ -40,9 +40,28 @@
<div class="intersection_div"> <div class="intersection_div">
<div class="intersection_content test"> <div class="intersection_content test">
<h2 class="test">Looking for something ?</h2> <h2 class="test">Looking for something ?</h2>
<a href="#"><div class="intersection_button_div test"><p>Hello World</p></div></a>
</div> </div>
</div> </div> <!-- Intersection div -->
<div id="presentation_div" class="">
<div id="presentation_text">
<h1>Thanks for coming !</h1>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean nec ante tristique, tincidunt dolor a, maximus nisl.
Curabitur ut metus accumsan, vestibulum ex vitae, pretium enim.
Etiam tincidunt mauris quis elit egestas, vel viverra justo
efficitur. Nulla facilisi. Cras porttitor odio a massa pretium
varius. Vivamus felis risus, luctus vel mollis nec, lacinia non
libero. Proin mattis, ante vitae mattis sollicitudin, turpis
erat auctor arcu, vel fringilla arcu diam aliquam urna.
</p>
</article>
</div>
<div id="presentation_img"><img src="https://picsum.photos/500/250"></div>
</div> <!-- Presentation div -->
</body> </body>
</html> </html>

61
style.css
View File

@@ -1,7 +1,12 @@
* {
overflow-y: hidden;
overflow-x: hidden;
}
html, body{ html, body{
background-color: #1E1E1E; background-color: #1E1E1E;
margin: 0; margin: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll !important;
} }
h1,h2,h3,h4,h5,p{ h1,h2,h3,h4,h5,p{
@@ -48,6 +53,7 @@ h1,h2,h3,h4,h5,p{
#name_div_right_container{ #name_div_right_container{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: fit-content;
} }
#welcome_text_div{ #welcome_text_div{
height: 100%; height: 100%;
@@ -58,7 +64,7 @@ h1,h2,h3,h4,h5,p{
} }
#social_networks{ #social_networks{
max-height: 100%; height: fit-content;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@@ -86,4 +92,57 @@ h1,h2,h3,h4,h5,p{
} }
.intersection_content h2{ .intersection_content h2{
color: #1E1E1E !important; color: #1E1E1E !important;
}
.intersection_button_div{
margin-left: 30px;
background-color: #A58181;
height: 2.5em;
width: fit-content;
padding-left: 15px;
padding-right: 15px;
border-radius: 8px;
cursor: pointer;
}
.intersection_button_div p{
margin: 0;
margin-top: 0.75em; /* Half of parent height - Half of font size : 1.25 - 0.75*/
transform: translateY(-50%);
font-size: 1.5em;
text-decoration: none;
color: black;
}
#presentation_div{
width: 80vw;
margin: auto;
margin-top: 40px;
height: fit-content;
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-bottom: 25px;
border-bottom: 2px solid #EAEAEA;
}
#presentation_text{
width: calc( 55% - 30px );
margin-left: 30px;
}
#presentation_text h1{
width: fit-content;
margin:auto;
margin-top: 5px;
}
#presentation_text article p{
width: fit-content;
margin:auto;
margin-top: 20px;
}
#presentation_img{
width: fit-content;
width: 40%;
min-width: 500px;
}
#presentation_img{
margin-left: auto;
margin-top: 20px;
} }