index.html

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Intellectual Code For Designed Existence</title>
    <link rel="stylesheet" href="designedexistence.css"> 

</head>

<body>
    
    <header>

        <h1>Intellectual Code For<br><span>Designed Existence</span></h1>
        
        <nav>
            
            <span>Exercises</span>
            
            <a href="#">Websites</a>
            
        </nav>
        
    </header>

    <main>
        

        <div>

            <section>

                <h3>2.1. Void Elements</h3>

                <img class="tile-image" src="images/2_1_william_blake.png" alt="screenshot of William Blake Exercise">

                <h3 class="link">
                    <a href="exercises/2_1_void_elements/index.html" target="_blank">William Blake</a>
                </h3>

                <p>
                    A simple, single biography web page contains a text of a high&ndash;contrast.
                </p>

            </section>

            <section>

                <h3>2.2. Film Ranking Project</h3>

                <img class="tile-image" src="images/2_2_4_films.png" alt="screenshot of film index">

                <h3 class="link">
                    <a href="exercises/2_2_film_ranking_project/index.html" target="_blank">4 Films</a>
                </h3>

                <p>
                    A simple, single web page of a list of films&nbsp;&#33;
                </p>

            </section>

        </div>
        
        <div>
            
            <section>

                <h3>3.1. The Anchor Element</h3>

                <img class="tile-image" src="images/3_1_my_favourite_websites.png" alt="screenshot of My Favourite Websites">

                <h3 class="link">
                    <a href="exercises/3_1_the_anchor_element/index.html" target="_blank">My Favourite Websites</a>
                </h3>

                <p>
                    A list of websites with geo&ndash;links&nbsp;&#33;
                </p>

            </section>
            
        </div>

        <div>
            
            <section>

                <h3>5.1. CSS Selectors</h3>

                <img class="tile-image" src="images/5_1_css_selectors.png" alt="screenshot of CSS Selectors exercise">

                <h3 class="link">
                    <a href="exercises/5_1_css_selectors/index.html" target="_blank">CSS Selectors</a>
                </h3>

                <p>
                    How to use CSS selectors.
                </p>

            </section>
            
            <section>

                <h3>5.2. Colours Vocabulary Project</h3>

                <img class="tile-image" src="images/5_2_colours.png" alt="screenshot of Colours Vocabulary project">

                <h3 class="link">
                    <a href="exercises/5_2_colours_vocabulary_project/index.html" target="_blank">Colours Vocabulary</a>
                </h3>

                <p>
                    Colours names in Turkish.
                </p>

            </section>
            
        </div>
        
        <div>
            
            <section>

                <h3>6.3. The CSS Box Model</h3>

                <img class="tile-image" src="images/6_3_css_box_model.png" alt="screenshot of CSS Box Model">

                <h3 class="link">
                    <a href="exercises/6_3_the_css_box_model/index.html" target="_blank">The CSS Box Model</a>
                </h3>

                <p>
                    Illustrating the CSS box model&nbsp;&#33;
                </p>

            </section>
            
        </div>

         <div>
            
            <section>

                <h3>7.3. CSS Positioning</h3>

                <img class="tile-image" src="images/7_3_css_positioning.png" alt="screenshot of CSS Positioning">

                <h3 class="link">
                    <a href="exercises/7_3_css_positioning/index.html" target="_blank">CSS Positioning</a>
                </h3>

                <p>
                    Illustrating the CSS positioning&nbsp;&#33;
                </p>

            </section>

             <section>

                <h3>7.4. CSS Flag Project</h3>

                <img class="tile-image" src="images/7_4_css_flag.png" alt="screenshot of CSS Positioning">

                <h3 class="link">
                    <a href="exercises/7_4_CSS_Flag_Project/index.html" target="_blank">CSS Flag</a>
                </h3>

                <p>
                    The flag of Laos created using CSS&nbsp;&#33;
                </p>

            </section>

         </div>

        <div>
            
            <section>

                <h3>8.2. CSS Float</h3>

                <img class="tile-image" src="images/8_2_css_float.png" alt="screenshot of CSS Float">

                <h3 class="link">
                    <a href="exercises/8_2_CSS_Float/index.html" target="_blank">CSS Float</a>
                </h3>

                <p>
                    An example for using the &quot;float&quot; property for positioning HTML elements&nbsp;&#33;
                </p>

            </section>

            <section>

                <h3>8.5. Web Design Agency Project</h3>

                <img class="tile-image" src="images/8_5_web_design_agency_project.png" alt="screenshot of Web Design Agency Project">

                <h3 class="link">
                    <a href="exercises/8_5_Web_Design_Agency_Project/index.html" target="_blank">Web Design Agency Project</a>
                </h3>

                <p>
                    An example for a layout using &quot;floats&quot;&nbsp;&#33;
                </p>

            </section>
            
        </div>

         <div>
            
            <section>

                <h3>9.1. Display Flex</h3>

                <img class="tile-image" src="images/9_1_display_flex.png" alt="screenshot of Display Flex">

                <h3 class="link">
                    <a href="exercises\9_1_Display_Flex/index.html" target="_blank">Display Flex</a>
                </h3>

                <ol style="padding-left: 20px;">
                    <li style="margin-bottom: 2.25%;">
                        A simple layout using the &quot;display&#58; flex&#59;&quot; property.
                    </li>
                    <li>An example of a responsive navigation menu.</li>
                </ol>

            </section>
            
        </div>

    </main>

    <footer>
        <small>Designed Existence &copy; 2026</small>
    </footer>

</body>

</html>