Skip to content

Commit

Permalink
Nasic UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@SH20RAJ
SH20RAJ committed Jun 10, 2024
1 parent b90bce3 commit a95afda
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 11 deletions.
101 changes: 97 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,114 @@
<header>
<nav>
<h1>SoftNotes</h1>

<div class="search">
<input type="search" name="search" placeholder="Search From Your Notes..." id="search"/>
</div>
</nav>
</header>

<main>
<section class="tags">

<h1>Tagged</h1>
<div class="taglist">
<div class="tag">JavaScript</div>
<div class="tag">HTML</div>
<div class="tag">PHP</div>
<div class="tag">Python</div>
<div class="tag">Java</div>
<div class="tag">C</div>
<div class="tag">C++</div>
<div class="tag">NextJS</div>
</div>
</section>
<section class="sidebar">
<div class="notes">

<div class="note">
<div class="notetitle">Sample App to create</div>
<div class="notefoot">
<div class="notetime">12 hours ago</div>
<div class="notetags">
<span>New</span>
<span>Programming</span>
</div>
</div>
</div>
<div class="note">
<div class="notetitle">Sample App to create</div>
<div class="notefoot">
<span class="notetime">12 hours ago</span>
<span class="notetags">
<span>New</span>
<span>Programming</span>
</span>
</div>
</div>
<div class="note">
<div class="notetitle">Sample App to create</div>
<div class="notefoot">
<div class="notetime">12 hours ago</div>
<div class="notetags">
<span>New</span>
<span>Programming</span>
</div>
</div>
</div>
<div class="note">
<div class="notetitle">Sample App to create</div>
<div class="notefoot">
<span class="notetime">12 hours ago</span>
<span class="notetags">
<span>New</span>
<span>Programming</span>
</span>
</div>
</div>
<div class="note">
<div class="notetitle">Sample App to create</div>
<div class="notefoot">
<div class="notetime">12 hours ago</div>
<div class="notetags">
<span>New</span>
<span>Programming</span>
</div>
</div>
</div>
<div class="note">
<div class="notetitle">Sample App to create</div>
<div class="notefoot">
<span class="notetime">12 hours ago</span>
<span class="notetags">
<span>New</span>
<span>Programming</span>
</span>
</div>
</div>
<div class="note">
<div class="notetitle">Sample App to create</div>
<div class="notefoot">
<div class="notetime">12 hours ago</div>
<div class="notetags">
<span>New</span>
<span>Programming</span>
</div>
</div>
</div>
<div class="note">
<div class="notetitle">Sample App to create</div>
<div class="notefoot">
<span class="notetime">12 hours ago</span>
<span class="notetags">
<span>New</span>
<span>Programming</span>
</span>
</div>
</div>
</div>
</section>
</section>
<section class="container">
<!-- Note Preview Here -->
<div class="note">
<div id="note" class="note">
Your Note Here
</div>
</section>
Expand Down
125 changes: 118 additions & 7 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,39 @@
}

:root {
--theme : rgb(228, 174, 246);
--themetext : pink;
--theme : white;
--themetext : rgb(26, 83, 173);
}

body {
overflow: hidden;
font-family: Poppins;
font-family: Poppins, sans-serif;
}

nav {
background: var(--theme);
padding: 20px;

display: flex;
align-items: center;
gap: 10px;

}


nav #search {
width: 400px;
height: 30px;
padding: 10px;
font-size: larger;
}

main {
display: flex;
border: 2px solid;
min-height: 100vh;
}

section {
background: var(--theme);
width: 100%;
border: 2px solid black;
}
Expand All @@ -43,13 +51,116 @@ section {
}
.sidebar {
width: 60%;
background: var(--theme);
}

.container {
/* width: 50%; */
background: var(--theme);
flex-grow: 1;

}

.tags h1 {
padding: 20px;
}

.taglist {
display: flex;
overflow: auto;
flex-direction: column;
/* gap: 4px; */
margin: 0 0 0 4px;
}


.tag {
background-color: white;
padding: 10px;
font-size: larger;
border: .4px solid;
cursor: pointer;
}

.tag:hover {
background: pink;
backdrop-filter: blur(25px);
}

.notes {
display: flex;
flex-direction: column;
}

.note {
border: 1px solid;
padding: 8px;
cursor: pointer;
/* border-radius: 20px ; */
margin: 4px;
transition: all .1s ease ;

}

#note {
min-height: 100vh;

}

.note:hover {
scale: 1.002;
margin: 10px;
border: 1px solid palevioletred;
background: transparent;
}

.notetitle {
/* font-weight: 800; */
font-size: larger;
color: var(--themetext);

}

.notetitlwe:hover {
color: var(--theme);
background: var(--themetext);
text-align: center;
width: 100%;
/* display: inline; */
}

.notefoot {
font-size: small;
display: flex;
justify-content: space-between;
}

.notetags {
display: flex;
flex-grow: 1;
flex-direction: row;
justify-content: space-around;
font-weight: bolder;
}

.notetags span {
display: inline-block;
background-color: rgba(139, 223, 238, 0.739);
padding: 4px;
border-radius: 20px;
max-height: max-content;

}

.notetime {

}

.notetags {

}




/* Media Queries */


0 comments on commit a95afda

Please sign in to comment.