├── asset ├── icons │ ├── bar-chart.png │ ├── coding.png │ ├── digital-marketing.png │ ├── phone-call.png │ └── startup.png ├── image │ ├── author.jpg │ ├── background.jpg │ ├── blog-1.jpg │ ├── blog-2.jpg │ ├── blog-3.jpg │ ├── footer-bg.png │ ├── girl-3.jpg │ ├── man-1.jpg │ ├── man-2.jpg │ └── man-4.jpg └── logo │ └── logo.png ├── flex.css ├── flex.html ├── index.html └── style.css /asset/icons/bar-chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/icons/bar-chart.png -------------------------------------------------------------------------------- /asset/icons/coding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/icons/coding.png -------------------------------------------------------------------------------- /asset/icons/digital-marketing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/icons/digital-marketing.png -------------------------------------------------------------------------------- /asset/icons/phone-call.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/icons/phone-call.png -------------------------------------------------------------------------------- /asset/icons/startup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/icons/startup.png -------------------------------------------------------------------------------- /asset/image/author.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/image/author.jpg -------------------------------------------------------------------------------- /asset/image/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/image/background.jpg -------------------------------------------------------------------------------- /asset/image/blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/image/blog-1.jpg -------------------------------------------------------------------------------- /asset/image/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/image/blog-2.jpg -------------------------------------------------------------------------------- /asset/image/blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/image/blog-3.jpg -------------------------------------------------------------------------------- /asset/image/footer-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/image/footer-bg.png -------------------------------------------------------------------------------- /asset/image/girl-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/image/girl-3.jpg -------------------------------------------------------------------------------- /asset/image/man-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/image/man-1.jpg -------------------------------------------------------------------------------- /asset/image/man-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/image/man-2.jpg -------------------------------------------------------------------------------- /asset/image/man-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/image/man-4.jpg -------------------------------------------------------------------------------- /asset/logo/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Build-A-Digital-Agency-Website-Using-HTML-and-CSS/cbf802f68a6ca46e6476ec7f71b5f6831a45dd3f/asset/logo/logo.png -------------------------------------------------------------------------------- /flex.css: -------------------------------------------------------------------------------- 1 | .test{ 2 | cursor:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"),auto; 3 | } 4 | 5 | .parent{ 6 | display: flex; 7 | flex-direction: row; 8 | justify-content: space-around; 9 | width:100%; 10 | height:60vh; 11 | align-items: center; 12 | flex-wrap: wrap; 13 | 14 | } 15 | 16 | .child1{ 17 | padding: 50px; 18 | background: green; 19 | font-size:25px ; 20 | font-weight: bold; 21 | color: white; 22 | order: 3; 23 | flex-grow: 2; 24 | } 25 | .child2{ 26 | padding: 50px; 27 | background: red; 28 | font-size:25px ; 29 | font-weight: bold; 30 | color: white; 31 | order: 2; 32 | flex-grow: 2; 33 | } 34 | .child3{ 35 | padding: 50px; 36 | background: blue; 37 | font-size:25px ; 38 | font-weight: bold; 39 | color: white; 40 | } -------------------------------------------------------------------------------- /flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | flex 8 | 9 | 10 | 11 | 12 |
13 | 32% 14 | 15 | 16 |
17 | WOW 18 |

hello

19 |

hello

20 |

hello

21 |
22 | 23 |

Hello world

24 | 25 |

26 | Coun t ry 27 |

28 | 29 |
30 |
1
31 |
2
32 |
3
33 |
34 | 35 | 36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Digital 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 |
16 |
17 |
    18 |
  • Home
    • 19 |
  • About
    • 20 |
  • Contact
    • 21 |
  • Service
    • 22 |
23 |
24 |
25 |
26 | 27 | 44 | 45 |
46 |
47 |
48 | 49 |

50 | Service We Can Help You With ! 51 |

52 |

53 | Vero id posuere tempus aspernatur quaerat mollis voluptatum eveniet 54 | porro viverra libero habitasse porro fames quos pharetra diam 55 | cupidatat ligula! Netus! Quos dignissi mos laoreet. 56 |

57 |
    58 |
  • Nobis ridiculus cupiditate egestas commodi.
    • 59 |
  • Ipsum dui curabitur dapibuish mollitia.
    • 60 |
61 |
62 |
63 | 64 |
George Smith
CEO, Director
65 |
66 |
67 | 68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | 77 |

Website Development

78 |
79 |
80 | 85 |

Website Development

86 |
87 |
88 |
89 |
90 | 91 |

Website Development

92 |
93 |
94 | 95 |

Website Development

96 |
97 |
98 |
99 |
100 |
101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0px; 3 | margin: 0px; 4 | /* border: 1px solid red; */ 5 | } 6 | 7 | .nav-container{ 8 | display: flex; 9 | padding: 20px; 10 | justify-content: space-around; 11 | background-color:#9b9898 ; 12 | color: white; 13 | } 14 | .items{ 15 | display: flex; 16 | list-style: none; 17 | } 18 | .item{ 19 | font-size: 22px; 20 | font-weight: bold; 21 | padding: 5px; 22 | margin-right: 10px; 23 | } 24 | 25 | .banner-container{ 26 | width: 100%; 27 | height: 100vh; 28 | background-image: url("./asset/image/background.jpg"),linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)); 29 | background-blend-mode: overlay; 30 | display: flex; 31 | justify-content: center; 32 | text-align: center; 33 | align-items: center; 34 | color: white; 35 | } 36 | 37 | .title-banner{ 38 | font-size:85px; 39 | font-weight: bold; 40 | } 41 | .primary{ 42 | color: rgb(240, 12, 12); 43 | } 44 | 45 | .descripton{ 46 | font-size: 22px; 47 | width: 50%; 48 | margin: auto; 49 | padding:10px 50 | } 51 | 52 | .btn{ 53 | padding: 15px 35px; 54 | border: none; 55 | font-size: 18px; 56 | margin: 5px; 57 | } 58 | .btn-discover{ 59 | background-color:red; 60 | color: white; 61 | } 62 | .btn-hire{ 63 | color: red; 64 | } 65 | 66 | 67 | 68 | .service-container{ 69 | width: 100%; 70 | height: 100vh; 71 | background-image: url("./asset/image/footer-bg.png"),linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.9)); 72 | background-blend-mode: overlay;; 73 | color: white; 74 | padding:20px; 75 | display: flex; 76 | justify-content:center; 77 | align-items:center; 78 | margin: 0 auto; 79 | } 80 | .service-btn{ 81 | color: gray; 82 | border-radius:25px 83 | } 84 | .service-title{ 85 | font-size: 40px; 86 | font-weight: bold; 87 | } 88 | .service-description{ 89 | font-size:20px; 90 | width: 50%; 91 | padding: 10px; 92 | } 93 | .author-details{ 94 | display: flex; 95 | align-items: center; 96 | } 97 | .author-img-desc{ 98 | display: flex; 99 | align-items:center; 100 | padding: 20px; 101 | border-right: 1px solid red; 102 | } 103 | .author-img{ 104 | width:100px; 105 | height: 100px; 106 | border-radius:50px; 107 | } 108 | .more-details{ 109 | padding: 20px; 110 | } 111 | .service-up{ 112 | display: flex; 113 | } 114 | .service{ 115 | padding: 10px; 116 | background-color:white; 117 | box-shadow: 4px 4px 8px gray; 118 | width: 200px; 119 | height: 200px; 120 | text-align:center; 121 | color: black; 122 | border-radius: 10px; 123 | margin: 5px; 124 | } 125 | .service-logo{ 126 | width: 50%; 127 | padding-bottom: 10px; 128 | } 129 | .service-down{ 130 | display: flex; 131 | } 132 | .service-left-container{ 133 | width: 50%; 134 | } 135 | 136 | --------------------------------------------------------------------------------