├── README.md ├── _config.yml ├── background.png ├── background2.png ├── background3.png ├── bootstrap2.png ├── desk.png ├── img ├── background.png ├── background2.png ├── background3.png ├── bootstrap2.png ├── desk.png ├── images ├── logo.png ├── logo6.jpg ├── mac.png ├── team1.png ├── team2.png └── team3.png ├── index.html ├── mac.png ├── style.css ├── team1.png ├── team2.png └── team3.png /README.md: -------------------------------------------------------------------------------- 1 | # Basic-Website-using-HTML5-CSS3 2 | Create your very first website using HTML5, CSS3 3 | 4 | Paste all the images in one folder and name it as img. 5 | Download logo image and paste it in img folder. 6 | 7 | copy and paste index.html code in VS Code or NOTE PAD ++ and save it as index.html 8 | copy and paste style.css code in VS Code or NOTE PAD ++ and save it as style.css 9 | 10 | 11 | -----WILL POST SHOPPING WEBSITE WITH ADD TO CART OPTION AND FULLY FUNCTIONABLE---- 12 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/background.png -------------------------------------------------------------------------------- /background2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/background2.png -------------------------------------------------------------------------------- /background3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/background3.png -------------------------------------------------------------------------------- /bootstrap2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/bootstrap2.png -------------------------------------------------------------------------------- /desk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/desk.png -------------------------------------------------------------------------------- /img/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/img/background.png -------------------------------------------------------------------------------- /img/background2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/img/background2.png -------------------------------------------------------------------------------- /img/background3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/img/background3.png -------------------------------------------------------------------------------- /img/bootstrap2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/img/bootstrap2.png -------------------------------------------------------------------------------- /img/desk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/img/desk.png -------------------------------------------------------------------------------- /img/images: -------------------------------------------------------------------------------- 1 | All images are thr 2 | -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/img/logo.png -------------------------------------------------------------------------------- /img/logo6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/img/logo6.jpg -------------------------------------------------------------------------------- /img/mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/img/mac.png -------------------------------------------------------------------------------- /img/team1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/img/team1.png -------------------------------------------------------------------------------- /img/team2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/img/team2.png -------------------------------------------------------------------------------- /img/team3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/img/team3.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Complete Website Layout 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 46 | 47 | 48 | 76 | 77 | 78 |
82 |
83 |
84 |

A web hosting service allows individuals and 85 | organizations to make their website accessible via the World 86 | Wide Web.

87 |
88 |
89 | 91 |
92 |
93 |
94 | 95 | 96 |
100 |
101 |
102 |

Built with ease.

103 |
104 |
105 |
106 |

Welcome to my website tutorial! 107 | Bootstrap is a free and open-source front-end library with HTML and 108 | CSS based designs.

109 |
110 |
111 |
112 | 113 | 114 |
118 |
119 |
120 | 121 |

HTML5

122 |

Built with the latest version of HTML, HTML5.

123 |
124 |
125 | 126 |

BOOTSTRAP

127 |

Built with the latest version of Bootstrap, Bootstrap 4.

128 |
129 |
130 | 131 |

CSS3

132 |

Built with the latest version of CSS, CSS3.

133 |
134 |
135 |
136 |
137 | 138 | 139 |
143 |
144 |
145 |

If you build it...

146 |

The columns will automatically stack on each other when 147 | the screen is less than 576px wide.

148 |

Resize the browserwindow to see the effect. Responsive web 149 | design has become more important as the amount of mobile traffic now 150 | accounts for more than half of total internet traffic.

151 |

It can also display the web page differently depending on the 152 | screen size or viewing device.

153 |
154 | Learn More 155 |
156 |
157 | 158 |
159 |
160 |
161 | 162 |
163 | 164 | 165 | 166 |
167 |
168 |
169 |

Meet the Team

170 |
171 |
172 |
173 | 174 | 175 |
179 |
180 |
181 |
182 | 183 |
184 |

John Doe

185 |

John is an Interent 186 | entrepreneur with almost 20 years of experience. 187 |

188 | See Profile 189 |
190 |
191 |
192 |
193 |
194 | 195 |
196 |

Mary Jo

197 |

Mary is a designer with a almost 10 years 198 | of digital design experience.

