diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ + diff --git a/Cakes-Co/design/my-design.png b/Cakes-Co/design/my-design.png new file mode 100644 index 00000000..60cfba8d Binary files /dev/null and b/Cakes-Co/design/my-design.png differ diff --git a/Cakes-Co/img/297.jpg b/Cakes-Co/img/297.jpg new file mode 100644 index 00000000..8c9f247a Binary files /dev/null and b/Cakes-Co/img/297.jpg differ diff --git a/Cakes-Co/img/Cheese-kek-tarifi.jpg b/Cakes-Co/img/Cheese-kek-tarifi.jpg new file mode 100644 index 00000000..e312c73c Binary files /dev/null and b/Cakes-Co/img/Cheese-kek-tarifi.jpg differ diff --git a/Cakes-Co/img/Peanut-Butter-Chocolate-Cupcakes_730px-2.jpg.webp b/Cakes-Co/img/Peanut-Butter-Chocolate-Cupcakes_730px-2.jpg.webp new file mode 100644 index 00000000..e1e87a95 Binary files /dev/null and b/Cakes-Co/img/Peanut-Butter-Chocolate-Cupcakes_730px-2.jpg.webp differ diff --git a/Cakes-Co/img/baklava-honey-pisctachio-cupcakes-kays-kitchen.webp b/Cakes-Co/img/baklava-honey-pisctachio-cupcakes-kays-kitchen.webp new file mode 100644 index 00000000..55a5e1c2 Binary files /dev/null and b/Cakes-Co/img/baklava-honey-pisctachio-cupcakes-kays-kitchen.webp differ diff --git a/Cakes-Co/img/diana-polekhina-GokMXT9Dx1U-unsplash.jpg b/Cakes-Co/img/diana-polekhina-GokMXT9Dx1U-unsplash.jpg new file mode 100644 index 00000000..fabac492 Binary files /dev/null and b/Cakes-Co/img/diana-polekhina-GokMXT9Dx1U-unsplash.jpg differ diff --git a/Cakes-Co/img/hamburger-menu.png b/Cakes-Co/img/hamburger-menu.png new file mode 100644 index 00000000..a16ad1dc Binary files /dev/null and b/Cakes-Co/img/hamburger-menu.png differ diff --git a/Cakes-Co/img/icons8-hamburger-menu-100.svg b/Cakes-Co/img/icons8-hamburger-menu-100.svg new file mode 100644 index 00000000..b2ff5638 --- /dev/null +++ b/Cakes-Co/img/icons8-hamburger-menu-100.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Cakes-Co/img/icons8-hamburger-menu-64.svg b/Cakes-Co/img/icons8-hamburger-menu-64.svg new file mode 100644 index 00000000..99fbe00e --- /dev/null +++ b/Cakes-Co/img/icons8-hamburger-menu-64.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Cakes-Co/img/images.jpeg b/Cakes-Co/img/images.jpeg new file mode 100644 index 00000000..cf187ed7 Binary files /dev/null and b/Cakes-Co/img/images.jpeg differ diff --git a/Cakes-Co/img/logo.png b/Cakes-Co/img/logo.png new file mode 100644 index 00000000..1bfc8ddd Binary files /dev/null and b/Cakes-Co/img/logo.png differ diff --git a/Cakes-Co/img/twincupcake-2749204_1280.jpg b/Cakes-Co/img/twincupcake-2749204_1280.jpg new file mode 100644 index 00000000..542e09df Binary files /dev/null and b/Cakes-Co/img/twincupcake-2749204_1280.jpg differ diff --git a/Cakes-Co/img/u1Ivx5yA_1200x.webp b/Cakes-Co/img/u1Ivx5yA_1200x.webp new file mode 100644 index 00000000..2720825a Binary files /dev/null and b/Cakes-Co/img/u1Ivx5yA_1200x.webp differ diff --git a/Cakes-Co/img/yaspasta-rizem.jpg b/Cakes-Co/img/yaspasta-rizem.jpg new file mode 100644 index 00000000..41f5b477 Binary files /dev/null and b/Cakes-Co/img/yaspasta-rizem.jpg differ diff --git a/Cakes-Co/index.html b/Cakes-Co/index.html index 60b1afe1..7bee0f29 100644 --- a/Cakes-Co/index.html +++ b/Cakes-Co/index.html @@ -1,16 +1,91 @@ - - - - - + + Document + + + + + + + + Responsive Cake webpage - - + + + +
+
+ Logo2 + +
+ + +

The best cakes in town
delivered to your door

+
+
+ + +
+ +
+
+

