_Odev_4

homeworks/_Odev_4_Templete/README.md

@@ -0,0 +1,14 @@
+# IBB Ecodation Frontend
+-----------
+## Author Hacer K.
+## Date : 2 July 2023
+-----------
+## Odev 4  
+
+### Navbar bağlantıları için scrool spy uygulandı.
+### İletişim alanı için ayrıca section açıldı ve col-md-6 olarak ikiye bölündü.
+### İletişim alanının soluna Google Map, sağına input ve textarea alanları eklendi.
+### Türkçe / İngilizce için navbar a dropdown eklendi. 
+### Dark mod, kayıt ol/giriş yap ve dil seçimi ile ilgili ikonlar navbarın en sağına alındı. 
+
+

homeworks/_Odev_4_Templete/style.css

@@ -0,0 +1,239 @@
+/* Project One Page
+Author : HK
+Date : 2 Temmuz 2023
+Version : v.1
+*/
+
+/*######################################*/
+/* Root */
+
+:root{
+    --templeteBgColor:rgb(43,43,43);
+}
+
+/*######################################*/
+/* Common Properties */
+*{
+    margin:0;
+    padding: 0px;
+    box-sizing: border-box;  
+}
+
+html {
+font-size: 20px;
+}
+
+body {
+    font-family: 'Manrope', sans-serif;
+    line-height: 1.2;
+    position: relative;
+}
+
+a{
+    text-decoration: none;
+}
+
+ul{
+    list-style: none;
+}
+img{
+    max-width: 100%;
+    height: auto;  
+}
+img:hover{
+    opacity: 0.98;
+    box-shadow: 1px 1px 4px 1 px red;
+    transition: 3s all; /* geçiş efekti : uygulanacak geçiş efekti ve efekt süresi belirtiliyor */
+    cursor: pointer; /*resmin üzerine gelindiğinde ell işareti çıkması için*/
+}
+
+i{
+    font-size: 1.5rem;
+}
+
+.my_clearfix::after{
+    content: "";
+    display: block;
+    clear: both;
+}
+
+.myHeading{
+    text-align: center;
+    text-decoration: underline;
+    margin-bottom: 2rem;
+    text-transform: uppercase;
+    text-shadow: 0.4px -0.9px  rgba(0,0,0,.9);
+    opacity: 0.7;
+
+}
+
+/* my special size */
+.fSize1{
+    font-size: 1rem;;
+}
+.fSize2{
+    font-size: 2rem;;
+}
+.fSize3{
+    font-size: 3rem;;
+}
+.fSize4{
+    font-size: 4rem;;
+}
+
+
+/*Line-clamp*/
+/*uzun veriler için sadece belirtilen kadar satır gösterir*/
+.line-clamp4{
+    -webkit-line-clamp: 4; 
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;  
+}
+
+.line-clamp5{
+    -webkit-line-clamp: 5; 
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;  
+}
+
+.line-clamp8{
+    -webkit-line-clamp: 8; 
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;  
+}
+.line-clamp10{
+    -webkit-line-clamp: 10; 
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;  
+}
+
+.line-clamp20{
+    -webkit-line-clamp: 20; 
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;  
+}
+
+/* Navbar */
+
+#navbar_id{
+    font-size: 0.8rem;
+}
+.dark_mode{
+    background-color: var(--templeteBgColor);
+    color: #fff;
+}
+
+#navbar-left{
+    font-size: 0.5rem;
+}
+
+
+/*######################################*/
+/* Header */
+
+header{
+    background-image: url('./img/bg-3.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: 50% 50%;
+    height: 80vh; /*görünen ekran kadar ölçüler*/
+    padding-top: 4rem ;
+
+}
+
+/* About Us / Hakkımızda */
+.aboutBox{
+
+    background-color: black;
+    opacity: 0.6;
+    padding: 1rem;
+    border-radius: 15px;
+    box-shadow: 2px 4px 15px white; 
+
+}
+
+#aboutUs{
+    background-color: transparent;
+    background-image: url(img/bg-4.jpg);
+    background-size: cover;
+    height: auto;
+    padding: 2rem;
+    background-repeat: no-repeat;
+    background-attachment: fixed !important;
+}
+
+#aboutUs > h2, p{
+    color: white !important;
+}
+
+/* Our Works / Çalışmalarımız  */
+#ourWorks{
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+    background-color: #E9ECEF;
+}
+
+#ourWorks > .container > .row > .text-center > p {
+    color: black !important;
+}
+
+#ourWorks i{
+    color: blue;
+    font-size: 5rem ;
+}
+
+
+/* Newspaper */
+#newspaper {
+    height: auto;
+    padding: 3rem;
+    background-color: #c8cbdb;
+}
+
+#newspaper p{
+    color:black !important;
+    text-align: justify;
+}
+
+/* Blog */
+
+#blog {
+    background-color: #a0a8b9;
+    padding: 3rem;
+}
+
+#contact {
+    padding: 3rem;
+    height: auto;
+    background-color:	#c8cbdb;
+
+}
+
+.contact-form{
+    font-size: small;
+}
+
+
+/* Footer */
+footer{
+    min-height: auto;
+    width: auto;
+    color:white;
+}
+
+/* Back Top */
+#back_top{
+    position: fixed;
+    right:0;
+    bottom:0;
+   margin: 1rem;
+}
+
+#back_top:hover{
+    opacity: 0.8;
+}

homeworks/_Odev_4_Templete/templete.js

@@ -0,0 +1,26 @@
+//Dark Mode
+
+let darkModu=()=>{
+   document.body.classList.toggle("dark_mode");
+}
+
+// input search
+$(document).ready(function(){
+   const searchApi=["Adana","Balikesir","Çorum","Denizli","Diyarbakır","Edirne","Malatya","Van"];
+   $("#tags").autocomplete({
+       source:searchApi
+   })
+   }); //end 
+
+// Footer
+let newDate=()=>{
+   const date=new Date().getFullYear();
+
+   // JS DOM
+//document.getElementById("date_id").innerHTML=new Date().getFullYear();
+
+// Jquery DOM
+$("#date_id").html(date);
+}
+newDate()
+

homeworks/_Odev_4_Templete/util/Persist.txt

@@ -0,0 +1 @@
+Emmet  => https://docs.emmet.io/cheat-sheet/