Add files via upload

AiControlLab · Apr 28, 2024 · e721ad4 · e721ad4
1 parent 326c9d4
commit e721ad4
Show file tree

Hide file tree

Showing 9 changed files with 263 additions and 0 deletions.
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -0,0 +1 @@
+*           @udacity/active-public-content
diff --git a/css/app.css b/css/app.css
@@ -0,0 +1,195 @@
+/*** Site Colors ***
+
+pale-grey: #fafbfc
+pale-grey-two: #dbe2e8
+dark: #2e3d49
+bluegrey: #7d97ad
+aquamarine: #02ccba
+
+*/
+
+html {
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+
+body {
+    background-color: #fafbfc;
+    color: #2e3d49;
+    font-family: Georgia, Times, 'Times New Roman', serif;
+}
+
+h1 {
+    font-family: 'Montserrat', sans-serif;
+}
+
+h2,
+h3,
+h4 {
+    font-family: 'Open Sans', sans-serif;
+}
+
+p {
+    line-height: 1.5;
+}
+
+.container {
+    margin: auto;
+    max-width: 1300px;
+}
+
+
+/*** Header Styling ***/
+.page-header {
+    background-image: url('../img/headerimage.jpg');
+    background-position: 50% 75%;
+    background-size: cover;
+    text-align: center;
+    padding: 1em;
+    margin-bottom: 2rem;
+    min-height: 25vh;
+}
+
+h1 {
+    letter-spacing: 8px;
+    position: relative;
+    text-transform: uppercase;
+    text-shadow: 0 0 1px white;
+}
+
+h1::after {
+    border: 5px solid #02ccba;
+    border-radius: 50%;
+    content: '';
+    height: 15px;
+    width: 15px;
+    position: absolute;
+}
+
+
+/*** Article Styling ***/
+article,
+aside {
+    margin: 2em;
+}
+
+article header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+}
+
+time {
+    color: #7d97ad;
+}
+
+article img {
+    height: auto;
+    width: 100%;
+}
+
+.read-more {
+    color: #02ccba;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: bold;
+    text-decoration: none;
+    text-transform: uppercase;
+}
+
+.read-more::after {
+    content: '►';
+    position: relative;
+    left: 7px;
+    font-size: 80%;
+    top: -1px;
+}
+
+
+/*** Sidebar Styling ***/
+aside {
+    border-top: 2px solid #dbe2e8;
+    margin-top: 2em;
+    padding-top: 2em;
+}
+
+.social-link {
+    display: inline-block;
+    margin-right: 0.75em;
+}
+
+
+/*** Footer Styling ***/
+footer {
+    border-top: 2px solid #dbe2e8;
+    margin-top: 4em;
+    padding: 2em;
+    text-align: center;
+}
+
+
+/*** Reponsive Styles ***/
+@media (min-width: 650px) {
+    aside {
+        display: flex;
+    }
+
+    .sidebar-text {
+        margin-left: 2em;
+    }
+
+    .sidebar-text h2 {
+        margin-top: 0;
+    }
+}
+
+@media (min-width: 1000px) {
+    .page-header {
+        min-height: 35vh;
+    }
+
+    .container {
+        display: flex;
+    }
+
+    main {
+        flex: 1 1 70%;
+    }
+
+    aside {
+        display: block;
+        border-top: 0;
+        border-left: 2px solid #dbe2e8;
+        margin: 0;
+        padding: 2em;
+        flex: 0 1 30%;
+        align-self: flex-start;
+    }
+
+    .sidebar-text {
+        margin-left: 0;
+    }
+
+    .sidebar-text h2 {
+        margin-top: 0.5em;
+    }
+}
+
+/*** Helper Classes ***/
+
+/* from the HTML5 Boilerplate project for hidden, but accessible headings: https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L126-L145 */
+.visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+}
diff --git a/css/normalize.min.css b/css/normalize.min.css
diff --git a/img/headerimage.jpg b/img/headerimage.jpg
diff --git a/img/home.png b/img/home.png
diff --git a/img/profilepic.jpg b/img/profilepic.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Blog Project</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans">
+    <link rel="stylesheet" href="css/normalize.min.css">
+    <link rel="stylesheet" href="css/app.css">
+</head>
+<body>
+
+    <header class="page-header">
+        <h1>AiControllLab</h1>
+    </header>
+
+    <div class="container">
+        <main>
+            <h2 class="visuallyhidden">Articles</h2>
+
+            <article>
+                <header>
+                    <h3>Experimental Video</h3>
+                    <time datetime="2016-05-12T08:00">Apr. 28</time>
+                </header>
+                <video loop="loop" controls="controls" poster="img/home.png">
+                    <source src="video/demo.mp4" type="video/mp4"></source></video>
+                <!-- <img src="img/chasing-the-snow.jpg" alt="A dogsled team in Alaska"> -->
+
+                <!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, laborum dolorem, dolor error nihil vitae similique necessitatibus omnis iure quasi vel iste repellendus alias! Asperiores voluptatem, maiores quibusdam eaque consequatur.</p> -->
+
+                <!-- <a class="read-more" href="#">Read more</a> -->
+            </article>
+        </main>
+
+        <aside>
+            <img src="img/profilepic.jpg" alt="My profile picture">
+
+            <div class="sidebar-text">
+                <h2>About Me</h2>
+                <p>Zhuanzhuan Ma is currently a master’s student in the School of Air Transportation at Shanghai University of Engineering Science, Shanghai, China. She received bachelor degree in engineering from Changchun University of science and Technology, Changchun, China, in 2021. Her research interests are Motion Planning.</p>
+
+                <!-- <section>
+                    <h3 class="visuallyhidden">Social Links</h3>
+                    <a class="social-link" href="https://twitter.com/udacity">
+                        <img src="img/social-twitter.png" alt="Twitter">
+                    </a>
+                    <a class="social-link" href="https://www.instagram.com/udacity/">
+                        <img src="img/social-instagram.png" alt="Instagram">
+                    </a>
+                    <a class="social-link" href="https://plus.google.com/+Udacity">
+                        <img src="img/social-google.png" alt="Google Plus">
+                    </a>
+                </section> -->
+            </div>
+        </aside>
+    </div>
+
+    <footer>
+        Made with AiControllLab
+    </footer>
+
+    <script src="js/app.js"></script>
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
diff --git a/video/demo.mp4 b/video/demo.mp4