edureka in my nodejs as its i have used it and pug also but my css doesn t worked as while running localhost it doesn t show styling of css

0 votes
<!DOCTYPE html><html></html><head><style></style>@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
margin: 0;
box-sizing: border-box;
padding: 0;
}
#navbar{
background-color:black;
padding: 18px 14px;
font-family: 'Roboto', sans-serif;
}
#navbar ul{
display: flex;
flex-direction: row;
justify-content: center;
}
#navbar li{
list-style: none;
}
#navbar li a{
color: white;
font-size: 30px;
text-decoration: none;
padding: 13px 30px;
}
#navbar li a:hover{
color: black;
}
#introSection{
padding-bottom: 40px;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
background: center/cover no-repeat url("/static/bg.jpg");
font-size: 65px;
height: 425px;
background-color: red;
}
#introsection div.small{
font-size: 27px;
padding: 5px;
}
#missonSection{
height: 300px;
}
#missonSection h2{
font-family: monospace;
text-align: center;
padding-top: 12px;
background-color: yellow;
}
.card{
display: inline-block;
border: 2px solid black;
border-radius: 10px;
width: 30%;
margin: 23px 22px;
height: 209px;
}
#sponserSection{
height: 300px;
background-color: yellow;
}
#sponserSection h2{
font-family: monospace;
text-align: center;
padding-top: 12px;
background-color: yellow;
}
#footer{
height: 100px;
background-color:black ;
}</head><body><nav id="navbar"></nav></body><ul><li><a href="/">Home</a></li><li><a href="/">About</a></li><li><a href="/">Services</a></li><li><a href="/">Class Info</a></li><li><a href="/">Contact Us</a></li></ul><section id="introSection"><div>Welcme to dance academy</div><div class="small">Eat slep dance repeat</div></section><section id="missionSection"><h2>Our Mission</h2><div class="card"></div><p>This is a paragragh</p><div class="card"></div><p>This is a paragragh</p><div class="card"></div><p>This is a paragragh</p><section id="sponserSection"></section>section for picture<footer id="footer"></footer>footer here<script></script></section>
Jun 10, 2020 in Web Development by anonymous
• 120 points
160 views

Hello,

Can you please provide me with more clear description about what you are trying to do? Share your pseudocode!!

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

What does cors means in Angularjs and what the use of it?

CORS is Cross Origin Resource Sharing which means you ...READ MORE

answered Jan 29, 2020 in Web Development by kartik
• 37,490 points
1,735 views
0 votes
0 answers

Guys i need help. I converted my php pure code to laravel but it seems a problem

This is pure code : public function getComments() ...READ MORE

Sep 17, 2020 in Web Development by Hawati
• 120 points

edited Sep 18, 2020 by Gitika 79 views
0 votes
1 answer

How many methods of including css in an HTML document?

Hello fignithi, yes!!,you can use external file for css ...READ MORE

answered Jan 16, 2020 in Web Development by Niraj

reshown Jan 16, 2020 by Sirajul 122 views
0 votes
1 answer
+1 vote
1 answer

What are pseudo class in css??

Hey, The state of an element is controlled  by ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,560 points

edited Jan 21, 2020 by Niroj 112 views
0 votes
1 answer

how to safely deploy npm install without it causing inconsistencies?

The recent versions on npm generates a ...READ MORE

answered Apr 11, 2018 in DevOps on Cloud by DareDev
• 6,890 points
162 views
0 votes
1 answer

Unable to request channel creation using Rest Api

I'd recommend taking a look at the ordering ...READ MORE

answered Jul 16, 2018 in Blockchain by Perry
• 17,100 points
316 views