Company Home Page Project

Web Development Front-End
1

What’s crackin, I came back to cook once again.
My take on the Company Home Page Project.
Give feedback if you can on anything.
Also does anyone know how to approach the fotomatic project, I just skipped that one for now.
HTML:

<!DOCTYPE html>
<html>
    <head>
        <link href="./BFDHomeCSS.css" rel="stylesheet">
        <title>broadwayfamilydental</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap" rel="stylesheet">
    </head>

    <body>
        <header class="masthead">
            <h1>South Broadway Family Dental PLLC</h1>
        </header>
        <div class="navigation">
            <a>Home</a>
            <a>Insurance</a>
            <a>Appointment</a>
            <a>Services</a>
            <a>Contact Us</a>
        </div>
        <div class="flex-container">
            <div class="location">
                <figure>
                <img src="./Screenshot 2024-01-28 155930.png"> <figcaption>We are here!</figcaption>
                </figure>
            </div>
            <div class="welcome">
                <h3>Welcome</h3>
                <p>We offer dental services with professionalism by generating confidence and satisfaction in the treatments of our patients and their families,
                our smile enhancement services include a personal touch. we are committed to your well-being</p>
                <ul>
                    <li>Emergencies treated promptly</li>
                    <li>We fix dentures on the same day</li>
                    <li>We have parking nearby</li>
                </ul>
                <h3>Acceptable Insurances</h3>
                <ul>
                    <li>Spirit Dental</li>
                    <li>Delta Dental</li>
                    <li>Health Plex</li>
                    <li>Affleck</li>
                    <li>Metlife</li>
                    <li>Cigna</li>
                    <li>Aetna</li>
                </ul>
            </div>
            <div class="misc">
                <h3>When we're open</h3>
                <p>11:30 AM -> 6 PM for every day except Saturday and Sunday
                </p>
                <h3>Address</h3>
                <p>264 N. Calloway Street</p>
                <h3>Phone Number</h3>
                <p>THIS-ISA-NUMBER</p>
    
            </div>
        </div>
    </body>
</html>

CSS:

body {
    font-size: 16px;
    background-color: white;
    font-family: 'EB Garamond', serif;
    margin: 0;
}

header {
    width: 100%;
    background-image: url("https://broadwayfamilydental.com/wp-content/uploads/2018/09/0025d_1_954x391.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    height: 40rem;
    display: flex;
    justify-content: center;
    align-items: end;
}

header h1 {
    z-index: 10;
    color: #01858e;
    text-align: center;
    width: 100%;
    font-size: 4rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 1;
}

.navigation {
    display: block;
    text-align: center;
    padding-top: 26px;
    padding-bottom: 26px;
    width: 100%;
    border-bottom: 0.001rem gray solid;
}

.navigation a {
    margin-right: 50px;
    font-size: 1.5rem;
}

.flex-container {
    display: flex;
    margin-top: 25px;
}

.location {
    margin: 0 100px 0 100px;
    width: 500px;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
}

.welcome {
    width: 500px;
}

.welcome h3 {
    font-size: 2rem;
    font-weight: 500;
    margin: 32px 0px;
}

.welcome p {
    font-size: 1.2rem;
    margin: 32px 0px;
}

.welcome ul {
    font-size: 1.2rem;
    list-style: none;
    text-align: left;
    padding-left: 0px;
    margin: 32px 0px;
}

.misc {
    font-size: 1.2rem;
    margin-left: 100px;
}

.misc h3 {
    font-weight: 500;
    font-size: 2rem;
}

.navigation a:hover {
    color: orange;
    cursor: pointer;
}