├── download.png ├── grid-practice.css ├── grid-practice.html ├── index.css ├── index.html ├── responsive.css └── responsive.html /download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAMUDRALAARAVIND/acciojob-CSS/119e2ccf579a8242598378d8180a2564443a32c0/download.png -------------------------------------------------------------------------------- /grid-practice.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | } 4 | .container { 5 | display: grid ; 6 | grid-template-columns:1fr 2fr ; 7 | background-color: #F3F8FF; 8 | column-gap: 10px; 9 | width: 500px; 10 | } 11 | .left { 12 | display: flex; 13 | flex-flow: column wrap; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | .right{ 18 | display: grid; 19 | grid-template-columns: repeat(2, 1fr); 20 | gap: 10px; 21 | padding: 20px; 22 | } 23 | .item { 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | } 28 | 29 | .bottom { 30 | grid-column: 1 / -1; 31 | padding: 20px; 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | color: blue ; 36 | } 37 | .material-icons { 38 | font-size: 50px !important; 39 | } 40 | .arrow-icon{ 41 | font-size: 20px !important; 42 | } 43 | 44 | button { 45 | border: none ; 46 | color: blue ; 47 | background-color: white; 48 | } 49 | 50 | .right, .left, .bottom, .item { 51 | background-color: white; 52 | border-radius: 5px; 53 | border: 0.1px solid rgb(226, 224, 224) ; 54 | } 55 | .bottom{ 56 | border: none ; 57 | margin-top: 10px; 58 | } -------------------------------------------------------------------------------- /grid-practice.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive Website 8 | 9 | 11 | 12 | 13 |
14 |
15 | 16 |

0.8/10

17 | Job Sincerity 18 |
19 |
20 |
21 | favorite 22 |
23 |

30/126

24 |
Assignment Score
25 |
26 |
27 |
28 | favorite 29 |
30 |

30/126

31 |
Assignment Score
32 |
33 |
34 |
35 | favorite 36 |
37 |

30/126

38 |
Assignment Score
39 |
40 |
41 |
42 | favorite 43 |
44 |

30/126

45 |
Assignment Score
46 |
47 |
48 |
49 |
50 | 51 | expand_less 52 |
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | /* .flex-container { 2 | border: 2px solid blue ; 3 | display: flex; 4 | flex-flow: column wrap; 5 | height: 400px; 6 | justify-content: center; 7 | align-items: center ; 8 | align-content: space-evenly; 9 | } 10 | 11 | .flex-item { 12 | background-color: blue; 13 | padding: 50px; 14 | color: white ; 15 | border: 1px solid orange; 16 | } 17 | .item1 { 18 | text-align: left; 19 | } 20 | 21 | .item1 { 22 | align-self: center; 23 | } */ 24 | 25 | /* 26 | flex-start(not default) 27 | stretch(default) 28 | flex-end 29 | center 30 | */ 31 | 32 | /* 33 | justify-content: main ; 34 | 35 | { 36 | align-items 37 | align-content 38 | align-self 39 | 40 | : cross axis 41 | } 42 | */ 43 | 44 | 45 | /* .grid-container{ 46 | border: 2px solid blue ; 47 | display: grid; 48 | grid-template-columns:1fr 2fr 1fr; 49 | grid-template-rows: 1fr 2fr 2fr; 50 | height: 500px; 51 | } 52 | .grid-item { 53 | background-color: #ebc0c0; 54 | margin: 1px; 55 | padding: 20px; 56 | } 57 | 58 | .item2 { 59 | grid-column-start: 2; 60 | grid-column-end: -1; 61 | grid-row: 1 / 2; 62 | grid-column: 1 / -1 ; 63 | } */ 64 | 65 | 66 | /* .item4 { 67 | background-color: blue; 68 | width: 20px; 69 | height: 20px; 70 | justify-self: center; 71 | align-self: center; 72 | } */ 73 | 74 | /* 75 | Box-sizing: 76 | 77 | .container { 78 | background-color: blue; 79 | width: 100px; 80 | height: 100px; 81 | padding: 20px; 82 | border: 20px solid red ; 83 | box-sizing:border-box ; 84 | } */ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 18 | 19 | 26 | 29 |

I am index file

30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /responsive.css: -------------------------------------------------------------------------------- 1 | /* 2 | device-width > 800px make color of text in blue 3 | else make the color of the text in red 4 | */ 5 | 6 | /* 7 | 8 | @media (typeof device) also (expressions) { 9 | regular CSS code 10 | } 11 | 12 | */ 13 | 14 | 15 | /* @media all { 16 | div { 17 | color: red ; 18 | } 19 | } */ 20 | 21 | /* 22 | max-width & min-width 23 | screen-width: 320px 24 | color ? 25 | 26 | */ 27 | /* div{ 28 | font-size: 100px; 29 | } 30 | 31 | @media (min-width: 500px) { 32 | div { 33 | color: blue; 34 | } 35 | } 36 | div { 37 | color: yellow ; 38 | } 39 | @media (max-width: 400px) { 40 | div { 41 | color: red ; 42 | } 43 | } */ 44 | 45 | /* orientation => landscape and potrait */ 46 | /* 47 | width > height = landscape 48 | height > width = portrait 49 | */ 50 | 51 | /* @media (orientation: landscape) { 52 | div { 53 | color: red 54 | } 55 | } 56 | 57 | @media (orientation: portrait) { 58 | div { 59 | color: blue ; 60 | } 61 | } */ 62 | 63 | /* .container { 64 | padding: 20px; 65 | background-color: orange; 66 | display: grid; 67 | grid-template-columns: repeat(5, 100px); 68 | gap: 20px; 69 | } 70 | 71 | .item { 72 | background-color: white; 73 | padding: 50px; 74 | } 75 | .item3 { 76 | grid-column: 1 / -1; 77 | } 78 | 79 | /* screenWidth < 800px */ 80 | /* @media (max-width: 800px) { 81 | .container { 82 | grid-template-columns: 1fr ; 83 | } 84 | } */ 85 | /* body{ 86 | margin: 0; 87 | } 88 | .container { 89 | display: flex; 90 | flex-flow: row wrap ; 91 | justify-content: space-between; 92 | padding: 10px ; 93 | background-color: black; 94 | color: white ; 95 | } 96 | 97 | .menu { 98 | display: none !important; 99 | } 100 | 101 | a { 102 | text-decoration: none ; 103 | color: white ; 104 | } 105 | 106 | @media (max-width: 700px) { 107 | a { 108 | display: none ; 109 | } 110 | .menu { 111 | display: block !important; 112 | } 113 | } */ 114 | 115 | /* 116 | em, rem, vw , vh , % 117 | px, cm, mm, pt 118 | 119 | width: 40vw ; 120 | 121 | max() 122 | min() 123 | calc() 124 | min-width 125 | max-width 126 | */ 127 | 128 | 129 | img { 130 | border: 5px solid red ; 131 | width: calc(10px + 40vw / 2) 132 | } -------------------------------------------------------------------------------- /responsive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive 8 | 9 | 11 | 12 | 13 | 23 | 24 | 25 | 26 | --------------------------------------------------------------------------------