├── assets └── images │ ├── logo.png │ ├── beautiful.jpg │ └── construction.jpg ├── README.md ├── styles.css └── index.html /assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/web-design-agency-project/HEAD/assets/images/logo.png -------------------------------------------------------------------------------- /assets/images/beautiful.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/web-design-agency-project/HEAD/assets/images/beautiful.jpg -------------------------------------------------------------------------------- /assets/images/construction.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/web-design-agency-project/HEAD/assets/images/construction.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML Web Design Agency Project by 2023 Web Development Bootcamp Repository from Udemy. 2 | 3 | ## Content: 4 | 5 | - HTML Web Design Project developed by Dr. Angela Yu from Udemy. 6 | 7 | ### Used IDE: Visual Studio Code. 8 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Poppins", sans-serif; 3 | margin: 50px 50px 0 50px; 4 | background-color: #faf9f6; 5 | display: flex; 6 | flex-direction: column; 7 | min-height: 95vh; 8 | } 9 | 10 | .main { 11 | flex: 1; 12 | } 13 | 14 | h1 { 15 | font-size: 4rem; 16 | height: 200px; 17 | width: 800px; 18 | } 19 | 20 | .creative { 21 | color: midnightblue; 22 | } 23 | 24 | .tile-image { 25 | height: 200px; 26 | float: left; 27 | margin-top: 20px; 28 | margin-right: 50px; 29 | } 30 | 31 | footer { 32 | text-align: right; 33 | color: midnightblue; 34 | } 35 | 36 | .card { 37 | width: 45%; 38 | } 39 | 40 | .left { 41 | float: left; 42 | } 43 | 44 | .right { 45 | float: right; 46 | } 47 | 48 | /* Responsiveness. */ 49 | @media (max-width: 680px) { 50 | .logo { 51 | width: 100px; 52 | } 53 | 54 | h1 { 55 | font-size: 3.5rem; 56 | text-align: center; 57 | } 58 | 59 | .card { 60 | width: 100%; 61 | display: block; 62 | margin-bottom: 30px; 63 | text-align: justify; 64 | } 65 | 66 | .card img { 67 | 68 | width: 100%; 69 | display: inline; 70 | margin-bottom: 10px; 71 | object-fit: cover; 72 | } 73 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Web Design Agency Project 12 | 13 | 14 | 15 |
16 | 17 |

We are a Creative Design Agency

18 |
19 | hand and flower in water 20 |

Beauty

21 |

22 | We strive to create the most beautiful websites for all your needs. 23 | Working closely with you to design and develop an amazing website for your business. 24 |

25 |
26 |
27 | metal structure 28 |

Construction

29 |

Built by our team of professional developers, we ensure the most rigourous and modern websites. 30 | Built from scratch using HTML and CSS. Only the best for you. 31 |

32 |
33 | 34 |
35 | 40 | 41 | 42 | --------------------------------------------------------------------------------