Modify the style of index pages
This commit is contained in:
parent
b745754921
commit
febf33b237
|
@ -77,22 +77,22 @@ select {
|
|||
/* STYLING BEGINS */
|
||||
body {
|
||||
font-size: 1rem; /* 16px */
|
||||
font-family: 'Source Sans Pro', Arial, sans-serif;
|
||||
font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
|
||||
color: #FFFFFF;
|
||||
background: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body,
|
||||
main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
background: #000000;
|
||||
max-width: 56rem;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.index__banner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
@ -106,32 +106,29 @@ h1 {
|
|||
|
||||
p {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.index__btn-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.index__link {
|
||||
text-decoration: none;
|
||||
font: 2rem 'Source Sans Pro', Arial, sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
border-radius: 0.6rem;
|
||||
padding: 1rem 1.25rem;
|
||||
margin: 0.5rem;
|
||||
background-color: #7A37A3;
|
||||
background: #7A37A3;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.index__link:hover {
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
background-color: #BA6FE8;
|
||||
background: #BA6FE8;
|
||||
transition: 0.5s;
|
||||
}
|
12
index.html
12
index.html
|
@ -21,15 +21,21 @@
|
|||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<img src="/assets/Leilukins-Hub-website-banner.png" class="index__banner" alt="Leilukin's Hub website banner">
|
||||
<img src="/assets/Leilukins-Hub-website-banner.png" alt="Leilukin's Hub website banner">
|
||||
<h1>Leilukin's Hub</h1>
|
||||
|
||||
<p>Hello! Welcome to my website!</p>
|
||||
|
||||
<div class="index__btn-wrapper">
|
||||
<section class="index__btn-wrapper">
|
||||
<a href="/home.html" class="index__link">Home Page</a>
|
||||
<a href="/sitemap.html" class="index__link">Site Map</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed">
|
||||
<img src="/assets/rss-button.gif" alt="RSS feed button">
|
||||
</a>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
|
@ -15,12 +15,15 @@
|
|||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<img src="/assets/Leilukins-Hub-website-banner.png" class="index__banner" alt="Leilukin's Hub website banner">
|
||||
<img src="/assets/Leilukins-Hub-website-banner.png" alt="Leilukin's Hub website banner">
|
||||
|
||||
<h1>Page Not Found</h1>
|
||||
|
||||
<p>Oops! Either the page you are looking for does not exist, or it has been moved to a diffrent part of this site.</p>
|
||||
|
||||
<a href="/home.html" class="index__link">🏠 Back to Home</a>
|
||||
<section class="index__btn-wrapper">
|
||||
<a href="/home.html" class="index__link">🏠 Back to Home</a>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
Loading…
Reference in New Issue