I'm trying to publish a website through github pages but the css part of it is not showing up through the link generated, I'm not sure why, I am new to github and have tried some online solutions but it still doesn't work. I have attached My HTML and CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;1,700&family=Dancing+Script:wght@500;700&family=Lora:ital,wght@0,400;0,600;1,400;1,700&family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Crimson+Text:ital,wght@0,400;1,700&family=Dancing+Script:wght@500;700&family=Lora:ital,wght@0,400;0,600;1,400;1,700&family=Ms+Madi&family=Poppins:wght@300&display=swap');
:root{
--primary-colour:
--intro-font: 'Poppins'
--second-font:
}
.my-image{
width: 30em;
height: 35em;
border-radius: 10%;
padding-top: 2%;
padding-bottom: 0;
}
body{
background: white;
margin-top: 5;
padding: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
}
.navbar ul{
list-style: none;
padding: 0;
margin: 0;
font-family: 'Poppins';
text-align: right;
background: #FAF2E7;
border-radius: 25px;
width: 100%;
}
.navbar li{
display: inline-block;
place-content: space-between;
width: 10%;
}
.navbar a{
text-decoration: none ;
color: rgb(139, 70, 31);
width: 100%;
display:inline-block;
padding: 20px 12px;
text-transform:uppercase;
font-weight: bold;
text-align: center;
font-size: 20px;
}
.navbar a:hover{
background: rgb(245, 229, 210);
}
.hero{
height: 100vh;
padding-bottom: 0;
}
.final-nav-bar{
font-family: 'Poppins';
text-align: center;
background: #161515;
bottom: 0;
width: 100%;
position: fixed;
overflow: hidden;
margin: 0;
}
.final-nav-bar a{
float: middle;
display: block;
color: beige;
text-align: center;
padding: 14px 16px;
text-decoration: solid;
font-size: 15px;
}
.final-nav-bar a:hover{
background-color: rgb(108, 99, 86);
color: black;
}
.final-nav-bar a:active{
background-color: rgb(92, 89, 86);
color: rgb(82, 81, 80);
}
.final-nav-bar li{
display: inline-block;
}
.line1 {
position: absolute;
width: 50%;
height: 75px;
padding-left: 10%;
padding-top: 2.5em;
font-style: oblique;
top:50px;
font-family: 'Lora';
font-weight: 500;
font-size: 28px;
;
color: #000000;
}
h2,h2,h1{
padding: 0;
margin: 0;
}
.name{
position: top;
/* left: 75px;
top: 100px; */
padding-top: 30px;
margin: 7px;
margin-top: 0.2em;
padding-bottom: 0%;
margin-bottom: 0%;
text-indent: 0.1em ;
font-family: 'Abril Fatface';
text-align: left;
font-style: normal;
font-weight: 300;
font-size: 200;
color: #DBBB96;
}
.lastname{
text-indent: 5em;
text-decoration:double;
margin-left: 1.3em;
padding-top: 0%;
margin-top: 0%;
/* left: 75px;
top: 100px; */
font-family: 'Abril Fatface';
font-style: normal;
font-weight: 300;
font-size: 200;
color: #DBBB96;
}
.about-me{
background-color: #FAF2E7;
border-radius: 1em;
}
.about-me-intro{
font-family: 'Lora';
font-style: oblique;
text-indent: 4%;
font-size: 1.6em;
padding-top: 0%;
padding-right: 0.8em;
text-align: center;
}
.para-about-me{
font-family: 'Lora';
padding-left: 5em;
padding-right: 5em;
padding-top: 0%;
font-size: 1.3em;
text-align: center;
}
.head-about-me{
position: top;
text-align: center;
padding-top: 0;
font-family: 'Poppins';
font-style: bold;
font-size: 4em;
line-height: 1px;
color: #000000;
}
.contact-section{
padding-left: 4%;
padding-top: 3%;
font-size: 1.5em;
font-family: 'Lora';
}
.line-contact{
font-size: 2.5em;
font-family: 'Poppins';
text-transform: uppercase;
font-style: bold;
text-align: center;
}
.copyright{
text-align: center;
font-family: sans-serif;
font-size: 13px;
}<html >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> AQ </title>
<link href="css/main.css" type="text/css" rel="stylesheet">
<link rel="icon" type="image/png" href="images/web-favicon (1).png">
<style>
*{
box-sizing: border-box;}
</style>
</head>
<body>
<div class="navbar">
<div class=" container ">
<nav>
<ul >
<li>
<a href="index.html"> Home </a>
</li>
<li>
<a href="#about-me"> About me </a>
</li>
<li>
<a href="https://github.com/ayeshaq2"> Projects </a>
</li>
<li>
<a href="https://drive.google.com/file/d/1HnvLUtvU1ZdrfAe8iuIExjbIDnf7HJ_q/view?usp=sharing"> Resume </a>
</li>
<li>
<a href="#contact-me"> Contact </a>
</li>
</ul>
</nav>
</div>
</div>
<section class="hero" >
<div class="row" >
<div class="column-left" style="width: 60%; float: left;">
<p class="line1">Hello! My name is</p>
<p class="name">Ayesha <br> <span class="lastname"> Qaisar </span></p>
</div>
<div class="column-right" style="width:40%; float:right">
<br>
<br>
<img src="images/intropage_pic.jpg" alt="Photograph: Ayesha Qaisar" class="my-image">
</div>
</div>
</section>
<section class="about-me" id="about-me">
<div class="container3">
<h3 class="head-about-me"> ABOUT ME </h3>
<p class="about-me-intro">Welcome to my website! :) </p>
<br>
<p class="para-about-me">My name is Ayesha Qaisar, I am a second year engineering student, majoring
in the Software discipline at Western University. I also have an interest for the study of business analysis, which is why I am pursuing a minor in business as well.
Entrpreneurship and Software are the teo best combinations for someone like me, who is always to find, or even create a bridge between them! My hobbies include travelling, walking, reading and ofcourse, coding.
I am really looking forward to expand my skillset by trying different things particularly in the aspects of software development. I aim to complete some larger coding projects this year by joining various clubs at Western.
<br>
<br>
</p>
</div>
</section>
<section class="final-nav-bar">
<div class="container4">
<nav>
<li>
<a href="https://www.linkedin.com/in/ayesha-qaisar/">
<img src="images/linkedin.png" alt="LinkedIn"
width="35px"
height="35px">
</a>
</li>
<li>
<a href="https://www.instagram.com/ayeshaa.qaisar/">
<img src="images/instagram.png" alt="Instagram"
width="35px"
height="35px">
</a>
</li>
<li>
<a href="https://github.com/ayeshaq2">
<img src="images/Github.png" alt="Github"
width="35px"
height="35px">
</a>
</li>
</nav>
</div>
</section>
<section class="contact-section" id="contact-me">
<div class="container5">
<h2 class="line-contact">Contact</h2>
<p>Let's connect! If there's any project/idea you would like to collaborate on, I would love to hear it :) </p>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<br>
<br>
<label for="email">Email</label>
<input type="text" id="email" name="email">
<br>
<br>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<br><br>
<input type="submit" class="send-message-cta" value="Send message">
<br>
<br>
<br>
<br>
</form>
</div>
</section>
<section>
<div class="copyright">
<p>
C. Ayesha Qaisar
<br><br><br>
<br><br>
<br><br>
</p>
</div>
</section>
</body>
</html>here is what it shows after publishing: github published website
