Modify the style of index pages
This commit is contained in:
parent
b745754921
commit
febf33b237
|
@ -77,22 +77,22 @@ select {
|
||||||
/* STYLING BEGINS */
|
/* STYLING BEGINS */
|
||||||
body {
|
body {
|
||||||
font-size: 1rem; /* 16px */
|
font-size: 1rem; /* 16px */
|
||||||
font-family: 'Source Sans Pro', Arial, sans-serif;
|
font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
background: #000000;
|
background: #000000;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
body,
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
background: #000000;
|
|
||||||
max-width: 56rem;
|
max-width: 56rem;
|
||||||
position: relative;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.index__banner {
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
@ -106,32 +106,29 @@ h1 {
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.index__btn-wrapper {
|
.index__btn-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
margin: 1.5rem 0;
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.index__link {
|
.index__link {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font: 2rem 'Source Sans Pro', Arial, sans-serif;
|
font-size: 2rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.6rem;
|
||||||
padding: 1rem 1.25rem;
|
padding: 1rem 1.25rem;
|
||||||
margin: 0.5rem;
|
margin: 0.5rem;
|
||||||
background-color: #7A37A3;
|
background: #7A37A3;
|
||||||
color: white;
|
color: white;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index__link:hover {
|
.index__link:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: white;
|
background: #BA6FE8;
|
||||||
background-color: #BA6FE8;
|
|
||||||
transition: 0.5s;
|
transition: 0.5s;
|
||||||
}
|
}
|
12
index.html
12
index.html
|
@ -21,15 +21,21 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<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>
|
<h1>Leilukin's Hub</h1>
|
||||||
|
|
||||||
<p>Hello! Welcome to my website!</p>
|
<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="/home.html" class="index__link">Home Page</a>
|
||||||
<a href="/sitemap.html" class="index__link">Site Map</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>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -15,12 +15,15 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<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>
|
<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>
|
<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>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue