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>
 
<head>
Line 6: Line 7:
 
   <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/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'>
 
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
−
<link rel="stylesheet" href="./style.css">
 
−
<style>.block-grid {
 
−
  margin-top: 3em;
 
−
  -webkit-column-count: 3;
 
−
          column-count: 3;
 
−
  -webkit-column-gap: 1em;
 
−
          column-gap: 1em;
 
−
  position: relative;
 
−
}
 
−
 
−
.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>
 
</head>
 
<body>
 
<body>

Revision as of 16:12, 14 October 2019

masonry grid css Document

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.

</body> </html>