199 | See Profile 200 |
201 |
202 |
203 |
204 |
205 | 206 |
207 |

Phil Ho

208 |

Phil is an developer with over 5 years 209 | of web development experience.

210 | See Profile 211 |
212 |
213 |
214 |
215 |
216 | 217 | 218 |
222 |
223 |
224 |

Our Philosophy

225 |

We know that greatness in a disruptive era requires bold 226 | ambition, curious talent and a culture that believes we're 227 | smarter together.

228 |

We approach every challenge hostically, with best-in-class 229 | expertise in data, creativity, media, technology, search, social and 230 | more. We call this Alchemy. It has the power to build our clients' 231 | brands and transform their business. And white it may seem like 232 | magic, we've got it down to a science. 233 |

234 | 235 |
236 |
237 | 238 |
239 |
240 |
241 |
242 | 243 | 244 |
245 |
246 |
247 |

Connect

248 |
249 | 256 |
257 |
258 | 259 | 260 | 299 | 300 | 301 | 304 | 305 | 306 | 307 | -------------------------------------------------------------------------------- /mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/mac.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700'); 2 | 3 | html, body{ 4 | height: 100%; 5 | width: 100%; 6 | font-family: 'Poppins', sans-serif; 7 | color:#222; 8 | } 9 | .navbar{ 10 | padding: .8rem; 11 | } 12 | .navbar-brand img{ 13 | width: 150px; 14 | height: 70px; 15 | } 16 | .navbar-nav li{ 17 | padding-right: 20px; 18 | } 19 | .nav-link{ 20 | font-size: 1.1em !important; 21 | } 22 | .carousel-inner img{ 23 | width: 100%; 24 | } 25 | .carousel-caption { 26 | position: absolute; 27 | top: 50%; 28 | transform: translateY(-50%); 29 | } 30 | .carousel-caption h1 { 31 | font-size: 500%; 32 | text-transform: uppercase; 33 | text-shadow: 1px 1px 10px #000; 34 | } 35 | .carousel-caption h3 { 36 | font-size: 200%; 37 | font-weight: 500; 38 | text-shadow: 1px 1px 10px #000; 39 | padding-bottom: 1rem; 40 | } 41 | .btn-primary { 42 | background-color: #6648b1; 43 | border: 1px solid #564d7c; 44 | } 45 | .btn-primary:hover { 46 | background-color: #563d7c; 47 | border: 1px solid #563d7c; 48 | } 49 | .jumbotron { 50 | padding: 1rem; 51 | border-radius: 0; 52 | } 53 | .padding { 54 | padding-bottom: 2rem; 55 | } 56 | .welcome { 57 | width: 75%; 58 | margin: 0 auto; 59 | padding-top: 2rem; 60 | } 61 | .welcome hr { 62 | border-top: 2px solid #b4b4b4; 63 | width: 95%; 64 | margin-top: .3rem; 65 | margin-bottom: 1rem; 66 | } 67 | .fa-code { 68 | color: #e54d26; 69 | } 70 | .fa-bold { 71 | color: #563d7c; 72 | } 73 | .fa-css3 { 74 | color: #2a63af; 75 | } 76 | .fa-code, .fa-bold, .fa-css3 { 77 | font-size: 4em; 78 | margin: 1rem; 79 | } 80 | .fun{ 81 | width: 100%; 82 | margin-bottom: 2rem; 83 | } 84 | .gif { 85 | max-width: 100%; 86 | } 87 | .social a { 88 | font-size: 4.5em; 89 | padding: 3rem; 90 | } 91 | .fa-facebook { 92 | color: #3b5998; 93 | } 94 | .fa-twitter { 95 | color: #00aced; 96 | } 97 | .fa-google-plus-g { 98 | color: #dd4b39; 99 | } 100 | .fa-instagram { 101 | color: #517fa8; 102 | } 103 | .fa-youtube { 104 | color: #bb0000; 105 | } 106 | 107 | .fa-facebook:hover, 108 | .fa-twitter:hover, 109 | .fa-google-plus-g:hover, 110 | .fa-instagram:hover, 111 | .fa-youtube:hover { 112 | color: #d5d5d5; 113 | } 114 | footer { 115 | background-color: #3f3f3f; 116 | color: #d5d5d5; 117 | padding-top: 2rem; 118 | } 119 | hr.light { 120 | border-top: 1px solid #d5d5d5; 121 | width: 75%; 122 | margin-top: .8rem; 123 | margin-bottom: 1rem; 124 | } 125 | footer a { 126 | color: #d5d5d5; 127 | } 128 | hr.light-100 { 129 | border-top: 1px solid #d5d5d5; 130 | width: 100%; 131 | margin-top: .8rem; 132 | margin-bottom: 1rem; 133 | } 134 | .footer-image img{ 135 | width: 150px; 136 | height: 60px; 137 | } 138 | 139 | 140 | /*---Media Queries --*/ 141 | @media (max-width: 1500px){ 142 | .carousel-inner img{ 143 | width: 100%; 144 | height: 550px; 145 | } 146 | } 147 | 148 | @media (max-width: 992px) { 149 | .social a{ 150 | font-size: 4em; 151 | padding: 2rem; 152 | } 153 | .carousel-inner img{ 154 | width: 100%; 155 | height: 400px; 156 | } 157 | } 158 | @media (max-width: 768px) { 159 | .carousel-caption { 160 | top: 45%; 161 | } 162 | .carousel-caption h1 { 163 | font-size: 350%; 164 | } 165 | .carousel-caption h3 { 166 | font-size: 140%; 167 | font-weight: 400; 168 | padding-bottom: 0.2rem; 169 | } 170 | .carousel-caption .btn { 171 | font-size: 95%; 172 | padding: 8px 14px; 173 | } 174 | .display-4 { 175 | font-size: 200%; 176 | } 177 | .display-4 { 178 | font-size: 200%; 179 | } 180 | .social a{ 181 | font-size: 2.5em; 182 | padding: 1.2rem; 183 | } 184 | .carousel-inner img{ 185 | width: 100%; 186 | height: 100%; 187 | } 188 | } 189 | @media (max-width: 576px) { 190 | carousel-caption { 191 | top: 40%; 192 | } 193 | .carousel-caption h1 { 194 | font-size: 250%; 195 | } 196 | .carousel-caption h3 { 197 | font-size: 110%; 198 | } 199 | .carousel-caption .btn { 200 | font-size: 90%; 201 | padding: 4px 8px; 202 | } 203 | .carousel-indicators { 204 | display: none; 205 | } 206 | .display-4 { 207 | font-size: 160%; 208 | } 209 | .social a{ 210 | font-size: 2em; 211 | padding: 1.7rem; 212 | } 213 | .carousel-inner img{ 214 | width: 100%; 215 | height: 100%; 216 | } 217 | } 218 | 219 | 220 | 221 | /*---Firefox Bug Fix --*/ 222 | .carousel-item { 223 | transition: -webkit-transform 0.5s ease; 224 | transition: transform 0.5s ease; 225 | transition: transform 0.5s ease, -webkit-transform 0.5s ease; 226 | -webkit-backface-visibility: visible; 227 | backface-visibility: visible; 228 | } 229 | 230 | /*--- Bootstrap Padding Fix --*/ 231 | [class*="col-"] { 232 | padding: 1rem; 233 | } 234 | 235 | 236 | 237 | 238 | 239 | /* 240 | Extra small (xs) devices (portrait phones, less than 576px) 241 | No media query since this is the default in Bootstrap 242 | 243 | Small (sm) devices (landscape phones, 576px and up) 244 | @media (min-width: 576px) { ... } 245 | 246 | Medium (md) devices (tablets, 768px and up) 247 | @media (min-width: 768px) { ... } 248 | 249 | Large (lg) devices (desktops, 992px and up) 250 | @media (min-width: 992px) { ... } 251 | 252 | Extra (xl) large devices (large desktops, 1200px and up) 253 | @media (min-width: 1200px) { ... } 254 | */ 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /team1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/team1.png -------------------------------------------------------------------------------- /team2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/team2.png -------------------------------------------------------------------------------- /team3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arvind37/Basic-Website-using-HTML-CSS/5d24707464196f574dd9a0efd56c637bfc683547/team3.png --------------------------------------------------------------------------------