├── README.md ├── images ├── arrow.png ├── p3.jpg ├── services-1.png ├── services-2.png ├── services-3.png ├── team1.jpg ├── team2.jpg ├── team3.jpg ├── team4.jpg ├── team5.jpg └── team6.jpg ├── index.html ├── responsive-website-design.png └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # Responsive-Website-Design- 2 | How to create the Responsive website Using HTML and CSS 3 | -------------------------------------------------------------------------------- /images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/Responsive-Website-Design-/c0cf49a1c05ff93c1d2cce55c1e9eef02c99f77b/images/arrow.png -------------------------------------------------------------------------------- /images/p3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/Responsive-Website-Design-/c0cf49a1c05ff93c1d2cce55c1e9eef02c99f77b/images/p3.jpg -------------------------------------------------------------------------------- /images/services-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/Responsive-Website-Design-/c0cf49a1c05ff93c1d2cce55c1e9eef02c99f77b/images/services-1.png -------------------------------------------------------------------------------- /images/services-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/Responsive-Website-Design-/c0cf49a1c05ff93c1d2cce55c1e9eef02c99f77b/images/services-2.png -------------------------------------------------------------------------------- /images/services-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/Responsive-Website-Design-/c0cf49a1c05ff93c1d2cce55c1e9eef02c99f77b/images/services-3.png -------------------------------------------------------------------------------- /images/team1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/Responsive-Website-Design-/c0cf49a1c05ff93c1d2cce55c1e9eef02c99f77b/images/team1.jpg -------------------------------------------------------------------------------- /images/team2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/Responsive-Website-Design-/c0cf49a1c05ff93c1d2cce55c1e9eef02c99f77b/images/team2.jpg -------------------------------------------------------------------------------- /images/team3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/Responsive-Website-Design-/c0cf49a1c05ff93c1d2cce55c1e9eef02c99f77b/images/team3.jpg -------------------------------------------------------------------------------- /images/team4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/Responsive-Website-Design-/c0cf49a1c05ff93c1d2cce55c1e9eef02c99f77b/images/team4.jpg -------------------------------------------------------------------------------- /images/team5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/Responsive-Website-Design-/c0cf49a1c05ff93c1d2cce55c1e9eef02c99f77b/images/team5.jpg -------------------------------------------------------------------------------- /images/team6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/Responsive-Website-Design-/c0cf49a1c05ff93c1d2cce55c1e9eef02c99f77b/images/team6.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebSite Development 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 17 |
18 | 25 |
26 |
27 | 28 | 34 | 35 |
36 |

About Us

37 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, eveniet temporibus reprehenderit. Veniam sunt corrupti necessitatibus quam, quia doloribus nesciunt ut eveniet, alias aspernatur eum perferendis commodi doloremque recusandae tenetur quis cumque voluptatibus officiis ea excepturi dignissimos! Repellat molestias iusto dicta facere ipsum, harum maiores illum laborum tenetur? Explicabo, cupiditate!

38 |
Learn More
39 |
40 | 41 |
42 |

our Services

43 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, porro repellendus dolore repudiandae, accusantium corporis harum vel iste suscipit maiores provident ullam itaque libero minus nesciunt consequatur iusto numquam asperiores quod fugiat veniam blanditiis.

44 |
45 |
46 | service_image 47 |

Web Development

48 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

49 |
50 |
51 | service_image 52 |

App Development

53 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

54 |
55 |
56 | service_image 57 |

PSD to HTML

58 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

59 |
60 |
61 |
62 |
63 |

contact us

64 |
65 |
66 | 67 |
68 |
69 | 70 |
71 |
72 | 73 |
74 |
75 | Submit 76 |
77 |
78 |
79 | 80 | 81 |
82 |

our team

