Notoric
/
FEWD-CTEC3905
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Set a title and background image with some effects

This commit is contained in:
Notoric 2024-02-08 17:21:26 +00:00
parent 2779c9e5b0
commit fb1b186fc0
5 changed files with 98 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/photos/sunset-2582687-dreamypixel.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 MiB

BIN
assets/photos/sunset-5928907-lizzymay.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

88
css/styles.css
View File

@ -3,17 +3,72 @@
/* applies to screens smaller than 500px (first breakpoint) */ /* applies to screens smaller than 500px (first breakpoint) */
/* and above unless overwritten below */ /* and above unless overwritten below */
body { :root {
background: #fcc; --background-color: #0d0d0d;
} }
body {
background: #fcc;
margin: 0;
padding: 0;
}
main {
width: 100vw;
height: 100vh;
background-image: url(/assets/photos/sunset-5928907-lizzymay.jpg);
background-size: cover;
overflow: hidden;
isolation: isolate;
}
.textWindow {
margin: 0;
padding: 0;
width: auto;
height: 100%;
display: flex;
flex-direction: column;
background-color: black;
mix-blend-mode: multiply;
}
h1 {
font-size: 18vw;
color: white;
margin: 0;
padding: 0;
padding-left: 2vw;
padding-top: 10vh;
font-family: 'Outfit', sans-serif;
}
h1#title2 {
padding-left: 8vw;
padding-top: 0;
}
/* TABLET STYLES */ /* TABLET STYLES */
@media screen and (min-width: 500px) { @media screen and (min-width: 500px) {
/* applies to screens wider than 499px */ /* applies to screens wider than 499px */
.textWindow {
justify-content: center;
}
h1 {
font-size: 20vw;
padding-left: 2vw;
padding-top: 0vh;
}
h1#title2 {
padding-left: 10vw;
padding-top: 0;
}
body { body {
background: #cfc; background: #cfc;
@ -31,4 +86,33 @@ body {
body { body {
background: #ccf; background: #ccf;
} }
main {
display: grid;
grid-template-areas: "left right";
}
.textWindow {
grid-column: left;
width: 50vw;
height: 100vh;
}
.extraWindow {
grid-column: right;
width: 50vw;
height: 100vh;
box-shadow: inset 0 0 2vw 10vw black;
}
h1 {
font-size: 12vw;
padding-left: 2vw;
padding-top: 0vh;
}
h1#title2 {
padding-left: 8vw;
padding-top: 0;
}
} }

11
index.html
View File

@ -5,11 +5,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>P2672045</title> <title>P2672045</title>
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<main>
<h1>Hello World</h1> <div class="textWindow">
<h1 id="title1">Tom</h1>
<h1 id="title2">Cornes</h1>
</div>
<div class="extraWindow"></div>
</main>
<script src="js/scripts.js"></script> <script src="js/scripts.js"></script>
</body> </body>
</html> </html>

4
readme.md
View File

@ -16,3 +16,7 @@ The `css/styles.css` file contains a basic starting template for a responsive pa
## js/scripts.js ## js/scripts.js
The `js/scripts.js` file contains a simple console.log statement to confirm that it is being executed. The `js/scripts.js` file contains a simple console.log statement to confirm that it is being executed.
## assets/photos
All images inside `assets/photos` folder are from https://pixabay.com and used under the licence outlined here https://pixabay.com/service/terms/