Difference between revisions of "Team:DUT China B/Team"

Line 1: Line 1:
 
{{DUT_China_B/test_style.css}}
 
{{DUT_China_B/test_style.css}}
−
{{DUT China B/team.css}}
 
 
<html lang="en" >
 
<html lang="en" >
−
<head>
 
−
  <meta charset="UTF-8">
 
−
  <title>masonry grid css</title>
 
−
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 
−
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
 
−
</head>
 
−
<body>
 
−
<!-- partial:index.partial.html -->
 
−
<html>
 
  
 +
<body>
 
<head>
 
<head>
−
  <meta charset="UTF-8" />
+
<style>
−
   <title>Document</title>
+
.block-grid {
−
</head>
+
   margin-top: 3em;
 +
  -webkit-column-count: 3;
 +
          column-count: 3;
 +
  -webkit-column-gap: 1em;
 +
          column-gap: 1em;
 +
  position: relative;
 +
}
  
−
<body>
+
.block-panel {
 +
  -webkit-column-break-inside: avoid;
 +
          break-inside: avoid;
 +
  border-radius: 2px;
 +
  margin: 0 0 1em;
 +
  background-color: #69d7f8;
 +
  overflow: hidden;
 +
  position: relative;
 +
  cursor: pointer;
 +
  -webkit-transform: translateX(0);
 +
          transform: translateX(0);
 +
  display: inline-block;
 +
}
 +
.block-panel:hover p {
 +
  -webkit-transform: translateY(0);
 +
          transform: translateY(0);
 +
  opacity: 1;
 +
}
 +
.block-panel:hover h1 {
 +
  bottom: calc(100% - 4em);
 +
}
 +
 
 +
h1 {
 +
  padding-left: 2rem;
 +
  font-size: 2em;
 +
  font-weight: 800;
 +
  padding-bottom: 2em;
 +
  color: white;
 +
  width: 50%;
 +
  position: absolute;
 +
  text-transform: uppercase;
 +
  bottom: -2em;
 +
  transition: all .3s ease;
 +
  z-index: 3;
 +
}
 +
 
 +
p {
 +
  padding: 8em 2em 2em 2em;
 +
  position: relative;
 +
  color: white;
 +
  z-index: 2;
 +
  -webkit-transform: translateY(100%);
 +
          transform: translateY(100%);
 +
  margin: 0;
 +
  opacity: .5;
 +
  transition: all .35s ease;
 +
}
 +
p::after {
 +
  background: #13c1f0;
 +
  bottom: 0;
 +
  content: '';
 +
  display: block;
 +
  height: 100%;
 +
  left: 0;
 +
  position: absolute;
 +
  right: 0;
 +
  -webkit-transform: skewY(-7deg);
 +
          transform: skewY(-7deg);
 +
  -webkit-transform-origin: 100%;
 +
          transform-origin: 100%;
 +
  z-index: -1;
 +
  top: 3em;
 +
}
 +
 
 +
</style>
 +
</head>
 
   <div class="container">
 
   <div class="container">
 
     <div class="block-grid">
 
     <div class="block-grid">
Line 81: Line 143:
 
</body>
 
</body>
  
−
</html>
 
−
<!-- partial -->
 
−
 
 
−
</body>
 
 
</html>
 
</html>

Revision as of 16:14, 14 October 2019

title 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.

title 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.

title 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis

Advantage

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis

title 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobisorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.

title 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.

title 7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.orem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobisorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis

title 8

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.