|
|
(10 intermediate revisions by 2 users not shown) |
Line 254: |
Line 254: |
| } | | } |
| | | |
− | footer{
| |
− | position: fixed;
| |
− | bottom: 0;
| |
− | }
| |
| | | |
− | @media (max-height:800px){
| |
− | footer { position: static; }
| |
− | header { padding-top:40px; }
| |
− | }
| |
− |
| |
− |
| |
− | .footer-distributed{
| |
− | background-color: #2c292f;
| |
− | box-sizing: border-box;
| |
− | width: 100%;
| |
− | text-align: left;
| |
− | font: bold 16px sans-serif;
| |
− | padding: 50px 50px 60px 50px;
| |
− | margin-top: 0px;
| |
− | }
| |
− |
| |
− | .footer-distributed .footer-left,
| |
− | .footer-distributed .footer-center,
| |
− | .footer-distributed .footer-right{
| |
− | display: inline-block;
| |
− | vertical-align: top;
| |
− | }
| |
− |
| |
− | /* Footer left */
| |
− |
| |
− | .footer-distributed .footer-left{
| |
− | width: 30%;
| |
− | }
| |
− |
| |
− | .footer-distributed h3{
| |
− | color: #ffffff;
| |
− | font: normal 36px 'Cookie', cursive;
| |
− | margin: 0;
| |
− | }
| |
− |
| |
− | /* The company logo */
| |
− |
| |
− | .footer-distributed .footer-left img{
| |
− | width: 30%;
| |
− | }
| |
− |
| |
− | .footer-distributed h3 span{
| |
− | color: #e0ac1c;
| |
− | }
| |
− |
| |
− | /* Footer links */
| |
− |
| |
− | .footer-distributed .footer-links{
| |
− | color: #ffffff;
| |
− | margin: 20px 0 12px;
| |
− | }
| |
− |
| |
− | .footer-distributed .footer-links a{
| |
− | display:inline-block;
| |
− | line-height: 1.8;
| |
− | text-decoration: none;
| |
− | color: inherit;
| |
− | }
| |
− |
| |
− | .footer-distributed .footer-company-name{
| |
− | color: #8f9296;
| |
− | font-size: 14px;
| |
− | font-weight: normal;
| |
− | }
| |
− |
| |
− | /* Footer Center */
| |
− |
| |
− | .footer-distributed .footer-center{
| |
− | width: 35%;
| |
− | }
| |
− |
| |
− |
| |
− | .footer-distributed .footer-center i{
| |
− | background-color: #33383b;
| |
− | color: #ffffff;
| |
− | font-size: 25px;
| |
− | width: 38px;
| |
− | height: 38px;
| |
− | border-radius: 50%;
| |
− | text-align: center;
| |
− | line-height: 42px;
| |
− | margin: 10px 15px;
| |
− | vertical-align: middle;
| |
− | }
| |
− |
| |
− | .footer-distributed .footer-center i.fa-envelope{
| |
− | font-size: 17px;
| |
− | line-height: 38px;
| |
− | }
| |
− |
| |
− | .footer-distributed .footer-center p{
| |
− | display: inline-block;
| |
− | color: #ffffff;
| |
− | vertical-align: middle;
| |
− | margin:0;
| |
− | }
| |
− |
| |
− | .footer-distributed .footer-center p span{
| |
− | display:block;
| |
− | font-weight: normal;
| |
− | font-size:14px;
| |
− | line-height:2;
| |
− | }
| |
− |
| |
− | .footer-distributed .footer-center p a{
| |
− | color: #e0ac1c;
| |
− | text-decoration: none;;
| |
− | }
| |
− |
| |
− |
| |
− | /* Footer Right */
| |
− |
| |
− | .footer-distributed .footer-right{
| |
− | width: 30%;
| |
− | }
| |
− |
| |
− | .footer-distributed .footer-company-about{
| |
− | line-height: 20px;
| |
− | color: #92999f;
| |
− | font-size: 13px;
| |
− | font-weight: normal;
| |
− | margin: 0;
| |
− | }
| |
− |
| |
− | .footer-distributed .footer-company-about span{
| |
− | display: block;
| |
− | color: #ffffff;
| |
− | font-size: 18px;
| |
− | font-weight: bold;
| |
− | margin-bottom: 20px;
| |
− | }
| |
− |
| |
− | .footer-distributed .footer-icons{
| |
− | margin-top: 25px;
| |
− | }
| |
− |
| |
− | .footer-distributed .footer-icons a{
| |
− | display: inline-block;
| |
− | width: 35px;
| |
− | height: 35px;
| |
− | cursor: pointer;
| |
− | background-color: #33383b;
| |
− | border-radius: 2px;
| |
− |
| |
− | font-size: 20px;
| |
− | color: #ffffff;
| |
− | text-align: center;
| |
− | line-height: 35px;
| |
− |
| |
− | margin-right: 3px;
| |
− | margin-bottom: 5px;
| |
− | }
| |
− |
| |
− | Why this happens?
| |
− |
| |
− | img is an inline element and inline elements flows like text. The small whitespace is due to this. Possible solutions:
| |
− |
| |
− | Change the display from inline to other - add display: block for instance
| |
− |
| |
− | Change the vertical-align property to top (default is baseline)
| |
− |
| |
− | Shrink the text size to 0 by font-size: 0 on the containing block of the inline element.
| |
− |
| |
− | Example
| |
− |
| |
− | Add vertical-align: top to all the three images - see updated fiddle here and snippet below:
| |
− |
| |
− | #image-1 img,
| |
− | #image-2 img,
| |
− | #image-3 img {
| |
− | background-color: #00f;
| |
− | vertical-align: top;
| |
− | }
| |
− | .image-1,
| |
− | .image-2,
| |
− | image-3 {
| |
− | display: block;
| |
− | }
| |
− | .Wrapper {
| |
− | vertical-align: middle;
| |
− | display: block;
| |
− | }
| |
− |
| |
− | /* Here is the code for Responsive Footer */
| |
− | /* You can remove below code if you don't want Footer to be responsive */
| |
− |
| |
− |
| |
− | @media (max-width: 880px) {
| |
− |
| |
− | .footer-distributed .footer-left,
| |
− | .footer-distributed .footer-center,
| |
− | .footer-distributed .footer-right{
| |
− | display: block;
| |
− | width: 100%;
| |
− | margin-bottom: 40px;
| |
− | text-align: center;
| |
− | }
| |
− |
| |
− | .footer-distributed .footer-center i{
| |
− | margin-left: 0;
| |
− | }
| |
− |
| |
− | }
| |
| | | |
| | | |
Line 500: |
Line 293: |
| | | |
| #HQ_page h1, h2, h3, h4, h5 { | | #HQ_page h1, h2, h3, h4, h5 { |
− | color:#114f27; | + | color:black; |
− | text-shadow: 0px 0px 2px white;
| + | |
| font-family: 'Quicksand'; | | font-family: 'Quicksand'; |
| text-align: center; | | text-align: center; |
Line 522: |
Line 314: |
| | | |
| #HQ_page td { | | #HQ_page td { |
− | padding: 0; | + | padding: 10px; |
− | border: 0 solid black; | + | border: 2px solid white; |
| + | background: #519182; |
| + | } |
| + | #HQ_page th { |
| + | padding: 10px; |
| + | border: 2px solid white; |
| + | background:lightblue; |
| } | | } |
| | | |
| #HQ_page table { | | #HQ_page table { |
− | padding: 0; | + | color:white; |
− | border: 0 solid black; | + | padding: 10px; |
| + | border: 2px solid white; |
| } | | } |
| | | |
Line 601: |
Line 400: |
| <a href="https://2020.igem.org/Team:IISER_Berhampur/Description">Description</a> | | <a href="https://2020.igem.org/Team:IISER_Berhampur/Description">Description</a> |
| <a href="https://2020.igem.org/Team:IISER_Berhampur/Implementation">Implementation</a> | | <a href="https://2020.igem.org/Team:IISER_Berhampur/Implementation">Implementation</a> |
− | <a href="https://2020.igem.org/Team:IISER_Berhampur/Project/Experiments">Experiments</a> | + | <a href="https://2020.igem.org/Team:IISER_Berhampur/Experiments">Experiments</a> |
| <a href="https://2020.igem.org/Team:IISER_Berhampur/Engineering">Engineering</a> | | <a href="https://2020.igem.org/Team:IISER_Berhampur/Engineering">Engineering</a> |
| <a href="https://2020.igem.org/Team:IISER_Berhampur/Project/Notebook">Notebook</a> | | <a href="https://2020.igem.org/Team:IISER_Berhampur/Project/Notebook">Notebook</a> |
| <a href="https://2020.igem.org/Team:IISER_Berhampur/Contribution">Contribution</a> | | <a href="https://2020.igem.org/Team:IISER_Berhampur/Contribution">Contribution</a> |
− | <a href="https://2020.igem.org/Team:IISER_Berhampur/Project/Results">Results</a>
| |
| </div> | | </div> |
| | | |
| | | |
| </div> | | </div> |
− | <div class="dropdown">
| |
− | <button class="dropbtn">Modelling▼</button>
| |
− | <div class="dropdown-content">
| |
| <a href="https://2020.igem.org/Team:IISER_Berhampur/Model">Modelling</a> | | <a href="https://2020.igem.org/Team:IISER_Berhampur/Model">Modelling</a> |
− | <a href="https://2020.igem.org/Team:IISER_Berhampur/Visualisationl">NGL Viewer</a>
| |
− | </div>
| |
− | </div>
| |
| <div class="dropdown"> | | <div class="dropdown"> |
| <button class="dropbtn">Team▼</button> | | <button class="dropbtn">Team▼</button> |
Line 625: |
Line 417: |
| </div> | | </div> |
| </div> | | </div> |
− | <div class="dropdown">
| + | <a href="https://2020.igem.org/Team:IISER_Berhampur/Parts">Parts</a> |
− | <button class="dropbtn">Parts▼</button>
| + | |
− | <div class="dropdown-content">
| + | |
− | <a href="https://2020.igem.org/Team:IISER_Berhampur/Parts/Part_Collection">Part Collection</a>
| + | |
− | <a href="https://2020.igem.org/Team:IISER_Berhampur/Parts">Parts</a>
| + | |
− | <a href="https://2020.igem.org/Team:IISER_Berhampur/Parts/Improve">Improvement</a>
| + | |
− | </div>
| + | |
| | | |
− | </div>
| |
| <a href="https://2020.igem.org/Team:IISER_Berhampur/Human_Practices">Human Practices</a> | | <a href="https://2020.igem.org/Team:IISER_Berhampur/Human_Practices">Human Practices</a> |
| | | |
Line 641: |
Line 426: |
| | | |
| <a href="https://2020.igem.org/Team:IISER_Berhampur/Awards">Awards</a> | | <a href="https://2020.igem.org/Team:IISER_Berhampur/Awards">Awards</a> |
− | <a href="javascript:void(0);" class="icon" onclick="myNavbarResponsive()">☰</a>
| |
− | <div id="navright">
| |
− | <a href="https://2020.igem.org/Team:IISER_Berhampur">IISER Berhampur</a>
| |
− | </div>
| |
| | | |
− | </div> | + | <a href="https://2020.igem.org/Team:IISER_Berhampur/Graphics">Graphics</a> |
| + | |
| | | |
| + | </div> |
| + | <div style="position:fixed; top:0; right:0; width:5vw;height:6vw;z-index:10000;"> |
| + | <img style="position:relative;top:0;object-fit:contain; " src="https://static.igem.org/mediawiki/2020/6/69/T--IISER_Berhampur--gold.png"></img></div> |
| <script> | | <script> |
| function myNavbarResponsive() { | | function myNavbarResponsive() { |
Line 659: |
Line 444: |
| | | |
| </script> | | </script> |
| + | |
| + | |
| + | |
| | | |
| </body> | | </body> |
| </html> | | </html> |