├── asset
    ├── logo
    │   └── logo.png
    ├── image
    │   ├── man-1.jpg
    │   ├── man-2.jpg
    │   ├── man-4.jpg
    │   ├── author.jpg
    │   ├── blog-1.jpg
    │   ├── blog-2.jpg
    │   ├── blog-3.jpg
    │   ├── girl-3.jpg
    │   ├── background.jpg
    │   └── footer-bg.png
    └── icons
    │   ├── coding.png
    │   ├── startup.png
    │   ├── bar-chart.png
    │   ├── phone-call.png
    │   └── digital-marketing.png
├── style.css
└── index.html


/asset/logo/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/logo/logo.png


--------------------------------------------------------------------------------
/asset/image/man-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/image/man-1.jpg


--------------------------------------------------------------------------------
/asset/image/man-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/image/man-2.jpg


--------------------------------------------------------------------------------
/asset/image/man-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/image/man-4.jpg


--------------------------------------------------------------------------------
/asset/icons/coding.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/icons/coding.png


--------------------------------------------------------------------------------
/asset/icons/startup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/icons/startup.png


--------------------------------------------------------------------------------
/asset/image/author.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/image/author.jpg


--------------------------------------------------------------------------------
/asset/image/blog-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/image/blog-1.jpg


--------------------------------------------------------------------------------
/asset/image/blog-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/image/blog-2.jpg


--------------------------------------------------------------------------------
/asset/image/blog-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/image/blog-3.jpg


--------------------------------------------------------------------------------
/asset/image/girl-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/image/girl-3.jpg


--------------------------------------------------------------------------------
/asset/icons/bar-chart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/icons/bar-chart.png


--------------------------------------------------------------------------------
/asset/icons/phone-call.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/icons/phone-call.png


--------------------------------------------------------------------------------
/asset/image/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/image/background.jpg


--------------------------------------------------------------------------------
/asset/image/footer-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/image/footer-bg.png


--------------------------------------------------------------------------------
/asset/icons/digital-marketing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gias-uddin-swe/digital-agency/HEAD/asset/icons/digital-marketing.png


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin: 0;
  3 |     padding: 0;
  4 | }
  5 | 
  6 | 
  7 | .nav-container{
  8 |     display: flex;
  9 |     justify-content:space-around;
 10 |     padding: 15px;
 11 |     background-color: rgba(172, 166, 166, 0.5);
 12 |     border-bottom:1px solid rgba(227, 227, 227,);
 13 | }
 14 | 
 15 | .logo-container{
 16 |     display: flex;
 17 |     justify-content: center;
 18 |     align-items: center;
 19 |     font-size:18px;
 20 |     font-weight: 600;
 21 |     color: cyan;
 22 | }
 23 | .logo{
 24 |     width: 200px;
 25 | }
 26 | .items{
 27 |     display: flex;
 28 |     list-style: none;
 29 | }
 30 | .item{
 31 |     margin-right: 10px;
 32 |     padding: 10px;
 33 |     font-size: 19px;
 34 |     text-decoration: none;
 35 |     cursor: pointer;
 36 | }
 37 | .banner-section{
 38 |     width: 100%;
 39 |     height: 100vh;
 40 |     background-image: url("./asset/image/background.jpg"),linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.4));
 41 |     background-blend-mode: overlay;
 42 |     background-position: center;
 43 |     display: flex;
 44 |     justify-content: center;
 45 |     align-items:center;
 46 |     text-align: center;
 47 | 
 48 | }
 49 | 
 50 | /* middle section style from here  */
 51 | 
 52 | .digital-banner{
 53 | width: 100%;
 54 | margin: 0 auto;
 55 | }
 56 | .title{
 57 |     font-size:86px;
 58 |     font-weight:900;
 59 |     color: white;
 60 | 
 61 | }
 62 | .title-digital{
 63 |     color: rgb(245, 44, 44)
 64 | }
 65 | .description{
 66 |     font-size:22px;
 67 |     color: white;
 68 |     margin-bottom:10px;
 69 |     padding: 10px;
 70 |     width: 50%;
 71 |     margin: auto;
 72 | }
 73 | .btn{
 74 |     padding: 15px 35px;;
 75 |     font-size: 16px;
 76 |     border: none;
 77 |     margin: 5px;
 78 | }
 79 | .btn-more{
 80 |     background-color:rgb(245, 44, 44);
 81 |     color: white;
 82 |   
 83 | }
 84 | .buttons{
 85 |     padding:10px;
 86 | }
 87 | 
 88 | 
 89 | /* start services section style form here  */
 90 | 
 91 | .services-container{
 92 |     width:100%;
 93 |     height:100vh;
 94 |     background-image: url("./asset/image/footer-bg.png"),linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.9));
 95 |     background-blend-mode: overlay;
 96 |     color: white;
 97 | padding-bottom: 120px;
 98 | display: flex;
 99 | justify-content: center;
