├── images └── main_photo.jpg ├── index.html └── style.css /images/main_photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/k2infocom/Animated-Dark-Portfolio/HEAD/images/main_photo.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive Portfolio Website Design 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 20 | 34 |
35 |
36 |
37 | profile pic 38 |
39 |
40 |
Hi I'm Frontend Developer
41 |

Alex Smith

42 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta delectus dolorum 43 | quibusdam maiores magni quod rem in porro, laborum, laudantium ex repellendus explicabo, 44 | autem molestiae! 45 |

46 | 47 |
48 | Download CV 49 | Contact 50 |
51 | 52 | 59 |
60 |
61 |
62 |
63 | 64 | 65 | 83 | 84 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | font-family: poppins,sans-serif; 6 | text-decoration: none; 7 | } 8 | body{ 9 | overflow-x: hidden; 10 | } 11 | .hero-header{ 12 | width:100%; 13 | height: 100%; 14 | min-height: 100vh; 15 | background: #222; 16 | } 17 | .wrapper{ 18 | width:1280px; 19 | max-width: 95%; 20 | margin: 0 auto; 21 | padding: 0 20px; 22 | } 23 | header{ 24 | padding: 40px 0 30px; 25 | display: flex; 26 | justify-content: space-between; 27 | align-items: center; 28 | flex-wrap: wrap; 29 | } 30 | .logo{ 31 | display: inline-flex; 32 | justify-content: center; 33 | align-items: center; 34 | } 35 | .logo i{ 36 | height: 45px; 37 | width:45px; 38 | background-color: #007ced; 39 | border-radius: 50%; 40 | color:#fff; 41 | font-weight: 700; 42 | font-size: 1.5rem; 43 | padding: 10px; 44 | margin-right: 5px; 45 | cursor: pointer; 46 | text-align: center; 47 | 48 | } 49 | .logo .logo-text{ 50 | font-size: 24px; 51 | font-weight: 500; 52 | color:#fff; 53 | } 54 | nav .togglebtn{ 55 | width: 35px; 56 | height: 35px; 57 | position: absolute; 58 | top:45px; 59 | right: 3%; 60 | z-index: 5; 61 | cursor: pointer; 62 | display: none; 63 | } 64 | nav .togglebtn span{ 65 | display: block; 66 | background-color: #007ced; 67 | margin: 5px 0px; 68 | width:100%; 69 | height:3px; 70 | transition: 0.3s; 71 | transition-property: transform, opacity; 72 | 73 | } 74 | nav .navlinks{ 75 | list-style-type: none; 76 | } 77 | nav .navlinks li{ 78 | display: inline-block; 79 | } 80 | nav .navlinks li a{ 81 | color:#e5e5e5; 82 | margin-right: 2.5rem; 83 | } 84 | .container { 85 | display: flex; 86 | justify-content: space-around; 87 | align-items: center; 88 | padding-top:4rem; 89 | } 90 | .container .hero-pic{ 91 | width: 300px; 92 | height: 300px; 93 | border-radius: 50%; 94 | overflow: hidden; 95 | border: 15px solid #444; 96 | box-shadow: 5px 7px 25px rgba(0,0,0,0.5); 97 | } 98 | .hero-pic img{ 99 | height: 100%; 100 | width:100%; 101 | transition: 0.5s; 102 | } 103 | .hero-pic img:hover{ 104 | transform: scale(1.2); 105 | } 106 | .hero-text{ 107 | max-width: 500px; 108 | display: flex; 109 | flex-direction: column; 110 | } 111 | .hero-text h5{ 112 | color:#e5e5e5; 113 | font-size: 14px; 114 | } 115 | .hero-text h5 span{ 116 | color:#007ced; 117 | font-size: 16px; 118 | } 119 | .hero-text h1{ 120 | color: #007ced; 121 | font-size: 3rem; 122 | } 123 | .hero-text p{ 124 | color:#e5e5e5; 125 | 126 | } 127 | .btn-group{ 128 | margin:45px 0; 129 | } 130 | .btn-group .btn{ 131 | border-color: #d5d5d5; 132 | color:#fff; 133 | background-color: #333; 134 | padding: 12px 25px; 135 | margin: 5px 0px; 136 | margin-right:7px; 137 | border-radius: 30px; 138 | border:2px solid #e5e5e5; 139 | box-shadow: 0 10px 10px -8px rgb(0 0 0 / 78%); 140 | } 141 | .btn.active{ 142 | border-color: #007ced; 143 | } 144 | .hero-text .social i{ 145 | color: #e5e5e5; 146 | font-size: 18px; 147 | margin-right: 10px; 148 | transition: 0.5s; 149 | } 150 | .hero-text .social i:hover{ 151 | color:#007ced; 152 | transform: rotate(360deg); 153 | } 154 | /* Respnosiv design & displaying navbar for small screen */ 155 | @media(max-width:930px) 156 | { 157 | nav .togglebtn{ 158 | display: initial; 159 | } 160 | /* for toggle button**/ 161 | .click { 162 | top:45px; 163 | } 164 | .click span{ 165 | position: absolute; 166 | margin-top:12px 167 | } 168 | .click span:first-child{ 169 | transform: rotate(-40deg); 170 | } 171 | .click span:nth-child(2) 172 | { 173 | opacity: 0; 174 | margin:0; 175 | } 176 | .click span:last-child{ 177 | transform: rotate(45deg); 178 | top:0; 179 | } 180 | nav .navlinks{ 181 | position: absolute; 182 | top:110px; 183 | right:-100%; 184 | bottom: 0; 185 | width: 60%; 186 | height: 100vh; 187 | background-color: #222; 188 | z-index: 3; 189 | box-shadow: 5px 13px 30px rgba(0,0,0,0.1); 190 | transition: 0.5s; 191 | padding: 25px 0px; 192 | } 193 | nav .navlinks li{ 194 | display: block; 195 | } 196 | nav .navlinks li a{ 197 | display: block; 198 | margin-bottom: 15px; 199 | text-align: center; 200 | } 201 | nav .navlinks.open{ 202 | right:0; 203 | } 204 | } 205 | @media(max-width:768px) 206 | { 207 | .container{ 208 | flex-direction: column; 209 | padding-top:2rem 210 | } 211 | .hero-text{ 212 | padding:40px 0px; 213 | } 214 | } --------------------------------------------------------------------------------