|
32 | 32 | margin: 0; |
33 | 33 | } |
34 | 34 |
|
35 | | - .header { |
36 | | - width: 100%; |
37 | | - min-height: 500px; |
38 | | - background-color: #ffeec2; |
39 | | - } |
40 | | - |
41 | | - .header-container { |
42 | | - max-width: 650px; |
43 | | - margin: auto; |
44 | | - padding-top: 200px; |
45 | | - } |
46 | | - |
47 | | - .header-container-image { |
48 | | - max-width: 850px; |
49 | | - margin: auto; |
50 | | - margin-top: -200px; |
51 | | - } |
52 | | - |
53 | | - h1 { |
54 | | - color: #333; |
55 | | - font-size: 32px; |
56 | | - font-weight: 900; |
57 | | - } |
58 | | - |
59 | | - h2 { |
60 | | - color: #333; |
61 | | - font-size: 20px; |
62 | | - font-weight: 500; |
63 | | - margin-top: 5px; |
64 | | - } |
65 | | - |
66 | | - .logo { |
67 | | - width: 60px; |
68 | | - height: auto; |
69 | | - position: fixed; |
70 | | - top: 40px; |
71 | | - left: 40px; |
72 | | - } |
73 | | - |
74 | | - .head-image { |
75 | | - margin-top: 40px; |
| 35 | + .main { |
76 | 36 | width: 100%; |
77 | 37 | height: auto; |
78 | | - max-height: 500px; |
79 | | - border-radius: 10px; |
80 | | - object-fit: cover; |
81 | | - } |
82 | | - |
83 | | - .content { |
84 | | - max-width: 650px; |
85 | | - margin: auto; |
86 | | - margin-top: 40px; |
87 | | - margin-bottom: 40px; |
88 | | - color: #333; |
89 | | - font-size: 18px; |
90 | | - line-height: 26px; |
91 | | - font-weight: 300; |
92 | | - } |
93 | | - |
94 | | - a { |
95 | | - color: #485bff; |
96 | | - text-decoration: none; |
97 | | - display: block; |
98 | | - margin-top: 10px; |
99 | | - margin-bottom: 10px; |
100 | | - cursor: pointer; |
101 | | --webkit-tap-highlight-color: transparent; |
102 | | - } |
103 | | - |
104 | | - .buttonlink { |
105 | | - display: inline-block; |
106 | | - width: fit-content; |
107 | | - font-size: 16px; |
108 | | - font-weight: 600; |
109 | | - color: rgb(255, 255, 255); |
110 | | - background-color: #485bff; |
111 | | - border-style: solid; |
112 | | - border-width: 0px; |
113 | | - border-radius: 56px; |
114 | | - padding: 15px 40px; |
115 | | - text-decoration: none; |
116 | | - cursor: pointer; |
117 | | --webkit-tap-highlight-color: transparent; |
118 | | - } |
119 | | - |
120 | | - @media only screen and (max-width: 600px) { |
121 | | - .header-container { |
122 | | - padding-left: 40px; |
123 | | - padding-right: 40px; |
124 | | - padding-top: 150px; |
125 | | - } |
126 | | - .head-image { |
127 | | - border-radius: 0px; |
128 | | - } |
129 | | - .header { |
130 | | - min-height: initial; |
131 | | - } |
132 | | - .content { |
133 | | - margin-top: 0px; |
134 | | - padding: 40px; |
135 | | - } |
136 | | - } |
137 | | - video { |
138 | | - border: 1px solid lightgray; |
139 | | - width: 100%; |
140 | | - background-color: #eee; |
141 | 38 | } |
142 | 39 | </style> |
143 | 40 | </head> |
144 | 41 |
|
145 | 42 | <body> |
146 | | - <img class="logo" src="https://i.ibb.co/wMGvWqh/Gleap-Logo.png" /> |
147 | | - <div class="header"> |
148 | | - <div class="header-container"> |
149 | | - <h1>UI/UX Tests</h1> |
150 | | - <h2>Good morning.</h2> |
151 | | - </div> |
152 | | - </div> |
153 | | - <div class="header-container-image"> |
154 | | - <img class="head-image" src="pexels-jaymantri-4827.jpg" /> |
155 | | - </div> |
156 | | - <div class="content" id="haha"> |
157 | | - <span |
158 | | - >The Gleap SDK for JavScript is the easiest way to integrate Gleap into |
159 | | - your apps! Achieve better app quality & ratings with comprehensive |
160 | | - in-app bug reporting. Gleap offers affordable In-App Bug Reporting for |
161 | | - Apps, WebApps & Websites.</span |
162 | | - > |
163 | | - <br /><br /> |
164 | | - <span |
165 | | - >No more wasting time trying to reproduce a bug. Gleap reports |
166 | | - automatically contain a replay video, session data, logs and more. Even |
167 | | - better: You can add custom data to your bug details.</span |
168 | | - > |
169 | | - <br /><br /> |
170 | | - <div class="buttonlink" onclick="window.open('appwidget.html')">Get started |
171 | | - </div> |
172 | | - <br /><br /> |
173 | | - <span |
174 | | - >In less than a minute you can add our Gleap SDK to your App or WebApp. |
175 | | - Install our SDK, build and run. A piece of cake.</span |
176 | | - ><br /> |
177 | | - <a href="appwidget.html">GO to it!</a>. |
178 | | - </div> |
| 43 | + <img class="main" src="./WireFrame.svg" /> |
179 | 44 | <!-- index.js as found in build/index.js --> |
180 | 45 | <script src="index.js"></script> |
181 | 46 | <script src="main.js"></script> |
|
0 commit comments