Notoric
/
FEWD-CTEC3905
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replaced "about" with "features" and changed icons for carousel

This commit is contained in:
Notoric 2024-03-08 19:12:47 +00:00
parent ca4e3f1299
commit 61a520da40
6 changed files with 27 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/photos/code-1839406_1920.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
assets/photos/keyboard-5466431_1920.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

BIN
assets/photos/software-3682509_1920.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

37
css/styles.css
View File

@ -117,7 +117,7 @@ h1 {
/* BELOW LANDING STYLES */ /* BELOW LANDING STYLES */
#below-landing { #below-landing {
background-color: #0d0d0d; background-color: #101010;
overflow: auto; overflow: auto;
color: white; color: white;
padding: 50px; padding: 50px;
@ -127,11 +127,18 @@ p {
font-weight: 200; font-weight: 200;
} }
#features {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* CAROUSEL STYLES */ /* CAROUSEL STYLES */
#carousel { #carousel {
height: 100vh; height: 100vh;
background-color: #0d0d0d; background-color: #101010;
position: relative; position: relative;
display: flex; display: flex;
} }
@ -166,13 +173,8 @@ p {
height: 70px; height: 70px;
background-color: #202020; background-color: #202020;
border-radius: 40px; border-radius: 40px;
text-align: center;
line-height: 70px;
font-size: 50px;
font-weight: 400;
margin: 0; margin: 0;
margin-bottom: 15px; margin-bottom: 15px;
color: white;
border: 5px solid black; border: 5px solid black;
text-shadow: black 5px 5px 5px; text-shadow: black 5px 5px 5px;
user-select: none; user-select: none;
@ -187,7 +189,7 @@ p {
font-size: 25px; font-size: 25px;
font-weight: 550; font-weight: 550;
margin: 0; margin: 0;
text-shadow: black 3px 3px 3px; text-shadow: rgb(0, 0, 0) 3px 3px 3px;
width: 500px; width: 500px;
} }
@ -196,25 +198,19 @@ p {
} }
#carousel-container #carousel-1 { #carousel-container #carousel-1 {
background-image: url("/assets/photos/space-4678686_1920.jpg"); background-image: linear-gradient(to top, #0008, #0000), url("/assets/photos/code-1839406_1920.jpg");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
#carousel-container #carousel-2 { #carousel-container #carousel-2 {
background-image: url("/assets/photos/universe-1622107_1920.jpg"); background-image: linear-gradient(to top, #000a, #0000), url("/assets/photos/software-3682509_1920.jpg");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
#carousel-container #carousel-3 { #carousel-container #carousel-3 {
background-image: url("/assets/photos/science-fiction-2907434_1920.jpg"); background-image: linear-gradient(to top, #000a, #0000), url("/assets/photos/keyboard-5466431_1920.jpg");
background-size: cover;
background-position: center;
}
#carousel-container #carousel-4 {
background-image: url("/assets/photos/fantasy-2770468_1920.jpg");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
@ -274,11 +270,4 @@ p {
margin: auto; 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;
}
} }

26
index.html
View File

