Skip to content

Commit f061531

Browse files
mooniiDevmooniiDev
committed
Improve side form style, add color palette
1 parent 8e3013b commit f061531

File tree

2 files changed

+153
-28
lines changed

2 files changed

+153
-28
lines changed

‎css/styles.css‎

Lines changed: 121 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,59 +3,162 @@
33
font-family: "Montserrat-Regular";
44
src: url("../fonts/Montserrat-Regular.ttf");
55
}
6-
/* FONT FOR H1 TEXT */
6+
/* FONT FOR H1 (LOGO) TEXT */
77
@font-face {
88
font-family: "MarcellusSC-Regular";
99
src: url("../fonts/MarcellusSC-Regular.ttf");
1010
}
11-
1211
#content {
1312
display: flex;
1413
height: 100vh;
1514
font-family: "Montserrat-Regular", Arial, Helvetica, sans-serif;
15+
color: #1F3E59;
1616
}
1717

1818
/* SIDE FORM STYLE */
1919
#side-form {
2020
display: flex;
2121
flex-direction: column;
22+
width: 360px;
2223
padding: 30px;
23-
background-color: rgb(212, 212, 212);
24+
background-color: #E9C1AF;
25+
}
26+
27+
/* COLOR FOR LIBRARY LOGO */
28+
.theme-books {
29+
--fa-secondary-color: #F7F1F0;
30+
--fa-secondary-opacity: 1.0;
2431
}
25-
h1 {
32+
#logo {
2633
margin: 0 0 40px 0;
2734
font-family: "MarcellusSC-Regular", "Times New Roman", Georgia, Serif;
2835
font-size: 55px;
36+
color: #1F3E59;
2937
text-align: center;
3038
}
31-
input {
32-
width: 315px;
39+
40+
#name,
41+
#title,
42+
#number {
43+
width: 100%;
3344
margin-bottom: 15px;
45+
padding: 15px 0 5px 0;
46+
background-color: #E9C1AF;
47+
border: none;
48+
border-bottom: 2px dotted #1F3E59;
49+
color: #1F3E59;
50+
}
51+
#name:focus,
52+
#title:focus,
53+
#number:focus {
54+
outline: none;
55+
}
56+
57+
/* STYLE FOR FLOATING INPUT PLACEHOLDER */
58+
div.input-block {
59+
position: relative;
60+
}
61+
div.input-block span.placeholder {
62+
position: absolute;
63+
margin: 17px 0;
64+
left: 0px;
65+
transition: all 0.2s;
66+
transform-origin: 0% 0%;
67+
pointer-events: none;
68+
}
69+
div.input-block input:valid + span.placeholder,
70+
div.input-block input:focus + span.placeholder {
71+
transform: scale(0.8) translateY(-30px);
72+
}
73+
div.input-block input:focus {
74+
border-bottom: 2px dotted #F7F1F0 !important;
75+
}
76+
77+
/* STYLE FOR NUMBER INPUT */
78+
/* Chrome, Safari, Edge, Opera */
79+
input::-webkit-outer-spin-button,
80+
input::-webkit-inner-spin-button {
81+
-webkit-appearance: none;
82+
margin: 0;
3483
}
35-
#book-status {
36-
width: 15px;
37-
margin-right: 5px;
84+
/* Firefox */
85+
input[type=number] {
86+
-moz-appearance: textfield;
3887
}
39-
/* BUTTON STYLE */
88+
89+
/* STYLE FOR CHECKBOX INPUT */
90+
.checkbox {
91+
display: grid;
92+
grid-template-columns: min-content auto;
93+
grid-gap: 5px;
94+
margin: 20px 0;
95+
}
96+
.checkbox-input input {
97+
opacity: 0;
98+
width: 1em;
99+
height: 1em;
100+
}
101+
.checkbox-control {
102+
display: inline-grid;
103+
align-self: center;
104+
width: 1em;
105+
height: 1em;
106+
border: 1px solid;
107+
border-radius: 2px;
108+
}
109+
.checkbox-input {
110+
display: grid;
111+
grid-template-areas: "checkbox";
112+
}
113+
.checkbox-input > * {
114+
grid-area: checkbox;
115+
}
116+
.checkbox-control svg {
117+
opacity: 0;
118+
}
119+
.checkbox-input input:checked
120+
+ .checkbox-control svg {
121+
opacity: 1;
122+
background-color: #1F3E59;
123+
color: #F7F1F0;
124+
}
125+
126+
/* STYLE FOR 'ADD BOOK' BUTTON */
40127
#add-book {
41-
width: 210px;
128+
width: 200px;
42129
height: 50px;
43-
margin-bottom: 25px;
130+
margin-top: 15px;
131+
border: 1px solid #1F3E59;
132+
border-radius: 2px;
133+
background-color: #1F3E59;
134+
color: #F7F1F0;
135+
transition: 0.5s;
136+
}
137+
#add-book:hover {
138+
cursor: pointer;
139+
background-color: #1a3246;
140+
transition: 0.5s;
44141
}
45-
footer {
142+
143+
#footer {
46144
position: absolute;
47145
align-self: center;
48146
bottom: 30px;
49147
}
148+
#footer a {
149+
text-decoration: none;
150+
color: #1F3E59;
151+
font-weight: 900;
152+
}
50153

