├── README.md ├── assets ├── imgs │ ├── Logo.png │ └── show.png └── styles.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # FIGMA_ALTSCHOOL_AFRICA_assignment_3 2 | replicate a figma design using HTML and CSS and make it responsive -------------------------------------------------------------------------------- /assets/imgs/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonnero234/FIGMA_ALTSCHOOL_AFRICA_assignment_3/HEAD/assets/imgs/Logo.png -------------------------------------------------------------------------------- /assets/imgs/show.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonnero234/FIGMA_ALTSCHOOL_AFRICA_assignment_3/HEAD/assets/imgs/show.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Figma-1 7 | 8 | 9 | 10 |
11 |
12 | logo image 13 |

For Individuals

14 |

Start benefiting from the wellness experience. For companies looking on increasing productivity, and improving organization wellness.

15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 |
26 |
27 |
28 | 29 |
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 | 42 |
43 |
44 | 45 |
46 |
47 | 48 | 49 | 50 |
51 |
54 | 55 |
56 | 57 | 58 |
59 | 60 |
61 |
62 |
63 |

By clicking Register, you agree to our Terms of Use and our Privacy Policy

64 |
65 |
66 |
67 | 68 | -------------------------------------------------------------------------------- /assets/styles.css: -------------------------------------------------------------------------------- 1 | .body{ 2 | width: 100%; height: 100%; opacity: 0.04; background-color: #2EC4B6 !important; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .header-paragraph{ 8 | color: #737373; font-size: 16px; font-family: Brown; font-weight: 400; line-height: 25px; word-wrap: break-word; 9 | align-items: center; 10 | justify-content: center; 11 | align-items: center; 12 | } 13 | 14 | .main{ 15 | display: flex; 16 | background-color: aliceblue; 17 | justify-content: center; 18 | align-items: center; 19 | height: 100vh; 20 | } 21 | 22 | .form-table{ 23 | background: white; box-shadow: 0px 4px 50px rgba(3.59, 8.13, 19.13, 0.10); border-radius: 6px; 24 | justify-content: center; 25 | align-items: center; 26 | flex-direction: column; 27 | margin-left: 20px; 28 | margin-right: 70px; 29 | display: flex; 30 | margin-top: -200px; 31 | } 32 | .header{ 33 | flex-direction: column; 34 | justify-content: center; 35 | align-items: center; 36 | height: 100%; 37 | margin-top: 300px; 38 | } 39 | .header-paragraph{ 40 | word-wrap: break-word; 41 | width: 70%; 42 | height: 50%; 43 | } 44 | 45 | .name-section{ 46 | display: flex; 47 | margin-bottom: 1rem; 48 | 49 | } 50 | .fname{ 51 | margin-right: 30px; 52 | } 53 | .kg{ 54 | margin-right: 30px; 55 | } 56 | 57 | .sex{margin-right: 30px; 58 | } 59 | .Dob{ 60 | margin-left: -10px; 61 | } 62 | 63 | .lname{ 64 | float: left; 65 | } 66 | .cm{float: left;} 67 | 68 | .Dob{ 69 | float: left; 70 | } 71 | 72 | .weight-section{ 73 | display: flex; 74 | margin-bottom: 1rem; 75 | } 76 | .activity-section{ 77 | display: flex; 78 | margin-bottom: 1rem; 79 | } 80 | 81 | .register-section{ 82 | background-color: aqua; 83 | width: 100%; 84 | } 85 | 86 | .second-line{ 87 | display: flex; 88 | margin-bottom: 1rem; 89 | } 90 | 91 | .password-section{ 92 | margin-bottom: 1rem; 93 | } 94 | 95 | .form-table input, select, button { 96 | height: 48px; 97 | width: 98%; 98 | } 99 | 100 | .form-table select{ 101 | width: 100% !important; 102 | } 103 | .form-table .sex{ 104 | width: 48%; 105 | } 106 | .form-table .Dob{ 107 | width: 48%; 108 | } 109 | 110 | 111 | 112 | 113 | 114 | /*--mobile-768px-responsiveness--*/ 115 | @media screen and (max-width: 768px) { 116 | .main{ 117 | flex-direction: row; 118 | flex-wrap: wrap; 119 | width: 100%; 120 | 121 | } 122 | .form-table{ 123 | margin-top: 0; 124 | .name-section{ 125 | display:inline-block; 126 | } 127 | .second-line{ 128 | display: grid; 129 | } 130 | .weight-section{ 131 | display: grid; 132 | } 133 | 134 | 135 | } 136 | 137 | .name-section{ 138 | width: 100% !important; 139 | } 140 | .kg{ 141 | width: 100% !important; 142 | } 143 | .fname{ 144 | width: 100% !important; 145 | } 146 | .lname{ 147 | width: 100%; 148 | } 149 | .sex{ 150 | width: 100% !important; 151 | } 152 | .Dob{ 153 | width: 100% !important; 154 | margin-left: 0; 155 | } 156 | 157 | .header{ 158 | margin-bottom:-250px; 159 | display: inline-block; 160 | margin-top:50px; 161 | .header-paragraph{ 162 | display: contents; 163 | flex-wrap: wrap; 164 | align-items: center; 165 | } 166 | } 167 | 168 | } 169 | --------------------------------------------------------------------------------