Episode 2

Umbraco 13 Tutorial - Episode 2 - Install Umbraco

Episode Links

Umbraco Versions

https://psw.codeshare.co.uk/#umbraco-versions

Package Script Writer

https://psw.codeshare.co.uk/

Basic HTML Template

https://www.w3schools.com/html/html_basic.asp

Curtain Effect

https://codepen.io/team/css-tricks/pen/YzEERmQ

Gradient Borders

https://codepen.io/team/css-tricks/pen/jOwGMjq

 

GitHub Repo

🐙 GitHub

https://github.com/prjseal/Umbraco-13-Series/

📝 Guest Book

https://github.com/prjseal/Umbraco-13-Series/issues/1

 

Get Help

💬 Discord

https://discord.gg/umbraco

🗣️ Facebook Group

https://www.facebook.com/groups/umbracowebdevs

🐘 Mastodon

https://umbracocommunity.social/

🗨️ Umbraco Forum

https://our.umbraco.com/forum/

☕Buy me a coffee

https://codeshare.co.uk/coffee

Code

Basic HTML Template

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Basic HTML Template

Curtain Effect HTML

<div class="curtain">
  <div class="invert">
    <h2>Curtain Effect</h2>
  </div>
</div>

Curtain effect HTML

Curtain Effect CSS

:root {
  --minh: 98vh;
  --color1: wheat;
  --color2: midnightblue;
}

html {
  font-size: 60px;
}


.curtain {
  /** create the "split" background **/
  background-image: linear-gradient(to bottom, var(--color2) 50%, var(--color1) 50%);
}

/** add extra space to the bottom (need this for the "sticky" effect) **/
.curtain::after {
  content: "";
  display: block;
  min-height: var(--minh);
}



.invert {
  /** make the content sticky **/
  position: sticky;
  top: 20px;

  /** blend the content with the contrast effect **/
  mix-blend-mode: difference;

  /** center the content **/
  display: flex;
  align-items: center;
  justify-content: center;
  
  /** set the minimum height of the section **/
  min-height: var(--minh);
}

h2 {
  /** set the color of the text **/
  color: var(--color1);
}

Curtain effect CSS

Gradient Borders HMTL

<div class="gradient-border">
	<figure>
		<img src="https://i.imgur.com/jFKonXQ.jpeg" alt="White and Red Chevrolet">
	</figure>
</div>

Graident Borders HTML

Gradient Borders CSS

figure {
  margin: 0;
  padding: 10px;
}

img {
	width: 100%;
	display: block;
}

.gradient-border {
	width: 50%;
	position: relative;
	margin: 0 auto;
}

.gradient-border::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-image: linear-gradient(#1a1a1a, #1560bd);
}

Gradient Borders CSS