Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bonnie39
Bonnie39 committed Dec 10, 2023
1 parent 19c34c3 commit 4ff2f00
Show file tree
Hide file tree
Showing 2 changed files with 168 additions and 33 deletions.
137 changes: 119 additions & 18 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,112 @@
body {
transform-style: preserve-3d;
margin: 0;
padding: 0;
font-family: 'Helvetica', sans-serif;
background-color: #fff; /* White background */
color: #000; /* Black text color */
background-color: #fff;
color: #000;
}

.navbar {
background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white navbar */
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding-top: 24px;
padding-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center; /* Vertically center the content */
z-index: 1000;
}

.navbar h1 {
width: 100%;
}

footer {
background-color: #ffffff; /* Choose your preferred background color */
color: #000000; /* Choose your preferred text color */
text-align: center;
padding: 10px 0;
margin-top: 32vh; /* Push the footer to the bottom */
}

.project-info svg {
margin-top: 5px;
}

.project-info a {
text-align: top;
}

.navbar-buttons {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0);
text-align: center;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center; /* Vertically center the content */
z-index: 1000;
}

@media (max-width: 675px) {
.navbar-buttons {
flex-direction: column; /* Stack buttons vertically on smaller screens */
align-items: center; /* Center buttons horizontally */
width: 100%; /* Ensure buttons take full width */
padding: 0;
}

.navbar-left {
padding-top: 64px;
}

.navbar-buttons a {
margin: 5px 0; /* Add some vertical margin between items */
}
}

h1 {
text-align: center;
width: 100%;
margin: 0; /* Set margin to zero */
}


.navbar-left {
display: flex;
align-items: center;
}

/* Style for the buttons */
.navbar-buttons a {
display: inline-block;
padding: 5px 10px;
color: #000;
text-decoration: none;
border-radius: 4px;
margin-left: 10px;
transition: all 0.2s;
}

.navbar-buttons a:hover {
transform: scale(1.2);
color: #007bff;
}

/* Style for the left button */
.navbar-left a {
margin-left: auto; /* Push the button to the left */
}

.web-content {
margin-top: 200px;
}

.projects {
Expand All @@ -24,16 +120,18 @@ body {
border-radius: 16px;
overflow: hidden;
width: 300px;
display: flex; /* Use flexbox for layout */
align-items: center; /* Align items vertically in the flex container */
padding-left: 20px; /* Add padding to the left */
display: flex;
align-items: center;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.card {
perspective: 1000px;
margin: 0 !important;
margin-right: 12px !important;
padding: 0 !important;
width: 80px !important;
height: 80px !important;
Expand All @@ -47,34 +145,37 @@ body {
}

img {
max-width: 80px; /* Reduce the max width of the icon */
max-height: 80px; /* Reduce the max height of the icon */
margin-right: 10px; /* Add some space between the icon and text */
max-width: 80px;
max-height: 80px;
margin-right: 10px;
margin-bottom: 20px;
}

.project-info {
padding: 10px; /* Reduce padding for a more compact look */
flex-grow: 1; /* Allow the content to grow and take remaining space */
padding: 10px;
flex-grow: 1;
margin-right: -30px !important;
}

h2 {
margin: 5px 0; /* Reduce margin for the title */
margin: 5px 0;
}

p {
margin: 5px 0; /* Reduce margin for paragraphs */
margin: 5px 0;
}

a {
.project-card a {
display: inline-block;
padding: 5px 10px; /* Reduce padding for the button */
padding: 5px 10px;
margin-top: 10px;
background-color: #007bff; /* Apple's blue color */
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: all 0.2s;
}

/* Add any additional styling as needed */
.project-card a:hover {
background-color: #0067d5;
}
64 changes: 49 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,65 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="/css/styles.css">
<title>Resonance Team</title>
</head>
<body>
<div class="navbar">
<h1>Resonance Team</h1>
</div>

<div class="section-header">
<p>Our Projects:</p>
<div class="navbar-buttons">
<div class="navbar-left">
<a href="discord.gg/PrF6XqpGgX">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
<path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
</svg>
</a>
<a href="https://twitter.com/_resonanceteam">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/>
</svg>
</a>
<a href="https://github.com/TheResonanceTeam">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
</a>
</div>
</div>

<section class="projects">
<div class="project-card">
<div class="card">
<img src="/img/ResonanceStoreIcon.webp" alt="TrollApps Icon">
</div>
<div class="project-info">
<h2>TrollApps</h2>
<p>Version 2.1</p>
<p>App Store alternative for TrollStore.</p>
<a href="https://github.com/TheResonanceTeam/TrollApps" target="_blank">View on GitHub</a>

<div class="web-content">
<div class="section-header">
<p>Our Projects:</p>
</div>

<section class="projects">
<div class="project-card">
<div class="card">
<img src="/img/ResonanceStoreIcon.webp" alt="TrollApps Icon">
</div>
<div class="project-info">
<h2>TrollApps</h2>
<p>Version 2.1</p>
<p>App Store alternative for TrollStore.</p>
<a href="https://github.com/TheResonanceTeam/TrollApps" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
View on GitHub
</a>
</div>
</div>
</section>
</div>

<footer>
<div class="container">
<p>&copy; 2023 Resonance Team</p>
</div>
</section>
</footer>

<script src="/js/main.js"></script>
</body>
</html>

0 comments on commit 4ff2f00

Please sign in to comment.