index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--Favicon image-->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

    <!--stylesheet-->
    <link rel="stylesheet" href="style.css">

    <!--Title of website-->
    <title>The Modern House</title>

</head>
<body>
    
    <!--Navigation bar-->
    <nav>
        <!--ul tag that contains the 'left-nav', 'middle-nav' and 'right-nav' on a display flex-->
        <ul class="nav">
            <!--left navigation bar-->
            <div class="left-nav">
                <ul>
                    <li><a>Buy</a></li>
                    <li><a>Sell</a></li>
                    <li><a>Journey</a></li>
                </ul>
            </div>

            <!--middle navigation bar which contains a h1 tag ONLY-->
            <div class="middle-nav">
                <h1>The Modern House</h1>
            </div>

            <!--right navigation bar-->
            <div class="right-nav">
                <ul>
                    <li><a>Directory</a></li>
                    <li><a>Shop</a></li>
                    <li><a>About</a></li>
                    <li><a>Subscribe</a></li>  
                </ul>
            </div>
        </ul>
    </nav>
    
    <!--Section 1-->
    <section class="section-1">
        <!--Sub1-Section1 (image of a kitchen)-->
        <section class="sub1-section1">

        </section>

        <!--Sub2-Section1 (display flex column with a h2, h1, h3 and a that we style to a button in css)-->
        <section class="sub2-section1">
            <h2>Today at the modern house</h2>
            <h1>Space Age: six space-saving London home</h1>
            <h3>March 19th 2022</h3>
            <a>READ MORE</a>
        </section>
    </section>

    <!--Section 2 (quote and an a tag that it transformed into a button)-->
    <section class="section-2">
        <!--p with a quote-->
        <p><q>An estate agency like no other, The Modern House sells the most incredible design<br>-led homes in urban and rural locations in the UK </q> - <i>Evening Standard</i></p>
        
        <!--a tag that we style to a button in css-->
        <a>SELL WITH US</a>

    </section>

    <!--Section 3 (two sub sections. 1st subSection is a h2 and a. 2nd subSection contains 6 images on a display grid)-->
    <section class="section-3">
        <!--Sub1-Section3 (contain h1 and a that we style to a button in css [with flex-end])-->
        <section class="sub1-section3">
            <div class="empty-space-sub1-section3"></div>
            <h2>FEATURED SALES</h2>
            <a>VIEW ALL SALES</a>
        </section>

        <!--Sub2-Section3 (display grid with 6 items with images and text underneath)-->
        <section class="sub2-section3">

            <!--1st container that'll contain the house image and text-->
            <div class="sub2-section3-box1">

                <!--div container that'll contain the 1st house image-->
                <div class="image1">
                </div>

                <!--contains two pieces of containers that individually contain h3 and h2 tags (display flex & flex-direction row)-->
                <div class="contain-two-rows-of-text">

                    <!--h3 and h2 tag for text for the name and price of the home-->
                    <div class="name-and-price">
                        <h3>Frame House</h3>
                        <h2>£2,500,000</h2>
                    </div>

                    <!--h3 and h2 tag for text for the location and availability of the home-->
                    <div class="location-and-availability">
                        <h3>Rushworth Street, London SE1</h3>
                        <h2>Freehold</h2>
                    </div>
                </div>

            </div>

            <!--2nd house image-->
            <div class="sub2-section3-box2">

                <!--div container that'll contain the 2nd house image-->
                <div class="image2">

                </div>

                <!--contains two pieces of containers that individually contain h3 and h2 tags (display flex & flex-direction row)-->
                <div class="contain-two-rows-of-text">

                    <!--h3 and h2 tag for text for the name and price of the home-->
                    <div class="name-and-price">
                        <h3>St Weonards</h3>
                        <h2>£1,150,000</h2>
                    </div>

                    <!--h3 and h2 tag for text for the location and availability of the home-->
                    <div class="location-and-availability">
                        <h3>Herefordshire</h3>
                        <h2>Freehold</h2>
                    </div>

                </div>
            </div>


            <!--3rd house image-->
            <div class="sub2-section3-box3">

                <!--div container that'll contain the 3rd house image-->
                <div class="image3">

                </div>

                <!--contains two pieces of containers that individually contain h3 and h2 tags (display flex & flex-direction row)-->
                <div class="contain-two-rows-of-text">

                    <!--h3 and h2 tag for text for the name and price of the home-->
                    <div class="name-and-price">
                        <h3>Farleigh Road II</h3>
                        <h2>£525,000</h2>
                    </div>

                    <!--h3 and h2 tag for text for the location and availability of the home-->
                    <div class="location-and-availability">
                        <h3>London N16</h3>
                        <h2>Leasehold</h2>
                    </div>
                </div>

            </div>

            <!--4th house image-->
            <div class="sub2-section3-box4">

                <!--div container that'll contain the 4th house image-->
                <div class="image4">

                </div>

                <!--contains two pieces of containers that individually contain h3 and h2 tags (display flex & flex-direction row)-->
                <div class="contain-two-rows-of-text">

                    <!--h3 and h2 tag for text for the name and price of the home-->
                    <div class="name-and-price">
                        <h3>Glass Building</h3>
                        <h2>£2,895,000</h2>
                    </div>

                    <!--h3 and h2 tag for text for the location and availability of the home-->
                    <div class="location-and-availability">
                        <h3>Arlington Road, London NW1</h3>
                        <h2>Share of Freehold</h2>
                    </div>
                </div>

            </div>

            <!--5th house image-->
            <div class="sub2-section3-box5">

                <!--div container that'll contain the 5th house image-->
                <div class="image5">

                </div>

                <!--contains two pieces of containers that individually contain h3 and h2 tags (display flex & flex-direction row)-->
                <div class="contain-two-rows-of-text">

                    <!--h3 and h2 tag for text for the name and price of the home-->
                    <div class="name-and-price">
                        <h3>Evering Road</h3>
                        <h2>£1,350,000</h2>
                    </div>

                    <!--h3 and h2 tag for text for the location and availability of the home-->
                    <div class="location-and-availability">
                        <h3>London N16</h3>
                        <h2>Share of Freehold</h2>
                    </div>
                </div>

            </div>

            <!--6th house image-->
            <div class="sub2-section3-box6">

                <!--div container that'll contain the 5th house image-->
                <div class="image6">

                </div>
                
                <!--contains two pieces of containers that individually contain h3 and h2 tags (display flex & flex-direction row)-->
                <div class="contain-two-rows-of-text">

                    <!--h3 and h2 tag for text for the name and price of the home-->
                    <div class="name-and-price">
                        <h3>Capitol Walk</h3>
                        <h2>£680,000</h2>
                    </div>

                    <!--h3 and h2 tag for text for the location and availability of the home-->
                    <div class="location-and-availability">
                        <h3>London SE23</h3>
                        <h2>Freehold</h2>
                    </div>
                </div>

            </div>

        </section>
    </section>

    <!--Section 4 (quote and an a tag that it transformed into a button, similar to section 2)-->
    <section class="section-4">
         <!--h1 with a quote-->
         <p><q>One of the 100 Best Things in the World</q> - <i>GQ</i></p>
        
         <!--a tag that we style to a button in css-->
         <a>HOW MUCH IS MY HOME WORTH</a>
    </section>

    <!--Section 5-->

    <!--Section 6 (quote and an image of a display flex)-->
    <section class="section-6">

        <!--p with a quote-->
        <p><q>The sales team really understood the assets of my house and the kind of person it would appeal to, selecting potential buyers carefully, with no time-wasters. The marketing team went to extraordinary efforts to promote my house via their own outreach and in national media. All in all, a great experience </q> - <i>Brandon Griffin, seller</i></p>

        <!--image of person-->
        <div class="section6-image-of-person">

        </div>

        <!--Empty space container-->
        <div class="empty-space-section-6-container"></div>

    </section>

    <!--Section 7 (contains a text container with a h2 and a tag which is turned into a button)-->
    <section class="section-7">

        <div class="section7-text-container">
            <h2>The Modern House is an estate agency that helps people in more thoughtful and beautiful ways <br> We believe in design as a powerful force for good</h2>
            <a>ABOUT US</a>
        </div>
        

    </section>

    <section class="section-8">

        <!--Sub1-Section8 (contain h1 and a that we style to a button in css [with flex-end])-->
        <section class="sub1-section8">
            <div class="empty-space-sub1-section8"></div>
            <h2>FEATURED PAST SALES</h2>
            <a>VIEW ALL PAST SALES</a>
        </section>

        <!--Sub2-Section8 (display grid with 6 items with images and text underneath)-->
        <section class="sub2-section8">

            <!--1st container that'll contain the house image and text-->
            <div class="sub2-section8-box1">

                <!--div container that'll contain the 1st house image-->
                <div class="image1">
                </div>

                <!--contains two pieces of containers that individually contain h3 and h2 tags (display flex & flex-direction row)-->
                <div class="contain-two-rows-of-text">

                    <!--h3 and h2 tag for text for the name and price of the home-->
                    <div class="name-and-price">
                        <h3>Notting Hill</h3>
                        <h2></h2>
                    </div>

                    <!--h3 and h2 tag for text for the location and availability of the home-->
                    <div class="location-and-availability">
                        <h3>London W2</h3>
                        <h2>SOLD</h2>
                    </div>
                </div>

            </div>

            <!--2nd container that'll contain the house image and text-->
            <div class="sub3-section8-box2">


                <!--div container that'll contain the 1st house image-->
                <div class="image1">
                </div>

                <!--contains two pieces of containers that individually contain h3 and h2 tags (display flex & flex-direction row)-->
                <div class="contain-two-rows-of-text">

                    <!--h3 and h2 tag for text for the name and price of the home-->
                    <div class="name-and-price">
                        <h3>Sturmer Way II</h3>
                        <h2></h2>
                    </div>

                    <!--h3 and h2 tag for text for the location and availability of the home-->
                    <div class="location-and-availability">
                        <h3>London N7</h3>
                        <h2>SOLD</h2>
                    </div>
                </div>

            
            
            </div>
            
        </section>

    </section>

    <!--Section 9 (footer contains two sections)-->
    <section class="section-9">
        <!--sub1-Section9-->
        <section class="sub1-section9">

            <section class="section-sub1-section9-left-footer-1">
                <h3>About</h3>
                <h4>Company</h4>
                <h4>People</h4>
                <h4>Reviews</h4>
                <h4>Press</h4>
            </section>
            
            <section class="section section-sub1-section9-left-footer-2">
                <h4>Careers</h4>
                <h4>Past Sales</h4>
                <h4>FAQ</h4>
            </section>

            <section class="section section-sub1-section9-left-footer-3">
                <h3>Contact</h3>
                <h4>Request a validation</h4>
                <h4>Receive Property alerts</h4>
                <h4>+44 020 3795 5920</h4>
                <h4>info@themodernhouse.com</h4>
                <h4>visit our sister agency, Inigo</h4>

            </section>

        </section>

        <!--sub2-Section9-->
        <section class="sub2-section9">
            <section class="section-sub2-section9-right-footer-1">
                <h3>SUBSCRIBE TO OUR NEWSLETTER</h3>

                <form action="#">
                    <input type="text" placeholder="Email Address *">
                    <a>submit</a>
                </form>

                <section class="sub2-section9-right-footer-1-checkbox-container">
                    <input type="checkbox">
                    <p>I accept the <a>Privacy & Cookies Policy</a> and <a>Terms & Conditions</a> *</p>
                </section>
                
            </section>
        </section>

    </section>

</body>
</html>