Template:Hero: Difference between revisions

From WikiMSK

No edit summary
No edit summary
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,700;1,400&display=swap');
.hero{
.hero{
background-image: url("https://wikimsk.org/w/img_auth.php/e/ea/Reading_manikin.jpg");
background-image: url("https://wikimsk.org/w/img_auth.php/a/ac/Reading_man.jpg");
height: 350px;
height: 350px;
background-position: center;
background-position: center;
Line 12: Line 14:
justify-content: center; /* align horizontal */
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
align-items: center; /* align vertical */
width:99%;
}
}
.hero-text{
.hero-text{
font-family:"Josefin Sans"
font-family:"Josefin Sans";
margin:2em;
padding:2em;
padding:2em;
line-height:1rem;
line-height:1rem;
Line 27: Line 29:
.hero-title{
.hero-title{
font-size:80px;
font-size:80px;
margin-bottom:3rem;
margin-bottom:1.2rem;
font-weight:900;
font-weight:900;
line-height:1.1em;
line-height:1.3em;
text-align: center;
text-align: center;
text-decoration: underline;
text-decoration: underline;
text-decoration-color: #3498db;
text-decoration-color: #3498db;
text-shadow: 2px 2px DimGray;
text-shadow: 2px 2px DimGray;
}
text-underline-offset: 4px;
}  
.hero-caption{
.hero-caption{
font-size:30px;
font-size:30px;
text-align: center;
text-align: center;
text-shadow: 2px 2px DimGray;
line-height:1.1em;
line-height:1.1em;
background-color: var(--medik);
padding-top: 0.3rem;
padding-left: 0.4rem;
padding-right: 0.4rem;
}
}


@media only screen and (max-width: 900px) {
@media only screen and (max-width: 1000px) {
  .hero-caption{
  .hero-caption{
font-size:20px;
font-size:20px;
Line 48: Line 54:
  .hero-title{
  .hero-title{
font-size:60px;
font-size:60px;
}
}
@media only screen and (max-width: 550px) {
.hero-caption{
font-size:16px;
}
.hero-title{
font-size:50px;
}
}
}
}
Line 55: Line 69:
<div class="hero-text">
<div class="hero-text">
<div class="hero-title">WELCOME TO <span style="color:#3498db">WIKIMSK</span></div>
<div class="hero-title">WELCOME TO <span style="color:#3498db">WIKIMSK</span></div>
<div class="hero-caption">''The New Zealand Musculoskeletal Medicine Wiki''</div>
<div class="hero-caption">The New Zealand Musculoskeletal Medicine Wiki</div>
</div>
</div>
</div>
</div>
<noinclude>[[Category:Main Page Templates]]</noinclude>
<noinclude>[[Category:Main Page Templates]]</noinclude>

Latest revision as of 18:01, 15 April 2023

WELCOME TO WIKIMSK
The New Zealand Musculoskeletal Medicine Wiki