Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="container-fluid full">
- </div>
- .full {
- background: url('http://placehold.it/1920x1080') no-repeat center center fixed;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- background-size: cover;
- -o-background-size: cover;
- height:100%;
- }
- <style>
- .button {
- position: relative;
- background-color: #4CAF50;
- border: none;
- font-size: 28px;
- color: #FFFFFF;
- padding: 20px;
- width: 200px;
- text-align: center;
- -webkit-transition-duration: 0.4s; /* Safari */
- transition-duration: 0.4s;
- text-decoration: none;
- overflow: hidden;
- cursor: pointer;
- }
- .button:after {
- content: "";
- background: #90EE90;
- display: block;
- position: absolute;
- padding-top: 300%;
- padding-left: 350%;
- margin-left: -20px!important;
- margin-top: -120%;
- opacity: 0;
- transition: all 0.8s
- }
- .button:active:after {
- padding: 0;
- margin: 0;
- opacity: 1;
- transition: 0s
- }
- </style>
- </head>
- <body>
- <button class="button">Click Me</button>
- <section id="section1" class="section1">
- <a href="#contact-me"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>
- </section>
- <section id="contact-me" class="contact_section section2">
- <a href="#section1"> <i class="fa fa-angle-up" style="font-size:100px;"></i></a>
- </section>
- .section1 {
- height: 100vh;
- text-align: center;
- background-color: white;
- }
- .section2 {
- background-color: white;
- text-align: center;
- //margin-top:100px;
- color: black;
- min-height: 90vh;
- }
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Liam Docherty Digital Portfolio</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
- <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- </head>
- <style>
- .body {
- font-family: 'Roboto', sans-serif;
- color: black;
- }
- .navbar.navbar-default {
- background-color: #FFFFFF;
- height: 10vh;
- z-index: 100;
- }
- .navbar.navbar-default ul {
- list-style-type: none;
- text-align: center;
- }
- .navbar.navbar-default ul li {
- display: inline-block;
- }
- .dropdown-menu li {
- text-align: center;
- }
- .dropdown .dropdown-menu {
- background-color: #FFFFFF;
- }
- .dropdown .dropdown-menu a {
- color: white;
- }
- .navbar.navbar-default ul li a {
- display: inline-block;
- padding: 3.5vh 8px 4px;
- color: black;
- text-decoration: none;
- font-size: 14pt;
- font-family: 'Roboto', sans-serif;
- }
- .navbar.navbar-default ul li:after {
- content: '';
- position: absolute;
- right: 50%;
- bottom: 0;
- left: 50%;
- height: 3px;
- background-color: black;
- border-radius: 9px;
- transition: all .2s;
- }
- .nav.navbar-nav,
- .nav.navbar-nav>li {
- float: none;
- }
- .navbar.navbar-default ul li:hover:after {
- right: 0;
- left: 0;
- }
- .navbar.navbar-default ul.dropdown-menu li,
- .navbar.navbar-default ul.dropdown-menu li a {
- position: relative;
- display: block;
- }
- </style>
- <body>
- <div class="container">
- <nav class="navbar navbar-default navbar-fixed-top">
- <div class="container-fluid">
- <!-- Brand and toggle get grouped for better mobile display -->
- <div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- </div>
- <!-- Collect the nav links, forms, and other content for toggling -->
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <ul class="nav navbar-nav">
- <li><a href="#">Home</a>
- </li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a>
- </li>
- <li><a href="#section3">Contact</a>
- </li>
- <li><a href="#">Something else here</a>
- </li>
- <li><a href="#">Separated link</a>
- </li>
- <li><a href="#">One more separated link</a>
- </li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a>
- </li>
- <li><a href="#">Another action</a>
- </li>
- <li><a href="#">Something else here</a>
- </li>
- <li><a href="#">Separated link</a>
- </li>
- <li><a href="#">One more separated link</a>
- </li>
- </ul>
- </li>
- <li><a href="#">Clients</a>
- </li>
- <li><a href="#contact-me">Contact Me</a>
- </li>
- </ul>
- </div>
- <!-- /.navbar-collapse -->
- </div>
- <!-- /.container-fluid -->
- </nav>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement