Skip to content

Commit dd03e96

Browse files
ScottSewardsScottSewards
committed
Change colours/Add SplideJS
1 parent 419ac05 commit dd03e96

File tree

3 files changed

+72
-44
lines changed

3 files changed

+72
-44
lines changed

‎index.css

+23-25
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,41 @@
11
*, *::before, *::after { box-sizing: border-box; }
22
body {
3-
background: #C77966;
3+
user-select: none;
4+
background: linear-gradient(8deg, #3C3C40 42.5%, #5C6C73 42.5%);
45
display: flex;
56
flex-direction: column;
6-
justify-content: center;
7-
align-items: center;
8-
padding: 1rem;
7+
padding: 0 1.5rem 1.5rem 1.5rem;
98
margin: 0;
109
height: 100vh;
1110
font-family: "ivypresto-display", serif;
12-
font-size: 1rem;
1311
}
1412
#top {
15-
color: #703030;
13+
color: #F2F2F2;
1614
display: flex;
15+
justify-content: end;
1716
align-items: end;
18-
padding-left: 5%;
19-
height: 25%;
17+
padding-right: 1rem;
18+
height: 20%;
2019
width: 100%;
2120
}
22-
#bottom {
23-
background: #703030;
24-
color: #E3CDA4;
25-
display: flex;
26-
justify-content: center;
27-
align-items: center;
28-
border-radius: 1rem;
29-
height: 75%;
30-
width: 100%;
31-
overflow: hidden;
32-
}
33-
h1 {
34-
margin: 0 0 -0.9rem 0;
21+
#top > h1 {
22+
margin: 0 0 -0.8rem 0;
3523
font-size: 3rem;
3624
font-weight: 600;
3725
}
38-
p {
39-
margin: 0;
40-
font-size: 2.5rem;
26+
#bottom {
27+
background: #F2F2F2;
28+
color: #3C3C40;
29+
border-radius: 0 0 1.5rem 0;
30+
height: 80%;
31+
width: 100%;
32+
font-size: 2rem;
4133
font-weight: 400;
42-
text-align: center;
34+
}
35+
/* .splide__track {} */
36+
.splide__slide {
37+
padding: 1px 2rem;
38+
}
39+
.splide__slide--image {
40+
4341
}

‎index.html

+40-13
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,52 @@
11
<!DOCTYPE html>
22
<html lang="en" dir="ltr">
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="description" content="Freelance website designer and developer skilled in HTML, CSS, Sass, Bootstrap, Foundation, TailwindCSS, JavaScript, jQuery, PHP, Composer, PHPOffice, Laravel, Livewire, WordPress, Elementor, MySQL, Python, CSharp, and Java.">
6-
<meta name="keyword" content="Freelance, Contractor, Programmer, Coder, HTML, HyperText Markup Language, CSS, Cascading Stylesheets, Sass, Bootstrap, Foundation, TailwindCSS, JavaScript, jQuery, PHP, PHP: Hypertext Preprocessor, Composer, PHPOffice, PHPWord, PhpSpreadsheet, Laravel, Livewire, Docker, WordPress, Custom Themes, Custom Plugins, Elementor, MySQL, Python, Django, Heroku, CSharp, Java, VB, Visual Basic, Web Design, Website Design, Web Dev, Website Dev, Web Development, Website Development, Microsoft Word, Microsoft Excel, Microsoft Access, Red Diamond IT, The Hatch, MonkeyFish Marketing, Flying Boat Media, Hopeful Studio, Studio Coact, HTS Engineering, ATEXInspect, I-Ingenuity, SISSuite, Hazardous Area, Process Safety">
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4+
<meta charset="utf-8"/>
5+
<meta name="description" content="Freelance website designer and developer skilled in HTML, CSS, Sass, Bootstrap, Foundation, TailwindCSS, JavaScript, jQuery, PHP, Composer, PHPOffice, Laravel, Livewire, WordPress, Elementor, MySQL, Python, CSharp, and Java."/>
6+
<meta name="keyword" content="Freelance, Contractor, Programmer, Coder, HTML, HyperText Markup Language, CSS, Cascading Stylesheets, Sass, Bootstrap, Foundation, TailwindCSS, JavaScript, jQuery, PHP, PHP: Hypertext Preprocessor, Composer, PHPOffice, PHPWord, PhpSpreadsheet, Laravel, Livewire, Docker, WordPress, Custom Themes, Custom Plugins, Elementor, MySQL, Python, Django, Heroku, CSharp, Java, VB, Visual Basic, Web Design, Website Design, Web Dev, Website Dev, Web Development, Website Development, Microsoft Word, Microsoft Excel, Microsoft Access, Red Diamond IT, The Hatch, MonkeyFish Marketing, Flying Boat Media, Hopeful Studio, Studio Coact, HTS Engineering Ltd., HTS Engineering Compliance, HTS Engineering, ATEXInspect, I-Ingenuity Ltd., I-Ingenuity, SISSuite Ltd., SISSuite, Hazardous Area, Hazardous Location, Functional Safety, Process Safety"/>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
88
<title>Scott Sewards - PHP and Laravel Developer</title>
9-
<link href="favicon.webp" rel="shortcut icon">
10-
<link href="https://use.typekit.net/vwv3dsk.css" rel="stylesheet">
11-
<!-- <link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet"> -->
12-
<link href="index.css" rel="stylesheet">
13-
<!-- <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script> -->
14-
<!-- <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script> -->
15-
<!-- <script src="index.js"></script> -->
9+
<link href="favicon.webp" rel="shortcut icon"/>
10+
<link href="https://use.typekit.net/vwv3dsk.css" rel="stylesheet"/>
11+
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet"/>
12+
<link href="index.css" rel="stylesheet"/>
13+
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
14+
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>
15+
<script src="index.js"></script>
1616
</head>
1717
<body>
1818
<div id="top">
1919
<h1>Scott Sewards</h1>
2020
</div>
21-
<div id="bottom">
22-
<p>There Was Content Here. It's Gone Now</p>
21+
<div class="splide" id="bottom">
22+
<div class="splide__track">
23+
<ul class="splide__list">
24+
<li class="splide__slide">
25+
<p>L</p>
26+
</li>
27+
<li class="splide__slide">
28+
<p>La</p>
29+
</li>
30+
<li class="splide__slide">
31+
<p>Lar</p>
32+
</li>
33+
<li class="splide__slide">
34+
<p>Lara</p>
35+
</li>
36+
<li class="splide__slide">
37+
<p>Larav</p>
38+
</li>
39+
<li class="splide__slide">
40+
<p>Larave</p>
41+
</li>
42+
<li class="splide__slide">
43+
<p>Laravel</p>
44+
</li>
45+
<li class="splide__slide">
46+
<p>There Was Laravel Here. It's Gone Now</p>
47+
</li>
48+
</ul>
49+
</div>
2350
</div>
2451
</body>
2552
</html>

‎index.js

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
document.addEventListener('DOMContentLoaded', function() {
2-
var splide = new Splide('.splide', {
2+
new Splide('#bottom', {
33
arrows: false,
44
autoScroll: {
5-
pauseOnFocus: true,
6-
pauseOnHover: true,
7-
speed: 2,
5+
pauseOnFocus: false,
6+
pauseOnHover: false,
7+
speed: 1,
88
},
9-
autoWidth: true,
10-
drag: true,
9+
autoHeight: true,
10+
direction: 'ttb',
11+
drag: false,
12+
gap: '0.5rem',
13+
height: '100%',
1114
pagination: false,
1215
type: 'loop',
1316
}).mount(window.splide.Extensions);

0 commit comments

Comments
 (0)