diff --git a/assets/photos/code-1839406_1920.jpg b/assets/photos/code-1839406_1920.jpg new file mode 100644 index 0000000..f145592 Binary files /dev/null and b/assets/photos/code-1839406_1920.jpg differ diff --git a/assets/photos/fantasy-2770468_1920.jpg b/assets/photos/fantasy-2770468_1920.jpg deleted file mode 100644 index 851b26d..0000000 Binary files a/assets/photos/fantasy-2770468_1920.jpg and /dev/null differ diff --git a/assets/photos/keyboard-5466431_1920.jpg b/assets/photos/keyboard-5466431_1920.jpg new file mode 100644 index 0000000..5da1370 Binary files /dev/null and b/assets/photos/keyboard-5466431_1920.jpg differ diff --git a/assets/photos/science-fiction-2907434_1920.jpg b/assets/photos/science-fiction-2907434_1920.jpg deleted file mode 100644 index 74dfb80..0000000 Binary files a/assets/photos/science-fiction-2907434_1920.jpg and /dev/null differ diff --git a/assets/photos/software-3682509_1920.jpg b/assets/photos/software-3682509_1920.jpg new file mode 100644 index 0000000..6d2f372 Binary files /dev/null and b/assets/photos/software-3682509_1920.jpg differ diff --git a/assets/photos/space-4678686_1920.jpg b/assets/photos/space-4678686_1920.jpg deleted file mode 100644 index 41c645f..0000000 Binary files a/assets/photos/space-4678686_1920.jpg and /dev/null differ diff --git a/assets/photos/universe-1622107_1920.jpg b/assets/photos/universe-1622107_1920.jpg deleted file mode 100644 index 7e6a557..0000000 Binary files a/assets/photos/universe-1622107_1920.jpg and /dev/null differ diff --git a/css/styles.css b/css/styles.css index a635815..918573c 100644 --- a/css/styles.css +++ b/css/styles.css @@ -3,15 +3,16 @@ /* applies to screens smaller than 500px (first breakpoint) */ /* 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 { - + --bgColor: #ffffff; } body { font-family: 'Outfit', sans-serif; + font-size: 1.5em; margin: 0; padding: 0; box-sizing: border-box; @@ -65,6 +66,7 @@ body { h1 { font-size: 10vw; + font-weight: 600; text-align: center; user-select: none; } @@ -72,7 +74,11 @@ h1 { #titleBanner { padding-left: 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 { @@ -108,11 +114,70 @@ h1 { font-size: 1.5em; } +/* BELOW LANDING STYLES */ + +#below-landing { + background-color: #101010; + overflow: auto; + color: white; + padding: 50px; +} + +p { + font-weight: 200; +} + +h2 { + font-size: 3em; + font-weight: 400; + margin: 0; + text-decoration: underline; + text-decoration-color: var(--bgColor); +} + +h3 { + font-size: 1.5em; + font-weight: 300; + margin: 0; + +} + +.features { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#features-intro p { + text-align: center; +} + +#table-heading { + margin-bottom: 25px; +} + +.feature-showcase { + display: flex; + flex-direction: column; + border-radius: 40px; + background-color: #181818; +} + +.feature-showcase-item { + padding: 30px; + border-bottom: 1px solid var(--bgColor); +} + +#modern-css { + border-bottom: none; +} + /* CAROUSEL STYLES */ #carousel { height: 100vh; - background-color: #0d0d0d; + background-color: #101010; position: relative; display: flex; } @@ -121,7 +186,7 @@ h1 { display: flex; flex-direction: column; width: 100%; - padding: 50px; + padding: 50px 0px; } .carousel-item { @@ -131,8 +196,8 @@ h1 { width: calc(100% - 34px); min-height: 100px; margin: 12px; - border-radius: 55px; - border: 5px solid black; + border-radius: 52px; + border: 3px solid var(--bgColor); overflow: hidden; transition: width 1s ease, height 1s ease; @@ -147,13 +212,9 @@ h1 { height: 70px; background-color: #202020; border-radius: 40px; - text-align: center; - line-height: 70px; - font-size: 50px; margin: 0; margin-bottom: 15px; - color: white; - border: 5px solid black; + border: 3px solid var(--bgColor); text-shadow: black 5px 5px 5px; user-select: none; } @@ -165,8 +226,9 @@ h1 { transform: translate(100px, -35px); color: white; 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; } @@ -175,25 +237,19 @@ h1 { } #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; } @@ -227,7 +283,7 @@ h1 { height: 800px; width: 150px; min-width: 150px; - border-radius: 80px; + border-radius: 74px; } .carousel-item .carousel-id { @@ -248,4 +304,44 @@ h1 { font-size: 50px; } + .content-column { + max-width: 1300px; + margin: auto; + } + + /* BELOW LANDING STYLES */ + + .feature-showcase { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto; + } + + .feature-showcase-item { + padding: 30px; + } + + #interactive-ui { + grid-column: 1 / 2; + grid-row: 2 / 3; + border-right: 1px solid var(--bgColor); + } + + #responsive-design { + grid-column: 2 / 2; + grid-row: 2 / 3; + } + + #user-input { + grid-column: 1 / 2; + grid-row: 3 / 3; + border-right: 1px solid var(--bgColor); + border-bottom: none; + } + + #modern-css { + grid-column: 2 / 2; + grid-row: 3 / 3; + } + } diff --git a/index.html b/index.html index b9ba111..a86b839 100644 --- a/index.html +++ b/index.html @@ -17,26 +17,73 @@ -
1
-Night Trees
-2
-Rocket Head
-3
-Spaceship
-4
-Fantasy Archer
+ ++ This webpage has been designed to display a variety of different web development skills and features. +
+HTML
+CSS
+Javascript
++ This website has been designed to provide satisfying user feedback. From using javscript to expand the carousel, to using css to change the shape of the title on the landing page; the website has been designed to provide an outstanding user experience. +
++ The website has been designed to support a variety of different devices and aspect ratios. The website will adapt to the size of the window and display the content in a way that is easy to read and navigate. +
++ The website has been designed to allow the user to interact with the website. This includes the ability to change the background color of the website. +
++ The website has been designed to use modern css features such as the flex layout and grids to provide a visually appealing layout. +
+