51154
/* BOOKS LIST STYLE */
52155
#library-content {
53156
display: flex;
54157
align-items: center;
55158
flex-direction: column;
56-
width: 100%;
159+
width: calc(100% - 360px);
57160
padding: 30px;
58-
background-color: rgb(238, 238, 238);
161+
background-color: #F7F1F0;
59162
}
60163
#library-info {
61164
width: 50%;
@@ -67,13 +170,13 @@ footer {
67170
}
68171
#books-list {
69172
width: 70%;
70-
border-top: 1px solid black;
71-
border-bottom: 1px solid black;
173+
border-top: 2px dotted #1F3E59;
174+
border-bottom: 2px dotted #1F3E59;
72175
border-collapse: collapse;
73176
}
74177
td {
75178
padding: 20px;
76179
}
77180
.book-info {
78-
border-top: 1px solid black;
181+
border-top: 2px dotted #1F3E59;
79182
}

‎index.html‎

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,42 @@
1515
<body id="content">
1616
<div id="side-form">
1717
<header>
18-
<h1><i class="fad fa-books"></i> Library</i></h1>
18+
<h1 id="logo"><i class="fad fa-books theme-books"></i> Library</i></h1>
1919
</header>
2020
<form>
21-
<input type="text" id="name" name="name" placeholder="Who is the author of the book?" required><br>
22-
<input type="text" id="title" name="title" placeholder="What is the title of the book?" required><br>
23-
<input type="number" id="number" name="number" min="1" placeholder="How many pages are in the book?" required><br>
24-
<label>
25-
<input type="checkbox" id="book-status" name="book-status" value="read">I have already read this book!
26-
</label><br>
27-
<button id="add-book">ADD A NEW BOOK</button><br>
21+
<div class="input-block">
22+
<input type="text" name="name" id="name" required>
23+
<span class="placeholder">
24+
Who is the author of the book?
25+
</span>
26+
</div>
27+
<div class="input-block">
28+
<input type="text" name="title" id="title" required>
29+
<span class="placeholder">
30+
What is the title of the book?
31+
</span>
32+
</div>
33+
<div class="input-block">
34+
<input type="number" id="number" name="number" min="1" required>
35+
<span class="placeholder">
36+
How many pages are in the book?
37+
</span>
38+
</div>
39+
<label class="checkbox">
40+
<span class="checkbox-input">
41+
<input type="checkbox" name="checkbox">
42+
<span class="checkbox-control">
43+
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden="true" focusable="false">
44+
<path fill='none' stroke='currentColor' stroke-width='3' d='M1.73 12.91l6.37 6.37L22.79 4.59'></svg>
45+
</span>
46+
</span>
47+
<span class="checkbox-label">I have already read this book!</span>
48+
</label>
49+
<input type="submit" value="ADD A NEW BOOK" id="add-book">
2850
</form>
29-
<footer>
51+
<footer id="footer">
3052
<p> ☽ Crafted by
31-
<a href="https://github.com/mooniiDev" target="_blank">mooniiDev</a> |
53+
<a href="https://github.com/mooniiDev" target="_blank" >mooniiDev</a> |
3254
<a href="https://github.com/mooniiDev/library" target="_blank">Source</a> ☾
3355
</p>
3456
</footer>

0 commit comments

Comments
 (0)