article/about.html at main · Simon-FOS/article · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>

    <!--This is the About Us Page, given as an assignment.
    The aim here is to make the about us at the navigation appear like a link
    then add 3 images at the bottom of the Body-->
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="This is a Spa web app">
        <meta name="keywords" content="Spa, Massage, Beauty, Body, Facials">
        <meta name="author" content="Simon Ogbanje">

        <title>About | MadePetal Clinic and Spa</title>

        <!--STYLING OF THE BUTTOM IMAGES.
        There are 3 images at the buttom of this page. This is where I styled them to be horizontally alligned
        And also to have the same dimention. It took alot of time for me to get it right,
        So I have to go search for help online and this is what I found. I hope my teacher wont be angry
        with this effort. No vex Sir, I still dey learn.-->
        <style>
        /* Container for the images */
        .image-container {
            display: flex;
            justify-content: space-between; /* Space images evenly */
            align-items: center; /* Vertically center images */
            padding: 50px 0; /* Add padding above and below the images */
            margin-top: 50px; /* Space between this section and previous content */
        }

        /* Each individual div within the container */
        .image-container div {
            width: 30%; /* Each image takes 30% of the container's width */
            text-align: center; /* Center the image inside each div */
        }

        /* Image styling */
        .image-container img {
            width: 100%; /* Make each image take full width of the div */
            max-width: 300px; /* Limit the max width of the image */
            height: 200px; /* Set a fixed height */
            object-fit: cover; /* Ensure the image fills the area without distortion */
            border-radius: 8px; /* Optional: add rounded corners */
        }
    </style>
    </head>

    <body style="margin: 0; padding: 10; height: 100%; width: 100%;">
        <header style="background-color: rgb(31, 31, 67); color: white; padding: 0; margin: 0;">
            <nav style="display: grid; grid-template-columns: 15% 60% 25%; align-items: center;">
                <div>
                    <h2>MadePetal</h2>
                </div>

                <ul style="display: flex; justify-content: space-between; list-style-type: none;">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Contact US</a></li>
                </ul>

                <ul style="display: flex; justify-content: space-evenly; list-style-type: none;">
                    <li><button>BOOK A SESSION</button></li>
                    <li><button>CALL US</button></li>
                </ul>
            </nav>
        </header>
        <main>
            <!--INTRODUCTION SECTION BEGINS-->
            <section id="section" style="display: flex; justify-content: space-evenly; align-items: center;">
                <div class="intro title">
                    <h1>
                        Where Wellness Meets Luxury: Welcome to MadePetal Clinic & Spa
                    </h1>
                    <p>
                        Welcome to MadePetal Clinic and Spa, where wellness, beauty, and relaxation come together to create an experience like no other. Nestled in the heart of Magboro, Ogun State, we are a premier destination dedicated to rejuvenating your mind, body, and spirit.

                        At MadePetal, we offer a holistic approach to health and beauty, combining advanced medical aesthetics with luxurious spa treatments. Our highly skilled team of professionals is passionate about helping you look and feel your best, using only the highest-quality products and state-of-the-art technology.

                        Whether you are here for a rejuvenating facial, a soothing massage, or a tailored medical treatment, we take pride in providing personalized care to ensure that your visit is nothing short of extraordinary. We believe that true beauty comes from within, and our services are designed to nurture your well-being and enhance your natural glow.
                    </p>
                </div>

                <div class="Made's image">
                    <img src="static/img/md.jpg" style="max-width: 100%; height: auto;" alt="made's image">
                </div>
            </section>
            <!-- INTRODUCTION SECTION ENDS HERE-->

            <!-- BOTTOM IMAGE SECTION -->
            <section class="image-container">
                <div>
                    <img src="static/img/bi1.jpg" alt=" 1image bi1">
                </div>
                <div>
                    <img src="static/img/bi2.jpg" alt="Image bi2">
                </div>
                <div>
                    <img src="static/img/bi3.jpg" alt="Image bi3">

                </div>
            </section>
            <!-- END OF BOTTOM IMAGE -->
        </main>
        <footer style="background-color: rgb(31, 31, 67); color: white; padding: 0; margin: 0;">
            <nav style="display: grid; grid-template-columns: 25% 25% 25% 25%; align-items: flex-start;">
                <div>
                    <h2>MadePetal</h2>
                </div>

                <ul style="margin: 0; padding: 0;">
                    <h2>Resources</h2>

                    <li><a href="index.html">Home</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Contact US</a></li>
                </ul>

                <ul style="margin: 0; padding: 0;">
                    <h2>Connect with Us</h2>
                    <li>Facebook</li>
                    <li>Instagram</li>
                    <li>Tiktok</li>
                </ul>

                <div>
                    <h2>Newsletter</h2>
                    <p>Input your email.subscribe</p>
                </div>
            </nav>
        </footer>
    </body>
</html>