Workintech · gorkemgokcek · Nov 5, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/ReadMe.md b/ReadMe.md
@@ -0,0 +1,60 @@
+# Flexbox Modül Görevi
+
+Bu görev, öğrencinin kendi başına yapacağı pekiştirme görevidir.
+
+## Kullanıcı arayüzü ve Git
+
+## Hedefler
+
+- bir CSS stillemesi uygulayın ve tarayıcılar arası geliştirme için neden önemli olduğunu anlayın
+- box modelin tüm özelliklerini tanımlayın ve açıklayın
+- flexbox'ın bir modül olduğunu açıklayın ve anlayın
+- flexbox'ta flexcontainer özelliklerinin anlaşıldığını göstermek
+
+## Giriş
+
+Bu görevde, bugün gördüğünüz CSS ilkelerini kullanarak seçtiğiniz bir wireframe örneğine dayalı basit bir portföy web sitesi oluşturacaksınız.
+
+Portföy web siteleri, çalışmalarınızı arkadaşlarınıza, ailenize ve gelecekteki işverenlerinize göstermenin harika bir yoldur. Workintech'te ilerledikçe bu siteyi gurur duyduğunuz projelerle güncelleyebilirsiniz. Benzer şekilde, stili değiştirebilir, bir blog sayfası ekleyebilirsiniz, olasılıklar gerçekten sonsuzdur.
+
+## Açıklamalar
+
+### Görev 1: Git ile Projeyi yükleyin
+
+Aşağıdaki adımları takip edin.:
+
+- [ ] Repoyu forklayın ve klonlayın.
+- [ ] BRANCH OLUŞTURMAYIN. Güncellemelerinizi main/master'a pushlayacaksınız.
+- [ ] konsoldan repo klasörünüze girin ve VS Code'u açmak için `code .` girin.
+- [ ] VS Code'un sol tarafındaki Eklentiler bölümünden Live Server eklentisini indirin. Eklenti yüklendikten sonra sağ altta bulunan "Go Live" butonuna basarak HTML dosyanızı çalıştırabilirsiniz.
+- [ ] Çalışmanızı düzenli commitlerle main branch'e aktarın. 
+
+### Görev 2: Minimum Uygulanabilir Ürün
+
+Deponuz kurulduktan sonra, seçtiğiniz wireframe'lerden biriyle bir portföy sitesi oluşturmak için bugün öğrendiklerinizi uygulayın. **Yukarıdaki "Wireframe Seçenekleri" klasöründeki üç wireframe'den herhangi birini seçebilirsiniz.** Tüm projeniz, seçtiğiniz wireframe'e benzemeli ve aşağıdaki unsurların tümünü içermelidir:
+
+- [ ]  `Hakkında`, `Projeler`, ve `İletişim` sayfalarına bağlantı veren bir menü çubuğu
+- [ ]  Flexbox ile oluşturulmuş bir proje galerisi -  rasgele image bağlantısıyla şimdilik projelerim galerisinde rasgele imageler kullanabilirsiniz; rasgele image linki için tıklayın: https://picsum.photos/ ya da kullanmak istediğiniz başka görseller kullanabilirsiniz.
+- [ ]  Verilen örnek text yerine kendinizle ilgili bilgiler
+- [ ]  Projeler sayfasına bağlantılanan `Projelerim` butonu
+- [ ]  İletişim sayfasına bağlantılanan `Bana ulaş` butonu
+- [ ]  Anasayfanızın footerında sosyal medya linkeriniz (Instagram, linkedIn, Twitter)
+
+### Görev 3: Ek Görevler
+
+Aşağıdaki hedefler, bilginizi artırmak için hazırlanmıştır ve bugün sınıfta öğrenilenlerin ötesinde ek araştırma gerektirebilir.
+
+- [ ] Web sayfalarınızı değişik tarayıcı genişliklerine(width) göre yapın (mobil sayfası dahil)
+- [ ] CSS animasyonları ekleyin
+- [ ] Şu sayfalar için kendi çerçevlerinizi oluşturun ve çalıştırın `Hakkında`, `Projeler`, ve `İletişim` 
+
+## SSS
+
+**WireFrame nedir? Nasıl kullanırım?**
+
+*WireFrame, web sayfası stillerini, içeriğini ve işlevselliğini ana hatlarıyla belirtmek için kullanılır.. UX tasarımcıları, fikirlerini web geliştiricilerine açıklamak için genellikle WireFrame kullanır. Yazılım üzerinde elle çizilmiş veya taklit edilmiş bu WireFrame'ler, tasarımları tekrarlamanın ucuz ve kolay bir yoludur.. Bu projede aşağıdaki gibi bir WireFrame seçecek ve elemanları HTML ve CSS ile oluşturacaksınız..*
+
+![bknz](/WireFrame Örnekleri/Seçenek 1.jpeg)
+
+
+
diff --git a/about.html b/about.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Döküman</title>
+</head>
+<body>
+    <h1> Hakkında </h1>
+</body>
+</html>
diff --git a/contact.html b/contact.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=    <h1> ABOUT </h1>, initial-scale=1.0">
+    <title>Döküman</title>
+</head>
+<body>
+    <h1> İletişim </h1>
+</body>
+</html>
diff --git a/index.css b/index.css
@@ -0,0 +1,98 @@
+header nav a{
+
+    padding: 1em;
+    background-color: rgb(204, 198, 198);
+    text-decoration: none;
+
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+header nav {
+    display: flex;
+}
+
+main {
+width: 80vw;
+height: 50vw;
+background-image: url(https://picsum.photos/800/600);
+margin: auto;
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+main a{
+    padding: 1em;
+    text-decoration: none;
+    background-color: whitesmoke;
+    display: block;
+    margin: auto;
+    width: 100px;
+    text-align: center;
+    border-radius: 10px;
+}
+main h1 {
+    text-shadow: 2px 2px white;
+}
+
+.container-gallery {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: 50px 0;
+
+}
+
+.container-gallery div {
+    width: 30%;
+
+}
+
+.container-gallery img {
+    width: 100%;
+}
+
+.container-gallery h3 {
+    padding: 1em;
+    text-decoration: none;
+    background-color: rgb(204, 198, 198);
+    display: block;
+    margin: auto;
+    width: 100px;
+    text-align: center;
+    border-radius: 10px;
+}
+
+footer {
+    background-color: rgb(204, 198, 198);
+    padding: 50px;
+}
+
+footer a {
+    padding: 1em;
+    text-decoration: none;
+    background-color:whitesmoke;
+    display: block;
+    margin: auto;
+    width: 100px;
+    text-align: center;
+    border-radius: 10px;
+
+}
+
+@media screen and (max-width: 800px) and 
+(min-width: 500px) {
+    header {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+    }
+}
+
+
diff --git a/index.html b/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+    <link rel="stylesheet" href="style/index.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Döküman</title>
+
+</head>
+<body>
+
+    <header>
+        <h2>Görkem Zeki Gökcek</h2>
+        <nav>
+            <a href="index.html">Ana Sayfa</a>
+            <a href="about.html">Hakkında</a>
+            <a href="contact.html">İletişim</a>
+            <a href="projects.html">Projeler</a>
+        </nav>
+    </header>
+
+<main>
+    <div>
+        <h1>Görkem Zeki GÖKCEK</h1>
+        <a href="projects.html">Projelerim</a>
+    </div>
+</main>
+<section class="container-gallery">
+    <div>
+        <img src="https://picsum.photos/600?1" alt="">
+        <h3>Projelerim 1</h3>
+    </div>
+    <div>
+        <img src="https://picsum.photos/600?2" alt="">
+        <h3>Projelerim 2</h3>
+    </div>
+    <div>
+        <img src="https://picsum.photos/600?3" alt="">
+        <h3>Projelerim 3</h3>
+    </div>
+    <div>
+        <img src="https://picsum.photos/600?4" alt="">
+        <h3>Projelerim 4</h3>
+    </div>
+    <div>
+        <img src="https://picsum.photos/600?5" alt="">
+        <h3>Projelerim 5</h3>
+    </div>
+    <div>
+        <img src="https://picsum.photos/600?6" alt="">
+        <h3>Projelerim 6</h3>
+    </div>
+
+</section>
+
+<footer>
+    <a href="contact.html">Bana Ulaş</a>
+</footer>
+</body>
+</html>
diff --git a/projects.html b/projects.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Döküman</title>
+</head>
+<body>
+    <h1> Projeler </h1>
+</body>
+</html>