erdemoflaz/iletisim.html

## iletisim.html
<html>

  <head>
    <title>Kişisel Blog</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Righteous" rel="stylesheet">

  </head>

  <body>

    <div class="container">
      <div class="wrapper">

        <div class="menu">

          <!-- Sol Menü -->
          <div class="sol-menu left">

            <a href="index.html">GÜRKAN ŞEN</a>

          </div> <!-- Sol menü bitiş -->


          <!-- Arama Kutusu -->
          <form action="" class="arama-formu left">

            <input type="text" name="ara" class="arama" placeholder="Arama yap..">

          </form> <!-- Arama bitiş -->


          <!-- Sağ Menü -->
          <div class="sag-menu right">

            <a href="index.html">Ana Sayfa</a>
            <a href="iletisim.html">İletişim</a>
            <a href="index.html">Hakkımda</a>

          </div> <!-- Sağ menü bitiş -->

        </div><!-- Menü bitiş-->

        <div class="kapak">

          <div class="profil-resmi">
            <img src="https://pbs.twimg.com/profile_images/708037743599874048/FgiS8VxX_400x400.jpg" alt="">
          </div>

        </div>

        <form action="">

          <input type="text" name="isim"><br>
          <textarea name="" id="" cols="30" rows="10" placeholder="Bize neden ulaşmak istiyorsun"></textarea>
          <button>Gönder</button>
        </form>


      </div><!-- Wrapper bitiş-->
    </div><!-- Container bitiş-->

  </body>

</html>

## index.html
<html>

  <head>
    <title>Kişisel Blog</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Righteous" rel="stylesheet">

  </head>

  <body>

    <div class="container">
      <div class="wrapper">

        <div class="menu">

          <!-- Sol Menü -->
          <div class="sol-menu left">

            <a href="index.html">GÜRKAN ŞEN</a>

          </div> <!-- Sol menü bitiş -->


          <!-- Arama Kutusu -->
          <form action="" class="arama-formu left">

            <input type="text" name="ara" class="arama" placeholder="Arama yap..">

          </form> <!-- Arama bitiş -->


          <!-- Sağ Menü -->
          <div class="sag-menu right">

            <a href="index.html">Ana Sayfa</a>
            <a href="iletisim.html">İletişim</a>
            <a href="index.html">Hakkımda</a>

          </div> <!-- Sağ menü bitiş -->

        </div><!-- Menü bitiş-->

        <div class="kapak">

          <div class="profil-resmi">
            <img src="https://pbs.twimg.com/profile_images/708037743599874048/FgiS8VxX_400x400.jpg" alt="">
          </div>

        </div>

        <h1 class="baslik">Gürkan Şen</h1>

        <div class="icerik">

          <div class="sol-kolon left susleme">

          </div>


          <div class="sag-kolon right susleme">


          </div>

          <div style="clear:both"></div>

        </div>


      </div><!-- Wrapper bitiş-->
    </div><!-- Container bitiş-->

  </body>

</html>

## style.css
html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #ddd;
  font-family: 'Open Sans', sans-serif;
}

.left {
  float: left;
}

.right {
  float: right;
}

a {
  text-decoration: none;
}

.menu {
  position: fixed;
  background-color: rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(0,0,0,0.8);
  padding: 0 50px;
  height: 80px;
  width: calc(100% - 100px);
  z-index: 9;
}

.menu a {
  line-height: 80px; /* height ile farkı bunun text'e verilmesi. */
  color: #fff;
  font-size: 18px;
}

.sol-menu a {
  font-family: 'Righteous', cursive;
  font-size: 2em;/* 1em = 16px */
}

.arama-formu {
  margin-left: 100px;
  margin-top: 20px;
}

.arama {
  height: 40px;
  width: 400px;
  padding: 10px;
  border: none;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 10px;
  font-size: 18px;
  outline: none;
  font-family: 'Open Sans', sans-serif;
}

.sag-menu {

}

.sag-menu a {
  margin: 0 20px;
}

.kapak {
  height: 400px;
  background-color: #000;
  background: url('https://i.pinimg.com/originals/e7/5b/10/e75b10cfa3456f228a2da876a6022d46.jpg') no-repeat;
  background-size: cover;
  background-position: 0 -350px;
}

.profil-resmi {
  position: absolute;
  left: calc(50% - 128px);
  margin-top: 252px;
}