100 | align-items: center;
101 | }
102 | .service-left{
103 |     width: 50%;
104 | }
105 | .btn-service{
106 | background-color: white;
107 | color: gray;
108 | border-radius: 25px;
109 | }
110 | .title-service{
111 |     font-size: 40px;
112 |     font-weight: bold;
113 |     padding: 7px;
114 |     color: rgb(190, 207, 208);
115 | }
116 | .description-service{
117 |     width: 75%;
118 |     font-size: 20px;
119 |    padding: 12px;
120 |    color: rgb(190, 207, 208);
121 | }
122 | .service-list{
123 |     list-style:decimal ;
124 |     padding: 22px;
125 |     font-size: 18px;
126 |     color: rgb(190, 207, 208);
127 | }
128 | 
129 | .author-container{
130 |     display: flex;
131 |     justify-content: start;
132 |     align-items:center
133 | }
134 | .author-details{
135 |     display: flex;
136 |     /* justify-content: center; */
137 |     align-items:center;
138 |     /* padding:7px; */
139 |     border-right: 1px solid rgb(245, 44, 44);
140 | 
141 | }
142 | .author-details img{
143 |     width:25%;
144 |     border-radius: 100px;
145 |     padding: 7px;
146 |     
147 | }
148 | .more-details{
149 |     padding: 15px 30px;
150 |     margin-left: 11px;
151 |     border-radius: 25px;
152 |     background-color: none;
153 |     border: 1px solid rgb(51, 48, 48);
154 |     color: rgb(245, 44, 44);
155 | }
156 | 
157 | /* .service-right{
158 |     display: flex;
159 |     justify-content: center;
160 |     align-items: center;
161 | } */
162 | .service-box{
163 |     display: flex;
164 |     justify-content: center;
165 |     align-items: center;
166 |     margin: 10px;
167 | }
168 | .service{
169 |     box-shadow: 4px 4px 8px rgb(26, 24, 24);
170 |     /* background:linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0)); */
171 |     background-color: white;
172 |     color: black;
173 |     border-radius:5px;
174 |     padding: 50px;
175 |     text-align: center;
176 |     width: 200px;
177 |     height: 200px;
178 |     margin-right: 15px;
179 | }
180 | .service-logo{
181 |     width: 100px;
182 |     padding: 20px;
183 | }
184 | 
185 | .appointment-section{
186 |     width: 75%;
187 |     padding: 15px;
188 |     background-color: rgb(245, 44, 44);
189 |     display: flex;
190 |     justify-content: center;
191 |     align-items:center;
192 |     margin: auto;
193 |     border-radius: 15px;
194 |     margin-top:-80px;
195 |     color: white;
196 | }
197 | .call-box{
198 |     display: flex;
199 |     justify-content: center;
200 |     align-items: center;
201 |     padding: 10px;
202 |     border-right: 2px solid gray;
203 | }
204 | .appointment-logo{
205 |     width:100px;
206 |     padding: 15px;
207 | }
208 | .apointment-descript{
209 |     padding: 10px;
210 |     /* width: 75px; */
211 |     text-align: justify;
212 | /* border-right: 2px solid gray; */
213 | }
214 | .appointment-button{
215 |     padding: 10px;
216 | }
217 | .appointment-button button{
218 |     padding: 15px 35px;
219 |     border-radius:25px;
220 |     border: none;
221 | }
222 | 
223 | .blogs-title{
224 |     font-size: 50px;
225 |     font-weight: bold;
226 |     padding: 10px;
227 | }
228 | .blog-box{
229 |     text-align: center;
230 |     margin-top:30px;
231 | }
232 | .description-blog{
233 |     font-size:22px;
234 |     width: 50%;
235 |     margin: auto;
236 | }
237 | 
238 | 
239 | .blog{
240 |     width:350px;
241 |     height: 430px;
242 |     background:white;
243 |     box-shadow: 4px 4px 8px gray;
244 |     border-radius:10px;
245 | }
246 | .blog-img{
247 |     width:350px;
248 |     border-radius: 10px;
249 |     padding-bottom: 10px;
250 | }
251 | .blog-text{
252 |     padding: 15px;
253 | }
254 | .blog-title{
255 |     font-size:24px;
256 |     font-weight: bold;
257 |     color: rgb(54, 53, 53);
258 | }
259 | .blog-description{
260 |     font-size:18px;
261 |     color: rgb(76, 72, 72);
262 |     margin-top: 15px;
263 | }
264 | .blogs{
265 |     margin-top: 35px;
266 |     padding:30px;
267 |     display: flex;
268 |     justify-content: space-evenly ;
269 |     align-items:center;
270 | }
271 | 
272 | footer{
273 |     width: 100%;
274 |     height: 70vh;
275 |     background-image: url("./asset/image/footer-bg.png"),linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.9));
276 |     background-repeat:no-repeat;
277 |     background-blend-mode: overlay;
278 |     color: white;
279 |     line-height: 1.8em;
280 |    
281 | }
282 | .footer-container{
283 |     display: flex;
284 |     width: 75%;
285 |     height: 60vh;
286 |     margin: 0 auto;
287 |     justify-content: space-around;
288 |     align-items: center;
289 |     /* padding: 20px; */
290 |     border-bottom: 1px solid gray;
291 | }
292 | .logo-box{
293 |     width: 25%;
294 | }
295 | .logo-box img{
296 |     width:170px;
297 | }
298 | 
299 | .copy{
300 |     text-align: center;
301 |     padding: 15px;
302 | }
303 | .fa-solid{
304 |     margin-right: 7px;
305 | }
306 | .footer-title{
307 |     margin-bottom: 30px;
308 | }
309 | .icons{
310 |     /* text-align: center; */
311 |     margin-top:20px;
312 | }
313 | .fa-brands{
314 |     margin: 10px;
315 |     font-size:20px;
316 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Digital Agency</title>
  8 |     <link rel="stylesheet" href="style.css" />
  9 |     <link
 10 |       rel="stylesheet"
 11 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
 12 |     />
 13 |     <link
 14 |       rel="stylesheet"
 15 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/brands.min.css"
 16 |     />
 17 |   </head>
 18 |   <body>
 19 |     <header>
 20 |       <div class="nav-container">
 21 |         <div class="logo-container">
 22 |           <p class="logo-title">Digital</p>
 23 |           <img class="logo" src="./asset/logo/logo.png" alt="" />
 24 |         </div>
 25 |         <div class="menu-container">
 26 |           <ul class="items">
 27 |             <li class="item">Home</li>
 28 |             <li class="item">Service</li>
 29 |             <li class="item">About</li>
 30 |             <li class="item">contact</li>
 31 |           </ul>
 32 |         </div>
 33 |       </div>
 34 |     </header>
 35 |     <!-- end nav bar section  -->
 36 |     <div class="banner-section">
 37 |       <div class="digital-banner">
 38 |         <div>
 39 |           <h1 class="title">
 40 |             <span class="title-digital">Digital</span> Agency You <br />
 41 |             Can Rely Upon !
 42 |           </h1>
 43 |           <p class="description">
 44 |             Hymenaeos! Omnis arcu vitae? Phasellus irure cupidatat incidunt,
 45 |             semper metus, nibh adipisci assumenda odio, quos, senectus vehicula
 46 |             occaecat, officiis malesuada cras.
 47 |           </p>
 48 | 
 49 |           <div class="buttons">
 50 |             <button class="btn btn-more">DISCOVER MORE</button>
 51 |             <button class="btn hire">HIRE US NOW</button>
 52 |           </div>
 53 |         </div>
 54 |       </div>
 55 |     </div>
 56 | 
 57 |     <!-- end banner section  -->
 58 | 
 59 |     <!-- start services section  -->
 60 |     <div class="services-container">
 61 |       <div class="service-left">
 62 |         <div class="services-left-content">
 63 |           <button class="btn btn-service">Service List</button>
 64 |           <h1 class="title-service">
 65 |             <span class="title-digital">Services</span> We Can Help You With !
 66 |           </h1>
 67 |           <p class="description-service">
 68 |             Vero id posuere tempus aspernatur quaerat mollis voluptatum eveniet
 69 |             porro viverra libero habitasse porro fames quos pharetra diam
 70 |             cupidatat ligula! Netus! Quos dignissi mos laoreet.
 71 |           </p>
 72 |           <ul class="service-list">
 73 |             <li>Nobis ridiculus cupiditate egestas commodi.</li>
 74 |             <li>Ipsum dui curabitur dapibuish mollitia.</li>
 75 |           </ul>
 76 |           <div class="author-container">
 77 |             <div class="author-details">
 78 |               <img src="./asset/image/author.jpg" alt="author" />
 79 |               <div>
 80 |                 <h4>George Smith</h4>
 81 |                 <h6>CEO, Director</h6>
 82 |               </div>
 83 |             </div>
 84 |             <button class="more-details">MORE DETAILS</button>
 85 |           </div>
 86 |         </div>
 87 |       </div>
 88 |       <div class="service-right">
 89 |         <div class="service-box">
 90 |           <div class="service">
 91 |             <img class="service-logo" src="./asset/icons/coding.png" alt="" />
 92 |             <h3>Website Development</h3>
 93 |           </div>
 94 |           <div class="service">
 95 |             <img
 96 |               class="service-logo"
 97 |               src="./asset/icons/bar-chart.png"
 98 |               alt=""
 99 |             />
100 |             <h3>Graphic & Sketch Designing</h3>
101 |           </div>
102 |         </div>
103 |         <div class="service-box">
104 |           <div class="service">
105 |             <img class="service-logo" src="./asset/icons/startup.png" alt="" />
106 |             <h3>SEO & Content Writing</h3>
107 |           </div>
108 |           <div class="service">
109 |             <img
110 |               class="service-logo"
111 |               loading="lazy"
112 |               src="./asset/icons/digital-marketing.png"
113 |               alt=""
114 |             />
115 |             <h3>Digital Market Planning</h3>
116 |           </div>
117 |         </div>
118 |       </div>
119 |     </div>
120 | 
121 |     <div class="appointment-section">
122 |       <div class="call-box">
123 |         <img
124 |           class="appointment-logo"
125 |           src="./asset/icons/phone-call.png"
126 |           alt=""
127 |         />
128 |         <div>
129 |           <h6>GET A FREE CONSULTATION</h6>
130 |           <h1>987 233 0000</h1>
131 |         </div>
132 |       </div>
133 |       <div class="apointment-descript">
134 |         <p>
135 |           Vero id posuere tempus aspernatur quaerat mollis voluptatum eveniet
136 |           porro <br />
137 |           viverra libero habitasse Aut ab nibh aliqua optio veniet porro viverr.
138 |         </p>
139 |       </div>
140 |       <div class="appointment-button">
141 |         <button>MAKE APPOINTMENT</button>
142 |       </div>
143 |     </div>
144 | 
145 |     <div class="blog-container">
146 |       <div class="blog-box">
147 |         <h1 class="blogs-title">
148 |           <span class="title-digital">Blog</span> & News From Us!
149 |         </h1>
150 |         <p class="description-blog">
151 |           Sint nascetur facere, delectus conubia consequuntur, nonummy
152 |           distinctio! Non officiis, id natus non nisl provident justo.
153 |         </p>
154 |       </div>
155 |       <div class="blogs">
156 |         <div class="blog">
157 |           <img class="blog-img" src="./asset/image/blog-1.jpg" alt="" />
158 |           <div class="blog-text">
159 |             <h3 class="blog-title">
160 |               Maxime rhoncus aliquet sint eu accusantium illum.
161 |             </h3>
162 |             <p class="blog-description">
163 |               Malesuada error laudantium quibusdam, voluptas recusandae,
164 |               corporis nec, metus numquam, facilis, nascetur?.....
165 |             </p>
166 |           </div>
167 |         </div>
168 |         <div class="blog">
169 |           <img class="blog-img" src="./asset/image/blog-1.jpg" alt="" />
170 |           <div class="blog-text">
171 |             <h3 class="blog-title">
172 |               Maxime rhoncus aliquet sint eu accusantium illum.
173 |             </h3>
174 |             <p class="blog-description">
175 |               Malesuada error laudantium quibusdam, voluptas recusandae,
176 |               corporis nec, metus numquam, facilis, nascetur?.....
177 |             </p>
178 |           </div>
179 |         </div>
180 |         <div class="blog">
181 |           <img class="blog-img" src="./asset/image/blog-1.jpg" alt="" />
182 |           <div class="blog-text">
183 |             <h3 class="blog-title">
184 |               Maxime rhoncus aliquet sint eu accusantium illum.
185 |             </h3>
186 |             <p class="blog-description">
187 |               Malesuada error laudantium quibusdam, voluptas recusandae,
188 |               corporis nec, metus numquam, facilis, nascetur?.....
189 |             </p>
190 |           </div>
191 |         </div>
192 |       </div>
193 |     </div>
194 | 
195 |     <footer>
196 |       <div class="footer-container">
197 |         <div class="logo-box">
198 |           <img src="./asset/logo/logo.png" alt="" />
199 |           <p>
200 |             Auctor blandit dolorem primis eius odit soluta molestie? Malesuada
201 |             elementum aut doloremque labo.
202 |           </p>
203 |           <div class="icons">
204 |             <i class="fa-brands fa-facebook"></i>
205 |             <i class="fa-brands fa-twitter"></i>
206 |             <i class="fa-brands fa-instagram"></i>
207 |             <i class="fa-brands fa-youtube"></i>
208 |           </div>
209 |         </div>
210 |         <div class="Useful-links">
211 |           <h3 class="footer-title">Useful Links</h3>
212 | 
213 |           <p>About us</p>
214 |           <p>Careers</p>
215 |           <p>News & Artciles</p>
216 |           <p>legal Notice</p>
217 |         </div>
218 |         <div class="supports">
219 |           <h3 class="footer-title">Supports</h3>
220 | 
221 |           <p>Help Center</p>
222 |           <p>Contact Us</p>
223 |           <p>FAQ</p>
224 |           <p>Parent Community</p>
225 |         </div>
226 |         <div class="contact">
227 |           <h3 class="footer-title">Contact Information</h3>
228 |           <p>Feel free to contact & reach us !!</p>
229 |           <p>
230 |             <i class="fa-solid fa-location-pin"></i>3557 Derek Drive, Orlando,
231 |             Florida
232 |           </p>
233 |           <p><i class="fa-solid fa-phone-volume"></i>+1(456)657-887</p>
234 |           <p><i class="fa-solid fa-envelope d"></i>info@domain.com</p>
235 |         </div>
236 |       </div>
237 |       <!-- <hr  class="hr"/> -->
238 |       <p class="copy">
239 |         <small>Copyright &copy; 2022 Agence. All rights reserved.</small>
240 |       </p>
241 |     </footer>
242 |   </body>
243 | </html>
244 | 


--------------------------------------------------------------------------------