Skip to content

Commit aff8877

Browse files
zcomertzcomert
committed
web page has been updated.
1 parent 2078f49 commit aff8877

1 file changed

Lines changed: 133 additions & 8 deletions

File tree

‎index.html‎

Lines changed: 133 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,31 @@
2424
nav {
2525
display: flex;
2626
justify-content: center;
27-
background: #e3eafc;
28-
border-bottom: 1px solid #c3d0e8;
27+
background: #fff;
28+
border-bottom: 1px solid #e0e0e0;
29+
position: sticky;
30+
top: 0;
31+
z-index: 1000;
32+
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
2933
}
3034
.tab {
3135
padding: 1rem 2rem;
3236
cursor: pointer;
3337
border: none;
3438
background: none;
3539
font-size: 1.1rem;
36-
color: #1a73e8;
37-
transition: background 0.2s;
40+
color: #5f6368;
41+
transition: color 0.3s, border-bottom-color 0.3s;
3842
outline: none;
43+
border-bottom: 3px solid transparent;
44+
margin-bottom: -1px;
3945
}
4046
.tab.active, .tab:hover {
41-
background: #d2e3fc;
42-
color: #174ea6;
43-
font-weight: bold;
47+
color: #1a73e8;
48+
}
49+
.tab.active {
50+
font-weight: 600;
51+
border-bottom-color: #1a73e8;
4452
}
4553
main {
4654
max-width: 900px;
@@ -102,9 +110,117 @@
102110
display: inline-block;
103111
margin-bottom: 0.5em;
104112
}
113+
footer {
114+
background: #1a73e8;
115+
color: #fff;
116+
text-align: center;
117+
padding: 2rem 1rem;
118+
margin-top: 3rem;
119+
}
120+
.github-link {
121+
display: inline-flex;
122+
align-items: center;
123+
gap: 0.5rem;
124+
color: #fff;
125+
text-decoration: none;
126+
font-size: 1.1rem;
127+
padding: 0.8rem 1.5rem;
128+
background: rgba(255, 255, 255, 0.1);
129+
border-radius: 8px;
130+
transition: all 0.2s;
131+
border: 1px solid rgba(255, 255, 255, 0.2);
132+
}
133+
.github-link:hover {
134+
background: rgba(255, 255, 255, 0.2);
135+
transform: translateY(-2px);
136+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
137+
color: #fff;
138+
}
139+
.github-icon {
140+
width: 24px;
141+
height: 24px;
142+
fill: currentColor;
143+
vertical-align: middle;
144+
}
105145
@media (max-width: 600px) {
106146
main { padding: 1rem; }
107147
.tab { padding: 0.7rem 1rem; font-size: 1rem; }
148+
footer { padding: 1.5rem 1rem; }
149+
.github-link { font-size: 1rem; padding: 0.7rem 1.2rem; }
150+
}
151+
/* Slider */
152+
.slider-container {
153+
max-width: 900px;
154+
margin: 1rem auto;
155+
position: relative;
156+
overflow: hidden;
157+
border-radius: 8px;
158+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
159+
}
160+
.slider {
161+
display: flex;
162+
transition: transform 0.5s ease-in-out;
163+
}
164+
.slide {
165+
min-width: 100%;
166+
position: relative;
167+
}
168+
.slide img {
169+
width: 100%;
170+
display: block;
171+
}
172+
.slide-caption {
173+
position: absolute;
174+
bottom: 20px;
175+
left: 20px;
176+
background-color: rgba(0, 0, 0, 0.5);
177+
color: white;
178+
padding: 10px;
179+
border-radius: 5px;
180+
font-size: 1rem;
181+
}
182+
.slider-container .prev, .slider-container .next {
183+
cursor: pointer;
184+
position: absolute;
185+
top: 50%;
186+
width: auto;
187+
padding: 16px;
188+
margin-top: -22px;
189+
color: white;
190+
font-weight: bold;
191+
font-size: 18px;
192+
transition: 0.6s ease;
193+
border-radius: 0 3px 3px 0;
194+
user-select: none;
195+
background-color: rgba(0,0,0,0.3);
196+
border: none;
197+
}
198+
.slider-container .next {
199+
right: 0;
200+
border-radius: 3px 0 0 3px;
201+
}
202+
.slider-container .prev:hover, .slider-container .next:hover {
203+
background-color: rgba(0,0,0,0.8);
204+
}
205+
.dots-container {
206+
text-align: center;
207+
padding: 10px;
208+
position: absolute;
209+
bottom: 0;
210+
width: 100%;
211+
}
212+
.dot {
213+
cursor: pointer;
214+
height: 13px;
215+
width: 13px;
216+
margin: 0 5px;
217+
background-color: rgba(255, 255, 255, 0.5);
218+
border-radius: 50%;
219+
display: inline-block;
220+
transition: background-color 0.6s ease;
221+
}
222+
.dot.active, .dot:hover {
223+
background-color: white;
108224
}
109225
</style>
110226
</head>
@@ -187,6 +303,14 @@ <h2>💻 Kullanılacak Programlar</h2>
187303
</ul>
188304
</section>
189305
</main>
306+
<footer>
307+
<a class="github-link" href="https://github.com/zcomert/btk-akademi-programlama" target="_blank" rel="noopener">
308+
<svg class="github-icon" viewBox="0 0 24 24" aria-hidden="true">
309+
<path d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.011-1.04-0.017-2.04-3.338 0.726-4.042-1.61-4.042-1.61-0.546-1.387-1.333-1.756-1.333-1.756-1.089-0.745 0.083-0.729 0.083-0.729 1.205 0.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495 0.997 0.108-0.775 0.418-1.305 0.762-1.605-2.665-0.304-5.466-1.332-5.466-5.931 0-1.31 0.469-2.381 1.236-3.221-0.124-0.303-0.535-1.523 0.117-3.176 0 0 1.008-0.322 3.301 1.23 0.957-0.266 1.984-0.399 3.003-0.404 1.018 0.005 2.046 0.138 3.006 0.404 2.291-1.553 3.297-1.23 3.297-1.23 0.653 1.653 0.242 2.873 0.119 3.176 0.77 0.84 1.235 1.911 1.235 3.221 0 4.609-2.804 5.625-5.475 5.921 0.43 0.371 0.823 1.102 0.823 2.222 0 1.606-0.015 2.898-0.015 3.293 0 0.322 0.216 0.694 0.825 0.576 4.765-1.589 8.2-6.085 8.2-11.386 0-6.627-5.373-12-12-12z"/>
310+
</svg>
311+
GitHub Repo
312+
</a>
313+
</footer>
190314
<script>
191315
// Tab switching
192316
document.querySelectorAll('.tab').forEach(tab => {
@@ -425,4 +549,5 @@ <h2>💻 Kullanılacak Programlar</h2>
425549
renderAccordion();
426550
</script>
427551
</body>
428-
</html>
552+
</html>
553+

0 commit comments

Comments
 (0)