Added about and added hover effect for title

This commit is contained in:
Notoric 2024-03-08 17:40:37 +00:00
parent d1168d1aa3
commit ca4e3f1299
3 changed files with 67 additions and 21 deletions

View File

@ -3,15 +3,17 @@
/* applies to screens smaller than 500px (first breakpoint) */ /* applies to screens smaller than 500px (first breakpoint) */
/* and above unless overwritten below */ /* and above unless overwritten below */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..600&display=swap');
:root { :root {
--bgColor: #ffffff;
} }
body { body {
font-family: 'Outfit', sans-serif; font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 1.5em;
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
@ -72,7 +74,11 @@ h1 {
#titleBanner { #titleBanner {
padding-left: 5%; padding-left: 5%;
padding-right: 5%; padding-right: 5%;
transition: color 1s, background-color 1s; transition: color 1s, background-color 1s, border-radius 0.5s ease;
}
#titleBanner:hover {
border-radius: 1em;
} }
.black { .black {
@ -108,6 +114,19 @@ h1 {
font-size: 1.5em; font-size: 1.5em;
} }
/* BELOW LANDING STYLES */
#below-landing {
background-color: #0d0d0d;
overflow: auto;
color: white;
padding: 50px;
}
p {
font-weight: 200;
}
/* CAROUSEL STYLES */ /* CAROUSEL STYLES */
#carousel { #carousel {
@ -121,7 +140,7 @@ h1 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
padding: 50px; padding: 50px 0px;
} }
.carousel-item { .carousel-item {
@ -150,6 +169,7 @@ h1 {
text-align: center; text-align: center;
line-height: 70px; line-height: 70px;
font-size: 50px; font-size: 50px;
font-weight: 400;
margin: 0; margin: 0;
margin-bottom: 15px; margin-bottom: 15px;
color: white; color: white;
@ -165,6 +185,7 @@ h1 {
transform: translate(100px, -35px); transform: translate(100px, -35px);
color: white; color: white;
font-size: 25px; font-size: 25px;
font-weight: 550;
margin: 0; margin: 0;
text-shadow: black 3px 3px 3px; text-shadow: black 3px 3px 3px;
width: 500px; width: 500px;
@ -248,4 +269,16 @@ h1 {
font-size: 50px; font-size: 50px;
} }
.content-column {
max-width: 1300px;
margin: auto;
}
section {
padding: 0px 50px;
border-style: solid;
border-width: 1px;
border-image : linear-gradient(to bottom, #fff0 0%, #fff0 10%, var(--bgColor) 50%, #fff0 90%, #fff0 100%) 1;
}
} }

View File

@ -17,6 +17,15 @@
<input id="bgColour" type="color" value="#ffffff"> <input id="bgColour" type="color" value="#ffffff">
</div> </div>
</div> </div>
<div id="below-landing">
<section id="about" class="content-column">
<h2>About This Website</h2>
<p>
I am a student at DMU studying Computer Science. I have a passion for programming and web development. I have created this website as part of my coursework to display my skills and knowledge in web development.
Above, you can see the landing portion of my page. This consists of a title banner and a colour selector. The colour selector allows you to change the background image to the image that most closely matches the colour you have entered. The background colour is stored in local storage so that it will persist even after the page is reloaded.
If you are on desktop, this also changes the colour of the borders around this text!
</p>
</section>
<div id="carousel"> <div id="carousel">
<div id="carousel-container"> <div id="carousel-container">
<div class="carousel-item" id="carousel-1"> <div class="carousel-item" id="carousel-1">
@ -37,6 +46,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</main> </main>
<script src="js/scripts.js"></script> <script src="js/scripts.js"></script>
</body> </body>

View File

@ -89,6 +89,7 @@ bgColour.addEventListener("input", () => {
const B = parseInt(bgColour.value.substring(5, 7), 16); const B = parseInt(bgColour.value.substring(5, 7), 16);
changeBackground(R, G, B); changeBackground(R, G, B);
localStorage.setItem("bgColour", bgColour.value); localStorage.setItem("bgColour", bgColour.value);
document.documentElement.style.setProperty("--bgColor", bgColour.value);
}); });
function transitionBackground(newUrl, blackwhite) { function transitionBackground(newUrl, blackwhite) {
@ -210,6 +211,7 @@ const initR = parseInt(bgColour.value.substring(1, 3), 16);
const initG = parseInt(bgColour.value.substring(3, 5), 16); const initG = parseInt(bgColour.value.substring(3, 5), 16);
const initB = parseInt(bgColour.value.substring(5, 7), 16); const initB = parseInt(bgColour.value.substring(5, 7), 16);
changeBackground(initR, initG, initB); changeBackground(initR, initG, initB);
document.documentElement.style.setProperty("--bgColor", bgColour.value);
// Initialize carousel // Initialize carousel
initCarousel(); initCarousel();
carouselExpand(1); carouselExpand(1);