Demo site; ( bende daha görsel eklemedim )
https://clinicfizyo.com/
index.html
Alıntı
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fizyoterapistiniz</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#hakkimda">Hakkımda</a></li>
<li><a href="#hizmetler">Hizmetler</a></li>
<li><a href="#yorumlar">Yorumlar</a></li>
<li><a href="#iletisim">İletişim</a></li>
<li><a href="#sosyalmedya">Sosyal Medya</a></li>
</ul>
</nav>
<h1>Fizyoterapistiniz</h1>
<!-- Ana başlık için görsel -->
<img src="yol/ana-baslik-gorseli.jpg" alt="Fizyoterapist Ana Başlık Görseli">
</header>
<section id="hakkimda">
<h2>Hakkımda</h2>
<!-- Profil fotoğrafı -->
<img src="yol/profil-foto.jpg" alt="Fizyoterapist Profil Fotoğrafı">
<p>Benim hakkımda metin.</p>
</section>
<section id="hizmetler">
<h2>Hizmetler</h2>
<!-- Hizmetler bölümü için görseller -->
<article>
<h3>Manuel Terapi</h3>
<img src="yol/manuel-terapi-gorseli.jpg" alt="Manuel Terapi Görseli">
<p>Manuel terapi hakkında açıklama.</p>
</article>
<article>
<h3>Sporcu Rehabilitasyonu</h3>
<img src="yol/sporcu-rehabilitasyonu-gorseli.jpg" alt="Sporcu Rehabilitasyonu Görseli">
<p>Sporcu rehabilitasyonu hakkında açıklama.</p>
</article>
</section>
<section id="yorumlar">
<h2>Müşteri Yorumları</h2>
<blockquote>
"Fizyoterapist hakkında müşteri yorumu."
<footer>- Müşteri Adı</footer>
</blockquote>
</section>
<section id="iletisim">
<h2>İletişim</h2>
<form>
<!-- İletişim formu -->
</form>
</section>
<section id="sosyalmedya">
<h2>Sosyal Medya</h2>
<!-- Sosyal medya linkleri -->
<a href="https://instagram.com/hesapadi" target="_blank"><img src="yol/instagram-icon.png" alt="Instagram"></a>
<a href="https://facebook.com/hesapadi" target="_blank"><img src="yol/facebook-icon.png" alt="Facebook"></a>
<a href="https://twitter.com/hesapadi" target="_blank"><img src="yol/twitter-icon.png" alt="Twitter"></a>
</section>
<footer>
<p>© 2024 Fizyoterapistiniz. Tüm hakları saklıdır.</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fizyoterapistiniz</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#hakkimda">Hakkımda</a></li>
<li><a href="#hizmetler">Hizmetler</a></li>
<li><a href="#yorumlar">Yorumlar</a></li>
<li><a href="#iletisim">İletişim</a></li>
<li><a href="#sosyalmedya">Sosyal Medya</a></li>
</ul>
</nav>
<h1>Fizyoterapistiniz</h1>
<!-- Ana başlık için görsel -->
<img src="yol/ana-baslik-gorseli.jpg" alt="Fizyoterapist Ana Başlık Görseli">
</header>
<section id="hakkimda">
<h2>Hakkımda</h2>
<!-- Profil fotoğrafı -->
<img src="yol/profil-foto.jpg" alt="Fizyoterapist Profil Fotoğrafı">
<p>Benim hakkımda metin.</p>
</section>
<section id="hizmetler">
<h2>Hizmetler</h2>
<!-- Hizmetler bölümü için görseller -->
<article>
<h3>Manuel Terapi</h3>
<img src="yol/manuel-terapi-gorseli.jpg" alt="Manuel Terapi Görseli">
<p>Manuel terapi hakkında açıklama.</p>
</article>
<article>
<h3>Sporcu Rehabilitasyonu</h3>
<img src="yol/sporcu-rehabilitasyonu-gorseli.jpg" alt="Sporcu Rehabilitasyonu Görseli">
<p>Sporcu rehabilitasyonu hakkında açıklama.</p>
</article>
</section>
<section id="yorumlar">
<h2>Müşteri Yorumları</h2>
<blockquote>
"Fizyoterapist hakkında müşteri yorumu."
<footer>- Müşteri Adı</footer>
</blockquote>
</section>
<section id="iletisim">
<h2>İletişim</h2>
<form>
<!-- İletişim formu -->
</form>
</section>
<section id="sosyalmedya">
<h2>Sosyal Medya</h2>
<!-- Sosyal medya linkleri -->
<a href="https://instagram.com/hesapadi" target="_blank"><img src="yol/instagram-icon.png" alt="Instagram"></a>
<a href="https://facebook.com/hesapadi" target="_blank"><img src="yol/facebook-icon.png" alt="Facebook"></a>
<a href="https://twitter.com/hesapadi" target="_blank"><img src="yol/twitter-icon.png" alt="Twitter"></a>
</section>
<footer>
<p>© 2024 Fizyoterapistiniz. Tüm hakları saklıdır.</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>
Alıntı
/* Genel stil ayarları */
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
color: #333;
background-color: #f8f8f8;
}
/* Header stil ayarları */
header {
background-color: #007bff;
color: #ffffff;
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
}
header img {
max-width: 100%;
height: auto;
margin-top: 10px;
}
/* Navigasyon menü stil ayarları */
nav ul {
padding: 0;
list-style-type: none;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
padding: 5px 10px;
transition: background-color 0.3s;
}
nav ul li a:hover,
nav ul li a:focus {
background-color: #0056b3;
}
/* Bölüm stil ayarları */
section {
padding: 20px;
margin-top: 20px;
}
section#hakkimda, section#iletisim, section#sosyalmedya {
background-color: #ffffff;
}
section#hizmetler article {
background-color: #e9ecef;
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
}
section img {
max-width: 100%;
height: auto;
}
/* Müşteri yorumları stil ayarları */
section#yorumlar blockquote {
border-left: 5px solid #007bff;
padding-left: 20px;
margin-left: 0;
font-style: italic;
}
/* Sosyal medya linkleri ve ikonları */
section#sosyalmedya a {
margin: 0 10px;
}
section#sosyalmedya img {
width: 32px;
height: 32px;
}
/* İletişim formu stil ayarları */
section#iletisim form input,
section#iletisim form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
section#iletisim form button {
background-color: #28a745;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
section#iletisim form button:hover {
background-color: #218838;
}
/* Footer stil ayarları */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
/* Responsive tasarım */
@media (max-width: 768px) {
nav ul li {
display: block;
margin-bottom: 10px;
}
nav ul li a {
display: block;
}
header img {
margin-top: 0;
}
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
color: #333;
background-color: #f8f8f8;
}
/* Header stil ayarları */
header {
background-color: #007bff;
color: #ffffff;
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
}
header img {
max-width: 100%;
height: auto;
margin-top: 10px;
}
/* Navigasyon menü stil ayarları */
nav ul {
padding: 0;
list-style-type: none;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
padding: 5px 10px;
transition: background-color 0.3s;
}
nav ul li a:hover,
nav ul li a:focus {
background-color: #0056b3;
}
/* Bölüm stil ayarları */
section {
padding: 20px;
margin-top: 20px;
}
section#hakkimda, section#iletisim, section#sosyalmedya {
background-color: #ffffff;
}
section#hizmetler article {
background-color: #e9ecef;
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
}
section img {
max-width: 100%;
height: auto;
}
/* Müşteri yorumları stil ayarları */
section#yorumlar blockquote {
border-left: 5px solid #007bff;
padding-left: 20px;
margin-left: 0;
font-style: italic;
}
/* Sosyal medya linkleri ve ikonları */
section#sosyalmedya a {
margin: 0 10px;
}
section#sosyalmedya img {
width: 32px;
height: 32px;
}
/* İletişim formu stil ayarları */
section#iletisim form input,
section#iletisim form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
section#iletisim form button {
background-color: #28a745;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
section#iletisim form button:hover {
background-color: #218838;
}
/* Footer stil ayarları */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
/* Responsive tasarım */
@media (max-width: 768px) {
nav ul li {
display: block;
margin-bottom: 10px;
}
nav ul li a {
display: block;
}
header img {
margin-top: 0;
}
}
