Hi so I am having a problem with my website Where my Get Started comes like GetStarted 
and if i add a space between Get and started then its like Get on the first line and started on the second 
I have tried using display inlineblock in my css code and also decreasing my font size
Here is the code--
CSS-
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face{
src: url(/fonts/Coiny-Regular.ttf);
font-family: Coiny;
}
body, html{
background-image: url(/img/BackGround.png);
background-repeat: no-repeat;
background-size: cover;
}
.name{
text-decoration: none;
font-family: Coiny;
font-size: 60px;
padding-top: 60px;
padding-left: 150px;
color: black;
}
.centre{
position: absolute;
display: flex;
justify-content: center;
text-align: center;
padding-top: 80px;
padding-left: 760px;
}
h2 a{
position: absolute;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: black;
font-style: italic;
font-size: 40px;
padding: 20px;
border: solid;
border-width: 5px;
border-color: purple;
background-color: purple;
border-style: solid;
border-radius: 24px;
}
.description{
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding-left: 70px;
padding-top: 20px;
font-size: 22.5px;
color: black;
padding-bottom: 20px;
}
li {
display: inline-block;
padding: 20px;
padding-left: 40px;
list-style: none;
text-decoration: none;
}
li a{
display: inline-block;
padding: 10px;
list-style: none;
text-decoration: none;
font-family: Coiny;
font-size: 30px;
color: black;
}
a{
border-color: purple ;
border-width: 3px;
border-style: solid;
border-radius: 12px;
}
nav li a {
border-color: purple;
padding-left: 10px;
padding-right: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
.name2{
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
padding-left: 20px;
color: black;
}
HTML-
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>Pacific</title>
</head>
<body>
<nav>
<h1>
<ul>
<li class="name2"><strong>Pacific</strong></li>
<li><a href="/index.html"> <strong>Home</strong> </a></li>
<li><a href="/html/about.html"><strong>About</strong></a></li>
<li><a href="/html/contacts.html"><strong>Contact Us</strong></a></li>
</ul>
</h1>
</nav>
<h1 class="name">Pacific</h1>
<h2 class="centre"> <a href="/html/login.html"><strong>GetStarted</strong> </a></h2>
<div>
<p class="description"> <strong>
Get started with pacific and manage <br>
your projects better, Let's say you <br>
are writing an essay for your school <br>
or sending an important email to <br>
your boss.Look up the best <br>
words to use and when to <br>
use, Pacific corrects imperfect grammer and <br>
spelling mistakes has a translation tool,<br>
Paragraph tool,Bold,Italic etc <br>
Get Started with Pacific Right Now! <br> </strong>
</p>
<ul>
<li><a href="/index.html"> <strong>Home</strong> </a></li>
<li><a href="/html/about.html"><strong>About</strong></a></li>
<li><a href="/html/contacts.html"><strong>Contact Us</strong></a></li>
</ul>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire