-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Shady1
committed
May 6, 2024
0 parents
commit 11dbfc1
Showing
8 changed files
with
320 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,202 @@ | ||
/* Resetleme ve Genel Stiller */ | ||
* { | ||
margin: 0; | ||
padding: 0; | ||
box-sizing: border-box; | ||
} | ||
|
||
body { | ||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
background-color: #f5f5f5; | ||
color: #333; | ||
} | ||
|
||
header { | ||
background-color: #333; | ||
color: #fff; | ||
padding: 20px; | ||
text-align: center; | ||
} | ||
|
||
.header-container { | ||
max-width: 1200px; | ||
margin: 0 auto; | ||
} | ||
|
||
header h1 { | ||
font-size: 36px; | ||
animation: colorChange 2s infinite alternate; | ||
} | ||
|
||
@keyframes colorChange { | ||
from { color: #fff; } | ||
to { color: #66CCFF; } | ||
} | ||
|
||
nav ul { | ||
list-style-type: none; | ||
} | ||
|
||
nav ul li { | ||
display: inline; | ||
margin-right: 20px; | ||
} | ||
|
||
nav ul li a { | ||
color: #fff; | ||
text-decoration: none; | ||
font-size: 18px; | ||
} | ||
|
||
nav ul li a:hover { | ||
color: #ccc; | ||
} | ||
|
||
main { | ||
padding: 20px; | ||
max-width: 1200px; | ||
margin: 0 auto; | ||
} | ||
|
||
.about { | ||
background-color: #fff; | ||
padding: 40px; | ||
margin-bottom: 40px; | ||
border-radius: 10px; | ||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
} | ||
|
||
.about h2 { | ||
font-size: 24px; | ||
margin-bottom: 20px; | ||
} | ||
|
||
.about p { | ||
font-size: 18px; | ||
line-height: 1.6; | ||
margin-bottom: 20px; | ||
} | ||
|
||
.btn { | ||
display: inline-block; | ||
background-color: #333; | ||
color: #fff; | ||
padding: 10px 20px; | ||
text-decoration: none; | ||
border-radius: 5px; | ||
transition: background-color 0.3s ease; | ||
} | ||
|
||
.btn:hover { | ||
background-color: #555; | ||
} | ||
|
||
.staff { | ||
background-color: #f9f9f9; | ||
padding: 40px; | ||
border-radius: 10px; | ||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
margin-bottom: 40px; | ||
} | ||
|
||
.staff h2 { | ||
font-size: 24px; | ||
margin-bottom: 20px; | ||
} | ||
|
||
.staff-members { | ||
display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | ||
gap: 20px; | ||
} | ||
|
||
.staff-member { | ||
background-color: #fff; | ||
border-radius: 10px; | ||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
padding: 20px; | ||
transition: transform 0.3s ease; | ||
} | ||
|
||
.staff-member:hover { | ||
transform: translateY(-10px); | ||
} | ||
|
||
.staff-member img { | ||
width: 100px; | ||
height: 100px; | ||
border-radius: 50%; | ||
margin-bottom: 10px; | ||
animation: rotateImage 3s linear infinite; | ||
} | ||
|
||
@keyframes rotateImage { | ||
from { transform: rotate(0deg); } | ||
to { transform: rotate(360deg); } | ||
} | ||
|
||
.member-info h3 { | ||
font-size: 20px; | ||
margin-bottom: 5px; | ||
} | ||
|
||
.member-info p { | ||
font-size: 16px; | ||
margin-bottom: 5px; | ||
} | ||
|
||
.member-info p.role { | ||
font-weight: bold; | ||
color: #333; /* Default renk */ | ||
transition: color 0.3s ease; | ||
} | ||
|
||
.member-info p.role.Project-Leader, | ||
.member-info p.role.Developer, | ||
.member-info p.role.Web-Development-Expert, | ||
.member-info p.role.Mapper, | ||
.member-info p.role.Project-Supporter, | ||
.member-info p.role.Project-Coordinator, | ||
.member-info p.role.Modellers { | ||
color: #00ff00; /* Yeşil renk */ | ||
} | ||
|
||
.member-info p.role:hover { | ||
color: #666; /* Hover rengi */ | ||
cursor: pointer; | ||
} | ||
|
||
footer { | ||
background-color: #333; | ||
color: #fff; | ||
text-align: center; | ||
padding: 20px; | ||
} | ||
|
||
footer p { | ||
font-size: 18px; | ||
} | ||
|
||
.social-links a { | ||
color: #fff; | ||
font-size: 24px; | ||
margin-right: 10px; | ||
} | ||
|
||
.social-links a:hover { | ||
color: #ccc; | ||
} | ||
|
||
.discord-btn { | ||
display: inline-block; | ||
background-color: #7289da; /* Discord'un renk kodu */ | ||
color: #fff; | ||
padding: 10px 20px; | ||
text-decoration: none; | ||
border-radius: 5px; | ||
transition: background-color 0.3s ease; | ||
} | ||
|
||
.discord-btn:hover { | ||
background-color: #5f73b7; /* Hover rengi */ | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Fade2Black Survival Staff Team</title> | ||
<link rel="stylesheet" href="staff.css"> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | ||
<style> | ||
/* Yeni eklenen CSS kodları */ | ||
body { | ||
background-image: url('background.png'); | ||
background-size: cover; | ||
background-repeat: no-repeat; | ||
background-attachment: fixed; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<header> | ||
<div class="header-container"> | ||
<h1><i class="fas fa-campground"></i> Fade2Black Survival Staff Team</h1> | ||
<nav> | ||
|
||
</nav> | ||
</div> | ||
</header> | ||
<main> | ||
<section class="about"> | ||
<div class="container"> | ||
<h2>Fade2Black Survival</h2> | ||
<p>Fade2Black Survival is an adventure platform that teaches survival skills and living in harmony with nature. Transform your life with our fun and educational activities immersed in nature!</p> | ||
<a href="https://discord.gg/xKZuUn9GPq" class="discord-btn" target="_blank">Join Discord</a> | ||
</div> | ||
</section> | ||
|
||
<section class="staff"> | ||
<div class="container"> | ||
<h2>Staff Team</h2> | ||
<div class="staff-members"> | ||
<div class="staff-member"> | ||
<img src="staff2.png" alt="Shady"> | ||
<div class="member-info"> | ||
<h3>Shady</h3> | ||
<p class="role Project-Leader">Project Leader</p> | ||
<p><i class="fas fa-envelope"></i> [email protected]</p> | ||
</div> | ||
</div> | ||
|
||
<div class="staff-member"> | ||
<img src="staff2.png" alt="Ruby"> | ||
<div class="member-info"> | ||
<h3>Ruby</h3> | ||
<p class="role Developer">Developer</p> | ||
<p><i class="fas fa-envelope"></i> [email protected]</p> | ||
</div> | ||
</div> | ||
|
||
<div class="staff-member"> | ||
<img src="staff2.png" alt="Rul3zZ"> | ||
<div class="member-info"> | ||
<h3>Rul3zZ</h3> | ||
<p class="role Web-Development-Expert">Web Development Expert</p> | ||
<p><i class="fas fa-envelope"></i> [email protected]</p> | ||
</div> | ||
</div> | ||
|
||
<div class="staff-member"> | ||
<img src="staff2.png" alt="Nebla"> | ||
<div class="member-info"> | ||
<h3>Nebla</h3> | ||
<p class="role Mapper">Mapper</p> | ||
<p><i class="fas fa-envelope"></i> [email protected]</p> | ||
</div> | ||
</div> | ||
|
||
<div class="staff-member"> | ||
<img src="staff2.png" alt="Dribble2much"> | ||
<div class="member-info"> | ||
<h3>Dribble2much</h3> | ||
<p class="role Project-Supporter">Project Supporter</p> | ||
<p><i class="fas fa-envelope"></i> [email protected]</p> | ||
</div> | ||
</div> | ||
|
||
<div class="staff-member"> | ||
<img src="staff2.png" alt="Arfelious"> | ||
<div class="member-info"> | ||
<h3>Arfelious</h3> | ||
<p class="role Project-Coordinator">Project Coordinator</p> | ||
<p><i class="fas fa-envelope"></i> [email protected]</p> | ||
</div> | ||
</div> | ||
|
||
<div class="staff-member"> | ||
<img src="staff2.png" alt="CAT"> | ||
<div class="member-info"> | ||
<h3>CAT</h3> | ||
<p class="role Modellers">Modellers</p> | ||
<p><i class="fas fa-envelope"></i> [email protected]</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</section> | ||
</main> | ||
<footer> | ||
<div class="container"> | ||
<p>© 2024 Fade2Black Survival Staff Team</p> | ||
<div class="social-links"> | ||
<a href="#"><i class="fab fa-facebook-f"></i></a> | ||
<a href="#"><i class="fab fa-twitter"></i></a> | ||
<a href="#"><i class="fab fa-instagram"></i></a> | ||
</div> | ||
</div> | ||
</footer> | ||
</body> | ||
</html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.