Installing a ceiling

In Part 3 of “Let’s Build a Site Together” we focus on fonts, initial assets, global settings, the header, and the hero section of the home page. The website we are building is inspired by this site.

Here is our site so far: build.hartfordwp.com

Video Recording of Meetup

Click to view the recording of our July 2021 meetup. Files are below.

Screencap of July Meetup
Play

Images & Code

Here is the image we used for the 50/50 section builds.

Puppy and kitten snuggling

CSS

.remove-margin {
	margin-bottom: 0px !important;
}
.half-width {
	width: 55%;
}

Icon SVG Code

<svg xmlns="http://www.w3.org/2000/svg" width="512" viewBox="0 0 512 512" height="512" id="Layer_1"><circle r="20" cy="204.926" cx="172"></circle><path d="m512 200.926c0-56.827-68.277-98.909-92.687-123.313-24.118-24.118-69.26-22.855-87.485-21.203-24.448-4.7-52.586-.244-75.828 7.526-23.407-7.825-51.468-12.202-75.814-7.526-18.216-1.654-63.375-2.923-87.499 21.202-24.444 24.438-92.687 66.467-92.687 123.314 0 51.32 32 85.726 32 112 0 22.872-11.142 34.117-.984 47.178 6.862 8.822 18.651 8.822 24.984 8.822 14.246 0 27.089-7.869 37.942-19.479.875 3.1 1.929 6.238 3.202 9.422 15.623 39.06 17.162 87.477 67.49 97.696 5.549 1.195 11.525 1.283 17.392.136 39.587-1.288 61.771-7.775 73.974-7.775 12.224 0 34.401 6.486 73.968 7.775 5.616 1.098 11.251 1.097 17.17-.085 49.398-7.904 53.168-61.37 67.718-97.747 1.273-3.184 2.327-6.322 3.202-9.422 10.854 11.61 23.697 19.479 37.942 19.479 6.333 0 18.122 0 24.984-8.822 10.042-12.912-.984-24.858-.984-47.178 0-26.272 32-60.665 32-112zm-450.273 134.128c6.116-29.649-.383-45.854-12.717-73.293-29.714-66.108-24.01-84.874 44.574-142.367 8.542-7.16 15.919-13.345 21.729-19.155 3.108-3.109 7.298-5.503 12.11-7.335-30.431 44.949-56.37 74.951-38.809 136.417 6.758 23.651 5.549 42.621 3.789 60.714-8.416 22.637-21.274 39.568-30.676 45.019zm167.201 84.962c9.003-11.925 20.777-29.944 27.072-34.52 6.307 4.585 18.04 22.558 27.072 34.52-26.928-4.124-27.34-4.117-54.144 0zm27.072-131.09c8.83.023 19.608 1.629 23.304 3.402.576 1.513 1.173 5.115.105 8.912-1.846 6.571-3.216 3.685-23.409 16.416-20.113-12.681-21.568-9.865-23.409-16.416-1.067-3.797-.471-7.399.105-8.912 3.696-1.774 14.474-3.379 23.304-3.402zm129.145 58.057c-15.773 39.435-15.341 71.481-42.83 77.931-2.653-.011-5.234-.045-7.737-.105-20.869-6.434-40.71-53.523-62.578-67.106v-12.298c4.296-2.75 10.501-6.469 17.9-10.169 25.144-12.57 28.407-49.375 12.158-65.624-16.97-16.97-75.142-16.975-92.117 0-16.042 16.042-13.258 52.918 12.158 65.624 7.401 3.701 13.606 7.42 17.9 10.168v12.299c-21.848 13.571-41.708 60.675-62.584 67.107-2.501.059-5.08.094-7.73.104-27.493-6.451-27.08-38.554-42.83-77.931-13.686-34.216 9.295-67.771-7.471-126.453-13.764-48.173 5.399-65.937 37.928-114.729 6.178-9.267 15.143-14.491 25.092-17.13 2.107-.034 4.13-.476 5.985-1.269 28.796-4.695 61.569 8.481 63.709 9.024 3.211.811 6.432.583 9.336-.471 30.486-11.014 75.191-17.247 93.253 9.846 32.342 48.514 51.72 66.457 37.928 114.729-16.773 58.707 6.24 92.176-7.47 126.453zm77.845-85.221c-12.324 27.418-18.838 43.621-12.717 73.293-9.402-5.452-22.26-22.383-30.677-45.02-1.76-18.093-2.969-37.063 3.789-60.714 17.515-61.301-8.264-91.292-38.808-136.417 4.812 1.832 9.001 4.226 12.11 7.334 5.811 5.811 13.188 11.995 21.729 19.155 68.579 57.49 74.292 76.253 44.574 142.369z"></path><circle r="20" cy="204.926" cx="340"></circle></svg>
<svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"> 		<path d="m492.14 15.556c-12.058-5.034-25.859-2.352-35.15 6.834l-65.088 64.349c-41.042-24.673-87.679-37.633-135.9-37.633s-94.855 12.961-135.9 37.633l-65.084-64.348c-9.29-9.185-23.1-11.867-35.158-6.834-12.056 5.033-19.864 16.728-19.864 29.792v235.97c0 119.98 97.649 217.63 217.63 217.63h76.735c119.98 0 217.63-97.649 217.63-217.63v-235.97c0-13.064-7.808-24.759-19.863-29.793zm-20.988 265.76c0 97.458-79.323 176.78-176.78 176.78h-76.735c-97.458 0-176.78-79.323-176.78-176.78v-215.46l62.169 61.448c6.986 6.907 18.141 7.862 26.22 2.275 19.822-13.706 40.974-23.8 64.123-30.352v24.53c0 11.28 9.145 20.426 20.426 20.426s20.426-9.145 20.426-20.426v-32.435c14.979-1.464 28.596-1.464 43.574 0v32.436c0 11.28 9.145 20.426 20.426 20.426s20.426-9.145 20.426-20.426v-24.53c23.149 6.553 44.292 16.647 64.114 30.354 8.079 5.587 19.125 4.633 26.112-2.275l62.284-61.45v215.46z"></path> 		<path d="m346.79 315.59c-11.024-2.403-21.904 4.586-24.306 15.608-2.929 13.445-15.063 23.203-28.85 23.203-8.558 0-16.694-3.723-22.322-10.214-0.445-0.513-0.918-0.994-1.407-1.456l27.357-27.113c9.821-9.821 2.865-26.369-11.024-26.369h-60.484c-13.889 0-20.845 16.549-11.024 26.369l27.237 27.116c-0.532 0.496-1.04 0.959-1.522 1.514-5.627 6.491-13.763 10.184-22.322 10.184-13.787 0-25.92-9.774-28.85-23.218-2.402-11.023-13.285-18.017-24.306-15.616-11.022 2.402-18.01 13.281-15.608 24.302 6.99 32.076 35.909 55.355 68.765 55.355 13.516 0 26.582-3.885 37.756-10.994 11.174 7.109 24.24 10.993 37.756 10.993 32.855 0 61.775-23.281 68.765-55.357 2.399-11.023-4.589-21.905-15.611-24.307z"></path> 		<circle cx="163.62" cy="241.97" r="21.855"></circle> 		<circle cx="348.38" cy="241.97" r="21.855"></circle>  </svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-piggy-bank" viewBox="0 0 16 16">   <path d="M5 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm1.138-1.496A6.613 6.613 0 0 1 7.964 4.5c.666 0 1.303.097 1.893.273a.5.5 0 0 0 .286-.958A7.602 7.602 0 0 0 7.964 3.5c-.734 0-1.441.103-2.102.292a.5.5 0 1 0 .276.962z"></path>   <path fill-rule="evenodd" d="M7.964 1.527c-2.977 0-5.571 1.704-6.32 4.125h-.55A1 1 0 0 0 .11 6.824l.254 1.46a1.5 1.5 0 0 0 1.478 1.243h.263c.3.513.688.978 1.145 1.382l-.729 2.477a.5.5 0 0 0 .48.641h2a.5.5 0 0 0 .471-.332l.482-1.351c.635.173 1.31.267 2.011.267.707 0 1.388-.095 2.028-.272l.543 1.372a.5.5 0 0 0 .465.316h2a.5.5 0 0 0 .478-.645l-.761-2.506C13.81 9.895 14.5 8.559 14.5 7.069c0-.145-.007-.29-.02-.431.261-.11.508-.266.705-.444.315.306.815.306.815-.417 0 .223-.5.223-.461-.026a.95.95 0 0 0 .09-.255.7.7 0 0 0-.202-.645.58.58 0 0 0-.707-.098.735.735 0 0 0-.375.562c-.024.243.082.48.32.654a2.112 2.112 0 0 1-.259.153c-.534-2.664-3.284-4.595-6.442-4.595zM2.516 6.26c.455-2.066 2.667-3.733 5.448-3.733 3.146 0 5.536 2.114 5.536 4.542 0 1.254-.624 2.41-1.67 3.248a.5.5 0 0 0-.165.535l.66 2.175h-.985l-.59-1.487a.5.5 0 0 0-.629-.288c-.661.23-1.39.359-2.157.359a6.558 6.558 0 0 1-2.157-.359.5.5 0 0 0-.635.304l-.525 1.471h-.979l.633-2.15a.5.5 0 0 0-.17-.534 4.649 4.649 0 0 1-1.284-1.541.5.5 0 0 0-.446-.275h-.56a.5.5 0 0 1-.492-.414l-.254-1.46h.933a.5.5 0 0 0 .488-.393zm12.621-.857a.565.565 0 0 1-.098.21.704.704 0 0 1-.044-.025c-.146-.09-.157-.175-.152-.223a.236.236 0 0 1 .117-.173c.049-.027.08-.021.113.012a.202.202 0 0 1 .064.199z"></path> </svg>

Slides

Hartford WordPress_2021-07-12 – Lets Build a Site Together – Part 3Download

Links

https://wordpress.org/plugins/generateblocks/
Icons

Sources for Free Icons
https://icons.getbootstrap.com/
https://freeicons.io/
https://www.flaticon.com/
https://www.iconfinder.com/
https://icons8.com/

Website to clean SVG code before using
https://www.svgminify.com/

Google Advanced Search
https://www.google.com/advanced_search