counterweight/odin-project-notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

finished left panel

Browse source
This commit is contained in:
Pablo Martin 2025-04-23 09:11:15 +02:00
parent 01ca8821d4
commit 40c72b826c
4 changed files with 66 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
projects/sign-up-form/Norse-Bold.otf Normal file
View file

Binary file not shown.

15
projects/sign-up-form/index.html
View file

@ -8,10 +8,19 @@
</head> </head>
<body> <body>
<div class="full-screen-container"> <div class="full-screen-container">
<div class="left-panel"> <div class="left-panel">
<img src="nice_pic.jpg" class="left-panel-pic" alt=""> <div class="picture-container">
<img src="nice_pic.jpg" class="left-panel-pic" alt="" />
</div> </div>
<div class="right-panel">ola?</div> <div class="odin-banner">
<img src="odin-lined.png" alt="" class="odin-logo" />
<p class="odin-logo-text">ODIN</p>
</div>
<div class="picture-caption-container">
<p class="picture-caption">Photo by someone, somewhere</p>
</div>
</div>
<div class="right-panel">ola?</div>
</div> </div>
</body> </body>
</html> </html>

BIN
projects/sign-up-form/odin-lined.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

57
projects/sign-up-form/style.css
View file

@ -1,3 +1,8 @@
@font-face {
font-family: norse;
src: url(./Norse-Bold.otf);
}
:root { :root {
--main-color: green; --main-color: green;
} }
@ -14,11 +19,19 @@ body {
} }
.left-panel { .left-panel {
position: absolute;
top: 0;
left: 0;
width: 33%; width: 33%;
height: 100vh; height: 100vh;
background-color: var(--main-color); background-color: var(--main-color);
margin: 0; margin: 0;
padding: 0; padding: 0;
}
.picture-container {
width: 100%;
height: 100%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: flex; display: flex;
@ -28,9 +41,47 @@ body {
} }
.left-panel-pic { .left-panel-pic {
margin: 0; margin: 0;
object-fit: cover; object-fit: cover;
position: absolute;
}
.odin-banner {
position: absolute;
top: 20%;
width: 100%;
height: 20%;
background-color: rgba(255, 255, 255, 0.048);
}
.odin-logo {
position: absolute; position: absolute;
top: 10%;
left: 20%;
height: 80%;
margin:0;
padding: 0;
}
.odin-logo-text {
position: absolute;
top: calc(50% - 4rem);
color: white;
font-size: 8rem;
left: 40%;
margin: 0;
padding: 0;
font-family: norse;
}
.picture-caption-container {
position: absolute;
bottom: 0%;
left: 30%;
}
.picture-caption {
color: white;
} }
.right-panel { .right-panel {
@ -38,7 +89,7 @@ body {
background-color: antiquewhite; background-color: antiquewhite;
margin: 0; margin: 0;
padding: 0; padding: 0;
position: relative; position: absolute;
left: 33%; left: 33%;
top: 0; top: 0;
} }