Create navigation bar
This commit is contained in:
Bartlomiej Pluta (PGS Software)
1
src/img/logo.svg
Normal file
1
src/img/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="42"><style/><path id="Shape 1" d="M44 21.98c.01-.42-.12-.77-.39-1.03l-3.75-3.79.04-8.69c-.02-.06-.04-.15-.05-.24 0-.03-.01-.05-.02-.08-.01-.05-.03-.09-.04-.14-.02-.05-.03-.1-.05-.15-.01-.03-.03-.06-.04-.08a.53.53 0 0 0-.08-.15l-.04-.06c-.03-.05-.07-.1-.11-.15-.03-.02-.05-.04-.07-.05-.05-.05-.1-.1-.16-.14-.03-.02-.06-.03-.1-.05l-.05-.03a.467.467 0 0 1-.1-.05c-.13-.06-.28-.09-.44-.1h-3.2c-.36 0-.69.14-.95.39-.25.25-.39.58-.39.94 0 .73.6 1.33 1.34 1.33h1.81v7.98c-.01.12 0 .24.02.33.06.41.28.75.6.95l.16.13 2.9 2.9-3.23 3.23c-.16.14-.28.31-.35.49-.04.08-.05.14-.06.21l-.02.07c-.02.09-.03.24-.02.36v8.09h-1.81c-.75 0-1.34.56-1.34 1.28 0 .35.14.68.39.93s.58.38.94.38l3.15-.02c.17 0 .33-.03.49-.09l.18-.1c.03-.02.06-.03.09-.05.04-.03.1-.08.15-.13l.06-.05c.04-.04.09-.1.13-.16l.03-.05c.03-.05.06-.11.08-.16l.03-.06c.02-.04.03-.09.04-.14.01-.03.02-.08.04-.12.01-.04.02-.09.04-.14v.03c.01-.1.03-.18.05-.25l-.04-8.76 3.76-3.79c.26-.25.39-.6.38-.97zM29.53 2.1c-.16-.13-.39-.28-.62-.28h-.09L20.25 1c-.02 0-.04.01-.07.01-.02.01-.04.01-.06.01-.06.02-.12.04-.18.05-.05.01-.1.03-.15.04-.02.01-.05.03-.07.04l-.16.07c-.05.03-.11.08-.16.12l-.06.05c-.03.03-.08.07-.13.14l-.03.03c-.04.05-.07.11-.1.16l-.03.06c-.03.05-.04.1-.06.14-.01.03-.02.06-.03.08v.05l-.02.08c0 .03-.01.07-.02.11l-2.93 33.52c-.06.38.04.75.27 1.03l3.86 4.67c.01.03.03.05.04.07a1.266 1.266 0 0 0 1.8.17l4.65-4c.05-.04.1-.1.16-.17l.03-.03c.16-.23.25-.47.26-.72l2.25-25.99.02-.08c.03-.09.04-.16.05-.22 0-.06 0-.12-.01-.21l-.01-.08.63-6.98c.04-.43-.13-.85-.46-1.12zm-4.89 33.21l-6.01-.53 2.05-23.77 6.01.54-2.05 23.76zm2.28-26.34l-6.01-.53.43-4.68 6.01.53-.43 4.68zM1 21.98c-.01-.42.12-.77.39-1.03l3.75-3.79-.04-8.69c.02-.06.04-.15.05-.24 0-.03.01-.05.02-.08.01-.05.03-.09.04-.14.02-.05.03-.1.05-.15.01-.03.03-.06.04-.08a.53.53 0 0 1 .08-.15l.04-.06c.03-.05.07-.1.11-.15.03-.02.05-.04.07-.05.05-.05.1-.1.16-.14.03-.02.06-.03.1-.05l.05-.03c.03-.01.07-.03.1-.05.13-.06.28-.09.44-.1h3.2c.36 0 .69.14.95.39.25.25.39.58.39.94 0 .73-.6 1.33-1.34 1.33H7.84v7.98c.01.12 0 .24-.02.33-.06.41-.28.75-.6.95l-.16.13-2.9 2.9 3.23 3.23c.16.14.28.31.35.49.04.08.05.14.06.21l.02.07c.02.09.03.24.02.36v8.09h1.81c.75 0 1.34.56 1.34 1.28 0 .35-.14.68-.39.93s-.58.38-.94.38l-3.15-.02c-.17 0-.33-.03-.49-.09l-.18-.1c-.03-.02-.06-.03-.09-.05-.04-.03-.1-.08-.15-.13l-.06-.05c-.04-.04-.09-.1-.13-.16l-.03-.05c-.03-.05-.06-.11-.08-.16l-.03-.06a.573.573 0 0 1-.04-.14c-.01-.03-.02-.08-.04-.12-.01-.04-.02-.09-.04-.14v.03c-.01-.1-.03-.18-.05-.25l.04-8.76-3.76-3.79c-.26-.25-.39-.6-.38-.97z" fill="#8d81ab"/></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -11,6 +11,10 @@
|
||||
<meta name="keywords" content="HTML,CSS,JavaScript">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
|
||||
|
||||
@@ -18,6 +22,34 @@
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper" id="wrapper">
|
||||
<nav class="navbar navbar-expand-sm">
|
||||
<div class="container-fluid" id="navbar-container">
|
||||
<div class="navbar-header" id="navbar-header">
|
||||
<img src="img/logo.svg" alt="Forkio logo">
|
||||
<span class="navbar-brand">Fork<em>IO</em></span>
|
||||
</div>
|
||||
<ul class="navbar-nav" id="navbar-body">
|
||||
<li class="nav-item">
|
||||
<a class="default-link nav-link" href="#">Overview</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="default-link nav-link" href="#">About fork</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="default-link nav-link" href="#">Buying options</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="default-link nav-link" href="#">Support</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="raised-button nav-link" href="#">Buy now</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="js/script.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
|
||||
8
src/scss/_buttons.scss
Normal file
8
src/scss/_buttons.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
a.raised-button {
|
||||
box-sizing: content-box;
|
||||
padding: 7px 35px;
|
||||
background-color: $primary;
|
||||
color: white;
|
||||
border: solid 1px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
46
src/scss/_navbar.scss
Normal file
46
src/scss/_navbar.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
#navbar-container {
|
||||
margin: 0 90px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#navbar-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#navbar-header {
|
||||
img {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 17px;
|
||||
font-family: Lato, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
|
||||
em {
|
||||
color: $primary;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navbar-body {
|
||||
a {
|
||||
text-transform: capitalize;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
a.default-link {
|
||||
margin: 0 20px;
|
||||
color: $primary-dark;
|
||||
}
|
||||
|
||||
a.raised-button {
|
||||
@extend .raised-button
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
$primary: #8d81ac;
|
||||
$primary-dark: #635c73;
|
||||
@@ -1 +1,3 @@
|
||||
@import "_variables";
|
||||
@import "variables";
|
||||
@import "navbar";
|
||||
@import "buttons";
|
||||
Reference in New Issue
Block a user