<html>
<DOCTYPE! html>
<head>
<metacharset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Magic goes on</title>
<link rel="stylesheet" href="magicgoeson.css" type="text/css">
<link href="https://fonts.google.com/specimen/Sora?preview.text_type=custom#standard-styles" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,[email protected],100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>

<header>
<img src="images/outincovlogo.svg" alt="" class="logo">
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#tickets">Tickets</a></li>
</ul>
</nav>
</header>

<body>

<!--PANEL HOME-HERO-->

<section class="home-hero">
<div class="gallery">
<figure class="gallery-item">
<div class="gallery-item-img">
<div class="gallery-item-imginner" sytle="background image"></div>
</div>
<figcaption class="gallery-item-caption">
<div class="port-item">
<img src="images/tagline.svg">
</div>
<a href="about" class="button button-accent">Explore</a>
</figcaption>
</figure>
<a id="about"></a>
</div>
</section>

<!--END PANEL HOME-HERO-->

<!--PANEL HOME-ABOUT-->

<section class="home-about">
<div class="gallery1">
<figure class="gallery-item1">
<div class="gallery-item-img1">
<div class="gallery-item-imginner1" sytle="background image"></div>
</div>
<figcaption class="gallery-item-caption1">
<span class="gallery-item-subtitle">About</span>
<p class="gallery-item-text">This spring will bring you the mysterious world of kings, magical animals, princes and princesses. Come and explore the unique culture, and reinvented traditions of a tiny spot <br>in Europe called Hungary.</br></p>
<p><br>By this festival, you can take the opportunity to be part of a bubbling, friendly and unusual atmosphere Hungarian mentality brings. What is more, this is the chance to reconnect and get new experiences through re-thought conventional games, music and dance. <br>So grab a pálinka* and enjoy this time between crafty, gorgeous and enchanting creatures of the ancient Hungarian folktale: <strong>The fox-eyed wife.</strong></br></br></p>
</figcaption>
</figure>
</div>
</section>

<!--END PANEL HOME-ABOUT-->

<!--FOOTER-->

<footer>
<div class="wrapper2">
<div class="col-2">
<p><span>OUT in COV</span><br>Your dream, your story</br></p>
<p>© 2021 OUT in COV. All rights reserved.
</p>
</div>

<div class="col-1">
<ul class="unstyled-list">
<li><strong>Spring Festival</strong></li>
<li>24/04/2022</li>
<li>Coventry Canal</li>
<li>
www.magicgoeson.com</li>
<li>Instagram: @outincov_magicgoeson</li>
</ul>
</div>

<div class="col-1">
<ul class="unstyled-list">
<li><strong>Summer Festival</strong></li>
<li>14/08/2022</li>
<li>Coventry Canal</li>
<li>www.vodnik.com</li>
<li>Instagram: @outincov_vodnik</li>
</ul>
</div>

<div class="col-1">
<ul class="unstyled-list">
<li><strong>Autumn Festival</strong></li>
<li>21/09/2022</li>
<li>Coventry Canal</li>
<li>www.TheWawelDragon.com</li>
<li>Instagram: @TheWawelDragon</li>
</ul>
</div>
</div>
</footer>

<!--ENDFOOTER-->

</body>

</html>

2012.03.14. 12:13

/font-family: 'Sora', sans-serif;/
/font-family: 'Montserrat', sans-serif;/

/* * selects everything on the page*/

*{
box-sizing: border-box;
}

body {
margin: 0;
--color-bg: #FC8EB6;
background-color: var(--color-bg);
font-family: Montserrat, sans-serif;
display: block;
}

/HEADER/

header {
position: absolute; /positions it on top of the following section; doesn't stretch all the width/
margin-top: 1em;
left: 0;
right: 0;
margin: 1em;
z-index: 5;
}

.logo {
width: 4%;
height: auto;
float: left;
}

/NAV/

nav {
float: right;
}

