From ed0e8d7c3f02dd5e0ee1455b10c9409c940917a8 Mon Sep 17 00:00:00 2001
From: mzvuixsyg <wuujc@outlook.com>
Date: Sun, 11 Jun 2023 21:53:27 +0800
Subject: [PATCH] ADD file via upload

---
 zhou.css | 273 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 273 insertions(+)
 create mode 100644 zhou.css

diff --git a/zhou.css b/zhou.css
new file mode 100644
index 0000000..064d100
--- /dev/null
+++ b/zhou.css
@@ -0,0 +1,273 @@
+
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: #333;
+}
+
+.topnav {
+  overflow: hidden;
+  background-color: #333;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 999;
+}
+.nav {
+  overflow: hidden;
+  background-color: #333;
+  width: 100%;
+}
+
+.topnav a {
+  float: left;
+  display: block;
+  color: #f2f2f2;
+  text-align: center;  
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+.nav a {
+  float: left;
+  display: block;
+  color: #f2f2f2;
+  text-align: center;  
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+
+
+.topnav a:hover {
+  background-color: #a7a7a7;
+  color: black;
+}
+.nav a:hover {
+  background-color: #a7a7a7;
+  color: black;
+}
+
+.topnav a:active {
+  float: left;
+  color: white;
+    }
+.nav a:active {
+  float: left;
+  color: white;
+  }
+.topnav .icon {
+  display: none;
+}
+
+@media screen and (max-width: 720px) {
+  .topnav a:not(:first-child) {display: none;}
+  .topnav a.icon {
+    float: right;
+    display: block;   
+  }
+}
+
+@media screen and (max-width: 720px) {
+  .topnav.responsive {position: relative;}
+  .topnav.responsive .icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  .topnav.responsive a {
+    float: none;
+    display: block;
+    text-align: left;
+  }
+}
+@media screen and (min-width:720px) {
+  p{
+    width:61.8%;
+  }
+
+}
+  .intro{
+    color:whitesmoke;
+    padding-left: 20px;
+    height: 100vh;
+    background-image:url('img/sft.png');
+    background-size:cover;
+    background-repeat: no-repeat;
+    animation:frams 15s infinite;
+  background-position: center;
+
+  }
+  .wanfa{
+    color:whitesmoke;
+    height: 100vh;
+  }
+ h3{
+    font-style: oblique; font-size: 2em; white-space: nowrap;padding-top: 70px;padding-bottom: 40px;
+  }
+ p{
+    font-size: 1.2em;
+    text-indent: 40px
+  }
+  .intro img{
+    display: flex;
+    justify-content: space-between;
+  }
+  button{
+    background-color:#ffffff78;
+    color:black;
+    width: 150px;
+    height: 45px;
+    border:0;
+    font-size: 16px;
+    box-sizing: content-box;				
+      border-radius: 5px;
+      margin-bottom: 20px;
+  }
+  button:hover{
+    background-color: #0099ff6b;
+  }
+  .Img {
+    display: flex;
+    justify-content: flex-start;
+    
+  }
+  .Btn{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .down{
+    display: flex;
+    justify-content: flex-start;
+  }
+  .parent {padding-left: 0px;
+    width: 100%;
+  }
+  .la {
+    padding-left: 0px;
+    display: inline-block;
+    width: 100%;
+    background-color: #000000;
+    cursor: pointer;
+    height: 46px;
+    line-height: 30px;
+    border-bottom: 1px solid #333;
+  }
+
+  .t1 {
+    display: none;
+  }
+
+  .content {
+    width: 100%;
+    height: 0px;
+    overflow: hidden;
+    transition: all .38s;
+  }
+
+  .t1:checked+.content {
+    height: 300px;
+  }
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  .container {
+    display: flex;
+    height: 100vh;
+    background-color: #333;
+  }
+  
+  .sidebar {
+    width: 20%;
+    background-color: #333;
+    overflow-x: hidden;
+  }
+  
+  .main {
+    width: 80%;
+    background-color: #333;
+  }
+  
+  .video {
+    width: 100%;
+    height: 33.33%;
+    cursor: pointer;
+    margin: 10px;
+    border-radius: 10px;
+    overflow: hidden;
+    transition: transform 0.3s ease-in-out;
+  }
+  
+  .video img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+  
+  .video.active {
+    border: 5px solid blue;
+  }
+  
+  .player {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .video:hover {
+    transform: scale(1.1);
+  }
+  .la:hover{
+    background-color: #565656;
+  }
+  .player {
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+  }
+  
+  .player.show {
+    opacity: 1;
+  }
+  @media screen and (max-width:720px) {
+  
+    .container {
+      flex-direction: column-reverse;
+    }
+
+    .sidebar {
+      width:100%;
+      display:flex;
+      flex-wrap:wrap;
+    }
+
+    .main {
+      width:100%;
+    }
+
+    .video {
+      width:33.33%;
+    }
+}
+.div1,div2{
+  width: 1350px;
+  margin:0 auto;
+}
+
+@keyframes frams {
+  0%{
+      background-image: url("img/b1.png");background-repeat: no-repeat;background-size:cover;
+  }
+  33%{
+      background-image: url("img/b2.jpg");background-repeat: no-repeat;background-size:cover;
+  }
+  66%{
+      background-image: url("img/sft.png");background-repeat: no-repeat;background-size:cover;
+  }
+  100%{
+      background-image: url("img/b1.png");background-repeat: no-repeat;background-size:cover;
+  }
+}
\ No newline at end of file