From 402096616df2efdef2d4b67cd3c6e23f8e7d04e0 Mon Sep 17 00:00:00 2001 From: Gorkem Gokcek <140439905+gorkemgokcek@users.noreply.github.com> Date: Sun, 5 Nov 2023 14:48:59 +0300 Subject: [PATCH] =?UTF-8?q?FSWeb-S3G4-Responsive-Design=20Cevaplar=C4=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 0 -> 6148 bytes ReadMe.md | 60 +++++++++++++++++++++++++++++++ about.html | 11 ++++++ contact.html | 11 ++++++ index.css | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 60 +++++++++++++++++++++++++++++++ projects.html | 11 ++++++ 7 files changed, 251 insertions(+) create mode 100644 .DS_Store create mode 100644 ReadMe.md create mode 100644 about.html create mode 100644 contact.html create mode 100644 index.css create mode 100644 index.html create mode 100644 projects.html diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..9b91312a88cd4b3b38f4d5b520041fd2b9f6df49 GIT binary patch literal 6148 zcmeHKO-sW-5Pe%)sOX{K#bdyuAoL%^5B+l4!e8N= z-EEttRq91VW?=SBW_B{WFCm)&U>Y~wI#2^pr3#kTIV=&0i!MmXdp3zi?lJ7wo1H8j zEzDHMUu8g^T^W1mV}Nn^{B8%uSehkCdziK9tG@0|PVS#x_QQDh+xY0L@NSqRrlNvt zjB$q{dSPYkgwbN{=gZc#b|F8_=GB+a2j5CjfvL@&M!PotNn50+AfHLr}7%=6enKZa1f3_}c wPR`nhdP)_MdAY+`3JrS{bFLi4+f*y`M`93TkGVs7DEcE{Y0yC#_*Diz0rwSqssI20 literal 0 HcmV?d00001 diff --git a/ReadMe.md b/ReadMe.md new file mode 100644 index 0000000..0bc0703 --- /dev/null +++ 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 new file mode 100644 index 0000000..eb5a80e --- /dev/null +++ b/about.html @@ -0,0 +1,11 @@ + + + + + + Döküman + + +

Hakkında

+ + \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..70310d6 --- /dev/null +++ b/contact.html @@ -0,0 +1,11 @@ + + + + + + Döküman + + +

İletişim

+ + \ No newline at end of file diff --git a/index.css b/index.css new file mode 100644 index 0000000..0941633 --- /dev/null +++ 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 new file mode 100644 index 0000000..aadfc4c --- /dev/null +++ b/index.html @@ -0,0 +1,60 @@ + + + + + + + Döküman + + + + +
+

Görkem Zeki Gökcek

+ +
+ +
+
+

Görkem Zeki GÖKCEK

+ Projelerim +
+
+
+
+ +

Projelerim 1

+
+
+ +

Projelerim 2

+
+
+ +

Projelerim 3

+
+
+ +

Projelerim 4

+
+
+ +

Projelerim 5

+
+
+ +

Projelerim 6

+
+ +
+ + + + \ No newline at end of file diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..ae517c9 --- /dev/null +++ b/projects.html @@ -0,0 +1,11 @@ + + + + + + Döküman + + +

Projeler

+ + \ No newline at end of file