Issue
I am learning the web technology. I was trying to build a portfolio site by following a youtube video. The below code are the html and css code of the index page.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nilavro Seal - Developer, Programmer, ML Enthasiast</title>
<link rel="stylesheet" href="../Portfolio/style.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<!-- Nilavro -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="../Portfolio/intro.html">My Intro</a></li>
<li><a href="../Portfolio/services.html">Services</a></li>
<li><a href="../Portfolio/blog.html">Blog</a></li>
<li><a href="../Portfolio/contact.html">Contact Me</a></li>
</ul>
</nav>
</div>
<div class="main">
<div class="infoContainer">
<div class="devInfo">
<div class="hello">Hi I am </div>
<div class="name">Nilavro Seal</div>
<div class="about">Developer,Programmer, ML Enthasiast</div>
<div class="moreabout">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed esse officiis
molestiae ipsa quibusdam vero.</div>
<div class="buttons">
<button>Download CV</button>
<button>Contact Me</button>
</div>
</div>
<div class="devPic"><img src="dev.png" alt="Developer"></div>
</div>
</div>
</div>
</body>
</html>
and CSS
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Source+Code+Pro:wght@300&display=swap');
* {
margin: 0;
padding: 0;
}
.sidebar {
background-color: rgb(197, 197, 197);
width: 434px;
font-family: 'Fira Sans', sans-serif;
height: 100vh;
}
.sidebar nav {
padding: 45px;
}
.sidebar nav li {
list-style: none;
font-size: 30px;
padding: 33px 0;
}
.sidebar nav li a{
text-decoration: none;
color: black;
}
.main {
background-color: yellow;
width: 90vw;
}
.container {
display: flex;
}
.infoContainer {
background-color: orange;
height: 58vh;
width: 80vw;
margin: 150px auto;
display: flex;
justify-content: space-around;
}
.devPic img {
height: 58vh;
}
.devInfo {
display: flex;
justify-content: center;
flex-direction: column;
font-family: 'Source Code Pro', monospace;
}
.hello {
font-size: 65px;
}
.name {
font-size: 50px;
font-weight: bold;
font-family: 'Fira Sans', sans-serif;
}
.about {
font-size: 40px;
}
.buttons {
margin-top: 34px;
}
.buttons button {
padding: 9px 14px;
border-radius: 22px;
color: white;
background-color: cornflowerblue;
font-weight: bold;
font-size: 23px;
margin: 0 p px;
cursor: pointer;
}
.buttons button:hover{
color: cornflowerblue;
background-color: white;
}
.moreabout {
font-size: 22px;
font-family: 'Fira Sans', sans-serif;
margin-top: 23px;
}
then I copy that code and make another html page named Contact.html. But that page is showing little different.
I am attaching the differences of these two pages also. Can anybody tell why this weird thing is happening??
Solution
This is an issue you will often encounter as a web developer.
why does that happen?
Browsers provide a default CSS file. So, for example, if you write an HTML file without importing any CSS and open it in a browser, you will see that your <h1> text is bigger than your <h2> text. Also, if you open this HTML file in a different browser, you will see the differences in the default CSS file: The font might be different, the size might also be.
how to fix it?
To make sure your website looks the same on all browsers, you can use CSS normalizer, like this one: https://necolas.github.io/normalize.css/ or the ones in this article: https://medium.com/awesome-css/resetting-browsers-default-css-46ef8d71a42d or search for CSS normalizer.
Answered By - kkoscr
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.