Replaced "about" with "features" and changed icons for carousel
This commit is contained in:
Notoric
parent
ca4e3f1299
commit
61a520da40
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
|
|
@ -117,7 +117,7 @@ h1 {
|
|||
/* BELOW LANDING STYLES */
|
||||
|
||||
#below-landing {
|
||||
background-color: #0d0d0d;
|
||||
background-color: #101010;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
padding: 50px;
|
||||
|
|
@ -127,11 +127,18 @@ p {
|
|||
font-weight: 200;
|
||||
}
|
||||
|
||||
#features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* CAROUSEL STYLES */
|
||||
|
||||
#carousel {
|
||||
height: 100vh;
|
||||
background-color: #0d0d0d;
|
||||
background-color: #101010;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -166,13 +173,8 @@ p {
|
|||
height: 70px;
|
||||
background-color: #202020;
|
||||
border-radius: 40px;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
font-size: 50px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
color: white;
|
||||
border: 5px solid black;
|
||||
text-shadow: black 5px 5px 5px;
|
||||
user-select: none;
|
||||
|
|
@ -187,7 +189,7 @@ p {
|
|||
font-size: 25px;
|
||||
font-weight: 550;
|
||||
margin: 0;
|
||||
text-shadow: black 3px 3px 3px;
|
||||
text-shadow: rgb(0, 0, 0) 3px 3px 3px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
|
|
@ -196,25 +198,19 @@ p {
|
|||
}
|
||||
|
||||
#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-position: center;
|
||||
}
|
||||
|
||||
#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-position: center;
|
||||
}
|
||||
|
||||
#carousel-container #carousel-3 {
|
||||
background-image: url("/assets/photos/science-fiction-2907434_1920.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#carousel-container #carousel-4 {
|
||||
background-image: url("/assets/photos/fantasy-2770468_1920.jpg");
|
||||
background-image: linear-gradient(to top, #000a, #0000), url("/assets/photos/keyboard-5466431_1920.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
|
@ -274,11 +270,4 @@ p {
|
|||
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
26
index.html
|
|
@ -17,32 +17,28 @@
|
|||
<input id="bgColour" type="color" value="#ffffff">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="below-landing">
|
||||
<section id="about" class="content-column">
|
||||
<h2>About This Website</h2>
|
||||
<section id="features" class="content-column">
|
||||
<h2>Features</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!
|
||||
This webpage has been designed to display a variety of different web development skills and features.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div id="carousel">
|
||||
<div id="carousel-container">
|
||||
<div class="carousel-item" id="carousel-1">
|
||||
<p class="carousel-id">1</p>
|
||||
<p class="carousel-title">Night Trees</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">HTML</p>
|
||||
</div>
|
||||
<div class="carousel-item" id="carousel-2">
|
||||
<p class="carousel-id">2</p>
|
||||
<p class="carousel-title">Rocket Head</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">CSS</p>
|
||||
</div>
|
||||
<div class="carousel-item" id="carousel-3">
|
||||
<p class="carousel-id">3</p>
|
||||
<p class="carousel-title">Spaceship</p>
|
||||
</div>
|
||||
<div class="carousel-item" id="carousel-4">
|
||||
<p class="carousel-id">4</p>
|
||||
<p class="carousel-title">Fantasy Archer</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">Javascript</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,4 +19,6 @@ The `js/scripts.js` file contains a simple console.log statement to confirm that
|
|||
|
||||
## 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
|
||||
Loading…
Reference in New Issue