Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <!-- Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <!-- Bootstrap CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
- <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
- <title>Eric Zhao</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div id="logo" class="row">
- <div class = "col">
- <h1>Eric Zhao</h1>
- </div>
- </div>
- <div id="navbar" class="container">
- <nav class="navbar navbar-md">
- <a class="navbar-link" href="#">Gallery</a>
- <a class="navbar-link" href="#">About</a>
- </nav>
- </div>
- <!-- Optional JavaScript -->
- <!-- jQuery first, then Popper.js, then Bootstrap JS -->
- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
- </body>
- </html>
- -------------------------------------------
- h1 {
- padding-top: 40px;
- text-align: center;
- font-style: italic;
- font-weight: 600;
- font-size: 50px;
- text-transform: uppercase;
- padding-bottom: 40px;
- }
- .navbar{
- width:70% !important;
- margin:0px auto;
- left:0;
- right:0;
- padding:0;
- border-bottom:1px solid rgb(191,191,191);
- }
- .navbar a{
- color: black;
- text-decoration: none;
- text-transform: uppercase;
- float:left;
- position: relative;
- padding: 10px 20px;
- overflow: hidden;
- }
- .navbar a:after {
- background-color: grey;
- content: "";
- width: 0;
- height: 3px;
- left: 0;
- bottom: 0;
- transition: width 0.35s ease 0s;
- position: absolute;
- }
- .navbar a:hover::after{
- width: 100%;
- }
- /*.a {
- background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
- background-repeat: no-repeat;
- background-size: 100% 0.2em;
- background-position: 0 88%;
- transition: background-size 0.25s ease-in;
- }
- . a:hover {
- background-size: 100% 88%;
- }*/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement