├── README.md
├── _config.yml
├── .vscode
    └── settings.json
├── img
    ├── logo.png
    ├── play.png
    ├── home2.png
    ├── html.jpeg
    ├── network.png
    ├── user1.jpg
    ├── user2.jpg
    ├── wave1.png
    ├── wave2.png
    ├── service1.png
    ├── service2.png
    ├── service3.png
    ├── twitter-icon.png
    ├── facebook-icon.png
    ├── instagram-icon.png
    ├── linkedin-icon.png
    ├── snapchat-icon.png
    └── whatsapp-icon.png
├── style.css
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # Digital agency.
2 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-hacker


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 5501
3 | }
4 | 


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/logo.png


--------------------------------------------------------------------------------
/img/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/play.png


--------------------------------------------------------------------------------
/img/home2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/home2.png


--------------------------------------------------------------------------------
/img/html.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/html.jpeg


--------------------------------------------------------------------------------
/img/network.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/network.png


--------------------------------------------------------------------------------
/img/user1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/user1.jpg


--------------------------------------------------------------------------------
/img/user2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/user2.jpg


--------------------------------------------------------------------------------
/img/wave1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/wave1.png


--------------------------------------------------------------------------------
/img/wave2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/wave2.png


--------------------------------------------------------------------------------
/img/service1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/service1.png


--------------------------------------------------------------------------------
/img/service2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/service2.png


--------------------------------------------------------------------------------
/img/service3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/service3.png


--------------------------------------------------------------------------------
/img/twitter-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/twitter-icon.png


--------------------------------------------------------------------------------
/img/facebook-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/facebook-icon.png


--------------------------------------------------------------------------------
/img/instagram-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/instagram-icon.png


--------------------------------------------------------------------------------
/img/linkedin-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/linkedin-icon.png


--------------------------------------------------------------------------------
/img/snapchat-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/snapchat-icon.png


