Trying to create a header mockup for a website featuring branding elements like a logo and brand name. Utilizing Angular.js for the webpage development process, incorporating a URL for the logo image from an online source.
Encountering alignment issues that are hindering progress in further developing the web page. Seeking suggestions on how to resolve this issue.
View the screenshot of the header here.
The HTML code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script type="text/javascript" src="./script.js"></script>
<link rel="stylesheet" href="./main.css"></link>
</head>
<body ng-app="sampleApp">
<nav class="navbar navbar-default" ng-controller="headerCtrl as header">
<div class="container-fluid">
<div class="navbar-header">
<img class="navbar-brand logo" src={{header.logoURL}}></img>
<a class="navbar-brand logo" href="#">{{header.logoText}}</a>
</div>
</div>
</nav>
</body>
</html>
The CSS code:
body{
top: 0px;
}
h1 {
margin-top: 0;
}
p {
font-size: 18px;
}
.logo{
height: 100px;
font-size: 80px;
padding: 0px;
top: 0px;
vertical-align:middle;
}
The JS file:
var app = angular.module('sampleApp', []);
app.controller("headerCtrl", ['$scope', function($scope) {
console.log("Ctrl");
this.logoURL = "http://sugartin.info/wp-content/uploads/2013/11/logo.png";
this.logoText = "BrandName";
this.slogan = "Roll out.";
}
])