.profil-resmi img {
  width: 256px;
  border-radius: 100%;
  box-shadow: 0px 10px 50px rgba(0,0,0,0.3);
}

.baslik {
  text-align: center;
  margin-top: 130px;
  font-size: 60px;
  font-weight: bold;
}

.icerik {
  padding: 0 100px;
  margin-bottom: 300px;
}

.susleme {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 5px 50px rgba(0,0,0,0.3);
}

.sol-kolon {
  width: 50%;
  height: 1000px;
}

.sag-kolon {
  width: 35%;
  height: 1000px;
}
	<html>

	<head>
	<title>Kişisel Blog</title>
	<meta charset="UTF-8">

	<link rel="stylesheet" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans\|Righteous" rel="stylesheet">

	</head>

	<body>

	<div class="container">
	<div class="wrapper">

	<div class="menu">

	<!-- Sol Menü -->
	<div class="sol-menu left">

	<a href="index.html">GÜRKAN ŞEN</a>

	</div> <!-- Sol menü bitiş -->



	<!-- Arama Kutusu -->
	<form action="" class="arama-formu left">

	<input type="text" name="ara" class="arama" placeholder="Arama yap..">

	</form> <!-- Arama bitiş -->


	<!-- Sağ Menü -->
	<div class="sag-menu right">

	<a href="index.html">Ana Sayfa</a>
	<a href="iletisim.html">İletişim</a>
	<a href="index.html">Hakkımda</a>

	</div> <!-- Sağ menü bitiş -->

	</div><!-- Menü bitiş-->

	<div class="kapak">

	<div class="profil-resmi">
	<img src="https://pbs.twimg.com/profile_images/708037743599874048/FgiS8VxX_400x400.jpg" alt="">
	</div>

	</div>

	<form action="">

	<input type="text" name="isim"><br>
	<textarea name="" id="" cols="30" rows="10" placeholder="Bize neden ulaşmak istiyorsun"></textarea>
	<button>Gönder</button>
	</form>










	</div><!-- Wrapper bitiş-->
	</div><!-- Container bitiş-->

	</body>

	</html>
	html, body {
	margin: 0;
	padding: 0;
	}

	body {
	background-color: #ddd;
	font-family: 'Open Sans', sans-serif;
	}

	.left {
	float: left;
	}

	.right {
	float: right;
	}

	a {
	text-decoration: none;
	}

	.menu {
	position: fixed;
	background-color: rgba(0,0,0,0.4);
	border-bottom: 1px solid rgba(0,0,0,0.8);
	padding: 0 50px;
	height: 80px;
	width: calc(100% - 100px);
	z-index: 9;
	}

	.menu a {
	line-height: 80px; /* height ile farkı bunun text'e verilmesi. */
	color: #fff;
	font-size: 18px;
	}

	.sol-menu a {
	font-family: 'Righteous', cursive;
	font-size: 2em;/* 1em = 16px */
	}

	.arama-formu {
	margin-left: 100px;
	margin-top: 20px;
	}

	.arama {
	height: 40px;
	width: 400px;
	padding: 10px;
	border: none;
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 10px;
	font-size: 18px;
	outline: none;
	font-family: 'Open Sans', sans-serif;
	}

	.sag-menu {

	}

	.sag-menu a {
	margin: 0 20px;
	}

	.kapak {
	height: 400px;
	background-color: #000;
	background: url('https://i.pinimg.com/originals/e7/5b/10/e75b10cfa3456f228a2da876a6022d46.jpg') no-repeat;
	background-size: cover;
	background-position: 0 -350px;
	}

	.profil-resmi {
	position: absolute;
	left: calc(50% - 128px);
	margin-top: 252px;
	}

	.profil-resmi img {
	width: 256px;
	border-radius: 100%;
	box-shadow: 0px 10px 50px rgba(0,0,0,0.3);
	}

	.baslik {
	text-align: center;
	margin-top: 130px;
	font-size: 60px;
	font-weight: bold;
	}

	.icerik {
	padding: 0 100px;
	margin-bottom: 300px;
	}

	.susleme {
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 5px 50px rgba(0,0,0,0.3);
	}

	.sol-kolon {
	width: 50%;
	height: 1000px;
	}

	.sag-kolon {
	width: 35%;
	height: 1000px;
	}