├── images
├── Favicon.png
└── profile_image.jpg
├── index.html
└── style.css
/images/Favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/afordigital/instagram-layout/f863b43f5814799d096313735e52a7455db22cba/images/Favicon.png
--------------------------------------------------------------------------------
/images/profile_image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/afordigital/instagram-layout/f863b43f5814799d096313735e52a7455db22cba/images/profile_image.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Instagram
9 |
10 |
11 |
12 |
377 |
378 |
379 | Instagram profile
380 | This is an Instagram account
381 |
382 |
383 |
384 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.cdnfonts.com/css/segoe-ui-4');
2 | :root {
3 | font-family: 'Segoe UI', sans-serif;
4 | --ig-primary-background: #000;
5 | --ig-text-primary: #f5f5f5;
6 | --ig-hover-overlay: rgba(255, 255, 255, 0.1);
7 | --ig-border-navbar: #2e2e2e;
8 | --tablet-breakpoint: 768px;
9 | --desktop-breakpoint: 1264px;
10 | }
11 |
12 | html {
13 | box-sizing: border-box;
14 | font-family: 'Segoe UI', sans-serif;
15 | }
16 |
17 | *,
18 | *:before,
19 | *:after {
20 | box-sizing: inherit;
21 | }
22 |
23 | body {
24 | display: flex;
25 | color: black;
26 | background-color: white;
27 | margin: 0;
28 | padding: 0;
29 | background-color: var(--ig-primary-background);
30 | }
31 |
32 | main {
33 | padding: 1rem;
34 | width: 100%;
35 | height: 100%;
36 | }
37 |
38 | li {
39 | list-style: none;
40 | }
41 |
42 | a {
43 | text-decoration: none;
44 | color: white;
45 | }
46 |
47 | .link {
48 | display: flex;
49 | padding: 12px;
50 | border-radius: 8px;
51 | align-items: center;
52 | gap: 16px;
53 | width: 100%;
54 | }
55 |
56 | .link > a {
57 | display: flex;
58 | align-items: center;
59 | gap: 16px;
60 | }
61 |
62 | .link__text {
63 | display: none;
64 | }
65 |
66 | .link__image--profile {
67 | border-radius: 50%;
68 | }
69 |
70 | .link--mobile-hide {
71 | display: none;
72 | }
73 |
74 | .navbar {
75 | width: 100%;
76 | position: fixed;
77 | bottom: 0;
78 | padding: 16px;
79 | border-top: 1px solid var(--ig-border-navbar);
80 | display: flex;
81 | gap: 40px;
82 | }
83 |
84 | .navbar__logo {
85 | display: none;
86 | }
87 |
88 | .navbar__logo .logo__image,
89 | .navbar__logo .logo__isotype {
90 | display: none;
91 | }
92 |
93 | .navbar__container {
94 | display: flex;
95 | gap: 10px;
96 | justify-content: space-between;
97 | width: 100%;
98 | margin: 0;
99 | padding: 0;
100 | }
101 |
102 | .navbar__more {
103 | display: none;
104 | }
105 |
106 | /* Tablet device */
107 |
108 | @media (min-width: 768px) {
109 | .navbar {
110 | position: inherit;
111 | width: auto;
112 | border-top: none;
113 | border-right: 1px solid var(--ig-border-navbar);
114 | flex-direction: column;
115 | align-items: center;
116 | }
117 | .navbar__logo {
118 | display: flex;
119 | padding: 24px 0 0 0;
120 | }
121 | .navbar__logo .logo__isotype {
122 | display: flex;
123 | }
124 | .navbar__container {
125 | flex-direction: column;
126 | flex: 1;
127 | justify-content: start;
128 | }
129 | .navbar__more {
130 | display: flex;
131 | }
132 | .link--mobile-hide {
133 | display: flex;
134 | }
135 | .link:hover {
136 | background-color: #1a1a1a;
137 | transition: 200ms;
138 | cursor: pointer;
139 | }
140 | .link:hover .link__image {
141 | transition: 100ms;
142 | transform: scale(1.05);
143 | }
144 | }
145 |
146 | /* Desktop device */
147 |
148 | @media (min-width: 1264px) {
149 | .navbar {
150 | align-items: start;
151 | }
152 | .navbar__logo {
153 | display: flex;
154 | padding: 24px 0 0 12px;
155 | }
156 | .navbar__logo .logo__image {
157 | display: flex;
158 | }
159 | .navbar__logo .logo__isotype {
160 | display: none;
161 | }
162 | .navbar .link__text {
163 | display: block;
164 | padding-right: 50px;
165 | }
166 | .link:has(svg:hover) {
167 | background: red;
168 | }
169 | }
170 |
--------------------------------------------------------------------------------