nav ul { /removes the dots before the elments of the list/
margin: 0;
padding: 0;
list-style: none;
}

nav li { /arrange the elements of the navbar into one horizontal line/
display: inline-block;
margin: 0.3em;
}

nav a {
font-weight: 700;
text-decoration: none;
text-transform: none;
font-size: 0.95rem;
padding: 0.5em; /makes the clickable area bigger/
color: #39836A;
}

nav a:hover,
nav a:focus {
color: white;
}

/* * END NAV*/
/END HEADER/

/* * HOME HERO*/

section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery { /class of div/
justify-self: center;
}

div {
display: block;
}

.gallery-item { /class of figure/
display: grid;
grid-template-areas: 'gallery-filler gallery-image gallery-caption';
grid-template-columns: 17.5vw auto 17.5vw; /specifies, as a space-separated track list, the line names and track sizing functions of the grid./
position: relative;
margin: 25vh 0;
}

figure { /containes div class="gallery-item-img, div class="gallery-item-imginner", figcaption class="gallery-item-caption, div class="port-item", img src="images/tagline.svg", figcaption + button/
display: block;

}

.gallery-item-img { /* contains div class="gallery-item-imginner" - the bacgkround image in the center*/
grid-area: gallery-image;
grid-row-start: gallery-image;
grid-column-start: gallery-image;
grid-row-end: gallery-image;
grid-column-end: gallery-image;
width: calc(100vw - 50vw); /calculate the width of a <div> element/
max-width: 375px;
overflow: hidden; /The overflow is clipped, and the rest of the content will be invisible/
position: relative;
}

.gallery-item-imginner { /background image/
background-image: url(images/eyes.svg);
opacity: 10;
}

.gallery-item-imginner { /background image/
background-size: cover;
background-position: 50% 0; /The position of the image/
width: 100%;
padding-bottom: 140%;
}
.gallery-item-caption { /* figcaption class="gallery-item-caption - contains div class="port-item - img src="images/tagline.svg + button*/
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 2rem; /defines the space between the background images and elements next to it inside the grid/
grid-area: gallery-caption;
grid-row-start: gallery-caption;
grid-column-start: gallery-caption;
grid-row-end: gallery-caption;
grid-column-end: gallery-caption;
}

figcaption { /contains the port-item + button/
display: block;
}

.port-item { /div class="port-item - img: tagline/
position: absolute;
left: 50px;
width: 55%;
display: flex;
justify-content: left;
}

/* BUTTON/

.button {
display: inline-block; /so that the padding adds to the height of the whole thing/
font-size: 1.1rem;
text-decoration: none;
padding: 0.5em 1.2em;
font-family: Sora, sans-serif;
font-weight: 700;
margin: 0;
}

.button-accent {
color:#FC8EB6;
background-color: #F8494F;
outline: 2px solid #F8494F;
}

.button-accent:hover,
.button-accent:focus {
background: #FC8EB6;
color:#F8494F;
}

/* * END BUTTON*/
/* * END HOME HERO*/

/HOME ABOUT/

section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.home-about {
background-image: url("images/panel-home-about-background.svg");
background-size: 1920px 1080px;
background-position: center;
height: 100vh;
}

.gallery1 {
justify-self: left;
}

div {
display: block;
}

.gallery-item1 {
display: grid;
grid-template-areas: 'gallery-filler gallery-image gallery-caption';
grid-template-columns: 17.5vw auto 45vw;
position: relative;
margin: 25vh 0;
}

figure {
display: block;

}

.gallery-item-img1 {
grid-area: gallery-image;
grid-row-start: gallery-image;
grid-column-start: gallery-image;
grid-row-end: gallery-image;
grid-column-end: gallery-image;
width: calc(100vw - 50vw);
max-width: 375px;
overflow: hidden;
position: relative;
}

.gallery-item-imginner1 {
background-image: url(images/panel-home-about-image.svg);
opacity: 10;
}

