-
Notifications
You must be signed in to change notification settings - Fork 0
/
about-us.html
135 lines (118 loc) · 10.6 KB
/
about-us.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./assets/icons/kidzin_logo_removebg.png">
<title>K I D Z I N</title>
<link rel="stylesheet" href="style.css">
<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=Antic&family=Balsamiq+Sans:wght@400;700&family=Bellota+Text:wght@300&family=Bitter:wght@300;400&family=Comfortaa:wght@300&family=Comic+Neue:wght@300;400;700&family=Didact+Gothic&family=EB+Garamond&family=Grandiflora+One&family=Josefin+Sans:wght@200;300;400&family=Montserrat:wght@300&family=Noto+Sans:wght@200;300;400&family=Noto+Serif+JP:wght@200;400&family=Poiret+One&family=Raleway:wght@200;300;400&family=Roboto:wght@100;300&family=Sniglet&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://fontawesome.com/icons/camera?f=classic&s=solid">
<style>
.desc-page {
height: 100%;
width: 100%;
font-family: 'Raleway', sans-serif;
background: url('./assets/bg_images/about_bg.png') repeat-y center;
background-size: contain;
}
.desc-container {
padding-top: 250px;
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
padding-bottom: 40px;
}
.desc-bg {
position: absolute;
background: url('./assets/bg_images/about-us-page-bg.jpg') no-repeat 0 -200px;
background-size: cover;
width: 100%;
height: 600px;
z-index: 0;
}
.desc-layer {
padding: 60px;
background-color: rgba(255, 255, 255, 0.7);
width: 80%;
height: fit-content;
border-radius: 50px 50px;
border: 0.5px solid #ebebeb;
box-shadow: 0.02px 0.02px 5px #fffef1;
}
.desc-text h1 {
font-size: 40px;
color: var(--peachy-red);
margin-bottom: 40px;
}
.desc-text p {
line-height: 22px;
}
.desc-text img {
border-radius: 5px;
float: left;
margin: 20px;
width: 300px;
}
.footer-bottom {
padding-top: 40px;
border-top: 0.001px solid var(--light-gray);
font-size: 10px;
}
</style>
</head>
<body>
<!-- header -->
<div class="header nav-bar">
<div class="nav-title">
<a class="nav-logo" href="#intro-page"><img src="./assets/icons/kidzin_logo_only.png" alt="kidzin logo"></a>
<a class="nav-name" href="#intro-page"><p>Kidzin Indian Preschool</p></a>
</div>
<ul class="nav-icons">
<li><a href="index.html#home">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="index.html#programs-page">Programs</a></li>
<li><a target="_blank" href="https://www.facebook.com/Kidzinpreschool/photos">Gallery</a></li>
<li><a href="index.html#contact-page">Contact Us</a></li>
</ul>
</div>
<!-- description page -->
<div class="desc-page">
<div class="desc-bg"></div>
<div class="desc-container">
<div class="desc-layer">
<div class="desc-text">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo tempore eum aperiam earum, ratione rerum excepturi sed eveniet officiis voluptatem commodi. Voluptates deleniti velit repellendus sint laborum, adipisci omnis necessitatibus, excepturi eveniet exercitationem vitae assumenda maxime dolore rem asperiores dolorem. Exercitationem vitae eum alias inventore vel, fuga nulla laudantium. Deleniti aliquam, facere laudantium debitis recusandae neque quasi laboriosam veritatis itaque dicta aut quos velit saepe nesciunt reiciendis non dolor voluptate rerum repudiandae sit praesentium vitae doloremque expedita? Dolor unde asperiores ut beatae, architecto ducimus cum facilis tempore in dicta? Hic quae maxime similique quos id repellendus consectetur beatae! Ipsam, beatae.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis autem hic error perspiciatis eaque tempore quis exercitationem eveniet veritatis facere cum, labore quia, ducimus voluptatum sapiente numquam enim vitae repudiandae id ea? Doloribus rem, provident numquam sit sint sed blanditiis, porro in unde, soluta vitae quod veritatis repudiandae excepturi facere.</p></br>
<img src="./assets/images/about-us-page-img1.jpg" alt="graduated girl image" width="400"></br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae omnis illum soluta, maiores voluptates aspernatur tempore explicabo aperiam ad sequi minima recusandae eos atque, corporis ab eius, voluptatem sunt ea? Voluptatum error maxime corporis minima distinctio velit repellendus earum nobis fugiat nulla, tempore quidem, aspernatur assumenda iusto nemo culpa dolorum.</p></br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, molestias? Modi soluta, harum accusamus assumenda perferendis sed corrupti, doloribus velit quis amet illum voluptatibus! Nemo dignissimos iste, exercitationem cumque, unde aperiam, architecto velit repudiandae veritatis numquam aut. Dolore, perferendis aperiam eius commodi sed accusamus. Soluta dolore error provident repellat possimus porro incidunt vitae, eos necessitatibus nostrum facilis facere enim. Perferendis harum libero tenetur ex ut veritatis ipsum quos fugiat vel, quibusdam doloribus molestiae nihil vitae molestias amet recusandae dolore reiciendis autem deserunt delectus quaerat quidem saepe itaque? Porro dolore fugit impedit placeat. Laborum iure ducimus minima et, beatae recusandae nesciunt!</p></br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, in officia eligendi sunt illo expedita laudantium numquam velit. Numquam, provident natus laboriosam illum, dolores mollitia non quisquam at fugit ea distinctio omnis cupiditate, consequuntur similique porro voluptatem? Quas, quae placeat, quos dolorum ducimus eveniet dolore blanditiis maxime harum officiis natus.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus magnam maxime quis sunt eius tempore, laboriosam deserunt voluptatibus expedita recusandae quas, ab praesentium ea porro eveniet officia perferendis consectetur nesciunt?</p><br>
<img src="./assets/images/about-us-page-img2.jpg" alt="classroom" width="400"></br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quasi quaerat, animi ullam asperiores, maiores facere illo doloremque sint velit nam reiciendis nostrum deleniti! Nemo optio earum dolor adipisci, eius dolorem illo, excepturi magnam possimus voluptates eos itaque suscipit tempora sint alias cupiditate sit laboriosam minima pariatur, fugit fugiat repudiandae architecto soluta dolore? Nesciunt omnis adipisci eius accusamus, eligendi voluptatum modi eaque sapiente voluptatem placeat blanditiis maxime sit velit atque culpa excepturi nisi exercitationem magnam nihil quos provident nulla. Quas, dicta qui. Laborum similique quos voluptate tempora, recusandae dolor eos repudiandae omnis quibusdam numquam officiis beatae tempore. Error, pariatur fugiat?</p></br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, nostrum ipsa sunt ratione eligendi omnis quibusdam fuga, placeat nobis velit porro facere amet, doloremque laudantium labore rerum enim. Doloribus explicabo sapiente tempore dolor culpa aliquid laudantium eius, quos, dolorum velit magnam ut similique animi iure assumenda quod eaque. Laboriosam, consectetur!</p></br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, nesciunt itaque, quasi corrupti velit hic illum mollitia, numquam nemo sunt fugit minima? Molestiae exercitationem perferendis quidem quas incidunt, magni nam nobis assumenda quo et. Veritatis, est soluta. Ipsam minus tempore sunt error optio! Itaque maxime saepe esse odio ea sint sapiente dolorum eius, explicabo nulla inventore assumenda! Ipsam, dolorum iure, perferendis aperiam nam debitis qui vitae aliquid quibusdam quas inventore deserunt sequi possimus obcaecati sunt officiis assumenda totam, eveniet blanditiis asperiores voluptate tenetur quasi. Saepe a delectus eaque, amet accusamus magnam itaque temporibus atque totam ea vero, libero ratione molestiae laborum laboriosam. Omnis, accusantium? Asperiores facere accusantium eaque quae maiores repellat, rerum odit atque nobis totam error libero dignissimos optio illum consequuntur doloremque similique eligendi autem pariatur aspernatur nam sunt at? Facilis accusamus explicabo est, illum corrupti ea sequi minima cumque et beatae officia eum aspernatur molestias, quam mollitia temporibus rerum, eaque hic animi placeat nam! Voluptatem voluptates hic, sint est odio id laudantium facilis exercitationem eligendi numquam molestias rerum odit officia mollitia esse sed adipisci, totam incidunt reiciendis recusandae vel. Ullam reiciendis iusto maiores non nisi, eius odit adipisci quisquam quidem sequi voluptatibus voluptas veniam! Quibusdam autem iusto quisquam!</p><br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam quis adipisci, necessitatibus ex cumque atque eos non debitis sint, minus dignissimos quaerat neque corrupti dolor?</p>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="links">
<a href="https://www.facebook.com/Kidzinpreschool" target="_blank"><i class="fa-brands fa-facebook"></i></a>
<a href="https://www.instagram.com/Kidzinindianpreschoolkuwait/?fbclid=IwAR2Fu8FrlDcXpD-POpaX2JO_faiS2KFOdm0e2OuGUsxYvukY0RE9--MTPmQ" target="_blank"><i class="fa-brands fa-instagram"></i></a>
<a href="https://wa.me/00971547879156" target="_blank"><i class="fa-brands fa-whatsapp"></i></a>
</div>
<span>©KidzinIndianPreschool</span>
</div>
</body>
</html