--------------------------------------------------------------------------------
/img/whatsapp-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/Digital_Agency/HEAD/img/whatsapp-icon.png


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   scroll-behavior: smooth;
  3 | }
  4 | .navbar {
  5 |   background-image: linear-gradient(to right, #365daf, #3ec9c9) !important;
  6 | }
  7 | .navabr-nav .nav-item .nav-link {
  8 |   color: white !important ;
  9 |   font-weight: 600;
 10 | }
 11 | 
 12 | /* Home section */
 13 | #Home {
 14 |   background-image: linear-gradient(to right, #365daf, #3ec9c9) !important;
 15 |   color: white;
 16 |   /* height: 100vh; */
 17 | }
 18 | #Home a img {
 19 |   width: 60px;
 20 |   margin-right: 7px;
 21 | }
 22 | #Home a {
 23 |   color: white;
 24 |   text-decoration: none;
 25 | }
 26 | 
 27 | .wave-banner {
 28 |   width: 100%;
 29 | }
 30 | /* services */
 31 | .title::after {
 32 |   content: "";
 33 |   display: block;
 34 |   background: #365daf;
 35 |   height: 5px;
 36 |   width: 200px;
 37 |   margin: auto;
 38 | }
 39 | .service_img {
 40 |   width: 250px;
 41 |   height: 150px;
 42 | }
 43 | 
 44 | .services-button {
 45 |   background-image: linear-gradient(to right, #365daf, #3ec9c9) !important;
 46 |   color: white !important;
 47 |   border: none;
 48 |   width: 120px;
 49 |   height: 40px;
 50 |   margin-left: auto !important;
 51 |   border-radius: 20px !important;
 52 |   margin-top: 20px;
 53 | }
 54 | 
 55 | .user-image {
 56 |   width: 150px;
 57 |   height: 150px;
 58 | }
 59 | .test_border {
 60 |   border-left: 5px solid #365daf;
 61 |   border-radius: 2px;
 62 | }
 63 | /* social */
 64 | 
 65 | #social {
 66 |   background: #f8f9fa;
 67 | }
 68 | .social_image {
 69 |   width: 60px;
 70 | }
 71 | .social_image:hover {
 72 |   transform: translateY(-10px);
 73 |   transition: all 0.5s;
 74 | }
 75 | #footer {
 76 |   background-image: linear-gradient(to right, #365daf, #3ec9c9) !important;
 77 | }
 78 | #footer .fas {
 79 |   font-size: 20px;
 80 |   background-image: linear-gradient(to right, #365daf, #3ec9c9) !important;
 81 |   width: 40px;
 82 |   height: 40px;
 83 |   border-radius: 4px;
 84 |   padding-top: 7px;
 85 |   margin-right: 10px;
 86 |   text-align: center;
 87 | }
 88 | #footerbtn {
 89 |   background-image: linear-gradient(to right, #365daf, #3ec9c9) !important;
 90 |   margin-top: 20px;
 91 |   border: none !important;
 92 |   border-radius: 0 !important;
 93 |   padding: 8px 15px;
 94 |   color: white;
 95 | }
 96 | .wave2 {
 97 |   width: 100%;
 98 | }
 99 | .navbar .navbar-nav .nav-item .nav-link.active {
100 |   border-bottom: 3px solid #42e718;
101 |   transition: all 0.3s;
102 | }
103 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <title>MASUD PERVEZ</title>
  6 |   <!-- Required meta tags -->
  7 |   <meta charset="utf-8">
  8 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  9 |   <link rel="shortcut icon" href="/img/img/android-chrome-192x192.png" type="image/x-icon">
 10 |   <link rel="stylesheet" href="style.css">
 11 |   <script src="https://kit.fontawesome.com/279b81cb20.js" crossorigin="anonymous"></script>
 12 | 
 13 |   <!-- Bootstrap CSS v5.0.2 -->
 14 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
 15 |     integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 16 | </head>
 17 | 
 18 | <body data-bs-spy="scroll" data-bs-target="#menu-scroll">
 19 |   <section class="">
 20 |     <nav id="menu-scroll" class="navbar navbar-expand-md  navbar-dark  color-dark fixed-top ">
 21 |       <div class="container">
 22 |         <a href="" class="navbar-brand">
 23 |           <img src="./img/logo.png" height="40px" class="navbar-icon w-30" alt="">
 24 |         </a>
 25 |         <button class="navbar-toggler" data-bs-target="#manunavbarlink" data-bs-toggle="collapse" type="button">
 26 |           <span class="navbar-toggler-icon"></span>
 27 |         </button>
 28 | 
 29 |         <div class="collapse navbar-collapse" id="manunavbarlink">
 30 |           <ul class="navbar-nav ms-auto">
 31 |             <li class="nav-item">
 32 |               <a class="nav-link " href="#Home">Home</a>
 33 |             </li>
 34 |             <li class="nav-item">
 35 |               <a class="nav-link" href="#Abouts">Abouts</a>
 36 |             </li>
 37 |             <li class="nav-item">
 38 |               <a class="nav-link" href="#Services">Services</a>
 39 |             </li>
 40 |             <li class="nav-item">
 41 |               <a class="nav-link" href="#testimonials">testimonials</a>
 42 |             </li>
 43 |             <li class="nav-item">
 44 |               <a class="nav-link" href="#footer">Contacts</a>
 45 |             </li>
 46 |           </ul>
 47 |         </div>
 48 |       </div>
 49 |     </nav>
 50 |   </section>
 51 |   <!-- home-section -->
 52 |   <section id="Home" class="image-icc">
 53 |     <div class="container py-5 my-3">
 54 |       <div class="row align-items-center">
 55 |         <div class="col-md-6 mt-5">
 56 |           <h1>BEST DIGITAL AGENCY</h1>
 57 |           <p class="lead">Subscribe easy tutorials toutube channel to watch more video on Website development,Digital
 58 |             Markating,Wordpress and graphics desing
 59 |           </p>
 60 |           <a href=""><img src="./img/play.png" class="" alt=""><span>Watch tutorials</span></a>
 61 |         </div>
 62 |         <div class="col-md-6">
 63 |           <img src="./img/home2.png" class="img-fluid w-100" alt="">
 64 |         </div>
 65 |       </div>
 66 |     </div>
 67 |     <img src="./img/wave1.png" alt="" class="wave-banner">
 68 |   </section>
 69 |   <!--  -->
 70 | 
 71 |   <!-- About section start -->
 72 |   <section id="Abouts" class="mt-5 py-3">
 73 |     <div class="container py-5 mt-5">
 74 |       <div class="row align-items-center">
 75 |         <h1 class="title text-center">Abouts.</h1>
 76 |       </div>
 77 |       <div class="row text-align-center mt-4">
 78 |         <div class="col-md-6">
 79 |           <h2>Why we're different?</h2>
 80 |           <ul>
 81 |             <li class="py-2">Understand our client's business gole fast</li>
 82 |             <li class="py-2">Believe in doing business with honesty</li>
 83 |             <li class="py-2">We deliver on time</li>
 84 |             <li class="py-2">We cereate a winning content strategy</li>
 85 |             <li class="py-2">We project your online reputation</li>
 86 |             <li class="py-2">We cereate a winning content strategy</li>
 87 |             <li class="py-2">We project your online reputation</li>
 88 |           </ul>
 89 |         </div>
 90 |         <div class="col-md-6">
 91 |           <img src="./img/network.png" class="img-fluid w-100" alt="">
 92 |         </div>
 93 |       </div>
 94 |     </div>
 95 |   </section>
 96 |   <!-- About section end -->
 97 | 
 98 |   <!-- Services section -->
 99 |   <section class="Services" id="Services">
