├── Exercises
    ├── Ex13
    │   ├── desktop.layout.css
    │   ├── mobile.layout.css
    │   └── index.html
    ├── Ex08
    │   ├── styles.css
    │   └── index.html
    ├── Ex09
    │   ├── styles.css
    │   └── index.html
    ├── Ex14
    │   ├── mobile.layout.css
    │   ├── desktop.layout.css
    │   └── index.html
    ├── Ex12
    │   ├── styles.css
    │   └── index.html
    ├── Ex01
    │   ├── styles.css
    │   └── index.html
    ├── Ex03
    │   ├── styles.css
    │   └── index.html
    ├── Ex04
    │   ├── styles.css
    │   └── index.html
    ├── Ex02
    │   ├── styles.css
    │   └── index.html
    ├── Ex05
    │   ├── styles.css
    │   └── index.html
    ├── Ex06
    │   ├── styles.css
    │   └── index.html
    ├── Ex07
    │   ├── styles.css
    │   └── index.html
    ├── Ex16
    │   ├── styles.css
    │   └── index.html
    ├── Ex10
    │   ├── styles.css
    │   └── index.html
    ├── Ex11
    │   ├── styles.css
    │   └── index.html
    ├── Ex17
    │   ├── styles.css
    │   └── index.html
    ├── Ex15
    │   ├── styles.css
    │   └── index.html
    └── README.md
├── FrontendDesigns
    ├── Twitter
    │   ├── demo
    │   │   └── Twitter.mp4
    │   ├── README.md
    │   ├── images
    │   │   └── icons8-twitter.svg
    │   ├── styles
    │   │   ├── normal.layout.css
    │   │   └── desktop.layout.css
    │   └── index.html
    ├── launch-countdown-timer-main
    │   ├── design
    │   │   ├── active-states.jpg
    │   │   ├── desktop-design.jpg
    │   │   ├── desktop-preview.jpg
    │   │   └── mobile-design.jpg
    │   ├── images
    │   │   ├── favicon-32x32.png
    │   │   ├── icon-facebook.svg
    │   │   ├── pattern-hills.svg
    │   │   ├── icon-pinterest.svg
    │   │   ├── icon-instagram.svg
    │   │   └── bg-stars.svg
    │   ├── .gitignore
    │   ├── style-guide.md
    │   ├── index.html
    │   ├── styles.css
    │   └── README.md
    ├── Docsite
    │   ├── styles.css
    │   └── index.html
    └── Blog
    │   ├── mobile.layout.css
    │   ├── desktop.layout.css
    │   └── index.html
├── README.md
└── CONTRIBUTING.md


/Exercises/Ex13/desktop.layout.css:
--------------------------------------------------------------------------------
1 | body{
2 |     background-color: yellow;
3 | }


--------------------------------------------------------------------------------
/Exercises/Ex08/styles.css:
--------------------------------------------------------------------------------
1 | .superscript{
2 |     font-size:0.5em;
3 |     position: relative;
4 |     bottom:0.4rem;
5 | }


--------------------------------------------------------------------------------
/FrontendDesigns/Twitter/demo/Twitter.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codesONLY/cssONLY/HEAD/FrontendDesigns/Twitter/demo/Twitter.mp4


--------------------------------------------------------------------------------
/Exercises/Ex13/mobile.layout.css:
--------------------------------------------------------------------------------
1 | @media only screen and (min-width: 640px){
2 |     body{
3 |     background-color: transparent;
4 |     }
5 | }


--------------------------------------------------------------------------------
/Exercises/Ex09/styles.css:
--------------------------------------------------------------------------------
1 | .snackbar{
2 |     position: fixed;
3 |     right:1rem;
4 |     bottom:1rem;
5 |     padding:0.5rem;
6 |     border: solid 1px;
7 | }


--------------------------------------------------------------------------------
/Exercises/Ex14/mobile.layout.css:
--------------------------------------------------------------------------------
1 | @media only screen and (max-width:768px){
2 |     .grid{
3 |         display: grid;
4 |         grid-template-rows: 1fr 1fr 1fr; 
5 |     }
6 |     
7 | }


--------------------------------------------------------------------------------
/Exercises/Ex12/styles.css:
--------------------------------------------------------------------------------
1 | .grid{
2 |     display: grid;
3 |     grid-template-columns: 1rem 1rem 1rem;
4 |     /* grid-template-rows: 1rem 1rem 1rem; */
5 |     grid-column-gap: 0.5rem;
6 | }


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/design/active-states.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codesONLY/cssONLY/HEAD/FrontendDesigns/launch-countdown-timer-main/design/active-states.jpg


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/design/desktop-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codesONLY/cssONLY/HEAD/FrontendDesigns/launch-countdown-timer-main/design/desktop-design.jpg


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/design/desktop-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codesONLY/cssONLY/HEAD/FrontendDesigns/launch-countdown-timer-main/design/desktop-preview.jpg


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/design/mobile-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codesONLY/cssONLY/HEAD/FrontendDesigns/launch-countdown-timer-main/design/mobile-design.jpg


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codesONLY/cssONLY/HEAD/FrontendDesigns/launch-countdown-timer-main/images/favicon-32x32.png


--------------------------------------------------------------------------------
/Exercises/Ex01/styles.css:
--------------------------------------------------------------------------------
 1 | .row{
 2 |     display:flex;
 3 |     width:400px;
 4 |     height: 300px;
 5 |   }
 6 |   
 7 |   .row > div{
 8 |     margin:1rem;
 9 |     width: 100px;
10 |     height: 100px;
11 |     border: 1px solid;
12 |     
13 |   }


--------------------------------------------------------------------------------
/Exercises/Ex03/styles.css:
--------------------------------------------------------------------------------
 1 |   .card{
 2 |     width:300px;
 3 |     height: 300px;
 4 |     margin: auto;
 5 |     display: flex;
 6 |     flex-direction: column;
 7 |     justify-content: center;
 8 |     border: 1px solid;
 9 |     padding: 2%;
10 |   }


--------------------------------------------------------------------------------
/Exercises/Ex04/styles.css:
--------------------------------------------------------------------------------
 1 | .card{
 2 |     width:300px;
 3 |     height: 300px;
 4 |     margin: auto;
 5 |     display: flex;
 6 |     flex-direction: column;
 7 |     justify-content: space-between;
 8 |     border: 1px solid;
 9 |     padding: 2%;
10 |   }
11 | 


--------------------------------------------------------------------------------
/Exercises/Ex02/styles.css:
--------------------------------------------------------------------------------
 1 | .row{
 2 |     display:flex;
 3 |     width:400px;
 4 |     height: 300px;
 5 |   }
 6 |   
 7 |   .row > div{
 8 |     margin:1rem;
 9 |     width: 100px;
10 |     height: 100px;
11 |     border: 1px solid;
12 |     
13 |   }
14 | 
15 |   .third{
16 |     align-self: flex-end;
17 |   }
18 |   


--------------------------------------------------------------------------------
/Exercises/Ex05/styles.css:
--------------------------------------------------------------------------------
 1 | .card{
 2 |     width:300px;
 3 |     height: 500px;
 4 |     margin: auto;
 5 |     display: flex;
 6 |     flex-direction: column;
 7 |     justify-content: space-between;
 8 |     border: 1px solid;
 9 |     padding: 2%;
10 |   }
11 | 
12 |   .card > p{
13 |       flex-grow:1;
14 |   }
15 | 


