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.

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

@ -9,7 +9,16 @@
<body>
<div class="full-screen-container">
<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 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>

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

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

@ -1,3 +1,8 @@
@font-face {
font-family: norse;
src: url(./Norse-Bold.otf);
}
:root {
--main-color: green;
}
@ -14,11 +19,19 @@ body {
}
.left-panel {
position: absolute;
top: 0;
left: 0;
width: 33%;
height: 100vh;
background-color: var(--main-color);
margin: 0;
padding: 0;
}
.picture-container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
display: flex;
@ -33,12 +46,50 @@ body {
position: absolute;
}
.odin-banner {
position: absolute;
top: 20%;
width: 100%;
height: 20%;
background-color: rgba(255, 255, 255, 0.048);
}
.odin-logo {
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 {
width: 67%;
background-color: antiquewhite;
margin: 0;
padding: 0;
position: relative;
position: absolute;
left: 33%;
top: 0;
}