Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- * {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
- }
- body {
- background-color: #d9dcd6;
- }
- .header {
- padding: 20px;
- font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
- background-color: #9b537f;
- color: #ffffff;
- }
- .header div {
- padding-top: 15px;
- margin-right: 20px;
- float: right;
- font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
- font-size: 20px;
- }
- .header div ul {
- list-style-type: none;
- }
- .header div ul li {
- display: inline-block;
- margin-left: 25px;
- margin-top: -25px;
- }
- .main-image {
- height: 800px;
- width: 100%;
- margin-bottom: 25px;
- background-image: url("../assets/Cloud-Aesthetic-Backgrounds-Desktop.jpg");
- background-size: cover;
- background-position: center;
- }
- h1{
- font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
- color: #ffffff;
- }
- a {
- color: #ffffff;
- text-decoration: none;
- }
- a:hover{
- text-decoration: underline;
- }
- p {
- font-size: 16px;
- font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
- }
- hr.style14 {
- border: 0;
- height: 5px;
- background-image: -webkit-linear-gradient(left, #FFBFC6, #fff, #FFBFC6);
- opacity:0.7;
- }
- .float-left {
- float: left;
- margin-right: 25px;
- }
- .float-right {
- float: right;
- margin-left: 25px;
- }
- .content {
- width: 75%;
- display: inline-block;
- margin-left: 20px;
- }
- .test1 {
- margin-bottom: 20px;
- padding: 50px;
- height: 300px;
- font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
- background-color: #0072bb;
- color: #ffffff;
- }
- .test2 {
- margin-bottom: 20px;
- padding: 50px;
- height: 300px;
- font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
- background-color: #0072bb;
- color: #ffffff;
- }
- .test3 {
- margin-bottom: 20px;
- padding: 50px;
- height: 300px;
- font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
- background-color: #0072bb;
- color: #ffffff;
- }
- .aboutbox {
- position:absolute;
- background-color:#FFDDD2;
- background-image:url('https://www.transparenttextures.com/patterns/ag-square.png');
- }
- </style>
- <!DOCTYPE html>
- <html lang="en-us">
- <head>
- <meta charset="UTF-8" />
- <link rel="stylesheet" href="./assets/style.css">
- <title>My Portfolio</title>
- </head>
- <body>
- <div class="header">
- <h1>Brianna Slicer</h1>
- <div>
- <ul>
- <li>
- <a href="#test1">About Me</a>
- </li>
- <li>
- <a href="#test2">Contact Me</a>
- </li>
- <li>
- <a href="#test3">Resume</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="aboutbox">
- <p>Lorem ipsum...</p>
- </div>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement