Yusufcan Elbeyli

├── README.md ├── css ├── global.css ├── main.css ├── mobile.css └── tablet.css ├── images ├── 300x300.jpg ├── Thumbs.db └── react.png └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Hi every, I'm with you with my first project! 2 | 3 | #### In my first project, I tried to create a portfolio site using only HTML and CSS. 4 | 5 | #### Click demo to try it by yourself! 6 | 7 | #### You can view the site here [Click Me](https://ycelbeyli-first-project.netlify.app/) 8 | 9 | # Topics 10 |

11 | 12 | 13 |

14 | -------------------------------------------------------------------------------- /css/global.css: -------------------------------------------------------------------------------- 1 | /* Text */ 2 | 3 | .text-center { 4 | text-align: center; 5 | } 6 | 7 | .heading-small { 8 | font-size: 1.25rem; 9 | } 10 | 11 | .heading-medium { 12 | font-size: 1.5rem; 13 | } 14 | 15 | .heading-big { 16 | font-size: 1.75rem; 17 | } 18 | 19 | /* Colors */ 20 | 21 | .bg-dark-orange { 22 | background: orangered 23 | } 24 | 25 | .bg-light-orange { 26 | background: orange; 27 | } 28 | 29 | 30 | /* Buttons */ 31 | 32 | .btn { 33 | margin-top: 1rem; 34 | padding: 0.5rem; 35 | border-radius: 10px; 36 | letter-spacing: 1px; 37 | } 38 | 39 | .btn-primary { 40 | background: orange; 41 | } 42 | 43 | .btn-primary:hover { 44 | color: orange; 45 | background: white; 46 | border: 0.5px solid orange; 47 | } 48 | 49 | /* Forms */ 50 | 51 | .form-group { 52 | padding: 0.25rem 0; 53 | } 54 | 55 | .form-group label { 56 | display: block; 57 | } 58 | 59 | .form-control { 60 | width: 100%; 61 | padding: 0.4rem; 62 | font-size: 1rem; 63 | resize: none; 64 | border-radius: 5px; 65 | } 66 | 67 | 68 | 69 | /* Container */ 70 | 71 | .container { 72 | max-width: 1350px; 73 | margin: 0 auto; 74 | } 75 | 76 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | a { 9 | /* Sayfada altı çizili olan linklerin çizgisini kaldırma */ 10 | text-decoration: none; 11 | color: white; 12 | } 13 | 14 | 15 | html { 16 | font-family: 'Poppins', sans-serif; 17 | } 18 | 19 | /* Navbar Section */ 20 | 21 | #navbar { 22 | color: white; 23 | display: flex; 24 | justify-content: space-between; 25 | align-items: center; 26 | padding: 0 0.75rem; 27 | height: 70px; 28 | border-bottom: 0.5px solid grey; 29 | letter-spacing: 0.5px; 30 | } 31 | 32 | #navbar ul { 33 | list-style: none; 34 | display: flex; 35 | align-items: center; 36 | } 37 | 38 | #navbar ul li a { 39 | padding: 0.5rem; 40 | } 41 | 42 | #navbar ul li a:hover { 43 | color: orange; 44 | background:white; 45 | border-radius: 10px; 46 | border: 0.5px solid orange; 47 | 48 | } 49 | 50 | 51 | /* Home Section */ 52 | 53 | #home { 54 | display: flex; 55 | flex-direction: column; 56 | justify-content: center; 57 | align-items: center; 58 | padding: 2.5rem; 59 | border-bottom: 1px solid black; 60 | } 61 | 62 | #home img { 63 | max-width: 100%; 64 | height: auto; 65 | border-radius: 100%; 66 | } 67 | 68 | #home .name h2 { 69 | margin: 0.50rem; 70 | } 71 | 72 | #home .name p { 73 | font-style: italic; 74 | } 75 | 76 | /* Training */ 77 | 78 | #experience { 79 | color:blanchedalmond; 80 | padding: 1rem; 81 | border-bottom: 1px solid black; 82 | } 83 | 84 | #experience .items { 85 | display: flex; 86 | justify-content: space-between; 87 | align-items: center; 88 | } 89 | 90 | #experience .items .item { 91 | width: 33%; 92 | text-align: center; 93 | padding: 0.5rem; 94 | 95 | } 96 | 97 | #experience .items .item:hover { 98 | color: orangered; 99 | opacity: 1.5; 100 | 101 | 102 | } 103 | 104 | 105 | /* Languages */ 106 | 107 | #languages { 108 | color:black; 109 | background-color: azure; 110 | padding: 1rem; 111 | border-bottom: 1px solid black; 112 | 113 | 114 | } 115 | 116 | .languages { 117 | text-align: center; 118 | display: flex; 119 | flex-direction: column; 120 | padding: 0.5rem; 121 | 122 | } 123 | 124 | /* Contact */ 125 | 126 | #contact { 127 | color: white; 128 | padding: 1rem; 129 | } 130 | 131 | #contact .contact-form { 132 | max-width: 700px; 133 | margin-left: auto; 134 | margin-right: auto; 135 | display: flex; 136 | flex-direction: column; 137 | 138 | } 139 | 140 | #contact .contact-form ul { 141 | list-style-type: none; 142 | display: flex; 143 | margin-top: 1rem; 144 | align-self: center; 145 | } 146 | 147 | #contact .contact-form ul li a { 148 | padding: 1rem; 149 | font-size: 2rem; 150 | } 151 | 152 | #contact .contact-form ul li a:hover { 153 | opacity: 0.8; 154 | } 155 | 156 | .btn-block { 157 | max-width: 700px; 158 | margin-left: auto; 159 | margin-right: auto; 160 | display: flex; 161 | flex-direction: column; 162 | color: black; 163 | padding: 1rem; 164 | border-radius: 5px; 165 | align-self: center; 166 | 167 | } 168 | 169 | .btn-block:hover { 170 | opacity: 0.7; 171 | } 172 | 173 | 174 | -------------------------------------------------------------------------------- /css/mobile.css: -------------------------------------------------------------------------------- 1 | #navbar { 2 | flex-direction: column; 3 | padding-top: 0.50rem; 4 | padding-bottom: 1.25rem; 5 | overflow: hidden; 6 | height: 150px; 7 | 8 | } 9 | 10 | #training .items { 11 | flex-direction: column; 12 | } 13 | 14 | #training .items .item { 15 | width: 100%; 16 | } -------------------------------------------------------------------------------- /css/tablet.css: -------------------------------------------------------------------------------- 1 | #navbar { 2 | flex-direction: column; 3 | padding-top: 0.1rem; 4 | padding-bottom: 0.5rem; 5 | overflow: hidden; 6 | height: 112px; 7 | } -------------------------------------------------------------------------------- /images/300x300.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ycelbeyli/HTML-and-CSS-Project-1/a8d40330b97c4a6c4f7420bc2fe6aec251382e83/images/300x300.jpg -------------------------------------------------------------------------------- /images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ycelbeyli/HTML-and-CSS-Project-1/a8d40330b97c4a6c4f7420bc2fe6aec251382e83/images/Thumbs.db -------------------------------------------------------------------------------- /images/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ycelbeyli/HTML-and-CSS-Project-1/a8d40330b97c4a6c4f7420bc2fe6aec251382e83/images/react.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Yusufcan Elbeyli | First Project 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

37 | 38 |

39 | 52 | 53 |

54 | 55 | 56 |

57 | 58 |

59 | 60 |