├── Pro-file-cut.jpg ├── README.md ├── index.html └── style.css /Pro-file-cut.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/-1-Responsive-Portfolio-/HEAD/Pro-file-cut.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Picsart_23-09-22_15-13-20-007](https://github.com/creatoraashu/-1-Responsive-Portfolio-/assets/130897584/b8dcc233-d5c0-4080-a687-5ec3f393c877) 2 | # -1-Responsive-Portfolio- 3 | Creating a Responsive Portfolio with awesome design using HTML & CSS. 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | Ashutosh Python | Responsive Portfolio 13 | 14 | 15 | 31 |
32 |
33 |
34 |

HELLO

35 |

36 | I'm Ashutosh
a Web Developer 37 |

38 |

39 | Welcome to portfolio of Ashutosh Singh, a skilled and 40 | creative web developer with a passion for creating beautiful, 41 | responsive, and user-friendly websites. I've worked on a variety of 42 | web projects, ranging from personal blogs to e-commerce platforms. 43 |

44 |
45 | 46 | 47 |
48 |
49 |
50 | profile 51 |
52 |
53 |
54 | 55 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"); 2 | /* Credit - youtube.com/@ashutoshpython */ 3 | :root { 4 | --bg-color: #01252b; 5 | --primary-color: #ca8a04; 6 | --secondary-color: #fff; 7 | --max-width: 1200px; 8 | } 9 | 10 | * { 11 | padding: 0; 12 | margin: 0; 13 | box-sizing: border-box; 14 | background-color: var(--bg-color); 15 | } 16 | 17 | a { 18 | text-decoration: none; 19 | } 20 | 21 | body { 22 | font-family: "Poppins", sans-serif; 23 | } 24 | 25 | nav { 26 | width: 100%; 27 | position: fixed; 28 | top: 0; 29 | left: 0; 30 | background-color: var(--bg-color); 31 | z-index: 99; 32 | } 33 | 34 | .nav__content { 35 | max-width: var(--max-width); 36 | margin: auto; 37 | padding: 1.5rem 1rem; 38 | display: flex; 39 | align-items: center; 40 | justify-content: space-between; 41 | } 42 | 43 | nav .logo a { 44 | font-size: 1.5rem; 45 | font-weight: 600; 46 | color: var(--primary-color); 47 | transition: 0.3s; 48 | } 49 | nav .logo a:hover { 50 | color: var(--secondary-color); 51 | } 52 | 53 | nav .checkbox { 54 | display: none; 55 | } 56 | 57 | nav input { 58 | display: none; 59 | } 60 | nav .checkbox i { 61 | font-size: 2rem; 62 | color: var(--primary-color); 63 | cursor: pointer; 64 | } 65 | 66 | ul { 67 | display: flex; 68 | align-items: center; 69 | gap: 1rem; 70 | list-style: none; 71 | transition: left 0.3s; 72 | } 73 | 74 | ul li a { 75 | padding: 0.5rem 1rem; 76 | border: 2px solid transparent; 77 | text-decoration: none; 78 | font-weight: 600; 79 | color: var(--secondary-color); 80 | transition: 0.3s; 81 | } 82 | 83 | ul li a:hover { 84 | border-top-color: var(--primary-color); 85 | border-bottom-color: var(--primary-color); 86 | color: var(--primary-color); 87 | } 88 | 89 | .section { 90 | background-color: var(--bg-color); 91 | } 92 | 93 | .section__container { 94 | min-height: 100vh; 95 | max-width: var(--max-width); 96 | margin: auto; 97 | padding: 1rem; 98 | display: grid; 99 | grid-template-columns: repeat(2, 1fr); 100 | gap: 4rem; 101 | } 102 | 103 | .content { 104 | display: flex; 105 | flex-direction: column; 106 | justify-content: center; 107 | } 108 | 109 | .subtitle { 110 | letter-spacing: 2px; 111 | color: var(--secondary-color); 112 | font-weight: 600; 113 | margin-bottom: 0.5rem; 114 | } 115 | 116 | .title { 117 | font-size: 2.5rem; 118 | font-weight: 400; 119 | line-height: 3rem; 120 | color: var(--primary-color); 121 | margin-bottom: 1rem; 122 | } 123 | 124 | .title span { 125 | font-weight: 600; 126 | } 127 | 128 | .description { 129 | line-height: 1.5rem; 130 | color: var(--secondary-color); 131 | margin-bottom: 2rem; 132 | } 133 | 134 | .action__btns { 135 | display: flex; 136 | gap: 1rem; 137 | } 138 | 139 | .action__btns button { 140 | font-size: 1rem; 141 | font-weight: 700; 142 | letter-spacing: 2px; 143 | padding: 1rem 2rem; 144 | outline: none; 145 | border: 2px solid var(--primary-color); 146 | border-radius: 10px; 147 | transition: 0.3s; 148 | cursor: pointer; 149 | } 150 | 151 | .hire__me { 152 | background-color: var(--primary-color); 153 | color: var(--bg-color); 154 | } 155 | 156 | .hire__me:hover { 157 | background-color: var(--primary-color); 158 | } 159 | 160 | .portfolio { 161 | color: var(--primary-color); 162 | } 163 | 164 | .portfolio:hover { 165 | background-color: var(--primary-color); 166 | color: var(--bg-color); 167 | } 168 | 169 | .image { 170 | display: grid; 171 | place-items: center; 172 | } 173 | 174 | .image img { 175 | width: min(25rem, 90%); 176 | border-radius: 100%; 177 | border-color: var(--secondary-color); 178 | border-style:solid; 179 | } 180 | 181 | @media (width < 750px) { 182 | nav .checkbox { 183 | display: block; 184 | } 185 | 186 | ul { 187 | position: absolute; 188 | width: 100%; 189 | height: calc(100vh - 85px); 190 | left: -100%; 191 | top: 85px; 192 | background-color: var(--bg-color); 193 | flex-direction: column; 194 | justify-content: center; 195 | gap: 3rem; 196 | } 197 | 198 | nav #check:checked ~ ul { 199 | left: 0; 200 | } 201 | 202 | ul li a { 203 | color: var(--bg-color); 204 | background-color: var(--primary-color); 205 | font-size: 1.25rem; 206 | } 207 | 208 | .section__container { 209 | padding: 10rem 1rem 5rem 1rem; 210 | text-align: center; 211 | grid-template-columns: repeat(1, 1fr); 212 | } 213 | 214 | .image { 215 | grid-area: 1/1/2/2; 216 | } 217 | 218 | .action__btns { 219 | margin: auto; 220 | } 221 | } --------------------------------------------------------------------------------