Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 34 additions & 4 deletions src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,48 @@ import React from 'react';
const Header = () => (
<div className=" fixed bg-backg flex h-full w-[20%]">
<div className=' flex flex-col ml-2 mt-2 rounded-3xl w-full h-[90%] bg-gradient-to-b from-fp to-bp'>
<div className='flex ml-5 mt-5'>
<div className='flex ml-5 mt-5 place-self-center '>
<div>
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">

<path d="M26.519 0H1.42516C1.04718 0 0.684676 0.150462 0.417407 0.418265C0.150138 0.686068 0 1.0493 0 1.42803V13.4004C0 13.7791 0.150138 14.1424 0.417407 14.4102C0.684676 14.678 1.04718 14.8284 1.42516 14.8284H6.57463V26.572C6.57463 26.9507 6.72477 27.3139 6.99204 27.5817C7.25931 27.8495 7.62181 28 7.99979 28H19.9483C20.1352 28 20.3204 27.963 20.4931 27.8912C20.6657 27.8194 20.8226 27.7141 20.9546 27.5815C21.0866 27.4488 21.1912 27.2914 21.2624 27.1182C21.3336 26.9449 21.37 26.7593 21.3695 26.572V14.8284H26.519C26.8969 14.8284 27.2594 14.678 27.5267 14.4102C27.794 14.1424 27.9441 13.7791 27.9441 13.4004V1.42803C27.9441 1.0493 27.794 0.686068 27.5267 0.418265C27.2594 0.150462 26.8969 0 26.519 0ZM1.6535 1.65681H13.1453V13.1716H1.6535V1.65681ZM19.7199 26.3432H8.22419V14.8284H19.7199V26.3432ZM26.2985 13.1716H14.7988V1.65681H26.2985V13.1716Z" fill="white"/>
<path d="M9.5532 8.77306C9.63078 8.84417 9.7228 8.90046 9.82399 8.9387C9.92518 8.97693 10.0336 8.99636 10.1429 8.99588C10.2517 8.99648 10.3595 8.97708 10.46 8.93883C10.5606 8.90058 10.6519 8.84422 10.7286 8.77306C10.8076 8.70165 10.8704 8.61641 10.9132 8.52233C10.956 8.42826 10.9781 8.32724 10.9781 8.2252C10.9781 8.12315 10.956 8.02215 10.9132 7.92808C10.8704 7.834 10.8076 7.74874 10.7286 7.67733L8.07695 5.23022C7.99957 5.15733 7.90721 5.09941 7.80527 5.05988C7.70333 5.02035 7.59386 5 7.48329 5C7.37272 5 7.26328 5.02035 7.16134 5.05988C7.0594 5.09941 6.96702 5.15733 6.88963 5.23022L4.23797 7.67733C4.08053 7.82263 3.99207 8.01971 3.99207 8.2252C3.99207 8.43068 4.08053 8.62776 4.23797 8.77306C4.39542 8.91836 4.60897 9 4.83163 9C5.0543 9 5.26784 8.91836 5.42529 8.77306L7.49122 6.8665L9.5532 8.77306Z" fill="white"/>
<path d="M18.3834 8.76997L20.4494 6.86497L22.5153 8.76997C22.5927 8.8428 22.6851 8.90067 22.787 8.94017C22.8889 8.97967 22.9984 9 23.109 9C23.2195 9 23.329 8.97967 23.431 8.94017C23.5329 8.90067 23.6252 8.8428 23.7026 8.76997C23.7816 8.69862 23.8444 8.61345 23.8872 8.51945C23.93 8.42545 23.9521 8.32451 23.9521 8.22256C23.9521 8.1206 23.93 8.01968 23.8872 7.92568C23.8444 7.83168 23.7816 7.7465 23.7026 7.67514L21.051 5.23003C20.9736 5.1572 20.8812 5.09933 20.7793 5.05983C20.6773 5.02033 20.5679 5 20.4573 5C20.3467 5 20.2373 5.02033 20.1353 5.05983C20.0334 5.09933 19.941 5.1572 19.8636 5.23003L17.212 7.67514C17.0545 7.82032 16.9661 8.01723 16.9661 8.22256C16.9661 8.42788 17.0545 8.62479 17.212 8.76997C17.3694 8.91516 17.583 8.99673 17.8056 8.99673C18.0283 8.99673 18.2418 8.91516 18.3993 8.76997H18.3834Z" fill="white"/>
<path d="M11.6178 19.2268C11.4379 19.0816 11.1939 19 10.9394 19C10.6849 19 10.4409 19.0816 10.261 19.2268C10.081 19.3721 9.97998 19.5691 9.97998 19.7745C9.97998 19.9799 10.081 20.1769 10.261 20.3221L13.2958 22.7683C13.3839 22.8416 13.4894 22.8999 13.6059 22.9397C13.7225 22.9795 13.8477 23 13.9742 23C14.1008 23 14.226 22.9795 14.3426 22.9397C14.4591 22.8999 14.5646 22.8416 14.6527 22.7683L17.683 20.3221C17.8629 20.1769 17.964 19.9799 17.964 19.7745C17.964 19.5691 17.8629 19.3721 17.683 19.2268C17.5031 19.0816 17.259 19 17.0046 19C16.7501 19 16.5061 19.0816 16.3261 19.2268L13.9788 21.1181L11.6178 19.2268Z" fill="white"/>
</svg>
</div>
<span className=' pl-2 text-white font-bold'>BB Lite</span>
</div>
<span className=' pl-2 text-white font-bold text-3xl'>BB Lite</span>
</div>
<div className=' mt-5 h-[1px] w-[80%] bg-white self-center'></div>
<div className='flex ml-5 mt-5'>
<div>
<svg width="25" height="25" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="7" height="10" rx="1" fill="white"/>
<rect y="11" width="7" height="5" rx="1" fill="white"/>
<rect x="16" y="16" width="7" height="10" rx="1" transform="rotate(-180 16 16)" fill="white"/>
<rect x="16" y="5" width="7" height="5" rx="1" transform="rotate(-180 16 5)" fill="white"/>
</svg>

</div>
<span className=' pl-2 text-white ml-2'>DASHBOARD</span>
</div>
<div className='flex ml-5 mt-5 h-[80%]'>
<div>
{/* <img className='invert'width="28" height="28" viewBox="0 0 28 28" fill="none" > */}
<img className='invert w-10 h-7 -ml-1' src="https://www.svgrepo.com/show/28378/book.svg" alt="fuck u" />
</div>
<span className=' pl-2 text-white '>COURSES</span>
</div>
<div className=' mt-5 h-[1px] w-[80%] bg-white self-center '></div>
<div className='flex ml-5 mt-5 mb-5'>
<div>
<svg width="25" height="25" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.33333 11.3333H4.66667V10H9.33333V11.3333ZM11.3333 8.66667H4.66667V7.33333H11.3333V8.66667ZM11.3333 6H4.66667V4.66667H11.3333V6ZM12.6667 2H3.33333C2.59333 2 2 2.59333 2 3.33333V12.6667C2 13.0203 2.14048 13.3594 2.39052 13.6095C2.64057 13.8595 2.97971 14 3.33333 14H12.6667C13.0203 14 13.3594 13.8595 13.6095 13.6095C13.8595 13.3594 14 13.0203 14 12.6667V3.33333C14 2.59333 13.4 2 12.6667 2Z" fill="white"/>
</svg>

</div>
<span className=' pl-2 text-white ml-2'>UPLOAD</span>
</div>
</div>
</div>
);
Expand Down
52 changes: 43 additions & 9 deletions src/components/Main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,55 @@ const Main = () => (
<div className=" bg-backg flex flex-col h-full w-full ">
<div className=' mt-10 ml-[21%] flex gap-7'>
<div className='flex flex-col place-items-center w-[30%] h-full bg-white rounded-3xl shadow-md shadow-slate-300'>
<img src="https://cdn.discordapp.com/attachments/941091409509896283/945618708330577950/giphy.gif" alt="" className='-mt-5 rounded-3xl w-[92%]'/>
<span className=' pt-4 w-[90%] text-sm font-bold'> ADVANCED PROBABILITY AND STATISTICS</span>
<img src="https://data.whicdn.com/images/170315655/original.gif" alt="" className='-mt-5 rounded-3xl w-[92%] h-[65%]'/>
<span className=' pt-4 w-[90%] text-base font-bold'> ADVANCED PROBABILITY AND STATISTICS</span>
<span className=' pb-5 pt-1 w-[90%] text-xs text-gray-300 font-bold'> 22E-20CST-283</span>
</div>
<div className='flex flex-col place-items-center w-[30%] h-full bg-white rounded-3xl shadow-md shadow-slate-300'>
<img src="https://cdn.discordapp.com/attachments/941091409509896283/945618708330577950/giphy.gif" alt="" className='-mt-5 rounded-3xl w-[92%]'/>
<span className=' pt-4 w-[90%] text-sm font-bold'> ADVANCED PROBABILITY AND STATISTICS</span>
<span className=' pb-5 pt-1 w-[90%] text-xs text-gray-300 font-bold'> 22E-20CST-283</span>
<img src="https://cdn.discordapp.com/attachments/941091409509896283/945618708330577950/giphy.gif" alt="" className='-mt-5 rounded-3xl w-[92%] h-[65%]'/>
<span className=' pt-4 w-[90%] text-base font-bold'> APTITUDE </span>
<span className=' pb-5 pt-1 w-[90%] text-xs text-gray-300 font-bold'>22E-20TDT-252</span>
</div>
<div className='flex flex-col place-items-center w-[30%] h-full bg-white rounded-3xl shadow-md shadow-slate-300'>
<img src="https://cdn.discordapp.com/attachments/941091409509896283/945618708330577950/giphy.gif" alt="" className='-mt-5 rounded-3xl w-[92%]'/>
<span className=' pt-4 w-[90%] text-sm font-bold'> ADVANCED PROBABILITY AND STATISTICS</span>
<span className=' pb-5 pt-1 w-[90%] text-xs text-gray-300 font-bold'> 22E-20CST-283</span>
<img src="https://c.tenor.com/_4YgA77ExHEAAAAC/rick-roll.gif" alt="" className='-mt-5 rounded-3xl w-[92%] h-[65%]'/>
<span className=' pt-4 w-[90%] text-base font-bold'> COMPUTER ORGANIZATION AND ARCHITECTURE </span>
<span className=' pb-5 pt-1 w-[90%] text-xs text-gray-300 font-bold'> 22E-20CST-281 </span>
</div>
</div>
<div className=' mt-10 ml-[21%] flex gap-7'>
<div className='flex flex-col place-items-center w-[30%] h-full bg-white rounded-3xl shadow-md shadow-slate-300'>
<img src="https://c.tenor.com/KLwoE6_9WMcAAAAC/anxiety-spongebob.gif" alt="" className='-mt-5 rounded-3xl w-[92%] h-[65%]'/>
<span className=' pt-4 w-[90%] text-base font-bold'> DESIGN AND ANALYSIS OF ALGORITHMS </span>
<span className=' pb-5 pt-1 w-[90%] text-xs text-gray-300 font-bold'> 22E-20CST-282 </span>
</div>
<div className='flex flex-col place-items-center w-[30%] h-full bg-white rounded-3xl shadow-md shadow-slate-300'>
<img src="https://compote.slate.com/images/697b023b-64a5-49a0-8059-27b963453fb1.gif" alt="" className='-mt-5 rounded-3xl w-[92%] h-[65%]'/>
<span className=' pt-4 w-[90%] text-base font-bold'> DESIGN AND ANALYSIS OF ALGORITHMS LAB </span>
<span className=' pb-5 pt-1 w-[90%] text-xs text-gray-300 font-bold'> 22E-20CSP-285 </span>
</div>
<div className='flex flex-col place-items-center w-[30%] h-full bg-white rounded-3xl shadow-md shadow-slate-300'>
<img src="https://www.wired.com/wp-content/uploads/2015/03/855.gif" alt="" className='-mt-5 rounded-3xl w-[92%] h-[65%]'/>
<span className=' pt-4 w-[90%] text-base font-bold'> INTRODUCTION TO DATA SCIENCE </span>
<span className=' pb-5 pt-1 w-[90%] text-xs text-gray-300 font-bold'> 22E-20CSF-284 </span>
</div>
</div>
<div className=' mt-10 ml-[21%] flex gap-7'>
<div className='flex flex-col place-items-center w-[30%] h-full bg-white rounded-3xl shadow-md shadow-slate-300'>
<img src="https://data.whicdn.com/images/271150390/original.gif" alt="" className='-mt-5 rounded-3xl w-[92%] h-[65%]'/>
<span className=' pt-4 w-[90%] text-base font-bold'> MACHINE LEARNING </span>
<span className=' pb-5 pt-1 w-[90%] text-xs text-gray-300 font-bold'> 22E-20CSF-286 </span>
</div>
<div className='flex flex-col place-items-center w-[30%] h-full bg-white rounded-3xl shadow-md shadow-slate-300'>
<img src="https://media.giphy.com/media/3o7TKWKHCUtXZXvj9K/giphy.gif" alt="" className='-mt-5 rounded-3xl w-[92%] h-[65%]'/>
<span className=' pt-4 w-[90%] text-base font-bold'> MACHINE LEARNING LAB </span>
<span className=' pb-5 pt-1 w-[90%] text-xs text-gray-300 font-bold'> 22E-20CSF-288 </span>
</div>
<div className='flex flex-col place-items-center w-[30%] h-full bg-white rounded-3xl shadow-md shadow-slate-300'>
<img src="https://learn.g2.com/hs-fs/hubfs/plan%20gif%20marketing%20strategy.gif?width=500&name=plan%20gif%20marketing%20strategy.gif" alt="" className='-mt-5 rounded-3xl w-[92%] h-[65%]'/>
<span className=' pt-4 w-[90%] text-base font-bold'> PROJECT BASED LEARNING IN JAVA LAB </span>
<span className=' pb-5 pt-1 w-[90%] text-xs text-gray-300 font-bold'> 22E-20CSP-287</span>
</div>
</div>
</div>
</div>
);

Expand Down