Forwarded from Learn CSS™
Telegraph
Create a Gradient Border
Trick to Create a Gradient Border 😜 This is pretty easy. It will just take 5 minutes😄 STEP 1: - Create your element around which you want to create gradient border In this example I have a sqaure around which I'll create gradient border STEP 2: - Create pseudo…
This media is not supported in your browser
VIEW IN TELEGRAM
I created a minimal card design using CSS have a look😅
Learn JavaScript™
I created a minimal card design using CSS have a look😅
If you guys want to try
Check the code below👇
HTML:
Check the code below👇
HTML:
<div class="container">
<div class="content">
<h1>LEARN JAVASCRIPT</h1>
<h3>All info and tutorial of JAVA SCRIPT (JS)</h3>
</div>
<div class="flap"></div>
</div>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;900&display=swap');
body {
background: #f2f2f2;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 600px;
background: #f2f2f2;
overflow: hidden;
border-radius: 20px;
cursor: pointer;
box-shadow: 0 0 20px 8px #d0d0d0;
}
.content {
position: absolute;
top: 50%;
transform: translatey(-50%);
text-align: justify;
color: black;
padding: 40px;
font-family: 'Merriweather', serif;
}
h1 {
font-weight: 900;
text-align: center;
}
h3 {
font-weight: 300;
}
.flap {
width: 100%;
height: 100%;
}
.flap::before {
position: absolute;
content: "";
height: 100%;
width: 50%;
background: url("https://pbs.twimg.com/profile_images/1347537601989730307/QDQ0IZXv_400x400.jpg") white;
background-position: 100px;
background-repeat: no-repeat;
transition: 1s;
}
.flap::after {
position: absolute;
content: "";
height: 100%;
width: 50%;
right: 0;
background: url("https://pbs.twimg.com/profile_images/1347537601989730307/QDQ0IZXv_400x400.jpg") white;
background-position: -200px;
background-repeat: no-repeat;
transition: 1s;
}
.container:hover .flap::after {
transform: translatex(300px);
}
.container:hover .flap::before{
transform: translatex(-300px);
}✨Build real application to learn any coding skill✨
Want to learn JavaScript?
Build application using JavaScript
Want to learn React?
Build application using React
Want to learn NodeJS?
Build application using NodeJS
🔥Practice beats theory every time🔥
Want to learn JavaScript?
Build application using JavaScript
Want to learn React?
Build application using React
Want to learn NodeJS?
Build application using NodeJS
🔥Practice beats theory every time🔥
✨5 Coding Projects You Should Include in Your Front End Portfolio✨
https://telegra.ph/5-Coding-Projects-You-Should-Include-in-Your-Front-End-Portfolio-02-09
https://telegra.ph/5-Coding-Projects-You-Should-Include-in-Your-Front-End-Portfolio-02-09
Telegraph
5 Coding Projects You Should Include in Your Front End Portfolio
A portfolio is a great way to show off your skills to potential employers. And it's especially helpful for entry-level developers who might not have any professional work experience. However, a common problem you might have when building a portfolio is knowing…
Forwarded from Programming World👨💻 (☠️Anonymus Venom☠️)
Coding block all courses 👇
Size ( 98 GB )
Source download MEGA LINK 🖇️ :
https://mega.nz/folder/tNR3iCDa#60KInLA1y9UpCghsseMk4w
Size ( 98 GB )
Source download MEGA LINK 🖇️ :
https://mega.nz/folder/tNR3iCDa#60KInLA1y9UpCghsseMk4w
Learn JavaScript™ pinned «✨5 Coding Projects You Should Include in Your Front End Portfolio✨ https://telegra.ph/5-Coding-Projects-You-Should-Include-in-Your-Front-End-Portfolio-02-09»
Do you need any handwritten notes on JS?
Anonymous Poll
79%
Yes it will be helpful
21%
Nah, content will be available in internet
✨Looking for icons for your web page? Then have a look on the mentioned websites✨
👇👇👇
🔹Icons8
🔹Captain Icon
🔹Iconmonstr
🔹Linear Icons
🔹Pixeden
🔹Perfect Icons
🔹Font Awesome
🔹flaticon
🔹Fontello
🔹The Noun Project
🔹Endless Icons
🔹Round Icons
🔹Iconfinder
🔹Freeicons
🔹Icon-icons
🔹Findicons
👇👇👇
🔹Icons8
🔹Captain Icon
🔹Iconmonstr
🔹Linear Icons
🔹Pixeden
🔹Perfect Icons
🔹Font Awesome
🔹flaticon
🔹Fontello
🔹The Noun Project
🔹Endless Icons
🔹Round Icons
🔹Iconfinder
🔹Freeicons
🔹Icon-icons
🔹Findicons
✨Need to visualize data on your web page? ✨
These libraries can help
👇👇👇
🔸Chart.js
🔹D3.js
🔸React-vis
🔹Three.js
🔸Victory
🔹Chartkick
🔸Google Charts
🔹Flexmonster
🔸ApexCharts
🔹Echarts
🔸Frappe Charts
🔹ReCharts
🔶️ Highcharts.js
These libraries can help
👇👇👇
🔸Chart.js
🔹D3.js
🔸React-vis
🔹Three.js
🔸Victory
🔹Chartkick
🔸Google Charts
🔹Flexmonster
🔸ApexCharts
🔹Echarts
🔸Frappe Charts
🔹ReCharts
🔶️ Highcharts.js
Learn JavaScript™ pinned «✨Need to visualize data on your web page? ✨ These libraries can help 👇👇👇 🔸Chart.js 🔹D3.js 🔸React-vis 🔹Three.js 🔸Victory 🔹Chartkick 🔸Google Charts 🔹Flexmonster 🔸ApexCharts 🔹Echarts 🔸Frappe Charts 🔹ReCharts 🔶️ Highcharts.js»
✨Pick a right color for your next project from here✨
👇👇👇
🔹Colorhunt
🔸Paletton
🔹Design Seeds
🔸Coolors
🔹Bootflat
🔸0 to 255
🔹uiGradients
🔸BrandColors
🔹Image color picker
🔸Colour Lovers
🔹WebGradients
🔸Egg gradient
🔹Gradient Hunt
🔸Color-hex
👇👇👇
🔹Colorhunt
🔸Paletton
🔹Design Seeds
🔸Coolors
🔹Bootflat
🔸0 to 255
🔹uiGradients
🔸BrandColors
🔹Image color picker
🔸Colour Lovers
🔹WebGradients
🔸Egg gradient
🔹Gradient Hunt
🔸Color-hex
✨Looking for free photos for your next project? ✨
Here are some sites that might be useful
👇👇👇
🔹Unsplash
🔸Pixabay
🔹PicJumbo
🔸IM Free
🔹Pexels
🔸Flickr
🔹Gratisography
🔸Stock Up
🔹Cupcake
🔸Adobe Stock
🔹Icons8
🔸Rgbstock
🔹Pikwizard
🔸Stocksnap
🔹Shutterstock
🔸Freestocks
Here are some sites that might be useful
👇👇👇
🔹Unsplash
🔸Pixabay
🔹PicJumbo
🔸IM Free
🔹Pexels
🔸Flickr
🔹Gratisography
🔸Stock Up
🔹Cupcake
🔸Adobe Stock
🔹Icons8
🔸Rgbstock
🔹Pikwizard
🔸Stocksnap
🔹Shutterstock
🔸Freestocks
Some amazing backgrounds and texture for your next project
👇👇👇
🔹Repeat-X Repeat-Y
🔹Texture King
🔹Pattern8
🔹Subtle Patterns
🔹Patternico
🔹BG Patterns
🔹Lost and Taken
🔹Freepik
🔹Cool backgrounds
🔹BG generator
🔹Canva
🔹Behance
🔹4kwallpapers
🔹Unsplash
🔹Wallpaperaccess
🔹Shutterstock
🔹Pexel
👇👇👇
🔹Repeat-X Repeat-Y
🔹Texture King
🔹Pattern8
🔹Subtle Patterns
🔹Patternico
🔹BG Patterns
🔹Lost and Taken
🔹Freepik
🔹Cool backgrounds
🔹BG generator
🔹Canva
🔹Behance
🔹4kwallpapers
🔹Unsplash
🔹Wallpaperaccess
🔹Shutterstock
🔹Pexel