Cakes Time

+

+ Discover our expertly crafted cake selection, a legacy of quality born + from decades of dedication. From classic to unique flavors, we've + delighted generations with our cakes. Join us in celebrating this + tradition of excellence. Choose from our range of cheesecakes, + chocolate cakes, cupcakes, and birthday cakes to satisfy your sweet + cravings, and make each choice an experience to remember. +

+
+ +
+ +
- - - +
+ + + + +
+
- \ No newline at end of file + + + diff --git a/Cakes-Co/style.css b/Cakes-Co/style.css index 6de1b356..4b304c6f 100644 --- a/Cakes-Co/style.css +++ b/Cakes-Co/style.css @@ -1 +1,197 @@ -/* Add your styling here */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + font-family: Arial, sans-serif; + font-size: 1em; +} + +/* header styles */ + +header { + width: 100vw; + /* height: 25vh; */ + display: flex; + flex-direction: column; + background-color: #fad3f8; + color: #b60a7d; /* text color */ + + box-shadow: rgb(153, 161, 153) -5px 20px 30px -10px; +} + +.header-top { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: flex-start; + padding: 1.3rem; +} +nav ul { + display: none; + column-gap: 40px; + font-size: 1.2em; + list-style-type: none; + justify-content: center; + margin: 20px 0; + flex-direction: column; + align-items: center; +} +ul li a { + text-decoration: none; + color: rgb(35, 130, 194); + font-weight: 300; +} +.logo-img { + height: 7em; +} + +.right { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: end; +} +.hamburger-menu { + height: 4em; +} +#menu-icon { + display: none; +} +#menu-icon:checked + nav ul { + display: flex; +} +.right h3 { + font-size: 1.1em; + font-weight: 200; +} +#name { + text-align: right; + color: #c221a7; + font-weight: bold; + text-shadow: #f5f5f5; +} + +/* main styles */ + +main { + margin: 2.6em 0; + padding: 1.3rem; + display: grid; + grid-template-rows: repeat(3, auto); + gap: 2em; + background: linear-gradient( + 135deg, + #e1afebd3 0%, + #f5f5f5 30%, + #83dac465 100% + ); +} + +/* image area styles */ + +.hero { + display: flex; + flex-direction: column; + gap: 2em; +} + +.hero p { + text-align: justify; +} +h1 { + color: #c221a7; +} + +/* image area styles */ + +main img { + border-radius: 1em; + box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; +} +.img-big { + width: 100%; + height: auto; +} + +.cake-section { + display: grid; + gap: 1.3em; + grid-template-columns: repeat(2, auto); + grid-template-rows: repeat(2, 30vw); +} + +.grid-img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* footer styles */ + +footer { + width: 100vw; + height: 25vh; + padding: 1.3rem; + background-color: #fad3f8; + color: #9b5de5; /* text color */ +} +.copyright { + text-align: center; +} +.footer-links { + display: block; + margin-bottom: 1rem; +} +@media screen and (min-width: 540px) { + main { + margin: 2.6em 0; + padding: 1.3rem; + + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 2fr 1fr; + + gap: 2em; + } + + .logo-img { + height: 15em; + } + + .hero { + grid-row: 1/2; + grid-column: 2/-1; + text-align: end; + align-content: flex-start; + gap: 2em; + } + .hero p { + margin-bottom: 2em; + font-size: 1.5em; + } + + .img-area { + grid-row: 1/2; + grid-column: 1/2; + } + + .cake-section { + grid-row: 2/-1; + grid-column: 1/-1; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(1, 15vw); + } + nav ul { + display: flex; + flex-direction: row; + column-gap: 40px; + list-style-type: none; + justify-content: center; + margin: 20px 0; + } + .hamburger-menu { + display: none; + } +} diff --git a/MultiPage-Clone/css/main.css b/MultiPage-Clone/css/main.css index aa561706..913580dd 100644 --- a/MultiPage-Clone/css/main.css +++ b/MultiPage-Clone/css/main.css @@ -1,3 +1,389 @@ /* Add your CSS here */ +* { + margin: 0; + padding: 0; + font-family: "Quicksand", sans-serif; +} +:root { + --dark-beige: #e6ded7; + --light-beige: #f8eee6; + --royal-blue: #0150fd; + --grey-lighter: #eaebee; + --black: #000; + --white: #fff; + --font_3: normal normal bold 27px/1.4em poppins-semibold, poppins, sans-serif; + --font_0: normal normal bold 38px/1.4em poppins-semibold, poppins, sans-serif; + --font_2: normal normal bold 18px/1.4em poppins-semibold, poppins, sans-serif; + --font_5: normal normal 20px/1.4em avenir-lt-w01_35-light1475496, + avenir-lt-w05_35-light, sans-serif; + --font_8: normal normal normal 16px/1.4em avenir-lt-w01_85-heavy1475544, + avenir-lt-w05_85-heavy, sans-serif; + --font_7: normal normal normal 14px/1.4em avenir-lt-w01_85-heavy1475544, + avenir-lt-w05_85-heavy, sans-serif; +} +/* Header*/ + +.blue-logo { + width: 16px; + height: 16px; + background-color: blue; + margin-top: 6px; + margin-right: 10px; +} +header { + background-color: var(--white); + height: 90px; + width: 100vw; +} +.header-items { + width: auto; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +.right-header { + display: flex; + flex-direction: row; +} +.header-main { + display: flex; + flex-direction: column; + gap: 10px; + margin-left: 30px; +} +.slash-span { + display: none; +} +.nav-page { + position: absolute; + top: 0px; + width: 100vw; + min-height: 100vh; + background-color: var(--dark-beige); + z-index: 2; + display: none; +} +nav ul { + margin-top: 90px; + display: flex; + gap: 10px; + font-size: 1.2em; + list-style-type: none; + justify-content: center; + + flex-direction: column; + align-items: center; +} +ul li a { + text-decoration: none; + color: var(--black); +} + +.ham-icon { + height: 30px; + width: auto; +} + +.ham-menu { + position: absolute; + top: 30px; + right: 30px; + z-index: 3; +} +#menu-icon { + display: none; +} +#menu-icon:checked + .nav-page { + display: block; +} + +/* Owner's Photo Styles */ +.owner-photo { + width: 60%; + height: 1000%; + margin: 40px; + margin-left: auto; + margin-right: auto; + + border-radius: 50%; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); + transition: transform 0.3s ease-in-out; +} + +.owner-photo:hover { + transform: scale(1.1); +} + +/*Section Hero*/ + +#hero { + display: flex; + flex-direction: column; +} + +.icons { + width: 25px; + padding: 1em 1em; +} + +.name-card { + font: var(--font_3); + width: 6ch; + text-align: center; + margin: 0px auto 10px; +} + +.job { + min-width: 10ch; +} +.background-color { + width: 100vw; + height: auto; + background-color: var(--dark-beige); + margin-top: 15rem; +} +.me-card { + width: 90vw; + height: 460px; + background-color: var(--light-beige); + + position: absolute; + top: 100px; + left: 5vw; + + display: flex; + flex-direction: column; + align-items: center; +} +.front-card h3 { + display: none; + margin-top: 15px; + margin-bottom: 15px; + font-weight: 500; +} +.blue-line { + width: 81px; + height: 3px; + background-color: blue; + margin: 6px auto 6px; +} +.social-media { + width: 100%; + display: flex; + flex-direction: row; + background-color: var(--white); + justify-content: center; + margin: 10px 0; + padding: 10px 0; +} +.btn { + display: inline-block; + margin: 2em 10px 1em; + + border: 1px solid var(--black); + font-size: 16px; + font-weight: bold; + border-radius: 9em; + background-color: var(--white); + transition: 0.3s; + width: 114px; + height: 33px; +} +.blue-btn { + background-color: var(--royal-blue); + color: var(--white); + border-color: var(--royal-blue); +} + +.btn:hover { + background: var(--royal-blue); + color: var(--white); + border-color: var(--royal-blue); +} + +.blue-btn:hover { + background: var(--white); + color: var(--black); + border-color: var(--black); +} +/*Section content*/ +#content { + margin: 280px 8vw 0px; +} + +.content h2 { + font-size: 40px; + font-family: "Poppins", sans-serif; +} +.content span { + font-family: "Poppins", sans-serif; + line-height: normal; + font: var(--font_5); +} +p { + line-height: 2em; +} +.info { + display: flex; + justify-content: space-evenly; + padding-top: 15px; + margin: 15px 20px; +} +.num .p1 { + font-weight: bold; +} +.mail .p1 { + font-weight: bold; +} +.follow { + font-weight: bold; + margin: 15px 20px; +} +.copy { + line-height: 1em; + font: var(--font_7); +} /* Dont' forget to link this file to your HTML in the */ + +/* 390 pikselden buyukse. */ +@media screen and (min-width: 540px) { + .header-main { + display: flex; + flex-direction: row; + gap: 10px; + margin-left: 30px; + } + .slash-span { + display: inline; + } + + .ham-menu { + display: none; + } + + .nav-page { + display: block; + width: fit-content; + margin: 0px 25px; + min-height: 0px; + height: fit-content; + position: relative; + background: var(--white); + } + #menu-items { + flex-direction: row; + margin: 0px; + } + nav ul { + margin-top: 90px; + margin-right: 60px; + display: flex; + gap: 60px; + font-size: 1.2em; + list-style-type: none; + justify-content: center; + flex-direction: column; + align-items: center; + } + + .info { + margin-top: 200px; + } + .background-color { + width: 45vw; + height: 120vh; + background-color: var(--dark-beige); + margin-top: 1rem; + } + .me-card { + width: 45vw; + height: 105vh; + top: 9rem; + left: 5vw; + } + + .owner-photo { + width: 50%; + height: 50%; + margin: 40px; + } + .content { + margin-right: 6em; + position: absolute; + top: 12em; + left: 53vw; + } + .content h2 { + letter-spacing: normal; + line-height: 7rem; + font-size: 6em; + margin-bottom: 0.5em; + } + .content span { + font-size: 30px; + + margin-top: 4em; + } + .market { + margin-top: 7em; + } + .front-card h3 { + display: block; + } + .buttons { + position: absolute; + left: 43em; + top: 16em; + display: flex; + flex-direction: row; + justify-content: space-evenly; + } + .info { + grid-column: 2/4; + display: flex; + justify-content: space-evenly; + padding-top: 5px; + margin: 15px 20px; + } + + footer { + padding-right: 50px; + width: 100vw; + display: grid; + grid-template-columns: 50vw 1fr 1fr 1fr; + grid-template-rows: auto auto; + gap: 10px; + text-align: center; + } + + .copy { + grid-column: 1/2; + } + .c-1 { + grid-row: 1/2; + } + .c-2 { + grid-row: 2/3; + } + + .follow { + grid-column: 4/-1; + } + + .social-media { + display: flex; + justify-content: space-evenly; + margin: 2em 0; + padding: 4px 0; + } + footer .social-media a img { + width: 15px; + } + + .icons { + width: 40px; + height: 40px; + } +} diff --git a/MultiPage-Clone/image/GettyImages-1132119301.jpg b/MultiPage-Clone/image/GettyImages-1132119301.jpg new file mode 100644 index 00000000..e03dd01d Binary files /dev/null and b/MultiPage-Clone/image/GettyImages-1132119301.jpg differ diff --git a/MultiPage-Clone/image/IT.jpeg b/MultiPage-Clone/image/IT.jpeg new file mode 100644 index 00000000..608b0ccb Binary files /dev/null and b/MultiPage-Clone/image/IT.jpeg differ diff --git a/MultiPage-Clone/image/menu-burger-horizontal-svgrepo-com.svg b/MultiPage-Clone/image/menu-burger-horizontal-svgrepo-com.svg new file mode 100644 index 00000000..ba43facf --- /dev/null +++ b/MultiPage-Clone/image/menu-burger-horizontal-svgrepo-com.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/MultiPage-Clone/image/robot.png b/MultiPage-Clone/image/robot.png new file mode 100644 index 00000000..d6fc13d6 Binary files /dev/null and b/MultiPage-Clone/image/robot.png differ diff --git a/MultiPage-Clone/image/wix-logo.png b/MultiPage-Clone/image/wix-logo.png new file mode 100644 index 00000000..d20d6b63 Binary files /dev/null and b/MultiPage-Clone/image/wix-logo.png differ diff --git a/MultiPage-Clone/index.html b/MultiPage-Clone/index.html index cd704c69..96b04f95 100644 --- a/MultiPage-Clone/index.html +++ b/MultiPage-Clone/index.html @@ -1,21 +1,181 @@ - - - - + + + + + + + + + + Responsive grid project - + + + +
+
+
+ +

Zeliha Pala

+
+

+ / FULL-STACK DEVELOPER +

+
+ + + + + + +
+ +
+ +
+
+
+ profile photo + +
+
+

Zeliha Pala

+
+

FULL-STACK DEVELOPER

+
+ +
+ + +
+
+ + +
+
+
+

Hello

+ Here's who I am & what I do +

+ I'm a full-stack developer with skills in both front-end and + back-end technologies. +
+ + Explore my portfolio to witness a collection of projects that + showcase my ability to blend creativity and technical + proficiency. Each project represents a unique challenge. You'll + find examples of web applications, mobile apps, and backend + systems, all meticulously designed and skillfully implemented. +

+
+
+
+
+
+ + - + - \ No newline at end of file + + +