finished lab6

Nathan95567 · Oct 24, 2023 · 6554651 · 6554651
1 parent df07ac1
commit 6554651
Show file tree

Hide file tree

Showing 12 changed files with 401 additions and 4 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/homepage/index.html b/homepage/index.html
@@ -39,6 +39,7 @@ <h3>PigZzz handcrafts!</h3>
             <div id="context_channel">
                 <img src="img/商标.png" width="400"/>
             </div>
+            <script type="text/javascript" id="clustrmaps" src="//clustrmaps.com/map_v2.js?d=XMs5XW4liQnoehqlJGg4MWgrZjrmOpkTWmldn7eNDiE&cl=ffffff&w=a"></script>
         </div>
     </body>
 </html>
diff --git a/labs/.DS_Store b/labs/.DS_Store
diff --git a/labs/lab6/assets/.DS_Store b/labs/lab6/assets/.DS_Store
diff --git a/labs/lab6/assets/css/q1.css b/labs/lab6/assets/css/q1.css
@@ -0,0 +1,36 @@
+/* ADD ANY LINES OF CODE YOU DEEM NECESSARY FOR QUESTION 1*/
+
+.button {
+    display: inline-block;
+    height: 50px;
+    width: 50px;
+    background: black;
+    margin: 12px;
+    cursor: pointer;
+    opacity: 0.7;
+}
+.button:hover {
+    transform: rotate(180deg); 
+    opacity: 1; 
+    border-radius: 50%;
+    transition: all 0.45s;
+}
+/* @keyframes rotation {
+	0% {transform: rotate(180deg);opacity: 1;}
+	100% {transform: scale(0.8);opacity: 1; border-radius: 50%;}
+} */
+#row {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+body, html {
+    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin: 0px;
+    height: 100%;
+    width: 100%;
+    background: #f7f5f2;
+    position: relative;
+}
diff --git a/labs/lab6/assets/css/q2.css b/labs/lab6/assets/css/q2.css
@@ -0,0 +1,62 @@
+/* ADD ANY LINES OF CODE YOU DEEM NECESSARY FOR QUESTION 2*/
+
+#ball {
+    display: block;
+    height: 150px;
+    width: 150px;
+    border-radius: 50%;
+    background: #fd6c2d;
+    z-index: 1;
+    transform: translateY(-200px);
+    animation: bounce 0.45s cubic-bezier(0.42, 0, 0.7, 0.5) infinite alternate;
+}
+
+#shadow {
+    height: 50px;
+    width: 160px;
+    background: black;
+    opacity: 0.5;
+    border-radius: 50%;
+    animation: change 0.45s cubic-bezier(0.42, 0, 0.7, 0.5) infinite alternate;
+}
+
+#ball, #shadow {
+    position: relative;
+    margin: 0 auto;
+    top: 50%;
+}
+
+body, html {
+    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin: 0px;
+    height: 100%;
+    width: 100%;
+    background: #f7f5f2;
+    position: relative;
+}
+@keyframes bounce {
+    0% {
+        transform: translateY(-200px);
+    }
+    50% {
+        transform: translateY(30px);
+    }
+    100% {
+        transform: translateY(-200px);
+    }
+}
+@keyframes change {
+    0% {
+        transform: scale(1);
+        opacity: 0.5;
+    }
+    50% {
+        transform: scale(0.5);
+        opacity: 0.6;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 0.5;
+    }
+}
+
diff --git a/labs/lab6/assets/css/style.css b/labs/lab6/assets/css/style.css
@@ -0,0 +1,44 @@
+body, html {    /*the outer layer of the site and global style attributes*/
+	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+	margin: 0px;
+	height: 100%;
+	width: 100%;
+	background: #f7f5f2;
+	position: relative;
+}
+
+/* Utility Stylesheets */
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+.clear {
+	clear: both;
+}
+
+.img-scaled {
+	width: 100%;
+}
+
+
+/* INDEX */
+
+.question {
+    background: white;
+    padding: 18px;
+    font-size: 12px;
+    margin-bottom: 6px;
+    border-radius: 2px;
+    text-align: center;
+    font-weight: 700;
+    color: #4a4a4a;
+    cursor: pointer;
+}
+#index {
+    width: 240px;
+    position: absolute;
+    left: calc(50% - 120px);
+    top: calc(50% - 206px);
+}
diff --git a/labs/lab6/assets/css/wdd.css b/labs/lab6/assets/css/wdd.css
@@ -0,0 +1,200 @@
+body {
+    margin: 0px;
+    font-family: 'Karla';
+    background: #f7f5f2;
+    padding: 60px;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+p:first-child {
+    font-style: italic;
+}
+
+p:nth-child(2) {
+    opacity: 0.8;
+}
+
+.img-scaled {
+    width: 100%;
+}
+
+.img-scaled-wh {
+    width: 100%;
+    height: 100%:
+}
+
+.clear {
+    clear: both;
+}
+
+* {
+    outline: none;
+}
+
+#data {
+	display: none;
+}
+
+.tag {
+	color: #6392c0;
+}
+
+.element {
+	color: #de6868;
+}
+
+#container {
+    width: 720px;
+    margin: 0px auto;
+    background: white;
+    box-shadow: 0px 0px 5px #edeae5;
+    border-radius: 2px;
+    position: relative;
+    padding: 30px 0px;
+}
+#header {
+    background: #78c272;
+    padding: 15px;
+    color: white;
+    width: 270px;
+}
+#header-caption-logo {
+    width: 20px;
+    float: left;
+}
+#header-caption-name {
+    float: left;
+    margin-left: 5px;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 15px;
+}
+#header-caption {
+    margin-bottom: 6px;
+    opacity: 0.6;
+}
+#header-title {
+    font-size: 18px;
+    font-weight: 300;
+    float: left;
+}
+#header-due {
+    float: left;
+    font-size: 18px;
+    font-weight: 300;
+    margin-left: 10px;
+    padding-left: 10px;
+    border-left: 2px solid rgba(255, 255, 255, 0.15);
+}
+.section {
+    margin: 30px 0px;
+    padding: 0px 30px;
+}
+/*#submission-header, .info-title {
+    text-align: left;
+    color: #78c272;
+    font-size: 24px;
+    font-weight: 700;
+  */  margin-bottom: 15px;
+}
+/*#submission-content, .info-content {
+    padding: 15px;
+    background: rgba(120, 194, 114, 0.1);
+    border-radius: 2px;
+    color: #4c5765;
+}*/
+.info-required {
+    font-size: 13px;
+    font-weight: 700;
+    opacity: 0.75;
+    margin-bottom: 10px;
+}
+.info-intro {
+    line-height: 24px;
+    font-size: 16px;
+    opacity: 0.75;
+}
+.info {
+    margin-bottom: 30px;
+}
+.info a {
+    font-weight: 700;
+    color: black;
+    opacity: 0.9;
+}
+.body-header {
+    font-size: 24px;
+    font-weight: 700;
+    color: #78c272;
+    margin-top: 36px;
+}
+.body p {
+    line-height: 24px;
+}
+.body img {
+	width: 100%;
+}
+.body a {
+	color: #78c272;
+}
+.body li {
+    line-height: 24px;
+    list-style: none;
+}
+.body {
+    color: #4c5765;
+}
+.body .caption {
+    opacity: 0.6;
+}
+#submission {
+    padding: 0px 30px;
+}
+#submission-content p, #submission-content li {
+    line-height: 24px;
+    opacity: 0.75;
+}
+
+#announcement-heading {
+    text-align: right;
+    color: #de6868;
+    font-weight: 700;
+    font-size: 24px;
+    margin-bottom: 15px;
+}
+#announcement-content {
+    padding: 15px;
+    background: rgba(222, 104, 104, 0.1);
+    color: #4c5765;
+    font-size: 12px;
+    line-height: 24px;
+    border-radius: 2px;
+}
+.download {
+    background: #78c272;
+    color: white;
+    width: 240px;
+    text-align: center;
+    padding: 15px 0px;
+    border-radius: 2px;
+    font-size: 13px;
+    font-weight: 700;
+    margin: 30px auto;
+    cursor: pointer;
+}
+#announcement .link {
+    background: #de6868;
+    width: 320px;
+    font-size: 13px;
+    font-weight: 700;
+    color: white;
+    text-align: center;
+    padding: 15px 0px;
+    margin: 30px auto;
+    border-radius: 2px;
+    cursor: pointer;
+}
diff --git a/labs/lab6/assets/img/basketball.svg b/labs/lab6/assets/img/basketball.svg
diff --git a/labs/lab6/index.html b/labs/lab6/index.html
@@ -1,6 +1,13 @@
-<!DOCTYPE html>
 <html>
-    <body>
-        Lab 1
-    </body>
+<head>
+<title>Index</title>
+<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'>
+<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
+</head>
+<body>
+	<div id="index">
+		<a href="question1.html" target="_blank"><div class="question">Question 1</div></a>
+		<a href="question2.html" target="_blank"><div class="question">Question 2</div></a>
+	</div>
+</body>
 </html>