Difference between revisions of "Template:RUM-UPRM/Example"
Paulamanan (Talk | contribs) |
Paulamanan (Talk | contribs) |
||
| (11 intermediate revisions by 2 users not shown) | |||
| Line 18: | Line 18: | ||
ul.nav-pills { | ul.nav-pills { | ||
top: 70px; | top: 70px; | ||
| + | |||
| + | position: sticky; | ||
| + | top: 70px; | ||
| + | margin-left: 4em; | ||
| + | margin-top: 4em; | ||
| + | /*border-radius: 0px 15px 15px 0px;*/ | ||
| + | max-width: 12vw; | ||
| + | overflow-wrap: break-word; | ||
| + | line-height: 1; | ||
| + | overflow: hidden; | ||
} | } | ||
| Line 24: | Line 34: | ||
} | } | ||
| − | div.col- | + | div.col-9 div { |
height: 500px; | height: 500px; | ||
| + | width: 50px; | ||
| + | display: block; | ||
| + | text-decoration: none; | ||
| + | color: var(--dark); | ||
| + | font-size: 1em; | ||
| + | padding-left: 0.6em; | ||
| + | padding-top: 0.5em; | ||
| + | padding-bottom: 0.3em; | ||
| + | padding-right: 0.5em; | ||
| + | font-weight: 400; | ||
| + | position: relative; | ||
| + | z-index: 1; | ||
| + | overflow: hidden; | ||
| + | transition: all 0.5s | ||
} | } | ||
.sticky { | .sticky { | ||
| Line 32: | Line 56: | ||
width: 100%; | width: 100%; | ||
} | } | ||
| − | + | .myScrollspy { | |
position: sticky; | position: sticky; | ||
| − | top: 70px; | + | top: 70px;.scroll-spy |
| + | margin-left: 4em; | ||
| + | margin-top: 4em; | ||
| + | /*border-radius: 0px 15px 15px 0px;*/ | ||
| + | max-width: 12vw; | ||
| + | overflow-wrap: break-word; | ||
| + | line-height: 1; | ||
| + | overflow: hidden; | ||
} | } | ||
| + | |||
| + | .spy-list>a.selected { | ||
| + | border-left: 3px solid var(--accent2); | ||
| + | transition: all 0.2s; | ||
| + | font-weight: 700; | ||
| + | } | ||
| + | |||
</style> | </style> | ||
| Line 42: | Line 80: | ||
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1"> | <body data-spy="scroll" data-target="#myScrollspy" data-offset="1"> | ||
| − | <div class="container-fluid" style= "background-color: | + | <div class="container-fluid" style= "background-color:#3BB9FF; height:100px; top: 200px"> |
<center><h1>TITLE</h1></center> | <center><h1>TITLE</h1></center> | ||
</div> | </div> | ||
| Line 49: | Line 87: | ||
<div class="container-fluidtwo"> | <div class="container-fluidtwo"> | ||
<div class="row"> | <div class="row"> | ||
| − | <nav class="col-sm- | + | <nav class="col-sm-2 col-3" id="myScrollspy"> |
| − | <ul class="nav nav-pills | + | <ul class="nav nav-pills"> |
<li class="nav-item"> | <li class="nav-item"> | ||
<a class="nav-link active" href="#section1">Tema 1</a> | <a class="nav-link active" href="#section1">Tema 1</a> | ||
| Line 81: | Line 119: | ||
<p style=" margin-left:7%; margin-right:7%">Text Here </p> | <p style=" margin-left:7%; margin-right:7%">Text Here </p> | ||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
Latest revision as of 14:05, 27 October 2020
TITLE
Title
Text Here
Tema 2
Text Here
Tema 3
Text Here