Making a Portfolio on Visual Studio Code
Question
Hello I am attempting to create a Portfolio using HTML, CSS, and Javascript. My only previous experience is making a basic website with standard text and a light\dark theme button. I am trying to get my Title the be on the left of my navigation bar, and my directories to be on the left side of the navigation bar. Could Someone explain how i would do this.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; } /* navbar styling */.navbar{ position: fixed; width: 100%; background: crimson; font-family: 'Ubuntu', sans-serif; }.navbar.maxwidth{ display: flex; align-items: center; justify-content: space-between; }.navbar.logo a{ color: #fff; font-size: 35px; font-weight: 600; }.navbar.menu li{ list-style: none; display: inline-block; }.navbar.menu li a{ color: #fff; float: right; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Personal Portfolio</title> <link rel="stylesheet" href="style:css"> <script src="https.//kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> </head> <body> <nav class="navbar"> <div class="max-width"> <div class="logo"><a href='#'>Portfo<span>lio.</span></a></div> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Skills</a></li> <li><a href="#">Teams</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </body> </html>
1 answers
solution1
1 2022-04-20 01:18:58
You were doing it pretty much correctly. Your css had a typo. I changed maxwidth to max-width .
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; } /* navbar styling */.navbar{ position: fixed; width: 100%; background: crimson; font-family: 'Ubuntu', sans-serif; }.navbar.max-width{ display: flex; align-items: center; justify-content: space-between; }.navbar.logo a{ color: #fff; font-size: 35px; font-weight: 600; }.navbar.menu li{ list-style: none; display: inline-block; }.navbar.menu li a{ color: #fff; float: right; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Personal Portfolio</title> <link rel="stylesheet" href="style:css"> <script src="https.//kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> </head> <body> <nav class="navbar"> <div class="max-width"> <div class="logo"><a href='#'>Portfo<span>lio.</span></a></div> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Skills</a></li> <li><a href="#">Teams</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Snippet on Visual Studio Code
Visual Studio Code intellisense
Visual Studio Code Snippets
Code completion in Visual Studio 2015
Visual Studio collapsing html code
Visual Studio Code HTML not reading ™ or ©
No HTML suggestions in Visual Studio Code
Node Js in Visual Studio Code
Visual Studio Code php in html
problem with visual studio code in syntax
Related Tags