83 |
84 |
85 |
Team_Images
86 |
Team_Images
87 |
Team_Images
88 |
89 |
90 |
Team_Images
91 |
Team_Images
92 |
Team_Images
93 |
94 |
95 |
96 | 97 | 98 |
99 | © 2019 Coding Market 100 |
101 | 102 | 103 |
104 | up_arrow 105 |
106 |
107 | 108 | 109 | -------------------------------------------------------------------------------- /responsive-website-design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/Responsive-Website-Design-/c0cf49a1c05ff93c1d2cce55c1e9eef02c99f77b/responsive-website-design.png -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Allura|Josefin+Sans'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | outline: none; 8 | list-style: none; 9 | text-decoration: none; 10 | font-family: 'Josefin Sans', sans-serif; 11 | } 12 | 13 | h1.title{ 14 | margin-bottom: 20px; 15 | color: #444444; 16 | font-family: 'Allura', cursive; 17 | text-transform: uppercase; 18 | font-size: 38px; 19 | word-spacing: 25px; 20 | letter-spacing: 5px; 21 | } 22 | 23 | p{ 24 | margin-bottom: 15px; 25 | font-size: 14px; 26 | line-height: 20px; 27 | color: #a9a9a9; 28 | } 29 | 30 | .btn a { 31 | width: 180px; 32 | height: 35px; 33 | line-height: 35px; 34 | border: 2px solid #fb2274; 35 | color: #fb2274; 36 | display: block; 37 | margin: 25px auto 0; 38 | text-align: center; 39 | } 40 | 41 | .main_container{ 42 | position: relative; 43 | } 44 | 45 | /* Navigation Bar */ 46 | .navbar{ 47 | width: 100%; 48 | height: 65px; 49 | position: absolute; 50 | display: flex; 51 | justify-content: space-around; 52 | align-items: center; 53 | } 54 | 55 | .logo a{ 56 | font-family: 'Allura', cursive; 57 | font-size: 32px; 58 | color: #fb2274; 59 | } 60 | 61 | .navbar_items ul{ 62 | display: flex; 63 | } 64 | 65 | .navbar_items ul li{ 66 | margin: 0 10px; 67 | } 68 | 69 | .navbar_items ul li a{ 70 | text-transform: uppercase; 71 | color: #fff; 72 | } 73 | 74 | /* banner_image */ 75 | .banner_image{ 76 | background: url('images/p3.jpg') no-repeat top center; 77 | background-size: cover; 78 | width: 100%; 79 | height: 600px; 80 | display: flex; 81 | justify-content: center; 82 | align-items: center; 83 | } 84 | 85 | .banner_content{ 86 | text-align: center; 87 | color: #fff; 88 | } 89 | 90 | .banner_content h1{ 91 | text-transform: uppercase; 92 | line-height: 38px; 93 | margin-bottom: 15px; 94 | } 95 | 96 | .banner_content h1 span{ 97 | color: #fb2274; 98 | } 99 | 100 | 101 | /* About */ 102 | .about, 103 | .services, 104 | .contactus, 105 | .ourteam{ 106 | text-align: center; 107 | padding: 5% 10%; 108 | } 109 | 110 | /* Services */ 111 | .services{ 112 | background: #f5f5f5; 113 | } 114 | 115 | .diff_services { 116 | margin-top: 35px; 117 | display: flex; 118 | justify-content: space-between; 119 | } 120 | 121 | .diff_services .diff_services_item { 122 | width: 30%; 123 | } 124 | 125 | .diff_services .diff_services_item img { 126 | width: 100%; 127 | margin-bottom: 25px; 128 | } 129 | 130 | .diff_services .diff_services_item h3 { 131 | color: #fb2274; 132 | margin-bottom: 15px; 133 | } 134 | 135 | /* Contact us */ 136 | .form_wrapper .form_input{ 137 | margin-bottom: 15px; 138 | } 139 | 140 | .form_wrapper .form_input input[type="text"]{ 141 | width: 250px; 142 | padding: 12px 20px; 143 | border: 1px solid #ccc; 144 | } 145 | 146 | .form_wrapper .form_input textarea{ 147 | width: 250px; 148 | padding: 12px 20px; 149 | height: 80px; 150 | resize: none; 151 | border: 1px solid #ccc; 152 | } 153 | /* our team */ 154 | .ourteam{ 155 | background: #f5f5f5; 156 | } 157 | 158 | .ourteam_wrapper{ 159 | display: flex; 160 | flex-direction: column; 161 | } 162 | 163 | .ourteam_wrapper .team{ 164 | display: flex; 165 | justify-content: space-between; 166 | } 167 | 168 | .ourteam_wrapper .team-1.team{ 169 | margin-bottom: 25px; 170 | } 171 | 172 | .ourteam_wrapper .team_members{ 173 | width: 30%; 174 | height: auto; 175 | cursor: pointer; 176 | overflow: hidden; 177 | position: relative; 178 | } 179 | 180 | .ourteam_wrapper .team_members img{ 181 | display: block; 182 | width: 100%; 183 | height: auto; 184 | transition: all 0.5s ease; 185 | } 186 | 187 | .ourteam_wrapper .team_members:hover img{ 188 | transform: scale(1.1); 189 | } 190 | 191 | /* footer */ 192 | .footer{ 193 | width: 100%; 194 | text-align: center; 195 | background: #444444; 196 | padding: 20px 0; 197 | } 198 | 199 | .footer a{ 200 | color: #fff; 201 | } 202 | 203 | 204 | 205 | @media (max-width: 720px){ 206 | 207 | .navbar{ 208 | height: auto; 209 | flex-direction: column; 210 | } 211 | 212 | .logo{ 213 | margin-bottom: 25px; 214 | } 215 | 216 | .navbar_items ul{ 217 | flex-direction: column; 218 | text-align: center; 219 | } 220 | 221 | .navbar_items ul li{ 222 | margin-bottom:5px; 223 | } 224 | 225 | .banner_content{ 226 | margin-top: 35px; 227 | } 228 | 229 | } 230 | 231 | 232 | /* arrow */ 233 | .arrow{ 234 | position: fixed; 235 | bottom: 25px; 236 | right: 25px; 237 | width: 40px; 238 | height: 40px; 239 | line-height: 50px; 240 | text-align: center; 241 | cursor: pointer; 242 | background: #fb2274; 243 | border-radius: 50%; 244 | display: none; 245 | } 246 | 247 | .arrow img{ 248 | width: 20px; 249 | height: 20px; 250 | z-index: 1; 251 | } --------------------------------------------------------------------------------