ITSchool-Web-Heroines · hmihaella · Jul 25, 2022 · Jul 25, 2022 · Jul 25, 2022 · Jul 25, 2022
diff --git a/About.html b/About.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="ro">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <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=Shadows+Into+Light&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <title>Website</title>
+  </head>
+  <style>
+    body {
+      background-image: url("Background2.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+
+    .container {
+      font-size: 1rem;
+      box-sizing: border-box;
+      position: fixed;
+      border-style: solid;
+      border-radius: 1rem;
+      width: 80vw;
+      height: 40rem;
+      padding: 0.5rem 1rem;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      flex-direction: column;
+      font-family: "Shadows Into Light", cursive;
+      overflow-y: scroll;
+    }
+
+    h1 {
+      color: rgb(153, 0, 46);
+      font-weight: bold;
+      font-size: 4rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    h1:hover {
+      text-shadow: 0.2rem 0.2rem 0.3rem rgb(122, 9, 9);
+    }
+
+    p {
+      color: black;
+    }
+
+    .SocialMedia {
+      display: flex;
+      justify-content: center;
+    }
+
+    .fa {
+      padding: 1rem;
+      font-size: 1rem;
+      width: 1rem;
+      text-decoration: none;
+      border-radius: 50%;
+    }
+
+    .fa:hover {
+      opacity: 0.7;
+    }
+
+    .fa-facebook {
+      background: #3b5998;
+      color: white;
+    }
+
+    .fa-google {
+      background: #dd4b39;
+      color: white;
+    }
+
+    .fa-linkedin {
+      background: #007bb5;
+      color: white;
+    }
+
+    .fa-instagram {
+      background: #125688;
+      color: white;
+    }
+
+    @media (min-width: 186px) {
+      .container {
+        font-size: 0.75rem;
+      }
+
+      h1 {
+        font-size: 1rem;
+        flex: none;
+        align-self: stretch;
+      }
+
+      .container::-webkit-scrollbar {
+        width: 0.5rem;
+      }
+
+      .container::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 0.4rem rgba(0, 0, 0, 0.3);
+        border-radius: 0.5rem;
+      }
+
+      .container::-webkit-scrollbar-thumb {
+        border-radius: 0.5rem;
+        -webkit-box-shadow: inset 0 0 0.4rem rgb(8, 0, 0);
+      }
+    }
+
+    @media (min-width: 768px) {
+      .container {
+        font-size: 1rem;
+      }
+
+      h1 {
+        font-size: 1.75rem;
+      }
+    }
+  </style>
+
+  <body>
+    <div class="container">
+      <h1>About us</h1>
+      <p>
+        Welcome to Little Stars. A school with a true heart and soul. Our
+        programs incorporate dynamic classroom instruction with caring,
+        qualified teachers and enriching indoor and outdoor play experiences. We
+        know that these first experiences within a school setting will have a
+        long lasting impact on children’s future learning. We embrace a
+        philosophy of education that combines a nurturing, inclusive learning
+        environment with an increasingly challenging academic program that
+        addresses the developmental needs of each child. In addition to
+        academics – social and emotional well-being also plays a significant
+        role in a child’s development. Our curriculum, various activities, and
+        daily experiences provide children with opportunities for a fun,
+        enriching and exciting time while they make long lasting relationships.
+        We create a positive environment which encourages children to explore
+        their surroundings on a daily basis. Upon completion of our program, we
+        believe that your child’s well-rounded experiences will provide them the
+        necessary strengths for emotional, social, cognitive, gross/fine motor,
+        and academic excellence.
+      </p>
+      <h1>A History of Excellence</h1>
+      <p>
+        For over 20 years Little Stars has started children off on a lifetime of
+        learning in a nurturing educational environment where each child feels
+        happy, respected, proud, secure and loved. Ours was the first school in
+        Romania to attain elite accreditation by the National Association for
+        the Education of Young Children (NAEYC). Since then we have maintained
+        continuous accreditation by meeting all ten Early Childhood Program
+        Standards – with over 400 individual criteria. This history has
+        culminated in an organization that provides children and families the
+        individual attention they need while providing world-class resources and
+        an extensive scope of early childhood programs.
+      </p>
+      <h1>Diversity</h1>
+      <p>
+        Little Stars’s commitment to diversity is integral to the mission of the
+        school. The different perspectives and experiences of our families
+        define the fabric of our community. These many perspectives and
+        experiences contribute to the growth of each child and help form their
+        vision of the world. The vibrancy and vitality we feel at Turtle Rock
+        comes from the people who are here. At its root are the varied interests
+        and experiences, the different backgrounds, cultures, religions, views,
+        and perspectives that our children, staff and families bring to the
+        school. Each of us adds to the richness of another’s experience.
+        Working, learning and playing together teaches us lifelong lessons about
+        appreciating each other, about knowing and understanding each other,
+        about learning from each other.
+      </p>
+      <div class="SocialMedia">
+        <a href="#" class="fa fa-facebook"></a>
+        <a href="#" class="fa fa-google"></a>
+        <a href="#" class="fa fa-linkedin"></a>
+        <a href="#" class="fa fa-instagram"></a>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Background1.jpg b/Background1.jpg
diff --git a/Background2.png b/Background2.png
diff --git a/Background3.jpg b/Background3.jpg
diff --git a/Background4.jpg b/Background4.jpg
diff --git a/Background5.jpg b/Background5.jpg
diff --git a/Background6.jpg b/Background6.jpg
diff --git a/Children.html b/Children.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="ro">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Website</title>
+  </head>
+  <style>
+    body {
+      background-image: url("Background5.jpg");
+      background-repeat: repeat;
+      background-size: cover;
+    }
+    .container {
+      font-family: "Dancing Script", cursive;
+      font-size: 0.9rem;
+      box-sizing: border-box;
+      position: fixed;
+      border-style: solid;
+      border-radius: 1rem;
+      width: 80vw;
+      height: 40rem;
+      padding: 0.5rem 1rem;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      flex-direction: column;
+      overflow-y: scroll;
+    }
+
+    .video-container {
+      position: relative;
+      width: 100%;
+      padding-bottom: 56.25%;
+    }
+
+    .video {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+
+    @media (min-width: 200px) {
+      body {
+        background-position: center center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+        width: 100%;
+      }
+    }
+
+    @media (min-width: 758px) {
+      body {
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+        background-size: cover;
+      }
+    }
+  </style>
+
+  <body>
+    <div class="container">
+      <iframe
+        class="video"
+        src="https://www.youtube.com/embed/ISn_aAvURNk?autoplay=1"
+      >
+      </iframe>
+    </div>
+  </body>
+</html>
diff --git a/Competitions.html b/Competitions.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="ro">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Website</title>
+  </head>
+  <style>
+    body {
+      background-image: url("Background5.jpg");
+      background-repeat: repeat;
+      background-size: cover;
+    }
+
+    .container {
+      font-family: "Dancing Script", cursive;
+      font-size: 0.9rem;
+      box-sizing: border-box;
+      position: fixed;
+      border-style: solid;
+      border-radius: 1rem;
+      width: 80vw;
+      height: 40rem;
+      padding: 0.5rem 1rem;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      flex-direction: column;
+      overflow-y: scroll;
+    }
+
+    .video-container {
+      position: relative;
+      width: 100%;
+      padding-bottom: 56.25%;
+    }
+
+    .video {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+    @media (min-width: 200px) {
+      body {
+        background-position: center center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+        width: 100%;
+      }
+    }
+
+    @media (min-width: 758px) {
+      body {
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+        background-size: cover;
+      }
+    }
+  </style>
+
+  <body>
+    <div class="container">
+      <iframe
+        class="video"
+        src="https://www.youtube.com/embed/aA0too1WiQE?autoplay=1"
+      >
+      </iframe>
+    </div>
+  </body>
+</html>