100 |     <div class="container py-5 mt-5">
101 |       <div class="row">
102 |         <h1 class="title text-center mt-5">Services</h1>
103 |       </div>
104 |       <div class="row mt-3">
105 |         <div class="col-12 col-md-4 ">
106 |           <img src="./img/service1.png" class="service_img rounded" alt="">
107 |           <h3 class="mt-2">Web Devolopment</h3>
108 |           <p class="lead">
109 |             Master your language with lessons, quizzes, and projects designed for real-life scenarios. Create portfolio
110 |             projects that showcase your new skills to help land your dream job. Affordable Learning.
111 |           </p>
112 |         </div>
113 |         <div class="col-12 col-md-4 my-3">
114 |           <img src="./img/html.jpeg" class="service_img rounded" alt="">
115 |           <h3 class="mt-2">Learning HTML </h3>
116 |           <p class="lead">
117 |             Learn to code to Build a Better Future for You and for the World. Free courses! We Provide Online Courses
118 |             That Are Easy to Grasp. Web development and more. Subscribe To News. View Resources.
119 |           </p>
120 |         </div>
121 |         <div class="col-12 col-md-4 my-3">
122 |           <img src="./img/service3.png" class="service_img" alt="">
123 |           <h3>Animated Ads</h3>
124 |           <p class="lead">
125 |             watch more video on Website development,Digital Markating,Wordpress and graphics desing
126 |           </p>
127 |         </div>
128 |       </div>
129 |       <div class="row mt-3">
130 |         <div class="col-12 col-md-4 ">
131 |           <img src="./img/service1.png" class="service_img" alt="">
132 |           <h3>Growth Marketing</h3>
133 |           <p class="lead">
134 |             watch more video on Website development,Digital Markating,Wordpress and graphics desing
135 |           </p>
136 |         </div>
137 |         <div class="col-12 col-md-4 my-3">
138 |           <img src="./img/service2.png" class="service_img" alt="">
139 |           <h3>Online branding</h3>
140 |           <p class="lead">
141 |             watch more video on Website development,Digital Markating,Wordpress and graphics desing
142 |           </p>
143 |         </div>
144 |         <div class="col-12 col-md-4 my-3">
145 |           <img src="./img/service3.png" class="service_img" alt="">
146 |           <h3>Animated Ads</h3>
147 |           <p class="lead">
148 |             watch more video on Website development,Digital Markating,Wordpress and graphics desing
149 |           </p>
150 |         </div>
151 |       </div>
152 |       <div class="row ">
153 |         <div class="col-12 text-center">
154 |           <button class="services-button btn">All service</button>
155 |         </div>
156 |       </div>
157 |     </div>
158 |   </section>
159 | 
160 |   <!-- testimonials start-->
161 |   <secction id="testimonials" class="p-3 py-5">
162 |     <div class="container">
163 |       <div class="row align-items-center my-4">
164 |         <h1 class="title text-center">WHAT CLIENTS SAY</h1>
165 |       </div>
166 |       <div class="row align-items-center mt-5">
167 |         <div class="col-md-6 test_border mt-2">
168 |           <img src="./img/user1.jpg" class="user-image rounded-circle" alt="">
169 |           <p class="d-inline-block">
170 |             <b>MASUD PERVEZ</b><br>
171 |             Co-founder at xyz
172 |           </p>
173 |           <p class="lead mt-2">
174 |             Subscribe easy tutorials toutube channel to watch more video on Website development,Digital
175 |             Markating,Wordpress and graphics desing
176 |           </p>
177 |         </div>
178 |         <div class="col-md-6 test_border mt-2">
179 |           <img src="./img/user2.jpg" class="user-image rounded-circle" alt="">
180 |           <p class="d-inline-block">
181 |             <b>Masud Pervez</b><br>
182 |             Director at xyz
183 |           </p>
184 |           <p class="lead mt-2">
185 |             Subscribe easy tutorials toutube channel to watch more video on Website development,Digital
186 |             Markating,Wordpress and graphics desing
187 |           </p>
188 |         </div>
189 |       </div>
190 |       <div class="row align-items-center mt-5">
191 |         <div class="col-md-6 test_border mt-2">
192 |           <img src="./img/user1.jpg" class="user-image rounded-circle" alt="">
193 |           <p class="d-inline-block">
194 |             <b>MASUD PERVEZ</b><br>
195 |             Co-founder at xyz
196 |           </p>
197 |           <p class="lead mt-2">
198 |             Subscribe easy tutorials toutube channel to watch more video on Website development,Digital
199 |             Markating,Wordpress and graphics desing
200 |           </p>
201 |         </div>
202 |         <div class="col-md-6 test_border mt-2">
203 |           <img src="./img/user2.jpg" class="user-image rounded-circle" alt="">
204 |           <p class="d-inline-block">
205 |             <b>Masud Pervez</b><br>
206 |             Director at xyz
207 |           </p>
208 |           <p class="lead mt-2">
209 |             Subscribe easy tutorials toutube channel to watch more video on Website development,Digital
210 |             Markating,Wordpress and graphics desing
211 |           </p>
212 |         </div>
213 |       </div>
214 |     </div>
215 |   </secction>
216 | 
217 |   <section id="social" class="">
218 |     <div class="row align-items-center my-5">
219 |       <h1 class="title text-center">FIND US ON SOCISAL MEDIA</h1>
220 |     </div>
221 |     <div class="row text-center">
222 |       <div class="col-12">
223 |         <a href="#"><img class="social_image" src="./img/facebook-icon.png" alt=""></a>
224 |         <a href="#"><img class="social_image" src="./img/instagram-icon.png" alt=""></a>
225 |         <a href="#"><img class="social_image" src="./img/linkedin-icon.png" alt=""></a>
226 |         <a href="#"><img class="social_image" src="./img/snapchat-icon.png" alt=""></a>
227 |         <a href="#"><img class="social_image" src="./img/twitter-icon.png" alt=""></a>
228 |         <a href="#"><img class="social_image" src="./img/whatsapp-icon.png" alt=""></a>
229 |       </div>
230 |     </div>
231 |   </section>
232 |   <!-- testimonials end-->
233 |   <section class="" id="footer">
234 |     <img src="./img/wave2.png" class="wave2" alt="">
235 |     <div class="container text-light p-3 py-5">
236 |       <div class="row">
237 |         <div class="col-md-4 mb-4 mb-md-0 footer-box">
238 |           <img src="./img/logo.png" class="w-25" alt="">
239 |           <p class="lead mt-2">
240 |             Subscribe easy tutorials toutube channel to watch more video on Website development,Digital
241 |             Markating,Wordpress and graphics desing . Press ball icon to get notification
242 |           </p>
243 |         </div>
244 |         <div class="col-md-4 mb-4 mb-md-0 footer-box">
245 |           <h3 class="mb-3">COntacts Us.</h3>
246 |           <p class="lead"><i class="fas fa-map-marker-alt"></i>Dhaka,Bangladesh</p>
247 |           <p class="lead"><i class="fas fa-phone-alt"></i>+8801783-307711</p>
248 |           <p class="lead"><i class="fas fa-envelope"></i>tuhin.semicolonit@gmail.com</p>
249 |         </div>
250 |         <div class="col-md-4 mb-4 mb-md-0 footer-box">
251 |           <h3 class="mb-3">SUBSCRIBE NEWSLTTER</h3>
252 |           <input type="text" placeholder="Enter email" class="form-control">
253 |           <button class="btn btn-priamry" id="footerbtn">Subscribe</button>
254 |         </div>
255 |       </div>
256 |       <hr class="text-white">
257 |       <p class="lead text-center">&copy; MASUD PERVEZ TUHIN</p>
258 |     </div>
259 |   </section>
260 | 
261 |   <!-- Bootstrap JavaScript Libraries -->
262 |   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
263 |     integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
264 |     crossorigin="anonymous"></script>
265 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
266 |     integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
267 |     crossorigin="anonymous"></script>
268 | 
269 | </body>
270 | 
271 | </html>


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