--------------------------------------------------------------------------------
/FrontendDesigns/Twitter/README.md:
--------------------------------------------------------------------------------
1 | # Twitter Desktop Layout
2 | 
3 | ![video-to-gif-converter](https://user-images.githubusercontent.com/47717492/110624756-a2cf4d80-81c4-11eb-8392-71410ec2dd20.gif)
4 | 
5 | Download/View the demo video from [here](https://github.com/sohamsshah/cssONLY/blob/main/FrontendDesigns/Twitter/demo/Twitter.mp4)
6 | 


--------------------------------------------------------------------------------
/Exercises/Ex06/styles.css:
--------------------------------------------------------------------------------
 1 | .card {
 2 |     max-width: 300px;
 3 |     min-height: 500px;
 4 |     margin: auto;
 5 |     display: flex;
 6 |     flex-direction: column;
 7 |     justify-content: space-between;
 8 |     border: 1px solid;
 9 |     padding: 2%;
10 | }
11 | 
12 | .card>p {
13 |     flex-grow: 1;
14 | }
15 | 
16 | .thumbnail{
17 |     width:100%;
18 |     height:100%;
19 | }
20 | 


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/images/icon-facebook.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#8385A9" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg>


--------------------------------------------------------------------------------
/Exercises/Ex13/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercise 13</title>
 8 |     <link rel="stylesheet" href="desktop.layout.css">
 9 |     <link rel="stylesheet" href="mobile.layout.css">
10 | </head>
11 | <body>
12 |     <h1> Exercise 13</h1>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Exercises/Ex07/styles.css:
--------------------------------------------------------------------------------
 1 | .row{
 2 |     display:flex;
 3 |     justify-content: space-around;
 4 |     flex-wrap: wrap;
 5 | }
 6 | .card {
 7 |     max-width: 300px;
 8 |     min-height: 500px;
 9 |     margin: auto;
10 |     display: flex;
11 |     flex-direction: column;
12 |     justify-content: space-between;
13 |     border: 1px solid;
14 |     padding: 2%;
15 | }
16 | 
17 | .card>p {
18 |     flex-grow: 1;
19 | }
20 | 
21 | .thumbnail{
22 |     width:100%;
23 |     height:100%;
24 | }


--------------------------------------------------------------------------------
/Exercises/Ex14/desktop.layout.css:
--------------------------------------------------------------------------------
 1 | .grid{
 2 |     display: grid;
 3 |     grid-template-columns: 1fr 1fr 1fr;
 4 | }
 5 | 
 6 | .card {
 7 |     max-width: 300px;
 8 |     min-height: 500px;
 9 |     margin: auto;
10 |     display: flex;
11 |     flex-direction: column;
12 |     justify-content: space-between;
13 |     border: 1px solid;
14 |     padding: 2%;
15 | }
16 | 
17 | .card>p {
18 |     flex-grow: 1;
19 | }
20 | 
21 | .thumbnail{
22 |     width:100%;
23 |     height:100%;
24 | }
25 | 


--------------------------------------------------------------------------------
/Exercises/Ex16/styles.css:
--------------------------------------------------------------------------------
 1 | .floating-action-button{
 2 |     position: fixed;
 3 |     bottom:10px;
 4 |     right:10px;
 5 |     height: 50px;
 6 |     width: 50px;
 7 |     border-radius: 50%;
 8 |     font-size: 2rem;
 9 |     background:#074494;
10 |     color: white;
11 |     outline: none;
12 |     border: none;
13 |     
14 | 
15 | }
16 | 
17 | .floating-action-button:hover {
18 |     background:#30588e;
19 |     color: white;
20 |   }
21 | 
22 | .floating-action-button:focus{outline:none;}


--------------------------------------------------------------------------------
/Exercises/Ex08/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 08</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <h1> Exercise 08 </h1>
15 |     
16 |     <h2> Base <span class="superscript">(index)</span></h2>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/Exercises/Ex09/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 09</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <h1> Exercise 09 </h1>
15 |     
16 |     <div class="snackbar"> You have unread emails. This is a notification</div>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/Exercises/Ex12/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercise 12</title>
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | <body>
11 |     <h1>Exercise 12</h1>
12 |     <div class="grid">
13 |         <div>1</div>
14 |         <div>2</div>
15 |         <div>3</div>
16 |     </div>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Exercises/Ex16/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="styles.css">
 8 |     <title>Exercise 16</title>
 9 | </head>
10 | <body>
11 |     <h1>Exercise 16</h1>
12 |     <p>Floating Action Button </p>
13 |     
14 |     <button class="floating-action-button"> + </button>
15 |     
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Exercises/Ex10/styles.css:
--------------------------------------------------------------------------------
 1 | .card {
 2 |     max-width: 300px;
 3 |     min-height: 500px;
 4 |     margin: auto;
 5 |     display: flex;
 6 |     flex-direction: column;
 7 |     justify-content: space-between;
 8 |     border: 1px solid;
 9 |     padding: 2%;
10 | }
11 | 
12 | .card>p {
13 |     flex-grow: 1;
14 | }
15 | 
16 | .parent-thumbnail{
17 |     position: relative;
18 | }
19 | 
20 | .thumbnail{
21 |     width:100%;
22 |     height:100%;
23 | }
24 | 
25 | .close{
26 |     position:absolute;
27 |     top:0;
28 |     right:0; 
29 | }
30 | 


--------------------------------------------------------------------------------
/Exercises/Ex02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercise 02</title>
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | <body>
11 |     <h1> Exercise 02 </h1>
12 |     <div class="row">
13 |         <div class="first">1</div>
14 |         <div class="second">2</div>
15 |         <div class="third">3</div>
16 |     </div>
17 |     
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Exercises/Ex01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 01</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 |     <h1> Exercise 01 </h1>
14 |     <div class="row">
15 |         <div class="first">1</div>
16 |         <div class="second">2</div>
17 |         <div class="third">3</div>
18 |     </div>
19 | 
20 | </body>
21 | 
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Exercises/Ex11/styles.css:
--------------------------------------------------------------------------------
 1 | .card {
 2 |     max-width: 300px;
 3 |     min-height: 500px;
 4 |     margin: auto;
 5 |     display: flex;
 6 |     flex-direction: column;
 7 |     justify-content: space-between;
 8 |     border: 1px solid;
 9 |     padding: 2%;
10 | }
11 | 
12 | .card>p {
13 |     flex-grow: 1;
14 | }
15 | 
16 | .parent-thumbnail{
17 |     position: relative;
18 | }
19 | 
20 | .thumbnail{
21 |     width:100%;
22 |     height:100%;
23 | }
24 | 
25 | .close{
26 |     position:absolute;
27 |     top:0;
28 |     right:0; 
29 | }
30 | 
31 | .thumbnail-text{
32 |     position:absolute;
33 |     top:0;
34 |     left:0;
35 | }


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/.gitignore:
--------------------------------------------------------------------------------
 1 | # Avoid accidental upload of the Sketch and Figma design files
 2 | #####################################################
 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ##
 4 | #####################################################
 5 | *.sketch
 6 | *.fig
 7 | 
 8 | # Avoid accidental XD upload if you convert the design file
 9 | ###############################################
10 | ## Please do not remove line 12 - thanks! 🙂 ##
11 | ###############################################
12 | *.xd
13 | 
14 | # Avoid your project being littered with annoying .DS_Store files!
15 | .DS_Store
16 | .prettierignore


--------------------------------------------------------------------------------
/Exercises/Ex17/styles.css:
--------------------------------------------------------------------------------
 1 | .card {
 2 |     max-width: 300px;
 3 |     min-height: 500px;
 4 |     margin: auto;
 5 |     display: flex;
 6 |     flex-direction: column;
 7 |     justify-content: space-between;
 8 |     border: 1px solid;
 9 |     padding: 2%;
10 |     position: relative;
11 | }
12 | 
13 | .badge{
14 |     position: absolute;
15 |     top:10%;
16 |     left: 0;
17 |     width:100px;
18 |     background:coral;
19 |     text-align: center;
20 |     padding:0.5rem;
21 |     color: white;
22 | }
23 | 
24 | .card>p {
25 |     flex-grow: 1;
26 | }
27 | 
28 | .parent-thumbnail{
29 |     position: relative;
30 | }
31 | 
32 | .thumbnail{
33 |     width:100%;
34 |     height:100%;
35 | }
36 | 
37 | .close{
38 |     position:absolute;
39 |     top:0;
40 |     right:0; 
41 | }
42 | 


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/images/pattern-hills.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1440" height="197"><defs><path id="a" d="M0 0h1440v197H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><path fill="#211A29" d="M1440 50.205L1088.504 0 949.669 50.205 878 25.102 556 0 398.525 50.205l-95.807-25.103-51.328 16.761L45.704 0 0 17.701V160h1440z"/><path fill="#1A1823" d="M1394.296 1l94.649 69.336 50.047-49.449zM1137.282 42.576l51.328 27.76 80.6-5.426zM884 1l157.475 83.151 80.929-26.062zM351.496 1l138.835 83.151 49.321-28.526z"/><path fill="#2F2439" d="M0 84.151L351.496 1l138.835 83.151L562 42.576 884 1l157.475 83.151 95.807-41.575 51.328 27.76L1394.296 1 1440 30.317V266H0z"/></g></g></svg>


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/images/icon-pinterest.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#8385A9" d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"/></svg>


--------------------------------------------------------------------------------
/FrontendDesigns/Docsite/styles.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color: #eee;
 3 |     margin:0;
 4 | }
 5 | .container{
 6 |     display: grid;
 7 |     height:100vh;
 8 |     width:100vw;
 9 |     grid-template-areas: 
10 |     'heading heading heading heading heading heading'
11 |     'sidebar content content content content content';
12 |     grid-template-rows: 10% auto;
13 |     grid-template-columns: 15% 85%;
14 | }
15 | 
16 | .heading{
17 |     grid-area: heading;
18 |     border-bottom:solid 2px;
19 |     padding:1rem;
20 | }
21 | 
22 | .sidebar{
23 |     grid-area:sidebar;
24 |     border-right:solid 2px;
25 |     padding:1rem;
26 | }
27 | 
28 | .content{
29 |     grid-area:content;
30 |     padding: 2rem 5rem;
31 | 
32 | }
33 | 
34 | .heading > span{
35 |     font-size: 1.5rem;
36 |     font-weight: bold;
37 | }
38 | 
39 | /* .footer{
40 |     grid-area: footer;
41 |     border-top: solid 1px;
42 | } */


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/images/icon-instagram.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#8385A9" d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/style-guide.md:
--------------------------------------------------------------------------------
 1 | # Front-end Style Guide
 2 | 
 3 | ## Layout
 4 | 
 5 | The designs were created to the following widths:
 6 | 
 7 | - Mobile: 375px
 8 | - Desktop: 1440px
 9 | 
10 | ## Colors
11 | 
12 | ### Primary
13 | 
14 | - Grayish blue: hsl(237, 18%, 59%)
15 | - Soft red: hsl(345, 95%, 68%)
16 | 
17 | ### Neutral
18 | 
19 | - White: hsl(0, 0%, 100%)
20 | - Dark desaturated blue: hsl(236, 21%, 26%)
21 | - Very dark blue: hsl(235, 16%, 14%)
22 | - Very dark (mostly black) blue: hsl(234, 17%, 12%)
23 | 
24 | ## Typography
25 | 
26 | ### Body Copy
27 | 
28 | - Font size: 14px
29 | 
30 | ### Font
31 | 
32 | - Family: [Red Hat Text](https://fonts.google.com/specimen/Red+Hat+Text)
33 | - Weights: 700
34 | 
35 | ## Icons
36 | 
37 | We provide the required social icons. But, if you prefer, you can use a font icon library. Some suggestions can be found below:
38 | 
39 | - [Font Awesome](https://fontawesome.com)
40 | - [IcoMoon](https://icomoon.io)
41 | - [Ionicons](https://ionicons.com)


--------------------------------------------------------------------------------
/Exercises/Ex15/styles.css:
--------------------------------------------------------------------------------
 1 | .modal {
 2 |     display: none; /* Hidden by default */
 3 |     position: fixed; /* Stay in place */
 4 |     z-index: 1; /* Sit on top */
 5 |     padding-top: 100px; /* Location of the box */
 6 |     left: 0;
 7 |     top: 0;
 8 |     width: 100%; /* Full width */
 9 |     height: 100%; /* Full height */
10 |     overflow: auto; /* Enable scroll if needed */
11 |     background-color: rgb(0,0,0); /* Fallback color */
12 |     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
13 |   }
14 |   
15 |   /* Modal Content */
16 |   .modal-content {
17 |     background-color: #fefefe;
18 |     margin: auto;
19 |     position: relative;
20 |     padding: 20px;
21 |     border: 1px solid #888;
22 |     width: 80%;
23 |   }
24 |   
25 |   /* The Close Button */
26 |   .close {
27 |     color: #aaaaaa;
28 |     font-size: 28px;
29 |     font-weight: bold;
30 |     position: absolute;
31 |     top:0;
32 |     right:4px;
33 |   }
34 |   
35 |   .close:hover,
36 |   .close:focus {
37 |     color: #000;
38 |     text-decoration: none;
39 |     cursor: pointer;
40 |   }


--------------------------------------------------------------------------------
/Exercises/Ex03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercise 03</title>
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | <body>
11 | 
12 |     <h1> Exercise 03 </h1>
13 |     <div class="card">
14 |         <div>
15 |             <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
16 |                 dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
17 |                 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
18 |                 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
19 |                 deserunt mollit anim id est laborum
20 |         </div>
21 |         </p>
22 |         <button> Hello World </button>
23 |     </div>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/Exercises/Ex04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercise 04</title>
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | <body>
11 | 
12 |     <h1> Exercise 04 </h1>
13 |     <div class="card">
14 |         <div>
15 |             <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
16 |                 dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
17 |                 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
18 |                 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
19 |                 deserunt mollit anim id est laborum
20 |         </div>
21 |         </p>
22 |         <button> Hello World </button>
23 |     </div>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/FrontendDesigns/Twitter/images/icons8-twitter.svg:
--------------------------------------------------------------------------------
1 | <svg fill="#fff" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px"><path d="M 24 4.300781 C 23.101563 4.699219 22.199219 5 21.199219 5.101563 C 22.199219 4.5 23 3.5 23.398438 2.398438 C 22.398438 3 21.398438 3.398438 20.300781 3.601563 C 19.300781 2.601563 18 2 16.601563 2 C 13.898438 2 11.699219 4.199219 11.699219 6.898438 C 11.699219 7.300781 11.699219 7.699219 11.800781 8 C 7.699219 7.800781 4.101563 5.898438 1.699219 2.898438 C 1.199219 3.601563 1 4.5 1 5.398438 C 1 7.101563 1.898438 8.601563 3.199219 9.5 C 2.398438 9.398438 1.601563 9.199219 1 8.898438 C 1 8.898438 1 8.898438 1 9 C 1 11.398438 2.699219 13.398438 4.898438 13.800781 C 4.5 13.898438 4.101563 14 3.601563 14 C 3.300781 14 3 14 2.699219 13.898438 C 3.300781 15.898438 5.101563 17.300781 7.300781 17.300781 C 5.601563 18.601563 3.5 19.398438 1.199219 19.398438 C 0.800781 19.398438 0.398438 19.398438 0 19.300781 C 2.199219 20.699219 4.800781 21.5 7.5 21.5 C 16.601563 21.5 21.5 14 21.5 7.5 C 21.5 7.300781 21.5 7.101563 21.5 6.898438 C 22.5 6.199219 23.300781 5.300781 24 4.300781"/></svg>


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
 6 | 
 7 |   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
 8 |   <link rel="stylesheet" href="styles.css">
 9 |   <title>Soham Challenge Accepted</title>
10 | </head>
11 | <body>
12 | 
13 |   <div class="main-content">
14 |     WE'RE LAUNCHING SOON
15 |     <div class="cards">
16 |       <div class="card">
17 |         <p> 1</p>
18 |       </div>
19 |       <div class="card">
20 |         <p> 1</p>
21 |       </div>
22 |       <div class="card">
23 |         <p>1</p>
24 |       </div>
25 |       <div class="card">
26 |         <p>1</p>
27 |       </div>
28 |     </div>
29 | 
30 |   </div>
31 | 
32 | 
33 |   <footer>
34 |     <div class="social-media">
35 |       <img src="images/icon-facebook.svg">
36 |       <img src="images/icon-instagram.svg">
37 |       <img src="images/icon-pinterest.svg">
38 |     </div>
39 |   </footer>
40 |   
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/FrontendDesigns/Twitter/styles/normal.layout.css:
--------------------------------------------------------------------------------
 1 | @media only screen and (max-width: 1294px) {
 2 |     .nav-pills span{
 3 |         display:none;
 4 |     }
 5 | 
 6 |     .min-tweet{
 7 |         display: block;
 8 |     }
 9 | 
10 |     .tweet{
11 |         display: none;
12 |     }
13 | 
14 |     .fixed-section{
15 |         width:10%;
16 |     }
17 | 
18 |     .scrollable-section{
19 |         width:90%;
20 |     }
21 | 
22 |     .name-chip-details{
23 |         display: none;
24 |     } 
25 | 
26 |     .name-chip-more{
27 |         display: none;
28 |     }
29 |   }
30 | 
31 |   @media only screen and (max-width: 960px){
32 |     .scrollable-section{
33 |         grid-area: scrollable;
34 |         display:grid;
35 |         grid-template-columns: 80%;
36 |         grid-template-areas:"feed";
37 |         height:100vh;
38 |         width:90%;
39 |         margin-left:auto;
40 |     }
41 | 
42 |     .feed{
43 |         width:100%;
44 |     }
45 | 
46 |     .side-feed{
47 |         display: none;
48 |     }
49 | 
50 |     .messages-tab{
51 |         display: none;
52 |     }
53 |     
54 |   }
55 | 
56 |   @media only screen and (max-width: 768px){
57 |       
58 |   }
59 |   


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # cssONLY 🎨🖌
 2 | 
 3 | ### This repository is a place for:
 4 | * CSS Exercises 🏋️‍♂️
 5 | * CSS designs 🖼
 6 | * Resources 📚
 7 | * Ideas 💡
 8 | 
 9 | ---
10 | 
11 | ### Its an attempt to help and assist Frontend developers to get hold of CSS the right way. Most developers get stuck in the tutorial loops and fail to understand the frontend design concepts. 
12 | 
13 | ---
14 | 
15 | > You can never ever know CSS completely. You keep googling it and it works  ~ *anonymous*✨
16 | 
17 | cssONLY is exactly that resource for your web development journey.
18 | 
19 | ---
20 | 
21 | ### __We love Contributions💖__:
22 | Feel free to create an issue about what resource you want to add. It can be a Youtube Tutorial or a Blog link, a web design challenge or a new addition to exercise; no addition is small. Link a PR with it and we are ready to accept your contributions! Refer [this](https://github.com/sohamsshah/cssONLY/blob/master/CONTRIBUTING.md) for more insights.
23 | 
24 | ---
25 | 
26 | #### A meme based on real life events 😂
27 | 
28 | <img src="https://user-images.githubusercontent.com/47717492/110626369-a4017a00-81c6-11eb-8c80-993b38504e71.jpg" width=500 height=500 padding="16px" />
29 | 
30 | ---
31 | 


--------------------------------------------------------------------------------
/Exercises/Ex05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercise 05</title>
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | <body>
11 | 
12 |     <h1> Exercise 05 </h1>
13 |     <div class="card">
14 |         <div>
15 |             <h1> This is a heading </h1>
16 |         </div>
17 |         
18 |         
19 |         
20 |             <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
21 |                 dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
22 |                 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
23 |                 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
24 |                 deserunt mollit anim id est laborum
25 |             </p>
26 |         
27 |         
28 |         
29 |         <button> Hello World </button>
30 |     </div>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/Exercises/Ex06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 06</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <h1> Exercise 06 </h1>
15 |     <div class="card">
16 |         <div>
17 |             <h1> This is a heading </h1>
18 |         </div>
19 | 
20 |         <img class="thumbnail" src="https://via.placeholder.com/150">
21 | 
22 |         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
23 |             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
24 |             ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
25 |             fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
26 |             deserunt mollit anim id est laborum
27 |         </p>
28 | 
29 | 
30 | 
31 |         <button> Hello World </button>
32 |     </div>
33 | </body>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/Exercises/Ex10/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 10</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <h1> Exercise 10 </h1>
15 |     <div class="card">
16 |         <div class="parent-thumbnail">
17 |             <img class="thumbnail" src="https://via.placeholder.com/150">
18 |             <button class="close">X</button>
19 |         </div>
20 |         
21 | 
22 |         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
23 |             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
24 |             ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
25 |             fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
26 |             deserunt mollit anim id est laborum
27 |         </p>
28 |         <button> Hello World </button>
29 |     </div>
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/FrontendDesigns/Blog/mobile.layout.css:
--------------------------------------------------------------------------------
 1 | @media only screen and (max-width: 768px) {
 2 |     /* For mobile phones: */
 3 | 
 4 |     .container{
 5 |         display:grid;
 6 |         grid-template-areas:"navbar navbar "
 7 |         "hero hero"
 8 |         "banner-content banner-content"
 9 |         "banner banner";
10 |         grid-template-rows: 10% 30% auto;
11 |         grid-template-columns: 50% 50% ;
12 |         width:100vw;
13 |     }
14 | 
15 |     .hero-content h2{
16 |         font-size: 1.2rem;
17 |     }
18 | 
19 |     .banner{
20 |         padding:2rem;
21 |         display:flex;
22 |         flex-direction: row;
23 |         justify-content: center;
24 |     }
25 | 
26 |     .banner-content{
27 |         padding:2rem;
28 |     }
29 | 
30 |     .cards{
31 |         display:grid;
32 |         grid-template-areas: "card" "card" "card";
33 |         grid-template-columns: 1fr;
34 |         padding: 3rem 0rem;
35 |         padding-bottom:0;
36 |         justify-content:start;
37 |     }
38 | 
39 |     /* .card{
40 |         max-height: 800px;
41 |     } */
42 | 
43 |     .join{
44 |         background-color: var(--primary-color);
45 |         grid-area:join;
46 |         padding: 0rem 5rem;
47 |         text-align: center;
48 |         
49 |     }
50 |     
51 |   } 


--------------------------------------------------------------------------------
/Exercises/Ex11/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 11</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <h1> Exercise 11 </h1>
15 |     <div class="card">
16 |         <div class="parent-thumbnail">
17 |             <img class="thumbnail" src="https://via.placeholder.com/150">
18 |             <p class="thumbnail-text">This is thumbnail text</p>
19 |             <button class="close">X</button>
20 |         </div>
21 |         
22 | 
23 |         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
24 |             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
25 |             ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
26 |             fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
27 |             deserunt mollit anim id est laborum
28 |         </p>
29 |         <button> Hello World </button>
30 |     </div>
31 | </body>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/Exercises/Ex17/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercise 17</title>
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | <body>
11 |     <h1>Exercise 17</h1>
12 |     <p> Style Badge</p>
13 | 
14 |     <div class="card">
15 |         <div class="parent-thumbnail">
16 |             <img class="thumbnail" src="https://via.placeholder.com/150">
17 |             <button class="close">X</button>
18 |         </div>
19 |         <div class="badge"> I am a badge</div>
20 |         
21 | 
22 |         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
23 |             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
24 |             ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
25 |             fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
26 |             deserunt mollit anim id est laborum
27 |         </p>
28 |         <button> Hello World </button>
29 |     </div>
30 |     
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/styles.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.google.com/specimen/Red+Hat+Text');
 2 | 
 3 | :root{
 4 |     --grayish-blue:hsl(237, 18%, 59%);
 5 |     --soft-red: hsl(345, 95%, 68%);
 6 |     --white: hsl(0, 0%, 100%);
 7 |     --dark-desaturated-blue:hsl(236, 21%, 26%);
 8 |     --dark-desaturated-blue-opacity:hsl(236, 21%, 26%,0.8);
 9 |     --dark-blue:hsl(235, 16%, 14%);
10 |     --very-dark-blue: hsl(234, 17%, 12%);
11 | }
12 | 
13 | body{
14 |     background-image: url("./images/bg-stars.svg");
15 |     background-color: var(--very-dark-blue);
16 |     font-family: 'Red Hat Text', sans-serif;
17 |     
18 | }
19 | 
20 | footer{
21 |     background-image: url("./images/pattern-hills.svg") !important;
22 |     position: fixed;
23 |     left: 0;
24 |     bottom: 0;
25 |     width: 1440px;
26 |     height: 197px;
27 | }
28 | 
29 | .main-content{
30 |     text-align: center;
31 |     font-size: 14px;
32 |     color: var(--white);
33 |     letter-spacing: 0.5rem;
34 |     padding-top: 10%;
35 |     font-weight: 700;
36 |     
37 | }
38 | 
39 | .cards{
40 |     display:flex;
41 |     justify-content: center;
42 |     align-items: center;
43 |     padding-top:3%;
44 |     color: var(--soft-red);
45 |     text-align: center;
46 | }
47 | 
48 | .card{
49 |     width:8rem;
50 |     height:8rem;
51 |     background: linear-gradient(to bottom, var(--dark-desaturated-blue-opacity) 50%, var(--dark-desaturated-blue) 50%);
52 |     margin:2rem;
53 |     box-shadow: 0 6px 4px black;
54 |     border-radius: 0.3rem;
55 | }
56 | 
57 | .card p{
58 |     padding-bottom: 4rem;
59 |     font-size: 4rem;
60 | }
61 | 
62 | .social-media{
63 |     display:flex;
64 |     height: 197px;
65 |     justify-content: center;
66 |     align-items:center;
67 | }
68 | 
69 | .social-media > img{
70 |     padding:1rem;
71 | }
72 | 
73 | 


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/images/bg-stars.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="1440" height="569"><path fill="#46485B" fill-rule="evenodd" d="M774 563a3 3 0 110 6 3 3 0 010-6zm-623.5-5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm875 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-523-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm233-7a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM178 542a3 3 0 110 6 3 3 0 010-6zm1127.5 2a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm45.5-10a3 3 0 110 6 3 3 0 010-6zm-565.5-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-784-15a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm278.5-9a3 3 0 110 6 3 3 0 010-6zm207.5-30a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm50-17a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm233-8a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm465-22a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-699-6a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-465-22a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm1165-8a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-50-17a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM250 345a3 3 0 110 6 3 3 0 010-6zm450.5-7a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-614-15a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm520-13a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-570-4a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm1169.5-7a3 3 0 110 6 3 3 0 010-6zm-4.5 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-875-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm523 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-392-34a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm656 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-1008-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm1298-7a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-570-4a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm520-13a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-145.5-9a3 3 0 110 6 3 3 0 010-6zm-601.5-6a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm499.5-29a3 3 0 110 6 3 3 0 010-6zm-985.5-10a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-50-17a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm1298-8a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-465-22a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-832-6a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm33.5-18a3 3 0 110 6 3 3 0 010-6zm431.5-4a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm366-8a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm50-17a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm486-39a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM1136 29a3 3 0 110 6 3 3 0 010-6zm-614.5-2a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM412 23a3 3 0 110 6 3 3 0 010-6zM1.5 14a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm570-4a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm366-7a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-656-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm1008 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"/></svg>


--------------------------------------------------------------------------------
/Exercises/Ex15/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercise 15</title>
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | <body>
11 |     <h2>Exercise 15</h2>
12 | 
13 | <!-- Trigger/Open The Modal -->
14 | <button id="myBtn">Open Modal</button>
15 | 
16 | <!-- The Modal -->
17 | <div id="myModal" class="modal">
18 | 
19 |   <!-- Modal content -->
20 |   <div class="modal-content">
21 |     <span class="close">&times;</span>
22 |     <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum</p>
23 |   </div>
24 | 
25 | </div>
26 | 
27 | <script>
28 |     // Get the modal
29 |     var modal = document.getElementById("myModal");
30 |     
31 |     // Get the button that opens the modal
32 |     var btn = document.getElementById("myBtn");
33 |     
34 |     // Get the <span> element that closes the modal
35 |     var span = document.getElementsByClassName("close")[0];
36 |     
37 |     // When the user clicks the button, open the modal 
38 |     btn.onclick = function() {
39 |       modal.style.display = "block";
40 |     }
41 |     
42 |     // When the user clicks on <span> (x), close the modal
43 |     span.onclick = function() {
44 |       modal.style.display = "none";
45 |     }
46 |     
47 |     // When the user clicks anywhere outside of the modal, close it
48 |     window.onclick = function(event) {
49 |       if (event.target == modal) {
50 |         modal.style.display = "none";
51 |       }
52 |     }
53 |     </script>
54 |     
55 | 
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/Exercises/Ex14/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercise 14</title>
 8 |     <link rel="stylesheet" href="desktop.layout.css">
 9 |     <link rel="stylesheet" href="mobile.layout.css">
10 | </head>
11 | <body>
12 |     <h1>Exercise 14</h1>
13 |     <div class="grid">
14 |         <div class="card">
15 |             <div>
16 |                 <h1> This is a heading </h1>
17 |             </div>
18 |     
19 |             <img class="thumbnail" src="https://via.placeholder.com/150">
20 |     
21 |             <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
22 |                 dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
23 |                 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
24 |                 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
25 |                 deserunt mollit anim id est laborum
26 |             </p>
27 |     
28 |     
29 |     
30 |             <button> Hello World </button>
31 |         </div>
32 |         <div class="card">
33 |             <div>
34 |                 <h1> This is a heading </h1>
35 |             </div>
36 |     
37 |             <img class="thumbnail" src="https://via.placeholder.com/150">
38 |     
39 |             <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
40 |                 dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
41 |                 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
42 |                 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
43 |                 deserunt mollit anim id est laborum
44 |             </p>
45 |     
46 |     
47 |     
48 |             <button> Hello World </button>
49 |         </div>
50 |         <div class="card">
51 |             <div>
52 |                 <h1> This is a heading </h1>
53 |             </div>
54 |     
55 |             <img class="thumbnail" src="https://via.placeholder.com/150">
56 |     
57 |             <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
58 |                 dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
59 |                 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
60 |                 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
61 |                 deserunt mollit anim id est laborum
62 |             </p>
63 |     
64 |     
65 |     
66 |             <button> Hello World </button>
67 |         </div>
68 |     </div>
69 |     
70 | </body>
71 | </html>


--------------------------------------------------------------------------------
/FrontendDesigns/Blog/desktop.layout.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
  2 | 
  3 | body{
  4 |     margin:0;
  5 |     padding:0;
  6 |     font-family: 'Lato', sans-serif;
  7 | }
  8 | 
  9 | :root{
 10 |     --background-color: #212121;
 11 |     --primary-color:#F0DB4F;
 12 | }
 13 | .container{
 14 |     display:grid;
 15 |     grid-template-areas:"navbar navbar navbar navbar"
 16 |     "hero hero hero hero"
 17 |     "banner banner banner-content banner-content";
 18 |     grid-template-rows: 10% 40% auto;
 19 |     grid-template-columns: 25% 25% 25% 25%;
 20 | 
 21 | }
 22 | 
 23 | 
 24 | .navbar{
 25 |     grid-area: navbar;
 26 |     background-color: var(--background-color);
 27 |     color: #eee;
 28 | }
 29 | 
 30 | .navbar ul{
 31 |     list-style: none;
 32 | 
 33 | }
 34 | 
 35 | .navbar li{
 36 |     display: inline;
 37 |     padding: 0 1rem;
 38 |     float:left;
 39 | }
 40 | 
 41 | .navbar .CTA{ 
 42 |     position:relative;  
 43 |     float: right;
 44 |     margin-right:1rem;
 45 |     background-color: #eee;
 46 |     border-radius: 16px;
 47 |     color:#212121
 48 | 
 49 | }
 50 | 
 51 | .hero{
 52 |     grid-area: hero;
 53 |     background-color: var(--background-color);
 54 |     color: #eee;
 55 |     text-align: center;
 56 |     padding: 2rem;
 57 |     
 58 | }
 59 | 
 60 | .hero img{
 61 |     width:10%;
 62 |     height:10%;
 63 | }
 64 | 
 65 | .hero-content{
 66 |     margin-top:-1rem;
 67 | }
 68 | 
 69 | .hero-content h2{
 70 |     font-size: 3rem;
 71 | }
 72 | 
 73 | .hero-content p{
 74 |     margin-top:-2%;
 75 | }
 76 | 
 77 | .banner{
 78 |     grid-area: banner;
 79 |     padding:5rem 2rem;
 80 |     padding-left:8rem;
 81 |     display:flex;
 82 |     justify-content: center;
 83 |     align-self: center;;
 84 | }
 85 | 
 86 | .banner img{
 87 |     max-width:100% ;
 88 |     height:auto;
 89 | }
 90 | 
 91 | .banner-content{
 92 |     padding: 5rem 2rem;
 93 |     padding-right:8rem;
 94 |     grid-area: banner-content;
 95 | }
 96 | 
 97 | .cards{
 98 |     display:grid;
 99 |     grid-template-columns: 1fr 1fr 1fr;
100 |     padding: 0rem 5rem;
101 |     justify-content:start;
102 | }
103 | 
104 | .card{
105 |     padding: 0rem 1rem;
106 |     /* max-width: 28.5%; */
107 |     min-height: 500px;
108 | }
109 | 
110 | .card img{
111 |     width:100%;
112 |     height:50%;
113 | }
114 | 
115 | .card p{
116 |     text-align: justify;
117 |   text-justify: inter-word;
118 |   
119 | }
120 | 
121 | .footer-section{
122 |     display:grid;
123 |     grid-template-areas: "join" "footer";
124 |     grid-template-rows: auto auto;
125 |     height:30vh;
126 |     padding: 3rem 0rem;
127 |     
128 | }
129 | 
130 | .join{
131 |     background-color: var(--primary-color);
132 |     grid-area:join;
133 |     padding: 4rem 20rem;
134 |     text-align: center;
135 |     
136 | }
137 | 
138 | .join h2{
139 |     font-size: 1.5rem;
140 |     font-weight: bolder;
141 | }
142 | 
143 | .join p{
144 |     font-size: 1.1rem;
145 | }
146 | 
147 | .join ul {
148 |     padding:1rem;
149 |     display: block;
150 |     list-style-type: disc;
151 |     margin-block-start: 0;
152 |     margin-block-end: 0;
153 |     margin-inline-start: 0px;
154 |     margin-inline-end: 0px;
155 |     padding-inline-start: 0;
156 | }
157 | .footer{
158 |     background-color: var(--background-color);
159 |     color: #eee;
160 |     padding:2rem;
161 |     text-align: center;
162 |     font-size: 1.1rem;
163 | }


--------------------------------------------------------------------------------
/Exercises/Ex07/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercise 07</title>
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | <body>
11 |     <h1> Exercise 07 </h1>
12 |     <div class="row">
13 |         <div class="first">
14 |             <div class="card">
15 |                 <div>
16 |                     <h1> This is a heading </h1>
17 |                 </div>
18 |         
19 |                 <img class="thumbnail" src="https://via.placeholder.com/150">
20 |         
21 |                 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
22 |                     dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
23 |                     ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
24 |                     fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
25 |                     deserunt mollit anim id est laborum
26 |                 </p>
27 |         
28 |         
29 |         
30 |                 <button> Hello World </button>
31 |             </div>
32 |         </div>
33 |         <div class="second">
34 |             <div class="card">
35 |                 <div>
36 |                     <h1> This is a heading </h1>
37 |                 </div>
38 |         
39 |                 <img class="thumbnail" src="https://via.placeholder.com/150">
40 |         
41 |                 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
42 |                     dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
43 |                     ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
44 |                     fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
45 |                     deserunt mollit anim id est laborum
46 |                 </p>
47 |         
48 |         
49 |         
50 |                 <button> Hello World </button>
51 |             </div>
52 |         </div>
53 |         <div class="third">
54 |             <div class="card">
55 |                 <div>
56 |                     <h1> This is a heading </h1>
57 |                 </div>
58 |         
59 |                 <img class="thumbnail" src="https://via.placeholder.com/150">
60 |         
61 |                 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
62 |                     dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
63 |                     ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
64 |                     fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
65 |                     deserunt mollit anim id est laborum
66 |                 </p>
67 |         
68 |         
69 |         
70 |                 <button> Hello World </button>
71 |             </div>
72 |         </div>
73 |     </div>
74 | 
75 | 
76 |     
77 | </body>
78 | </html>
79 | 


--------------------------------------------------------------------------------
/Exercises/README.md:
--------------------------------------------------------------------------------
  1 | # CSS Exercises
  2 | 
  3 | ## ex01: put three divs horizontally
  4 | 
  5 | ### challenge
  6 | 
  7 | - Make a parent div.
  8 | - Create a class `row` and apply this to the div.
  9 | - Now create three divs as children.
 10 | - The children should go horizontal.
 11 | 
 12 | 
 13 | ---
 14 | 
 15 | 
 16 | ### ex02: practice align
 17 | 
 18 | Take a parent div and three child divs. parent should align all children to center. However, the third child needs to go end of flex.
 19 | 
 20 | Give your parent a height of 500 pixels.
 21 | 
 22 | ---
 23 | 
 24 | ## ex03: Create a card
 25 | 
 26 | ### challenge
 27 | 
 28 | - Create a div
 29 | - Create a class `card` for the div
 30 | - Add text in it in `p` tag
 31 | - Add a button in the div `Primary Button` too.
 32 | - The p and button should go vertically.
 33 | 
 34 | ---
 35 | 
 36 | ## ex04: Justify-content
 37 | 
 38 | ### challenge
 39 | 
 40 | When there's more text in one card you would want the primary buttons to align.
 41 | 
 42 | ---
 43 | 
 44 | ## ex05: Shrink and Grow
 45 | 
 46 | ### challenge
 47 | 
 48 | Make use of `flex-grow` and `flex-shrink` on the right element to make this work when size changes.
 49 | 
 50 | This is without the grow/shrink.
 51 | 
 52 | ---
 53 | 
 54 | ## ex06: Thumbnail Image to the Card
 55 | 
 56 | Note: Give your card class a max-width of 200px otherwise the image will stretch. We'll cover putting card in grid and then making image responsive and this issue will go away. 
 57 | 
 58 | ### challenge
 59 | 
 60 | Use the placeholder for image: [`https://via.placeholder.com/150`](https://via.placeholder.com/150)
 61 | 
 62 | ---
 63 | 
 64 | ## ex07: Card wrap
 65 | 
 66 | ### challenge
 67 | 
 68 | Apply `flex-wrap` on `row` class and then cards will start wrapping.
 69 | 
 70 | ---
 71 | 
 72 | ## ex08: Superscript 
 73 | 
 74 | ### challenge
 75 | 
 76 | Use `position:relative` to create this component below: 
 77 | 
 78 | - a `class=superscript` which when used in any text it will make it small and move to the top.
 79 | - Now, this is about **relative sizing of fonts**. So use `em`. This is the best use case of relative sizing based on the font size it is inheriting.
 80 | 
 81 | ---
 82 | 
 83 | ## ex09: Snackbar
 84 | 
 85 | ### challenge
 86 | 
 87 | Use `position:fixed` to create this component below:
 88 | 
 89 | - A notification component will be positioned to the bottom of the window.
 90 | - Make it 1rem away from right and bottom.
 91 | 
 92 | ---
 93 | 
 94 | ## ex10: remove button on the card
 95 | 
 96 | ### challenge
 97 | 
 98 | Put the remove button on the card we created earlier. You can find the svg for this later. You can start with just a button with `X` in place.
 99 | 
100 | Tip: When you're doing it make sure that the `padding-top` and `padding-left` are inherited so that card's internal padding is not messed up.
101 | 
102 | ---
103 | 
104 | ## ex11: overlay text on card image
105 | 
106 | ---
107 | 
108 | ## ex12: row with three columns
109 | 
110 | ### challenge
111 | 
112 | Create a `grid-row` class. Three columns with gap of 1 rem.
113 | 
114 | ---
115 | 
116 | ## ex13: let's start with mobile-first
117 | 
118 | ### challenge
119 | 
120 | 1. Make the background color of your screen (body) yellow.
121 | 2. Now, write a media query which makes the background color `transparent` when the screen size is more than 640px.
122 | 
123 | ---
124 | 
125 | ## ex14: Mobile Friendly Grid
126 | 
127 | ### challenge
128 | 
129 | 1. Create a class row.
130 | 2. Put three cards in it. 
131 | 3. For mobile, it should show two cards in one row.
132 | 4. For desktop, it should show three cards in one row.
133 | 
134 | ---
135 | 
136 | ## ex15: Modal Component
137 | 
138 | 1. Create a Modal 
139 | 2. Add close button to it
140 | 
141 | ---
142 | 
143 | ## ex16: Floating Action Button
144 | 
145 | 1. Add floating action button
146 | 2. Position it to the right bottom of the screen
147 | 
148 | 
149 | 
150 | 
151 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing Guidelines  
 2 |   
 3 | This documentation contains a set of guidelines to help you during the contribution process.   
 4 | We are happy to welcome all the contributions from anyone willing to improve this repository in any way possible. Thank you for helping out and remember, **no contribution is too small.**  
 5 | 
 6 | # How can you help?🤝
 7 | - Add Website Resources
 8 | - Add Code Snippets
 9 | - Enhancements in the exisiting code-snippets or Notes
10 | - More ideas are welcomed!
11 |   
12 | # Submitting Contributions👩‍💻👨‍💻  
13 | Below you will find the process and workflow used to review and merge your changes.  
14 | ## Step 0 : Find an issue  
15 | - Take a look at the Existing Issues or create your **own** Issues!  
16 | - Wait for the Issue to be assigned to you after which you can start working on it.  
17 | - Note : Every change in this project should/must have an associated issue.   
18 | 
19 |   
20 | ## Step 1 : Fork the Project  
21 | - Fork this Repository. This will create a Local Copy of this Repository on your Github Profile. Keep a reference to the original project in `upstream` remote.  
22 | ```  
23 | $ git clone https://github.com/<your-username>/<repo-name>  
24 | $ cd <repo-name>  
25 | $ git remote add upstream https://github.com/<upstream-owner>/<repo-name>  
26 | ```    
27 |   
28 | - If you have already forked the project, update your copy before working.  
29 | ```  
30 | $ git remote update  
31 | $ git checkout <branch-name>  
32 | $ git rebase upstream/<branch-name>  
33 | ```  
34 | ## Step 2 : Branch  
35 | Create a new branch. Use its name to identify the issue your addressing.  
36 | ```  
37 | # It will create a new branch with name Branch_Name and switch to that branch 
38 | $ git checkout -b branch_name  
39 | ```  
40 | ## Step 3 : Work on the issue assigned  
41 | - Work on the issue(s) assigned to you.   
42 | - Add all the files/folders needed.  
43 | - After you've made changes or made your contribution to the project add changes to the branch you've just created by:  
44 | ```  
45 | # To add all new files to branch Branch_Name  
46 | $ git add .  
47 | 
48 | # To add only a few files to Branch_Name
49 | $ git add <some files>
50 | ```
51 | - If not assigned, you can submit a PR solving the issue if no one else is working on that. 
52 |   
53 | ## Step 4 : Commit  
54 | - To commit give a descriptive message for the convenience of reviewer by:  
55 | ```
56 | # This message get associated with all files you have changed  
57 | $ git commit -m "message"  
58 | ```  
59 | - **NOTE**: A PR should have only one commit. Multiple commits should be squashed. 
60 |  
61 | ## Step 5 : Work Remotely  
62 | - Now you are ready to your work to the remote repository.  
63 | - When your work is ready and complies with the project conventions, upload your changes to your fork:  
64 |   
65 | ```  
66 | # To push your work to your remote repository  
67 | $ git push -u origin Branch_Name  
68 | ```  
69 |  
70 |   
71 | ## Step 6 : Pull Request  
72 | - Go to your repository in browser and click on compare and pull requests. Then add a title and description to your pull request that explains your contribution.  
73 |    
74 |    
75 | - Voila! Your Pull Request has been submitted and will be reviewed and merged.🥳  
76 |   
77 | ## Need more help?🤔  
78 | You can refer to the following articles on basics of Git and Github and also contact the Project Mentors, in case you are stuck:  
79 | - [Forking a Repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo)  
80 | - [Cloning a Repo](https://help.github.com/en/desktop/contributing-to-projects/creating-an-issue-or-pull-request)  
81 | - [How to create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github)  
82 | - [Getting started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6)  
83 | - [Learn GitHub from Scratch](https://lab.github.com/githubtraining/introduction-to-github)  
84 |   
85 | 


--------------------------------------------------------------------------------
/FrontendDesigns/Blog/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="desktop.layout.css">
 8 |     <link rel="stylesheet" href="mobile.layout.css">
 9 |     <title>JavaScriptONLY</title>
10 | </head>
11 | <body>
12 |     <div class="container">
13 |         <nav class="navbar">
14 |             <ul>
15 |                 <li>Home</li>
16 |                 <li>Blogs</li>
17 |                 <li>Community</li>
18 |                 <li class="CTA">
19 |                         <img src="https://img.icons8.com/windows/32/000000/github-squared.png"/>
20 |                         <span style="bottom: 0.6rem;position:relative;">Github</span>
21 |                     
22 |                 </li>
23 |             </ul>
24 |         </nav>
25 |         <div class="hero">
26 |             <div>
27 |             <img src="https://1000logos.net/wp-content/uploads/2020/09/JavaScript-Logo-640x400.png">
28 |         </div>
29 |             <div class="hero-content">
30 |             <h2> JavaScriptONLY</h2>
31 |             <p>Notes, Courses and Everything about JS</p>
32 |         </div>
33 |         
34 |         </div>
35 |         <div class="banner">
36 |             <img src="https://miro.medium.com/max/3000/1*H-25KB7EbSHjv70HXrdl6w.png">
37 |         </div>
38 |         <div class="banner-content">
39 |             <h4> Get Started</h4>
40 |             <h2>Welcome to JavaScriptONLY</h2>
41 |             <p> Welcome, its great to have you here. We know that first impressions are important, so we have populated your new side with some initial getting started posts that will help you get familiar with everything in no time.</p>
42 |         </div>
43 | 
44 |     </div>
45 |     <div class="cards">
46 |         <div class="card">
47 |             <img src="https://www.computerhope.com/jargon/r/random-dice.jpg">
48 |             <h5>Getting Started</h5>
49 |             <h3>What is Random Number in JavaScript</h3>
50 |             <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaeca</p>
51 |         </div>
52 |         <div class="card">
53 |             <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg">
54 |             <h5>Concept</h5>
55 |             <h3>What is Elephant in CSS?</h3>
56 |             <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaeca</p>
57 |         </div>
58 |         <div class="card">
59 |             <img src="https://www.york.ac.uk/media/news-and-events/pressreleases/2020/Random%20feat.jpg">
60 |             <h5>Tech</h5>
61 |             <h3>What is Spoofing in Cyber Security</h3>
62 |             <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaeca</p>
63 |         </div>
64 |     </div>
65 |     <div class="footer-section">
66 |         <div class="join">
67 |             <h2>Join our community!👨‍💻</h2>
68 |             <p>Follow the JavaScript Madness across all social media platforms so you don't miss the awesome content we bring for you!</p>
69 |             <ul style="list-style-type: none;">
70 |                 <li style="display:inline"><img src="https://img.icons8.com/cute-clipart/64/000000/instagram-new.png"/></li>
71 |                 <li style="display:inline"><img src="https://img.icons8.com/cute-clipart/64/000000/twitter.png"/></li>
72 |                 <li style="display:inline"><img src="https://img.icons8.com/cute-clipart/64/000000/github.png"/></li>
73 |             </ul>
74 |         </div>
75 |         <div class="footer">
76 |             <p>JavaScriptONLY💛 2021💻</p>
77 |             <p>Made with 💖 in India</p>
78 |         </div>
79 | 
80 |     </div>
81 |     
82 | </body>
83 | </html>


--------------------------------------------------------------------------------
/FrontendDesigns/launch-countdown-timer-main/README.md:
--------------------------------------------------------------------------------
 1 | # Frontend Mentor - Launch countdown timer
 2 | 
 3 | ![Design preview for the Launch countdown timer coding challenge](./design/desktop-preview.jpg)
 4 | 
 5 | ## Welcome! 👋
 6 | 
 7 | Thanks for checking out this front-end coding challenge.
 8 | 
 9 | [Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow.
10 | 
11 | **To do this challenge, you need a good understanding of HTML, CSS and JavaScript.**
12 | 
13 | ## The challenge
14 | 
15 | Your challenge is to build out this countdown timer and get it looking as close to the design as possible.
16 | 
17 | You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
18 | 
19 | Your users should be able to:
20 | 
21 | - See hover states for all interactive elements on the page
22 | - See a live countdown timer that ticks down every second (start the count at 14 days)
23 | - **Bonus**: When a number changes, make the card flip from the middle
24 | 
25 | Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel.
26 | 
27 | ## Where to find everything
28 | 
29 | Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to.
30 | 
31 | The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes.
32 | 
33 | If you would like the design files (we provide Sketch & Figma versions) in order to inspect the design in more detail you can [subscribe as a PRO member](https://www.frontendmentor.io/pro).
34 | 
35 | You will find all the required assets in the `/images` folder. The assets are already optimized.
36 | 
37 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts.
38 | 
39 | ## Building your project
40 | 
41 | Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:
42 | 
43 | 1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/).
44 | 2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel below.
45 | 3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles.
46 | 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
47 | 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`.
48 | 6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
49 | 
50 | ## Deploying your project
51 | 
52 | As mentioned above, there are a number of ways to host your project for free. We recommend using [Vercel](https://bit.ly/fem-vercel) as it's an amazing service and extremely simple to get set up with. If you'd like to use Vercel, here are some steps to follow to get started:
53 | 
54 | 1. [Sign up to Vercel](https://bit.ly/fem-vercel-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [Vercel for GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) integration.
55 | 2. Connect your project to Vercel from the ["Import project" page](https://vercel.com/import), using the "From Git Repository" button and selecting the project you want to deploy.
56 | 3. Once connected, every time you `git push`, Vercel will create a new [deployment](https://vercel.com/docs/v2/platform/deployments) and the deployment URL will be shown on your [Dashboard](https://vercel.com/dashboard). You will also receive an email for each deployment with the URL.
57 | 
58 | ## Sharing your solution
59 | 
60 | There are multiple places you can share your solution:
61 | 
62 | 1. Submit it on the platform so that other users will see your solution on the site. Here's our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) to help you do that.
63 | 2. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack).
64 | 3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around.
65 | 
66 | ## Giving feedback
67 | 
68 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io.
69 | 
70 | This challenge is completely free. Please share it with anyone who will find it useful for practice.
71 | 
72 | **Have fun building!** 🚀
73 | 


--------------------------------------------------------------------------------
/FrontendDesigns/Docsite/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="styles.css">
 8 |     <title>Layout Docsite</title>
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <div class="heading">
13 |             <span>Sodium</span>: A Component Library for all your needs.
14 |         </div>
15 |         <div class="content">
16 |             <div>
17 |                 <h1>introduction</h1>
18 |                 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum</p>   
19 | 
20 |             </div>
21 |             <div>
22 |                 <h3>Avatar</h3>
23 |                 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum</p>   
24 |             </div>
25 |             <div>
26 |                 <h3>Badge</h3>
27 |                 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum</p>   
28 |             </div>
29 |             <div>
30 |                 <h3>Button</h3>
31 |                 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum</p>   
32 |             </div>
33 |             <div>
34 |                 <h3>Card</h3>
35 |                 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum</p>   
36 |             </div>
37 |             <div>
38 |                 <h3>Input</h3>
39 |                 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum</p>   
40 |             </div>
41 |             <div>
42 |                 <h3>Navbar</h3>
43 |                 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum</p>   
44 |             </div>
45 |         </div>
46 |         <div class="sidebar">
47 |             <ul>
48 |                 <li>Avatar</li>
49 |                 <li>Button</li>
50 |                 <li>Badge</li>
51 |                 <li>Card</li>
52 |                 <li>Input</li>
53 |                 <li>Navbar</li>
54 |             </ul>
55 |         </div>
56 |     </div>
57 | </body>
58 | </html>


--------------------------------------------------------------------------------
/FrontendDesigns/Twitter/styles/desktop.layout.css:
--------------------------------------------------------------------------------
  1 | body{
  2 |     background-color: #000;
  3 |     color: white;
  4 |     margin:0;
  5 |     padding:0;
  6 |     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;;
  7 | }
  8 | 
  9 | :root{
 10 |     --primary-color: rgb(121, 75, 196);
 11 |     --like: rgb(224, 36, 94);
 12 |     --secondary-color: #15181C;
 13 | }
 14 | 
 15 | .container{
 16 |     display:flex;
 17 |     /* grid-template-columns: 1fr 3.29fr;
 18 |     grid-template-areas:"fixed-area  scrollable"; */
 19 |     /* width:100vw !important; */
 20 |     justify-content: space-between;
 21 |     height:100vh;
 22 | }
 23 | 
 24 | .scrollable-section{
 25 |     grid-area: scrollable;
 26 |     display:grid;
 27 |     grid-template-columns: 1fr 1fr;
 28 |     grid-template-areas:"feed  sidepane";
 29 |     height:100vh;
 30 |     width:75%;
 31 |     margin-left:auto;
 32 | }
 33 | 
 34 | .fixed-section{
 35 |     height:100vh;
 36 |     position:fixed;
 37 |     width:25%;
 38 | }
 39 | 
 40 | /* Messages */
 41 | 
 42 | .messages-tab{
 43 |     position:fixed;
 44 |     bottom:0;
 45 |     right:2rem;
 46 |     width:25%;
 47 |     border-top-right-radius: 16px;
 48 |     border-top-left-radius: 16px;
 49 |     border: solid 0.5px var(--primary-color);
 50 |     z-index:100;
 51 |     background-color: black;
 52 |     box-shadow: 0 0 5px var(--primary-color);
 53 | }
 54 | 
 55 | .message-icons{
 56 |     display:flex;
 57 |     justify-content: space-between;
 58 |     padding:0.4rem 1rem;
 59 |     align-items: center;
 60 |     
 61 | }
 62 | 
 63 | .message-icons i{
 64 |     margin-right:0.2rem;
 65 |     padding:0.5rem;
 66 |     color: var(--primary-color);
 67 |     font-size: 1.2rem;
 68 | }
 69 | 
 70 | .message-icons span{
 71 |     font-size: 1.2rem;
 72 |     font-weight: bolder;
 73 |     cursor:pointer;
 74 | }
 75 | 
 76 | .message-icons i:hover{
 77 |     background-color: rgba(121, 75, 196,0.2);
 78 |     cursor:pointer;
 79 |     border-radius: 50%;
 80 | 
 81 | }
 82 | 
 83 | /* Navbar */
 84 | 
 85 | .navbar{
 86 |     display:flex;
 87 |     flex-direction: column;
 88 |     justify-content: flex-start;
 89 |     align-items:flex-start;
 90 |     grid-area: navbar;
 91 |     padding: 1rem;
 92 |     font-weight: bold;
 93 |     font-size: 1.2rem;
 94 |     border-right:ridge 0.2px rgba(238,238,238,0.2);
 95 |     padding-left:22%;
 96 |     height:100vh;
 97 | 
 98 | }
 99 | 
100 | .navbar .nav-brand{
101 |     padding:0.5rem 1rem;
102 |     width:100%;
103 |     text-align: left;
104 |     cursor:pointer;
105 |     
106 | }
107 | 
108 | .nav-pills span{
109 |     padding-right:1rem;
110 | }
111 | 
112 | .navbar .nav-pills{
113 |     padding:1rem 1rem;
114 |     text-align: left;
115 |     display: inline;
116 |     border-radius: 50px;
117 | }
118 | 
119 | .nav-pills:hover{
120 |     background-color: rgba(121, 75, 196,0.2);
121 |     cursor:pointer;
122 | }
123 | 
124 | .nav-pills i{
125 |     padding-right:1rem;
126 |     
127 | }
128 | 
129 | .navbar .tweet{
130 |     margin:1rem 0;
131 |     padding:1rem 1.2rem;
132 | 
133 |     background-color: var(--primary-color);
134 |     border-radius: 50px;
135 |     width:80%;
136 |     text-align:center;
137 |     font-size: 0.9rem;
138 |        
139 | }
140 | 
141 | .min-tweet{
142 |     display: none;
143 |     margin:1rem 0;
144 |     padding:1.5rem;
145 | 
146 |     background-color: var(--primary-color);
147 |     border-radius: 50%;
148 |     text-align:center;
149 |     font-size: 1.1rem;
150 | }
151 | 
152 | .min-tweet:hover{
153 |     background-color: var(--primary-color);
154 |     opacity:0.8;
155 |     cursor:pointer;
156 | }
157 | 
158 | .navbar .tweet:hover{
159 |     background-color: var(--primary-color);
160 |     opacity:0.8;
161 |     cursor:pointer;
162 | }
163 | .name-chip{
164 |     margin-top: auto;
165 |     display:flex; 
166 |     justify-content: space-between;
167 |     align-items: center;
168 |     width:100%;
169 |     padding:0 0.1rem;
170 | }
171 | 
172 | .name-chip:hover{
173 |     background-color: rgba(121, 75, 196,0.2);
174 |     border-radius:32px;
175 | }
176 | 
177 | /* Feed */
178 | 
179 | .feed{
180 |     grid-area:feed;
181 |     display:flex;
182 |     padding: 1rem 0;
183 |     flex-direction: column;
184 |     border-right: solid rgba(238,238,238,0.2) 0.02px;
185 | 
186 | }
187 | 
188 | .home-navbar{
189 |     padding:0.5rem 1rem;
190 |     padding-bottom: 1rem;
191 |     color: white;
192 |     font-weight: bold;
193 |     display: flex;
194 |     justify-content: space-between;
195 |     border-bottom: solid rgba(238,238,238,0.2) 0.02px;
196 |     font-size: 1.2rem;
197 |     position: sticky;
198 |     top:0;
199 |     background-color: black;
200 |     z-index:10;
201 | }
202 | 
203 | .compose{
204 |     display: flex;
205 |     padding:1rem;
206 |     align-items: flex-start;
207 |     border-bottom: solid rgba(238,238,238,0.2) 0.02px;
208 | }
209 | 
210 | .compose img{
211 |     margin-right:1rem;
212 | }
213 | 
214 | .textarea{
215 |     width:100%;
216 |     margin-right: 1rem;
217 |     background-color: black;
218 |     border:none;
219 |     font-size: 1.1rem;
220 |     color: white;
221 |     font-family: Arial, Helvetica, sans-serif;
222 |     padding:1 0rem;
223 |     resize:none;
224 | }
225 | 
226 | .textarea:focus{
227 |     outline:none;
228 |     border-bottom: solid rgba(238,238,238,0.2) 0.02px;
229 | }
230 | 
231 | .textarea-wrapper{
232 |     width:100%;
233 | }
234 | 
235 | .options{
236 |     padding-top:1rem;
237 |     display:flex;
238 |     justify-content: space-between;
239 |     
240 | }
241 | 
242 | .options i{
243 |     padding:0.5rem;
244 | }
245 | 
246 | .options i:hover{
247 |     background-color: rgba(121, 75, 196,0.2);
248 |     border-radius: 50%;
249 |     cursor:pointer;
250 |     
251 | }
252 | .tweet-option{
253 |     padding-right: 0.8rem;
254 |     color:white;
255 |     background-color: var(--primary-color);
256 |     padding: 0.5rem 1rem;
257 |     border-radius: 30px;
258 |     font-size: 0.9rem;
259 |     font-weight: bold;
260 | }
261 | 
262 | .tweet-option:hover{
263 |     opacity: 0.8;
264 |     cursor: pointer;
265 | }
266 | 
267 | .feed-post{
268 |     padding: 0.5rem 1rem;
269 |     border-top: solid rgba(238,238,238,0.2) 0.02px;
270 |     border-bottom: solid rgba(238,238,238,0.2) 0.02px;
271 | }
272 | 
273 | .feed-post:hover{
274 |     background-color: rgba(53, 51, 51, 0.2);
275 |     cursor:pointer;
276 | }
277 | 
278 | .feed-post .up-text{
279 |     padding: 0 1rem;
280 |     opacity:0.5;
281 |     font-size: 0.9rem;
282 | }
283 | 
284 | .feed-post span{
285 |     font-size: 1.5rem;
286 |     padding-right:0.5rem;
287 | }
288 | 
289 | .main-tweet{
290 |     display:flex;
291 |     padding:0.5rem 0;
292 |     padding-bottom: 0;
293 | }
294 | 
295 | .main-tweet .user{
296 |     font-size:1rem;
297 |     font-weight: bold;
298 |     
299 | }
300 | 
301 | .main-tweet .content-title{
302 |     display:flex;
303 |     justify-content: space-between;
304 | }
305 | 
306 | .main-tweet .username{
307 |     font-size:0.9rem;
308 |     opacity: 0.5;
309 |     font-weight: lighter;
310 | }
311 | 
312 | .main-tweet .content{
313 |     padding-left:0.8rem;
314 | }
315 | 
316 | .main-tweet .tweet-text{    
317 |     font-size:1rem;
318 | }
319 | 
320 | .main-tweet .reactions{
321 |     display: flex;
322 |     justify-content: space-between;
323 |     padding: 0.8rem;
324 |     padding-right:4rem;   
325 | }
326 | 
327 | .main-tweet .count{
328 |     font-size: 0.8rem;
329 |     padding-left: 0.2rem;
330 | }
331 | 
332 | 
333 | 
334 | /* Sidepane */
335 | 
336 | .sidepane{
337 |     grid-area: sidepane;
338 |     padding-left:2rem;
339 |     padding-top:0.2rem;
340 |     width:60%;
341 |     position: sticky;
342 |     
343 | }
344 | 
345 | .sidenav{
346 |     position: sticky;
347 |     top:0;
348 |     z-index: 100;
349 |     background-color: black;
350 | 
351 | }
352 | .searchbar{
353 |     background-color: var(--secondary-color);
354 |     
355 |     
356 |     display: flex;
357 |     padding:0.8rem;
358 |     border-radius:35px;  
359 | }
360 | 
361 | .searchbar i{
362 |     color: rgb(34, 36, 37);
363 |     padding-right:0.6rem;
364 |     padding-left:0.6rem;
365 | }
366 | 
367 | .searchbar input{
368 |     background-color: var(--secondary-color);
369 |     border:none;
370 |     font-size: 1rem;
371 |     color: white;
372 | }
373 | 
374 | .searchbar input:focus{
375 |     outline:none;
376 |     background-color: black;
377 | }
378 | 
379 | .searchbar:focus-within{
380 |     outline:none;
381 |     background-color: black;
382 |     border: solid 0.5px blueviolet;
383 | 
384 | }
385 | 
386 | .side-feed{
387 |     margin-top:1rem;
388 |     background-color: var(--secondary-color);
389 |     padding:1rem 0;
390 |     border-radius: 16px;
391 | }
392 | 
393 | 
394 | 
395 | .side-feed-title{
396 |     padding:0 1rem;
397 |     padding-bottom: 0.5rem;
398 |     font-size: 1.2rem;
399 |     font-weight: bold;
400 |     border-bottom: solid rgba(238,238,238,0.1) 1px;
401 | }
402 | 
403 | .covid-side-chip{
404 |     display: flex;
405 |     justify-content: space-between;
406 |     padding:0 1rem;
407 |     border-bottom: solid rgba(238,238,238,0.1) 1px;
408 | }
409 | 
410 | .covid-side-chip:hover{
411 |     background-color:rgba(57, 60, 61, 0.2);
412 |     cursor:pointer;
413 | }
414 | 
415 | .covid-banner-heading{
416 |     padding-top: 1rem;
417 |     opacity:0.5;
418 |     
419 |     font-weight: lighter;
420 |     font-size: 0.9rem;
421 | }
422 | 
423 | .covid-banner-main{
424 |     font-size: 1rem;
425 |     font-weight: bold;
426 | }
427 | 
428 | .hashtag-side-chip{
429 |     padding: 1rem;
430 |     border-bottom: solid rgba(238,238,238,0.1) 1px;
431 | }
432 | 
433 | .hashtag-side-chip:hover{
434 |     background-color:rgba(57, 60, 61, 0.2);
435 |     cursor:pointer;
436 | }
437 | 
438 | .hashtag-heading{
439 |     display:flex;
440 |     justify-content: space-between;
441 |     opacity:0.5;
442 |     font-size: 0.9rem;
443 | }
444 | 
445 | .hashtag-main{
446 |     padding-top:0.3rem;
447 |     font-size: 1rem;
448 |     font-weight: bold;
449 | }
450 | 
451 | .tweet-count{
452 |     padding-top: 0.3rem;
453 |     opacity:0.5;
454 |     font-size: 0.9rem;
455 | }
456 | 
457 | .show-more{
458 |     
459 |     padding:1rem;
460 |     padding-bottom: 0;
461 | }
462 | 
463 | .show-more a{
464 |     color:var(--primary-color);
465 |     text-decoration: none;
466 | }
467 | 
468 | .show-more a:hover{
469 |     text-decoration: underline;
470 | }
471 | 
472 | .suggestions{
473 |     display:flex;
474 |     justify-content: space-between;
475 |     align-items: center;
476 |     border-bottom: solid rgba(238,238,238,0.1) 1px;
477 | }
478 | 
479 | 
480 | .suggestions .user-details{
481 |     display:flex;
482 |     justify-content: flex-start;
483 |     align-items: center;
484 |     padding:1rem;
485 |     padding-right:0;
486 | }
487 | 
488 | .suggestions:hover{
489 |     background-color:rgba(57, 60, 61, 0.2);
490 |     cursor:pointer;
491 | }
492 | 
493 | .user-details img{
494 |     width:25%;
495 |     height:25%;
496 |     border-radius: 50%;
497 | }
498 | 
499 | .suggestion-username-wrapper{
500 |     padding: 0 0.8rem;
501 | }
502 | 
503 | .suggestion-username{
504 |     font-size: 0.9rem;
505 |     opacity: 0.5;
506 |     font-weight: lighter;
507 | }
508 | 
509 | .suggestion-name{
510 |     font-size: 1rem;
511 |     font-weight: bold;
512 | }
513 | 
514 | .follow-button{
515 |     padding: 0.5rem 1.2rem;
516 |     margin-right:1rem;
517 |     border: solid 1px var(--primary-color);
518 |     text-align: center;
519 |     border-radius: 50px;
520 |     cursor:pointer;
521 |     font-weight: bold;
522 | }
523 | 
524 | .follow-button:hover{
525 |     opacity:0.8;
526 | }
527 | 
528 | .following{
529 |     background-color: var(--primary-color);
530 |     color:white;
531 |     
532 | }


--------------------------------------------------------------------------------
/FrontendDesigns/Twitter/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Home/Twitter</title>
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
 10 |         integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
 11 |         crossorigin="anonymous" />
 12 |     <link rel="stylesheet" href="./styles/desktop.layout.css">
 13 |     <link rel="stylesheet" href="./styles/normal.layout.css">
 14 | </head>
 15 | 
 16 | <body>
 17 |     <div class="container">
 18 |         <div class="fixed-section">
 19 |             <nav class="navbar">
 20 |                 <div class="nav-brand">
 21 |                     <img src="./images/icons8-twitter.svg" />
 22 |                 </div>
 23 | 
 24 |                 <div class="nav-pills">
 25 |                     <i style="color: rgb(121, 75, 196)" class="fas fa-home"></i> <span
 26 |                         style="color: rgb(121, 75, 196)">Home</span>
 27 |                 </div>
 28 |                 <div class="nav-pills">
 29 |                     <i class="fas fa-hashtag"></i> <span>Explore</span>
 30 |                 </div>
 31 |                 <div class="nav-pills">
 32 |                     <i class="fas fa-bell"></i> <span>Notifications</span>
 33 |                 </div>
 34 |                 <div class="nav-pills">
 35 |                     <i class="fas fa-envelope"></i> <span>Messages </span>
 36 |                 </div>
 37 |                 <div class="nav-pills">
 38 |                     <i class="far fa-bookmark"></i> <span>Bookmark </span>
 39 |                 </div>
 40 |                 <div class="nav-pills">
 41 |                     <i class="fas fa-list-alt"></i> <span>Lists </span>
 42 |                 </div>
 43 |                 <div class="nav-pills">
 44 |                     <i class="fas fa-user-alt"></i><span>Profile</span>
 45 |                 </div>
 46 |                 <div class="nav-pills">
 47 |                     <i class="fas fa-ellipsis-h"></i><span>More</span>
 48 |                 </div>
 49 | 
 50 |                 <div class="tweet">
 51 |                     Tweet
 52 |                 </div>
 53 | 
 54 |                 <div class="min-tweet">
 55 |                     <i class="fas fa-feather-alt"></i>
 56 |                 </div>
 57 |                 <div class="name-chip" style="margin-bottom: 1.5rem;">
 58 |                     <div style="display:flex; justify-content: center; align-items: center; padding:0 0.5rem;">
 59 |                         <img style="height:40px; width:40px; border-radius:50%"
 60 |                             src="https://avatars.githubusercontent.com/u/47717492?s=400&u=b4dcfe5d0656ecd53504f3e061eb8d8e54d2b2ad&v=4">
 61 |                         <div class="name-chip-details" style="font-size:0.8rem; padding:0 0.2rem">
 62 |                             <p style="font-size: 0.9rem;">Soham Shah</p>
 63 |                             <p style="font-size: 0.7rem;position:relative; top:-8px;">@sohamsshah_</p>
 64 |                         </div>
 65 |                     </div>
 66 |                     <div class="name-chip-more" >
 67 |                         <i class="fas fa-ellipsis-h"></i>
 68 |                     </div>
 69 | 
 70 |                 </div>
 71 | 
 72 |             </nav>
 73 |         </div>
 74 |         <div class="messages-tab">
 75 |             <div class="message-icons"><span>Messages</span>
 76 |                 <div>
 77 |                     <i class="fas fa-envelope-open"></i>
 78 |                     <i class="fas fa-angle-double-up"></i>
 79 |                 </div>
 80 | 
 81 |             </div>
 82 |         </div>
 83 |         <div class="scrollable-section">
 84 |         <div class="feed">
 85 |             <nav class="home-navbar">
 86 |                 Home
 87 |                 <i class="fas fa-hand-sparkles"></i>
 88 |             </nav>
 89 |             <div class="compose">
 90 |                 <img style="height:50px; width:50px; border-radius:50%"
 91 |                     src="https://avatars.githubusercontent.com/u/47717492?s=400&u=b4dcfe5d0656ecd53504f3e061eb8d8e54d2b2ad&v=4">
 92 |                 <div class="textarea-wrapper">
 93 |                     <textarea class="textarea" placeholder="What's happening?"></textarea>
 94 |                     <div class="options" style="color:rgb(121, 75, 196); font-size: 1.2rem;">
 95 |                         <div>
 96 |                             <i class="far fa-image"></i>
 97 |                             <i class="fas fa-layer-group"></i>
 98 |                             <i class="far fa-chart-bar"></i>
 99 |                             <i class="far fa-smile"></i>
100 |                             <i class="far fa-calendar-alt"></i>
101 |                         </div>
102 |                         <div class="tweet-option">
103 |                             Tweet
104 |                         </div>
105 |                     </div>
106 |                 </div>
107 |             </div>
108 |             <div style="border-bottom: solid rgba(238,238,238,0.1) 15px;"></div>
109 |             <div class="feed-post">
110 |                 <div class="up-text"><i style="padding-right:0.5rem" class="fas fa-heart"></i> Soham Shah liked</div>
111 |                 <div class="main-tweet">
112 |                     <img style="height:50px; width:50px; border-radius:50%"
113 |                         src="https://pbs.twimg.com/profile_images/1238749114348662784/p9hc5fuP_400x400.jpg">
114 |                     <div class="content">
115 |                         <div class="content-title">
116 |                             <div>
117 |                             <span class="user">Tanay Pratap</span> <span class="username">@tanaypratap</span>
118 |                             </div>
119 |                             <i style="opacity:0.5" class="fas fa-ellipsis-h"></i>
120 |                         </div>
121 |                         <div class="tweet-text">
122 |                             <p>Education is not burger. You can't scale it like McDonald's. </p>
123 | 
124 |                             <p>You need teachers who are passionate about the subject. Teachers who care about students'
125 |                                 future. </p>
126 | 
127 |                             <p>VCs in education need to understand this.</p>
128 |                         </div>
129 |                         <div class="reactions">
130 |                             <div>
131 |                                 <i class="fas fa-reply"></i>
132 |                                 <span class="count">76</span>
133 |                             </div>
134 |                             <div>
135 |                                 <i class="fas fa-retweet"></i>
136 |                                 <span class="count">99</span>
137 |                             </div>
138 |                             <div>
139 |                                 <i class="fas fa-heart"></i>
140 |                                 <span class="count">921</span>
141 |                             </div>
142 |                             <div>
143 |                                 <i class="fas fa-share-square"></i>
144 |                                 
145 |                             </div>
146 |                         </div>
147 | 
148 |                     </div>
149 | 
150 |                 </div>
151 |             </div>
152 | 
153 |             <div class="feed-post">
154 |                 <div class="up-text"><i style="padding-right:0.5rem" class="fas fa-retweet"></i>  Alia Bhatt retweeted</div>
155 |                 <div class="main-tweet">
156 |                     <img style="height:50px; width:50px; border-radius:50%"
157 |                         src="https://pbs.twimg.com/profile_images/1156881198582382592/yUbrONnS_400x400.jpg">
158 |                     <div class="content">
159 |                         <div class="content-title">
160 |                             <div>
161 |                             <span class="user">Ankur Warikoo</span> <span class="username">@warikoo</span>
162 |                             </div>
163 |                             <i style="opacity:0.5" class="fas fa-ellipsis-h"></i>
164 |                         </div>
165 | 
166 |                         <div class="tweet-text">
167 |                             <p>Is there a corporate plan for services such as Netflix, YouTube Premium or Spotify Pro - if one wants to give this as a company benefit?</p>
168 |                         
169 |                         </div>
170 |                         <div class="reactions">
171 |                             <div>
172 |                                 <i class="fas fa-reply"></i>
173 |                                 <span class="count">120</span>
174 |                             </div>
175 |                             <div>
176 |                                 <i class="fas fa-retweet"></i>
177 |                                 <span class="count">68</span>
178 |                             </div>
179 |                             <div>
180 |                                 <i class="fas fa-heart"></i>
181 |                                 <span class="count">501</span>
182 |                             </div>
183 |                             <div>
184 |                                 <i class="fas fa-share-square"></i>
185 |                                 
186 |                             </div>
187 |                         </div>
188 | 
189 |                     </div>
190 | 
191 |                 </div>
192 |             </div>
193 |             <div class="feed-post">
194 |                 <div class="main-tweet">
195 |                     <img style="height:50px; width:50px; border-radius:50%"
196 |                         src="https://pbs.twimg.com/profile_images/1310736373247139840/hentCEA2_400x400.jpg">
197 |                     <div class="content">
198 |                         <div class="content-title">
199 |                             <div>
200 |                             <span class="user">Varun Mayya</span> <span class="username">@VarunMayya</span>
201 |                             </div>
202 |                             <i style="opacity:0.5" class="fas fa-ellipsis-h"></i>
203 |                         </div>
204 | 
205 |                         <div class="tweet-text">
206 |                             <p>Find it strange how Instagram and Twitter are starting to bundle a lot of things, yet unbundling seems to be where all the early stage capital is going</p>
207 |                         </div>
208 |                         <div class="reactions">
209 |                             <div>
210 |                                 <i class="fas fa-reply"></i>
211 |                                 <span class="count">50</span>
212 |                             </div>
213 |                             <div>
214 |                                 <i class="fas fa-retweet"></i>
215 |                                 <span class="count">24</span>
216 |                             </div>
217 |                             <div>
218 |                                 <i class="fas fa-heart"></i>
219 |                                 <span class="count">980</span>
220 |                             </div>
221 |                             <div>
222 |                                 <i class="fas fa-share-square"></i>
223 |                                 
224 |                             </div>
225 |                         </div>
226 | 
227 |                     </div>
228 | 
229 |                 </div>
230 |             </div>
231 |             <div class="feed-post">
232 |                 <div class="up-text"><i style="padding-right:0.5rem" class="fas fa-heart"></i> Soham Shah liked</div>
233 |                 <div class="main-tweet">
234 |                     <img style="height:50px; width:50px; border-radius:50%"
235 |                         src="https://pbs.twimg.com/profile_images/1364491704817098753/V22-Luf7_400x400.jpg">
236 |                     <div class="content">
237 |                         <div class="content-title">
238 |                             <div>
239 |                             <span class="user">Elon Musk</span> <span class="username">@elonmusk</span>
240 |                             </div>
241 |                             <i style="opacity:0.5" class="fas fa-ellipsis-h"></i>
242 |                         </div>
243 |                         <div class="tweet-text">
244 |                             <p>Availability varies by region due to regulatory approval delays and/or Tesla internal development & testing.  </p>
245 | 
246 |                             <p>Note: word “Beta” is used to reduce complacency in usage & set expectations appropriately. All software is first tested internally by Tesla simulation & QA drive teams. </p>
247 |                         </div>
248 |                         <div class="reactions">
249 |                             <div>
250 |                                 <i class="fas fa-reply"></i>
251 |                                 <span class="count">82</span>
252 |                             </div>
253 |                             <div>
254 |                                 <i class="fas fa-retweet"></i>
255 |                                 <span class="count">892</span>
256 |                             </div>
257 |                             <div>
258 |                                 <i class="fas fa-heart"></i>
259 |                                 <span class="count">22K</span>
260 |                             </div>
261 |                             <div>
262 |                                 <i class="fas fa-share-square"></i>
263 |                             
264 |                             </div>
265 |                         </div>
266 | 
267 |                     </div>
268 | 
269 |                 </div>
270 |             </div>
271 |             <div class="feed-post">
272 |                 <div class="up-text"><i style="padding-right:0.5rem" class="fas fa-heart"></i> Rohan Deshmukh liked</div>
273 |                 <div class="main-tweet">
274 |                     <img style="height:50px; width:50px; border-radius:50%"
275 |                         src="https://pbs.twimg.com/profile_images/1219645637324488705/XD94Q6D1_400x400.jpg">
276 |                     <div class="content">
277 |                         <div class="content-title">
278 |                             <div>
279 |                             <span class="user">Akshay Saini</span> <span class="username">@akshaymarch7</span>
280 |                             </div>
281 |                             <i style="opacity:0.5" class="fas fa-ellipsis-h"></i>
282 |                         </div>
283 |                         <div class="tweet-text">
284 |                             <p>Knowing that tomato is a fruit is `knowledge`, but not putting it in your fruit salad is `wisdom`.</p>
285 |                                <span style="color:blueviolet; font-size:1rem"> #BeWise </span>
286 | 
287 |         
288 |                         </div>
289 |                         <div class="reactions">
290 |                             <div>
291 |                                 <i class="fas fa-reply"></i>
292 |                                 <span class="count">67</span>
293 |                             </div>
294 |                             <div>
295 |                                 <i class="fas fa-retweet"></i>
296 |                                 <span class="count">96</span>
297 |                             </div>
298 |                             <div>
299 |                                 <i class="fas fa-heart"></i>
300 |                                 <span class="count">210</span>
301 |                             </div>
302 |                             <div>
303 |                                 <i class="fas fa-share-square"></i>
304 |                                 
305 |                             </div>
306 |                         </div>
307 | 
308 |                     </div>
309 | 
310 |                 </div>
311 |             </div>
312 | 
313 |         </div>
314 |         <div class="sidepane">
315 |             <nav class="sidenav">
316 |             <div class="searchbar">
317 |                 <span><i class="fas fa-search"></i></span><input placeholder="Search">
318 |             </div>
319 |         </nav>
320 |             <div class="side-feed">
321 |                 <div class="side-feed-title">
322 |                     What's happening
323 |                 </div>
324 |                 <div class="covid-side-chip">
325 |                     <div>
326 |                         <div class="covid-banner-heading">
327 |                         <span>COVID-19 LIVE</span>
328 |                         </div>
329 |                         <div class="covid-banner-main">
330 |                         <span>Covid-19 in India</span>
331 |                         </div>
332 |                     </div>
333 |                     <div style="width:40%; padding:0.5rem 0;text-align:right">
334 |                     <img style="width:80px;height:80px;border-radius:16px" src="https://pbs.twimg.com/semantic_core_img/1255575536824233984/CiLy4der?format=jpg&name=240x240">
335 |                     </div>
336 |                 </div>
337 |                 <div class="hashtag-side-chip">
338 |                     <div class="hashtag-heading">
339 |                         <span>Cricket Trending</span>
340 |                         <i class="fas fa-ellipsis-h"></i>
341 |                         
342 |                     </div>
343 |                     <div class="hashtag-main">#DhoniReturns</div>
344 |                     <div class="tweet-count">20.1K Tweets</div>
345 |                 </div>
346 |                 <div class="hashtag-side-chip">
347 |                     <div class="hashtag-heading">
348 |                         <span>Trending in India</span>
349 |                         <i class="fas fa-ellipsis-h"></i>
350 |                         
351 |                     </div>
352 |                     <div class="hashtag-main">#ItsNotOK</div>
353 |                     <div class="tweet-count">2.1K Tweets</div>
354 |                 </div>
355 |                 <div class="hashtag-side-chip">
356 |                     <div class="hashtag-heading">
357 |                         <span>Movies & TV</span>
358 |                         <i class="fas fa-ellipsis-h"></i>
359 |                         
360 |                     </div>
361 |                     <div class="hashtag-main">#TheWhiteTiger</div>
362 |                     <div class="tweet-count">14.8K Tweets</div>
363 |                 </div>
364 |                 <div class="show-more">
365 |                     <a href="../Docsite/index.html">Show More</a>
366 |                 </div>
367 |                 
368 | 
369 |             </div>
370 |             <div class="side-feed">
371 |                 <div class="side-feed-title">
372 |                     Whom to follow
373 |                 </div>
374 |                 <div class="suggestions">
375 |                     <div class="user-details">
376 |                     
377 |                         <img src="https://pbs.twimg.com/profile_images/1350667071202332673/glWYSyvy_400x400.jpg" alt="Alia">
378 |                     
379 |                     <div class="suggestion-username-wrapper">
380 |                         <div class="suggestion-name">neog.camp</div>
381 |                         <div class="suggestion-username">@neogcamp</div>
382 |                     </div>
383 |                 </div>
384 |                     <div class="follow-button following">
385 |                         <span>Following</span>
386 |                     </div>
387 |                 </div>
388 | 
389 |                 <div class="suggestions">
390 |                     <div class="user-details">
391 |                     
392 |                         <img src="https://pbs.twimg.com/profile_images/1350116584996577285/XwaXWjcA_400x400.jpg" alt="Alia">
393 |                     
394 |                     <div class="suggestion-username-wrapper">
395 |                         <div class="suggestion-name">roc8HQ</div>
396 |                         <div class="suggestion-username">@roc8HQ</div>
397 |                     </div>
398 |                 </div>
399 |                     <div class="follow-button">
400 |                         <span>Follow</span>
401 |                     </div>
402 |                 </div>
403 | 
404 |                 <div class="suggestions">
405 |                     <div class="user-details">
406 |                     
407 |                         <img src="https://pbs.twimg.com/profile_images/1329183431046033408/hdafflIK_400x400.jpg" alt="Alia">
408 |                     
409 |                     <div class="suggestion-username-wrapper">
410 |                         <div class="suggestion-name">Avalon Meta Live</div>
411 |                         <div class="suggestion-username">@live_meta</div>
412 |                     </div>
413 |                 </div>
414 |                     <div class="follow-button">
415 |                         <span>Follow</span>
416 |                     </div>
417 |                 </div>
418 |                 <div class="show-more">
419 |                     <a href="../Docsite/index.html">Show More</a>
420 |                 </div>
421 | 
422 |             </div>
423 | 
424 |         </div>
425 |     </div>
426 |     </div>
427 | <script>
428 | </script>
429 | </body>
430 | 
431 | </html>


--------------------------------------------------------------------------------