@ -17,32 +17,28 @@
<input id="bgColour" type="color" value="#ffffff"> <input id="bgColour" type="color" value="#ffffff">
</div> </div>
</div> </div>
<div id="below-landing"> <div id="below-landing">
<section id="about" class="content-column"> <section id="features" class="content-column">
<h2>About This Website</h2> <h2>Features</h2>
<p> <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. This webpage has been designed to display a variety of different web development skills and features.
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> </p>
</section> </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">
<p class="carousel-id">1</p> <svg class="carousel-id" viewBox="-100 -50 450 450" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" fill="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M255.555 70.766l-23.241 260.36-104.47 28.962-104.182-28.922L.445 70.766h255.11z" fill="#E44D26"></path><path d="M128 337.95l84.417-23.403 19.86-222.49H128V337.95z" fill="#F16529"></path><path d="M82.82 155.932H128v-31.937H47.917l.764 8.568 7.85 88.01H128v-31.937H85.739l-2.919-32.704zM90.018 236.542h-32.06l4.474 50.146 65.421 18.16.147-.04V271.58l-.14.037-35.568-9.604-2.274-25.471z" fill="#EBEBEB"></path><path d="M24.18 0h16.23v16.035h14.847V0h16.231v48.558h-16.23v-16.26H40.411v16.26h-16.23V0zM92.83 16.103H78.544V0h44.814v16.103h-14.295v32.455h-16.23V16.103h-.001zM130.47 0h16.923l10.41 17.062L168.203 0h16.93v48.558h-16.164V24.49l-11.166 17.265h-.28L146.35 24.49v24.068h-15.88V0zM193.21 0h16.235v32.508h22.824v16.05h-39.06V0z"></path><path d="M127.89 220.573h39.327l-3.708 41.42-35.62 9.614v33.226l65.473-18.145.48-5.396 7.506-84.08.779-8.576H127.89v31.937zM127.89 155.854v.078h77.143l.64-7.178 1.456-16.191.763-8.568H127.89v31.86z" fill="#FFF"></path></g></svg>
<p class="carousel-title">Night Trees</p> <p class="carousel-title">HTML</p>
</div> </div>
<div class="carousel-item" id="carousel-2"> <div class="carousel-item" id="carousel-2">
<p class="carousel-id">2</p> <svg class="carousel-id" viewBox="-100 -50 450 450" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" fill="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M127.844 360.088L23.662 331.166.445 70.766h255.11l-23.241 260.36-104.47 28.962z" fill="#264DE4"></path><path d="M212.417 314.547l19.86-222.49H128V337.95l84.417-23.403z" fill="#2965F1"></path><path d="M53.669 188.636l2.862 31.937H128v-31.937H53.669zM47.917 123.995l2.903 31.937H128v-31.937H47.917zM128 271.58l-.14.037-35.568-9.604-2.274-25.471h-32.06l4.474 50.146 65.421 18.16.147-.04V271.58z" fill="#EBEBEB"></path><path d="M60.484 0h38.68v16.176H76.66v16.176h22.506v16.175H60.484V0zM106.901 0h38.681v14.066h-22.505v2.813h22.505v32.352h-38.68V34.46h22.505v-2.813H106.9V0zM153.319 0H192v14.066h-22.505v2.813H192v32.352h-38.681V34.46h22.505v-2.813H153.32V0z"></path><path d="M202.127 188.636l5.765-64.641H127.89v31.937h45.002l-2.906 32.704H127.89v31.937h39.327l-3.708 41.42-35.62 9.614v33.226l65.473-18.145.48-5.396 7.506-84.08.779-8.576z" fill="#FFF"></path></g></svg>
<p class="carousel-title">Rocket Head</p> <p class="carousel-title">CSS</p>
</div> </div>
<div class="carousel-item" id="carousel-3"> <div class="carousel-item" id="carousel-3">
<p class="carousel-id">3</p> <svg class="carousel-id" viewBox="-0 -0 250 250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M0 0h256v256H0V0z" fill="#F7DF1E"></path><path d="M67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371 7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259-19.245 0-30.416-9.967-36.087-21.996M152.381 211.354l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607 9.969 0 16.325-4.984 16.325-11.858 0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257 0-18.044 13.747-31.792 35.228-31.792 15.294 0 26.292 5.328 34.196 19.247L210.29 147.43c-4.125-7.389-8.591-10.31-15.465-10.31-7.046 0-11.514 4.468-11.514 10.31 0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804 0 21.654-17.012 33.51-39.867 33.51-22.339 0-36.774-10.654-43.819-24.574"></path></g></svg>
<p class="carousel-title">Spaceship</p> <p class="carousel-title">Javascript</p>
</div>
<div class="carousel-item" id="carousel-4">
<p class="carousel-id">4</p>
<p class="carousel-title">Fantasy Archer</p>
</div> </div>
</div> </div>
</div> </div>

2
readme.md
View File

@ -20,3 +20,5 @@ The `js/scripts.js` file contains a simple console.log statement to confirm that
## assets/photos ## assets/photos
All images inside `assets/photos` folder are from https://pixabay.com and used under the licence outlined here https://pixabay.com/service/terms/ All images inside `assets/photos` folder are from https://pixabay.com and used under the licence outlined here https://pixabay.com/service/terms/
All SVG Vectors are from https://www.svgrepo.com