.gallery-item-imginner1 {
background-size: cover;
background-position: 50% 0;
width: 100%;
padding-bottom: 140%;

}
.gallery-item-caption1 {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 2rem;
grid-area: gallery-caption;
grid-row-start: gallery-caption;
grid-column-start: gallery-caption;
grid-row-end: gallery-caption;
grid-column-end: gallery-caption;
}

figcaption { /gallery-item-title, gallery-item-subtitle, gallery-item-text/
display: block;
}

.gallery-item-subtitle {
font-family: Sora, sans-serif;
font-weight: 700;
font-size: 2.5rem;
border-bottom: 2px solid #FC8EB6;
width: 100%;
display: block;
margin-bottom: 1rem;
color: #FC8EB6;
}

.gallery-item-text {
margin: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

p {
display: block;
margin-block-start: 0px;
margin-block-end: 0px;
margin-inline-start: 0px;
margin-inline-end: 0px;
line-height: 160%;
letter-spacing: 1px;
font-size: 1rem;
font-family: Montserrat, sans-serif;
font-weight: 500;
color: #FC8EB6;
}

/END HOME ABOUT/

/* * FOOTER*/
.wrapper2 {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
grid-gap: 0em;
}

.wrapper2 .col-2 {
background: #39836A;
color: #FC8EB6;
}

span {
font-size: 1.5rem;
font-weight: 700;
line-height: 150%;
}

.wrapper2 .col-1 {
background: #39836A;
color: #FC8EB6;
line-height: 150%;
}

.wrapper,
.col-1,
.col-2 {
padding: 2rem;
outline: 2px solid #FC8EB6;
}

ul,
.unstyled-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}

/* * END FOOTER*/

code 2021.03.14. 12:13

/font-family: 'Sora', sans-serif;/
/font-family: 'Montserrat', sans-serif;/

/* * selects everything on the page*/

*{
box-sizing: border-box;
}

body {
margin: 0;
--color-bg: #FC8EB6;
background-color: var(--color-bg);
font-family: Montserrat, sans-serif;
display: block;
}

main {
grid-template-areas: 'content';
grid-template-rows: 100%;
grid-template-columns: 100%;
width: 100%;
display: grid;
}
.gallery {
grid-area: content;
justify-self: center;
font-size: 18px;
}
*, *::after, *::before {
box-sizing: border-box;
}
div {
display: block;
}

.gallery-item {
grid-template-areas: 'gallery-filler gallery-image gallery-caption';
grid-template-columns: 25vw auto 25vw;
position: relative;
margin: 25vh 0;
display: grid;
}

figure {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
}

.gallery-item-img {
grid-area: gallery-image;
grid-row-start: gallery-image;
grid-column-start: gallery-image;
grid-row-end: gallery-image;
grid-column-end: gallery-image;
width: calc(100vw - 30vw);
max-width: 375px;
overflow: hidden;
position: relative;
}

.gallery-item-imginner {
background-image: url(images/eyes.svg);
}

.gallery-item-imginner {
background-size: cover;
background-position: 50% 0;
width: 100%;
padding-bottom: 140%;
}

.gallery-item-caption {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 1rem;
grid-area: gallery-caption;
grid-row-start: gallery-caption;
grid-column-start: gallery-caption;
grid-row-end: gallery-caption;
grid-column-end: gallery-caption;
}

figcaption {
display: block;
}

.gallery-item-title {
position: absolute;
left: 0;
width: 100%;
text-align: left;
font-size: 5vw;
font-family: Sora, sans-serif;
font-weight: 100;
display: flex;
justify-content: center;
margin: 0;
bottom: 8%;
}

h2 {
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}

.gallery-item-number {
font-family: Sora, sans-serif;
font-weight: 100;
font-size: 2.5rem;
border-bottom: 1px solid white;
width: 100%;
display: block;
margin-bottom: 1rem;
}

.gallery-item-text {
margin: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}