Difference between revisions of "Template:SUNY Oneonta/CSS"

(Created page with "<html> <head> <style> →‎────────────────── header ──────────────────: header{ margin: 0 auto...")
 
 
(3 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<head>
 
<head>
 
<style>
 
<style>
 +
/* Universal Styling */
  
−
/*──────────────────
+
body {
−
      header
+
margin: 0;
−
──────────────────*/
+
font-family: Lato;
−
header{
+
−
margin: 0 auto;
+
−
width: 100%;
+
−
height: 70px;
+
−
display: flex;
+
−
    align-items: center;
+
−
justify-content: space-around;
+
−
    background: transparent;
+
−
position: fixed;
+
−
top: 0;
+
−
transition: 0.3s;
+
−
z-index: 5;
+
−
}
+
−
.nav-show{
+
−
opacity: 0;
+
 
}
 
}
  
−
header:hover{
+
/* Header Styling */
−
opacity: 1;
+
 
−
background: var(--main-header-background);
+
#iGEMLogo {
 +
float: center;
 +
padding 20px;
 
}
 
}
  
−
.logo img{
+
#Title {
−
padding-top: 5px;
+
float: left;
−
height: 50px;
+
color: white;
−
cursor: pointer;
+
font-size: 32px;
 
}
 
}
  
−
.nav-bar{
+
header {
−
list-style:none;
+
height: 235px;
 
position: relative;
 
position: relative;
−
display: inline-flex;
+
background-color: #4b5320;
 
}
 
}
  
−
a.nav-link{
+
header a {
−
margin: 2px;
+
−
padding: 5px 10px;
+
 
text-decoration: none;
 
text-decoration: none;
−
color: var(--main-fonts-color);
 
−
font-family: var(--main-font-family);
 
−
cursor: pointer;
 
−
text-transform: uppercase;
 
 
}
 
}
  
−
.active{
+
header a:hover {
−
background: var(--main-decor-color);
+
text-decoration: none;
 
}
 
}
  
−
.nav-link:hover {
+
/* Navigation Bar Styling */
−
color: #000000;
+
 
−
    background: var(--main-decor-color);
+
.navbar {
 +
  overflow: hidden;
 +
  background-color: #333;
 
}
 
}
  
−
/*──────────────────
+
.navbar a {
−
    end header
+
  float: left;
−
──────────────────*/
+
  font-size: 16px;
 +
  color: white;
 +
  text-align: center;
 +
  padding: 14px 16px;
 +
  text-decoration: none;
 +
}
  
 +
.dropdown {
 +
  float: left;
 +
  overflow: hidden;
 +
}
 +
 +
.dropdown .dropbtn {
 +
  font-size: 16px; 
 +
  border: none;
 +
  outline: none;
 +
  color: white;
 +
  /* padding: 14px 16px; */
 +
  background-color: inherit;
 +
  font-family: inherit;
 +
  margin: 0;
 +
}
 +
 +
.navbar a:hover, .dropdown:hover .dropbtn {
 +
  background-color: #cb2c30;
 +
}
 +
 +
.dropdown-content {
 +
  display: none;
 +
  position: absolute;
 +
  background-color: #f9f9f9;
 +
  min-width: 160px;
 +
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
  z-index: 1;
 +
}
 +
 +
.dropdown-content a {
 +
  float: none;
 +
  color: black;
 +
  padding: 12px 16px;
 +
  text-decoration: none;
 +
  display: block;
 +
  text-align: left;
 +
}
 +
 +
.dropdown-content a:hover {
 +
  background-color: #ddd;
 +
}
 +
 +
.dropdown:hover .dropdown-content {
 +
  display: block;
 +
}
 
</style>
 
</style>
 
</head>
 
</head>
 
</html>
 
</html>

Latest revision as of 15:15, 28 July 2021