Naaturel/landing-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add some responsive shit

Browse Source
This commit is contained in:
Laurent
2025-10-30 22:12:54 +01:00
parent a56f774525
commit 3a8454474f
4 changed files with 52 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
html/index.html
View File

@@ -10,8 +10,8 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/mobile.css">
<link rel="stylesheet" href="./styles/introduction.css">
<link rel="stylesheet" href="./styles/mobile.css">
<title>Naaturel</title>
@@ -56,10 +56,23 @@
<section>
<h3><span class="accentuated">Connect</span> with me</h3>
<p>
<a href="mailto:yourname@example.com">Email</a> •
<a href="https://github.com/yourusername" target="_blank">GitHub</a> •
<a href="https://linkedin.com/in/yourprofile" target="_blank">LinkedIn</a>
<a href="https://github.com/yourusername" target="_blank">
<img src="./assets/marks/github-mark.svg" alt="github logo" class="logo">
</a> •
<a href="https://linkedin.com/in/yourprofile" target="_blank">
<img src="./assets/marks/linkedin-mark.svg" alt="linkedin logo" class="logo">
</a> •
<a href="https://twitter.com/naaturel_" target="_blank">
<img src="./assets/marks/twitter-mark.png" alt="twitter logo" class="logo">
</a> •
<a href="https://instagram.com/naaturel_" target="_blank">
<img src="./assets/marks/instagram-mark.svg" alt="instagram logo" class="logo">
</a>
</p>
</section>
</div>
@@ -80,7 +93,7 @@
<div class="card-details">
<h3>Unluckiest</h3>
<p class="notice">
Art & design by <a href="https://linktr.ee/yanderechan133">@YandereDraws</a>
Art & design by <a href="https://linktr.ee/yanderechan133">@ArwenDraws</a>
</p>
</div>
</div>
@@ -96,6 +109,7 @@
</div>
</div>
</div>
<!--<div class="card-list">
@@ -171,7 +185,7 @@
const cards = document.querySelectorAll('.introduction-box');
cards.forEach(card => { new CardTilter({card : card, tilt : 5, perspective : 950}) })
cards.forEach(card => { new CardTilter({card : card, tilt : 3, perspective : 1000}) })
</script>

24
html/styles/introduction.css
View File

@@ -3,7 +3,7 @@
align-items: center;
justify-content: center;
width: 40%;
width: 45%;
height: 100%;
}
@@ -26,8 +26,6 @@
margin-top: 10px;
}
.introduction-header
{
display: flex;
@@ -57,15 +55,12 @@
.introduction-text {
font-size: 1.1rem;
line-height: 1.25rem;
}
.greetings
{
font-size: 3.5rem;
.introduction-text > section {
margin-top: 2rem;
}
.typer::after {
content: '|';
animation: blink 800ms infinite;
@@ -77,7 +72,8 @@
flex-direction: column;
justify-content: center;
align-items: center;
width: 60%;
width: 55%;
padding: 25px;
}
.punched-card
@@ -98,11 +94,15 @@
{
display: flex;
flex-direction: row;
justify-content: start;
gap: 15px;
justify-content: center;
width: 100%;
min-width: 375px;
overflow: scroll;
padding: 20px;
gap: 15px;
overflow: scroll;
}
.card {

15
html/styles/mobile.css
View File

@@ -1,8 +1,11 @@
@media (max-width: 801px) {
@media (max-width: 860px) {
.container {
flex-direction: column;
justify-content: center;
align-items: center;
height: auto;
width: 100%;
gap: 20px;
}
.introduction
@@ -15,4 +18,14 @@
height: 100%;
}
.projects
{
width: 100%;
height: 100%;
}
.card-list
{
justify-content: space-evenly;
}
}

7
html/styles/style.css
View File

@@ -8,7 +8,6 @@
* {
font-family: 'Roboto', 'PT sans', sans-serif;
box-sizing: border-box;
color: #333;
}
@@ -62,6 +61,12 @@ a {
text-decoration: none;
}
.logo
{
width: 25px;
height: 25px;
}
.accentuated {
color: var(--primary-color);
}