From cdf74b4e7a1297ecd622d6597f7d7b8aa7f6286c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Levent=20Sencer=20=C5=9Eahin?= Date: Sun, 19 Jun 2022 09:50:10 +0300 Subject: [PATCH] =?UTF-8?q?Proje=20dosya=20hiyerar=C5=9Fisi=20kuruldu.=20C?= =?UTF-8?q?lass=20ve=20Id=20isimlendirmeleri=20ingilizceye=20=C3=A7evrildi?= =?UTF-8?q?.=20Util=20class'lar=20eklendi.=20Yorum=20sat=C4=B1rlar=C4=B1?= =?UTF-8?q?=20eklendi.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css => css/style.css | 260 ++++++++++++++++++++----------------- foto2.jpg => img/foto2.jpg | Bin foto3.jpg => img/foto3.jpg | Bin foto4.jpg => img/foto4.jpg | Bin foto5.jpg => img/foto5.jpg | Bin index.html | 123 +++++++++--------- 6 files changed, 207 insertions(+), 176 deletions(-) rename style.css => css/style.css (51%) rename foto2.jpg => img/foto2.jpg (100%) rename foto3.jpg => img/foto3.jpg (100%) rename foto4.jpg => img/foto4.jpg (100%) rename foto5.jpg => img/foto5.jpg (100%) diff --git a/style.css b/css/style.css similarity index 51% rename from style.css rename to css/style.css index 8a06bfb..4fbadb3 100644 --- a/style.css +++ b/css/style.css @@ -1,15 +1,17 @@ -*{ +* { margin: 0px; padding: 0px; box-sizing: border-box; } -body, html{ + +body, +html { height: 100%; } -.container input[type=text]{ - float:inline-end; - padding: 2px; - border:none; + +.container input[type=text] { + padding: 5px; + border: none; margin-top: 3px; margin-right: 7px; font-size: 17px; @@ -17,87 +19,76 @@ body, html{ border-radius: 10px; } -nav{ - position: absolute; + +nav { height: 100px; - width: 100%; - text-align: center; - line-height: 140px; + line-height: 140px; z-index: 2; } -nav a{ +nav a { color: rgb(23, 19, 11); font-family: 'Rubik', sans-serif; text-decoration: none; font-size: 20px; margin-left: 10px; padding: 5px 8px; - + } -nav a:hover{ + +nav a:hover { background-color: blanchedalmond; border-radius: 10px; } -footer{ + +footer { background-color: rgb(6, 6, 5); } -.gorsel{ +.image { height: 100%; background-color: lightblue; background-size: cover; background-attachment: fixed; } -.bant{ + +.seperator { height: 50%; background-color: rgb(117, 162, 117); } -#gor1{ - background-image: url("foto5.jpg"); -} -#gor2{ - background-image: url("foto2.jpg"); +#works { + background-image: url("../img/foto2.jpg"); } -#gor3{ - background-image: url("foto4.jpg"); +#contact { + background-image: url("../img/foto4.jpg"); } -.anasayfa{ - position: absolute; - float: left; + +#home { + background-image: url("../img/foto5.jpg"); } -.anayazi{ - width: 100%; - height: 100%; +.home-content { margin-top: 250px; z-index: 1; - text-align: center; - -} -.anaFiltre{ - background-color: black; - width: 100%; - height: 100%; - z-index: 0; - opacity: 0.34; } -.anayazi h1{ + +.home h1 { font-family: 'Tiro Devanagari Marathi', serif; font-size: 50px; color: antiquewhite; } -.anayazi p{ + +.home p { color: wheat; font-size: 10px; font-family: 'Rubik', sans-serif; margin-bottom: 10px; } -.anayazi span{ +.home span { color: wheat; padding: 10px 10px; background-color: brown; @@ -106,44 +97,42 @@ footer{ border-radius: 5px; } -.anayazi a{ +.home a { text-decoration: none; } -.anayazi span:hover{ +.home span:hover { background-color: white; - color:brown; - cursor:pointer -} -.ebautas{ - position: absolute; - float: left; + color: brown; + cursor: pointer } -.ebautasz{ - width: 100%; - height: 100%; + +.ebautasz { margin-top: 50px; z-index: 5; - text-align: center; } -.ebautaszz{ + +.ebautaszz { background-color: black; height: 50%; z-index: 0; opacity: 0.34; } -.ebautasz h2{ + +.ebautasz h2 { font-family: 'Tiro Devanagari Marathi', serif; font-size: 20px; color: whitesmoke; } -.ebautasz p{ + +.ebautasz p { color: wheat; font-size: 10px; font-family: 'Rubik', sans-serif; margin-bottom: 50px; } -.ebautasz span{ + +.ebautasz span { color: wheat; padding: 10px 10px; background-color: brown; @@ -151,67 +140,104 @@ footer{ font-family: 'Rubik', sans-serif; border-radius: 5px; } -.ebautasz a{ + +.ebautasz a { text-decoration: none; } -.ebautasz span:hover{ + +.ebautasz span:hover { background-color: wheat; color: brown; } -.sosyalbutonlar{ - margin-top: 5px; - display: inline-block; - position: relative; - left: 20px; -} - -.sosyalbutonlar a { - background:#a1a1a1; - text-decoration: none; - color: #FFF; - width: 40px; - height: 40px; - display: inline-block; - border-radius: 10px; - margin-right: 20px; - font-size: 30px; - overflow: hidden; - position: relative; - line-height: 40px; - text-align: center; -} - -.sosyalbutonlar a{ - transition: transform 0.4s linear 0s, - border-top-left-radius 0.1s linear 0s, - border-top-right-radius 0.1s linear 0.1s, - border-bottom-right-radius 0.1s linear 0.2s, - border-bottom-left-radius 0.1s linear 0.3s; - -} - -.sosyalbutonlar .facebook:hover { - background-color: #3b5998; - transform: rotate(360deg); - border-radius: 50%; -} - - .sosyalbutonlar .twitter:hover { - background-color: #00aced; - transform: rotate(360deg); - border-radius: 50%; -} - - - - .sosyalbutonlar .linkedin:hover { - background-color: #00aced; - transform: rotate(360deg); - border-radius: 50%; -} - - .sosyalbutonlar .github:hover { - background-color: rgb(32, 31, 31); - transform: rotate(360deg); - border-radius: 50%; -} \ No newline at end of file + +.socials-btn { + margin-top: 5px; + display: inline-block; + position: relative; + left: 20px; +} + +.socials-btn a { + background: #a1a1a1; + text-decoration: none; + color: #FFF; + width: 40px; + height: 40px; + display: inline-block; + border-radius: 10px; + margin-right: 20px; + font-size: 30px; + overflow: hidden; + position: relative; + line-height: 40px; + text-align: center; +} + +.socials-btn a { + transition: transform 0.4s linear 0s, + border-top-left-radius 0.1s linear 0s, + border-top-right-radius 0.1s linear 0.1s, + border-bottom-right-radius 0.1s linear 0.2s, + border-bottom-left-radius 0.1s linear 0.3s; + +} + +.socials-btn .facebook:hover { + background-color: #3b5998; + transform: rotate(360deg); + border-radius: 50%; +} + +.socials-btn .twitter:hover { + background-color: #00aced; + transform: rotate(360deg); + border-radius: 50%; +} + +.socials-btn .linkedin:hover { + background-color: #00aced; + transform: rotate(360deg); + border-radius: 50%; +} + +.socials-btn .github:hover { + background-color: rgb(32, 31, 31); + transform: rotate(360deg); + border-radius: 50%; +} + +/* UTILS */ +.pos-absolute { + position: absolute; + +} + +.left { + float: left; +} + +.clear { + clear: both; +} + +.w-100 { + width: 100%; +} + +.h-100 { + height: 100%; +} + +.text-center { + text-align: center; +} + +.overlay { + background-color: black; + width: 100%; + height: 100%; + z-index: 0; + opacity: 0.34; +} + +/* ########### */ \ No newline at end of file diff --git a/foto2.jpg b/img/foto2.jpg similarity index 100% rename from foto2.jpg rename to img/foto2.jpg diff --git a/foto3.jpg b/img/foto3.jpg similarity index 100% rename from foto3.jpg rename to img/foto3.jpg diff --git a/foto4.jpg b/img/foto4.jpg similarity index 100% rename from foto4.jpg rename to img/foto4.jpg diff --git a/foto5.jpg b/img/foto5.jpg similarity index 100% rename from foto5.jpg rename to img/foto5.jpg diff --git a/index.html b/index.html index a291750..02a3271 100644 --- a/index.html +++ b/index.html @@ -1,64 +1,69 @@ - - - - - - Web Site - - - - - - - - - - - - -
-
-

Doğadan Odanıza

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex quos fugit nisi nulla, optio culpa sed est error neque nostrum aspernatur officiis impedit. Rem recusandae quae suscipit magni nam cum.

- get more info -
-
- -
-
-
-

Biz kimiz neler yapıyoruz?

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis omnis sapiente ex commodi ea, sed at inventore architecto molestias? Laboriosam.

- Ne var ne yok? -
-
-
-
-
-
-
- +
+
+
+
- + + \ No newline at end of file