19 |
31 |
20 | Shapely Demo
21 |
22 |
30 | ├── cards ├── card1.jpg ├── card10.jpg ├── card2.jpg ├── card3.jpg ├── card4.jpg ├── card5.jpg ├── card6.jpg ├── card7.jpg ├── card8.jpg └── card9.jpg ├── icons ├── css-logo.png ├── js-logo.png ├── html5-logo.png └── sass-logo.png ├── Body-pt1 ├── flexible-portfolio.png ├── macbook-preview-flexible.png ├── photo-1452723312111-3a7d0db0e024.jpg ├── photo-1440557653082-e8e186733eeb-1.jpg └── photo-1443527216320-7e744084f5a7-1.jpg ├── Body-P9 ├── photo-1451417379553-15d8e8f49cde.jpg └── WhatsApp Image 2024-02-18 at 4.33.06 PM.jpeg ├── Header ├── magnifying-glass-solid.svg └── cart-shopping-solid.svg ├── style.css ├── index.html └── bootstrap.min.js /cards/card1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/cards/card1.jpg -------------------------------------------------------------------------------- /cards/card10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/cards/card10.jpg -------------------------------------------------------------------------------- /cards/card2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/cards/card2.jpg -------------------------------------------------------------------------------- /cards/card3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/cards/card3.jpg -------------------------------------------------------------------------------- /cards/card4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/cards/card4.jpg -------------------------------------------------------------------------------- /cards/card5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/cards/card5.jpg -------------------------------------------------------------------------------- /cards/card6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/cards/card6.jpg -------------------------------------------------------------------------------- /cards/card7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/cards/card7.jpg -------------------------------------------------------------------------------- /cards/card8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/cards/card8.jpg -------------------------------------------------------------------------------- /cards/card9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/cards/card9.jpg -------------------------------------------------------------------------------- /icons/css-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/icons/css-logo.png -------------------------------------------------------------------------------- /icons/js-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/icons/js-logo.png -------------------------------------------------------------------------------- /icons/html5-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/icons/html5-logo.png -------------------------------------------------------------------------------- /icons/sass-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/icons/sass-logo.png -------------------------------------------------------------------------------- /Body-pt1/flexible-portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/Body-pt1/flexible-portfolio.png -------------------------------------------------------------------------------- /Body-pt1/macbook-preview-flexible.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/Body-pt1/macbook-preview-flexible.png -------------------------------------------------------------------------------- /Body-P9/photo-1451417379553-15d8e8f49cde.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/Body-P9/photo-1451417379553-15d8e8f49cde.jpg -------------------------------------------------------------------------------- /Body-pt1/photo-1452723312111-3a7d0db0e024.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/Body-pt1/photo-1452723312111-3a7d0db0e024.jpg -------------------------------------------------------------------------------- /Body-pt1/photo-1440557653082-e8e186733eeb-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/Body-pt1/photo-1440557653082-e8e186733eeb-1.jpg -------------------------------------------------------------------------------- /Body-pt1/photo-1443527216320-7e744084f5a7-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/Body-pt1/photo-1443527216320-7e744084f5a7-1.jpg -------------------------------------------------------------------------------- /Body-P9/WhatsApp Image 2024-02-18 at 4.33.06 PM.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/umarprogrammer19/Demo-WebClone/HEAD/Body-P9/WhatsApp Image 2024-02-18 at 4.33.06 PM.jpeg -------------------------------------------------------------------------------- /Header/magnifying-glass-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Header/cart-shopping-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | header { 8 | position: sticky; 9 | top: 0; 10 | background-color: #FFFFFF; 11 | } 12 | 13 | .main { 14 | height: 80px; 15 | } 16 | 17 | .main .navb { 18 | height: 70px; 19 | } 20 | 21 | .main .navb a { 22 | text-decoration: none; 23 | color: #4C4C4C; 24 | font-size: 15px; 25 | } 26 | 27 | .main .navb a img { 28 | height: 15px; 29 | width: 15px; 30 | } 31 | 32 | .main .navb .logon .logo { 33 | font-size: 28px; 34 | color: #666666; 35 | } 36 | 37 | .main2 { 38 | background-image: url(./Body-pt1/photo-1443527216320-7e744084f5a7-1.jpg); 39 | background-size: 100vw, 100vh; 40 | background-position: center; 41 | height: 89vh; 42 | color: white; 43 | background-repeat: no-repeat; 44 | background-attachment: fixed; 45 | } 46 | 47 | .main2 div h1 { 48 | font-size: 70px; 49 | font-weight: 300; 50 | } 51 | 52 | .main2 div p { 53 | font-size: 20px; 54 | } 55 | 56 | .main2 div button { 57 | width: 210px; 58 | height: 55px; 59 | border-radius: 0; 60 | } 61 | 62 | .main2 div .btn1 { 63 | background: #745CF9; 64 | color: #FFFFFF; 65 | border-radius: 0; 66 | border: none !important; 67 | } 68 | 69 | .main3 .image img, 70 | .main4 .image img { 71 | width: 640px; 72 | height: 480px; 73 | } 74 | 75 | .main3 .paras .btn1, 76 | .main4 .paras .btn1 { 77 | background: #745CF9; 78 | color: #FFFFFF; 79 | border-radius: 0; 80 | width: 210px; 81 | height: 55px; 82 | } 83 | 84 | .main3 .paras p, 85 | .main4 .paras p { 86 | color: #4C4C4C; 87 | } 88 | 89 | .main3 .paras h2, 90 | .main4 .paras h2 { 91 | font-size: 34px; 92 | color: #666666; 93 | font-weight: 300; 94 | } 95 | 96 | .main5 { 97 | height: 450px; 98 | background-image: url(./Body-pt1/photo-1452723312111-3a7d0db0e024.jpg); 99 | color: #FFFFFF; 100 | background-size: 100vw, 100vh; 101 | background-attachment: fixed; 102 | background-position: center; 103 | } 104 | 105 | .main5 h2 { 106 | font-size: 65px; 107 | font-weight: 400; 108 | } 109 | 110 | .main5 p { 111 | font-size: 15px; 112 | } 113 | 114 | .main5 button { 115 | background: #745CF9; 116 | color: #FFFFFF; 117 | border-radius: 0; 118 | width: 210px; 119 | height: 55px; 120 | margin: 0 auto; 121 | border: none !important; 122 | } 123 | 124 | .main6 { 125 | background-color: #d4d4d4; 126 | } 127 | 128 | .main6 button { 129 | background: #745CF9; 130 | color: #FFFFFF; 131 | border-radius: 0; 132 | width: 210px; 133 | height: 55px; 134 | margin: 0 auto; 135 | border: none !important; 136 | } 137 | 138 | .main6 h2 { 139 | font-size: 40px; 140 | font-weight: 300; 141 | } 142 | 143 | .main6 p { 144 | font-size: 15px; 145 | color: #666666; 146 | } 147 | 148 | .main7 { 149 | height: 948px; 150 | } 151 | 152 | .main7 .crd { 153 | height: 210px; 154 | width: 25%; 155 | cursor: pointer; 156 | } 157 | 158 | .main7 .crd img { 159 | width: 100%; 160 | } 161 | 162 | .main9 { 163 | height: 500px; 164 | background-image: url(./Body-P9/photo-1451417379553-15d8e8f49cde.jpg); 165 | background-size: cover; 166 | background-position: center; 167 | background-attachment: fixed; 168 | } 169 | 170 | .main10 { 171 | position: absolute; 172 | bottom: 0; 173 | } 174 | 175 | .main10 .img { 176 | background-color: transparent; 177 | width: 100px; 178 | height: 100px; 179 | border-radius: 50%; 180 | background-image: url(./Body-P9/WhatsApp\ Image\ 2024-02-18\ at\ 4.33.06\ PM.jpeg); 181 | object-fit: cover; 182 | background-size: cover; 183 | } 184 | 185 | .main11 img { 186 | height: 120px; 187 | width: 120px; 188 | } 189 | 190 | .main11 .i-icons { 191 | gap: 100px; 192 | } 193 | 194 | .main12{ 195 | background-color: #d4d4d4; 196 | height: 250px; 197 | } 198 | 199 | .main12 button { 200 | background: #745CF9; 201 | color: #FFFFFF; 202 | border-radius: 0; 203 | width: 210px; 204 | height: 55px; 205 | border: none !important; 206 | } 207 | 208 | .footerl{ 209 | background-color: #000; 210 | height: 150px; 211 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 |This is the only WordPress theme you will ever want to use.
38 |
49 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar luctus sem, eget porta orci. 53 | Maecenas molestie dui id diam feugiat, eu tincidunt mauris aliquam. Duis commodo vitae ligula et 54 | interdum. Maecenas faucibus mattis imperdiet. In rhoncus ac ligula id ultricies.
55 | 56 |
62 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar luctus sem, eget porta orci. 66 | Maecenas molestie dui id diam feugiat, eu tincidunt mauris aliquam. Duis commodo vitae ligula et 67 | interdum. Maecenas faucibus mattis imperdiet. In rhoncus ac ligula id ultricies.
68 | 69 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet rhoncus 76 | porta. Ut quis sem quis purus lobortis dictum. Aliquam nec dignissim nisl. Vivamus cursus feugiat 77 | sapien, eget tincidunt leo ornare quis.
78 | 79 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet rhoncus 86 | porta. Ut quis sem quis purus lobortis dictum. Aliquam nec dignissim nisl. Vivamus cursus feugiat 87 | sapien, eget tincidunt leo ornare quis.
88 | 89 |
90 | Here is our latest projects. You'll love them!
97 |









Integer ut rutrum nulla, sit amet fringilla nisi. Nam nisl velit, 122 | vehicula 123 | at 124 | nibh sed, porttitor sollicitudin ante. Sed justo augue, vestibulum ut efficitur vitae, euismod et justo. 125 | Mauris sed mattis ante. Ut ligula lectus, consequat vitae neque ac, gravida hendrerit ante.
126 |Umar Farooq
131 |