Difference between revisions of "Team:Sorbonne U Paris/Brainstorming"

Line 3: Line 3:
 
<html>
 
<html>
  
 +
<head>
 +
<style>
 +
 +
 +
/* The actual timeline (the vertical ruler) */
 +
.timeline {
 +
  position: relative;
 +
  max-width: 1200px;
 +
  margin: 0 auto;
 +
}
 +
 +
/* The actual timeline (the vertical ruler) */
 +
.timeline::after {
 +
  content: '';
 +
  position: absolute;
 +
  width: 6px;
 +
  background-color: black;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 50%;
 +
  margin-left: -3px;
 +
}
 +
 +
/* Container around content */
 +
.container {
 +
  padding: 10px 40px;
 +
  position: relative;
 +
  background-color: inherit;
 +
  width: 50%;
 +
 +
}
 +
 +
/* The circles on the timeline */
 +
.container::after {
 +
  content: '';
 +
  position: absolute;
 +
  width: 25px;
 +
  height: 25px;
 +
  right: 10px;
 +
  background-color: white;
 +
  border: 4px solid #22D66C;
 +
  top: 15px;
 +
  border-radius: 50%;
 +
  z-index: 1;
 +
}
 +
 +
/* Place the container to the left */
 +
.left {
 +
  left: -23%;
 +
}
 +
 +
/* Place the container to the right */
 +
.right {
 +
  left: 23%;
 +
}
 +
 +
 +
/* Fix the circle for containers on the right side */
 +
.right::after {
 +
  left: 10px;
 +
}
 +
 +
/* The actual content */
 +
.content {
 +
  padding: 20px 30px;
 +
  background-color: white;
 +
  position: relative;
 +
  border-radius: 6px;
 +
  border: 1px solid black;
 +
 +
 +
}
 +
 +
/* Media queries - Responsive timeline on screens less than 600px wide */
 +
@media screen and (max-width: 600px) {
 +
/* Place the timelime to the left */
 +
  .timeline::after {
 +
    left: 31px;
 +
  }
 +
 +
/* Full-width containers */
 +
  .container {
 +
    width: 100%;
 +
    padding-left: 70px;
 +
    padding-right: 25px;
 +
  }
 +
 +
/* Make sure that all arrows are pointing leftwards */
 +
  .container::before {
 +
    left: 60px;
 +
    border: medium solid white;
 +
    border-width: 10px 10px 10px 0;
 +
    border-color: transparent white transparent transparent;
 +
  }
 +
 +
/* Make sure all circles are at the same spot */
 +
  .left::after, .right::after {
 +
    left: 15px;
 +
  }
 +
 +
/* Make all right containers behave like the left ones */
 +
  .right {
 +
    left: 0%;
 +
  }
 +
}
 +
</style>
 +
</head>
  
 
<body id="backtotop">
 
<body id="backtotop">
 
     <div class="global">
 
     <div class="global">
−
<div class="container">
+
 
−
<h1>Brainstorming</h1>
+
 
−
<br><br><br>
+
 
−
<p>Haec subinde Constantius audiens et quaedam referente Thalassio doctus, quem eum odisse iam conpererat lege communi, scribens ad Caesarem blandius adiumenta paulatim illi subtraxit, sollicitari se simulans ne, uti est militare otium fere tumultuosum, in eius perniciem conspiraret, solisque scholis iussit esse contentum palatinis et protectorum cum Scutariis et Gentilibus, et mandabat Domitiano, ex comite largitionum, praefecto ut cum in Syriam venerit, Gallum, quem crebro acciverat, ad Italiam properare blande hortaretur et verecunde.
+
<div class="timeline">
−
<br> <br>
+
  <div class="container left">
−
          </p>
+
    <div class="content">
 +
      <h2>September 2017</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container right">
 +
    <div class="content">
 +
      <h2>October 2017</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container left">
 +
    <div class="content">
 +
      <h2>November 2017</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container right">
 +
    <div class="content">
 +
      <h2>December 2017</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container left">
 +
    <div class="content">
 +
      <h2>January 2018</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container right">
 +
    <div class="content">
 +
      <h2>February 2018</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container left">
 +
    <div class="content">
 +
      <h2>March 2018</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>   
 +
    <div class="container right">
 +
    <div class="content">
 +
      <h2>April 2018</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
        <div class="container left">
 +
    <div class="content">
 +
      <h2>May 2018</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div> 
 +
        <div class="container right">
 +
    <div class="content">
 +
      <h2>June 2018</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
        </div>   
 +
 
 +
 
 
</div>
 
</div>
 
</body>
 
</body>

Revision as of 19:02, 29 August 2018

September 2017

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

October 2017

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

November 2017

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

December 2017

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

January 2018

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

February 2018

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

March 2018

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

April 2018

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

May 2018

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

June 2018

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

Back to top