Skip to content

Commit bcf050b

Browse files
AdrihfuAdrihfu
committed
More customizing the template
- Fix padding on low width devices - Title align left for easy reading - Added new article 'Quick view' - In 'Quick view' embeded youtube video, and video - Change a restriction to enable changing the banner in every page (previously was in CSS) - Limit banner width
1 parent a1275a1 commit bcf050b

File tree

10 files changed

+81
-24
lines changed

10 files changed

+81
-24
lines changed

‎about-me.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@
4040
</nav>-->
4141

4242
</div>
43-
<div class="banner-still"></div>
43+
<div class="banner-still">
44+
<img src="images/banner.png" alt="" class="banner-image">
45+
</div>
4446
</header>
4547

4648
<!-- Menu -->

‎assets/css/main.css‎

Lines changed: 49 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@
1313

1414
.title {
1515
font-size: x-large;
16-
text-align: center;
17-
justify-content: center;
16+
text-align: left;
1817
}
1918

2019
.first-text {
@@ -29,6 +28,11 @@
2928
margin: 0 0 1em 0;
3029
}
3130

31+
.video-center {
32+
display: block;
33+
margin: auto;
34+
}
35+
3236
.background-image {
3337
background-image: url("../../images/pic01.jpg");
3438
background-size: cover;
@@ -54,20 +58,55 @@
5458
opacity: 1;
5559
}
5660

57-
5861
.banner-still {
59-
transition: opacity 0.25s ease;
60-
margin: 0em 0em 0em 0em;
61-
height: 20vmax;
62+
transition: opacity 0.3s ease;
63+
max-width: 74em;
64+
margin: auto;
65+
height: 20em;
6266
width: 100%;
6367
position: relative;
6468
overflow: hidden;
65-
background-image: url("../../images/banner.png");
66-
background-size: cover;
67-
background-position: center;
69+
background-color: #e7e7e70e;
70+
/*background-image: url("../../images/banner.png");*/
71+
background-image: var(--banner-image);
72+
background-size: var(--banner-size);
73+
background-position: var(--banner-pos);
74+
background-repeat: var(--banner-repeat);
6875
opacity: 1;
6976
}
7077

78+
.banner-still.index {
79+
height: 10em;
80+
}
81+
82+
.banner-image {
83+
height: 100%;
84+
width: 100%;
85+
object-fit: cover;
86+
object-position: 50%;
87+
vertical-align: middle;
88+
}
89+
90+
.banner-image.fill {
91+
object-fit: fill;
92+
}
93+
94+
.banner-image.contain {
95+
object-fit: contain;
96+
}
97+
98+
.banner-image.none {
99+
object-fit: none;
100+
}
101+
102+
.banner-image.top {
103+
object-position: top;
104+
}
105+
106+
.banner-image.bottom {
107+
object-position: bottom;
108+
}
109+
71110
body.is-preload .banner-still {
72111
opacity: 0;
73112
}
@@ -3353,7 +3392,7 @@ input, select, textarea {
33533392
@media screen and (max-width: 736px) {
33543393

33553394
#main {
3356-
padding: 0em 0 4em 0 ;
3395+
padding: 1em 0 3em 0 ;
33573396
}
33583397

33593398
}

‎contact.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@
4040
</nav>-->
4141

4242
</div>
43-
<div class="banner-still"></div>
43+
<div class="banner-still">
44+
<img src="images/banner.png" alt="" class="banner-image">
45+
</div>
4446
</header>
4547

4648
<!-- Menu -->

‎elements.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@
4040
</nav>-->
4141

4242
</div>
43-
<div class="banner-still"></div>
43+
<div class="banner-still">
44+
<img src="images/banner.png" alt="" class="banner-image">
45+
</div>
4446
</header>
4547

4648
<!-- Menu -->

‎generic.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@
4040
</nav>-->
4141

4242
</div>
43-
<div class="banner-still"></div>
43+
<div class="banner-still">
44+
<img src="images/banner.png" alt="" class="banner-image">
45+
</div>
4446
</header>
4547

4648
<!-- Menu -->

‎images/gg_sunstone_n.jpg‎

59.5 KB
Loading

‎images/gg_sunstone_n2.jpg‎

236 KB
Loading

‎images/mov_bbb.webm‎

401 KB
Binary file not shown.

‎index.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,10 @@
4545
<img class="banner-animated-slide" src="images/placeholder2.png" alt="">
4646
<img class="banner-animated-slide" src="images/placeholder3.png" alt="">
4747
</div>-->
48-
<div class="banner-still"></div>
49-
<div class="background-deg"></div>
48+
<div class="banner-still index">
49+
<img src="images/banner.png" alt="" class="banner-image">
50+
</div>
51+
<!--<div class="background-deg"></div>-->
5052
</header>
5153

5254
<!-- Menu -->
@@ -75,14 +77,14 @@ <h1 class="first-text">Level Design Portfolio</h1>
7577
<a href="about-me.html">
7678
<h2>About me</h2>
7779
<div class="content">
78-
<p>Who I am</p>
80+
<p>Who I am & how did I start</p>
7981
</div>
8082
</a>
8183
</article>
8284

8385
<article>
8486
<span class="image">
85-
<img src="images/pic02.jpg" alt="" />
87+
<img src="images/gg_sunstone_n.jpg" alt="" />
8688
</span>
8789
<a href="quick-view.html">
8890
<h2>Quick View</h2>

‎quick-view.html‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,10 @@
4040
</nav>-->
4141

4242
</div>
43-
<div class="banner-still"></div>
43+
<!--<div class="banner-still" style="--banner-size: contain; --banner-pos: bottom; --banner-repeat: no-repeat; --banner-image: url('../../images/gg_sunstone_n2.jpg');"></div>-->
44+
<div class="banner-still">
45+
<img src="images/gg_sunstone_n2.jpg" alt="" class="banner-image bottom">
46+
</div>
4447
</header>
4548

4649
<!-- Menu -->
@@ -58,11 +61,16 @@ <h2>Menu</h2>
5861
<!-- Main -->
5962
<div id="main">
6063
<div class="inner">
61-
<h1>Generic Page</h1>
62-
<span class="image main"><img src="images/placeholder3.png" alt="" /></span>
63-
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique.</p>
64-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel venenatis mauris vehicula hendrerit.</p>
65-
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.</p>
64+
<h1 class="first-text">Quick View</h1>
65+
<hr>
66+
<p>This is a text that points to a youtube video</p>
67+
<iframe class="video-center" width="560" height="315" src="https://www.youtube.com/embed/jNQXAC9IVRw?si=E7_StTsdXMSuDcuW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
68+
<hr>
69+
<p>This is a text that points to a web video</p>
70+
<video class="video-center" src="images/mov_bbb.webm" width="560" height="315" controls autoplay loop muted></video>
71+
<hr>
72+
<p>This is a text that points to a web video</p>
73+
<img src="" alt="" srcset="">
6674
</div>
6775
</div>
6876

0 commit comments

Comments
 (0)