API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 24th, 2017
65
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.32 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. .newContent img {
  3. display: block;
  4. max-width: 100%; }
  5.  
  6. .newContent .HeaderLanding {
  7. min-height: 300px;
  8. display: -webkit-box;
  9. display: -ms-flexbox;
  10. display: flex;
  11. -webkit-box-orient: vertical;
  12. -webkit-box-direction: normal;
  13. -ms-flex-direction: column;
  14. flex-direction: column;
  15. -webkit-box-pack: end;
  16. -ms-flex-pack: end;
  17. justify-content: flex-end;
  18. background-size: auto 40%;
  19. background-repeat: no-repeat;
  20. background-position: top center;
  21. color: #000;
  22. position: relative; }
  23. .newContent .HeaderLanding__logos {
  24. display: none; }
  25. .newContent .HeaderLanding__copy {
  26. margin-bottom: 16px;
  27. text-align: center;
  28. font-family: "font sans serif normal", Arial, sans-serif; }
  29. .newContent .HeaderLanding__mainTxt {
  30. font-size: 3em;
  31. font-family: "font sans serif black", Arial, sans-serif;
  32. margin: 16px 0; }
  33. .newContent .HeaderLanding__subtitle {
  34. display: block;
  35. font-size: 1.5em; }
  36. .newContent .HeaderLanding__cta {
  37. display: block;
  38. padding: 8px;
  39. width: 80%;
  40. max-width: 300px;
  41. background-color: #000;
  42. margin: 16px auto;
  43. color: white;
  44. font-size: 1.5em; }
  45. .newContent .HeaderLanding__cta:hover {
  46. background-color: #333; }
  47. @media (min-width: 767px) {
  48. .newContent .HeaderLanding {
  49. background-size: cover;
  50. background-position: center 50px;
  51. margin-bottom: 16px;
  52. color: #fff; }
  53. .newContent .HeaderLanding__logos {
  54. position: absolute;
  55. top: 0;
  56. display: -webkit-box;
  57. display: -ms-flexbox;
  58. display: flex;
  59. -webkit-box-orient: horizontal;
  60. -webkit-box-direction: normal;
  61. -ms-flex-direction: row;
  62. flex-direction: row;
  63. -webkit-box-pack: center;
  64. -ms-flex-pack: center;
  65. justify-content: center;
  66. height: 50px;
  67. width: 100%;
  68. background-color: #fff; }
  69. .newContent .HeaderLanding__logoItem {
  70. height: 40px;
  71. width: auto;
  72. margin: 0 16px; } }
  73.  
  74. .newContent .Container {
  75. margin: 0 auto;
  76. max-width: 1034px;
  77. padding: 0 32px;
  78. position: relative;
  79. width: 100%; }
  80.  
  81. .newContent .Row {
  82. display: -webkit-box;
  83. display: -ms-flexbox;
  84. display: flex;
  85. -webkit-box-orient: vertical;
  86. -webkit-box-direction: normal;
  87. -ms-flex-direction: Column;
  88. flex-direction: Column;
  89. padding: 1rem 0;
  90. width: 100%; }
  91.  
  92. .newContent .Row.Row-no-padding {
  93. padding: 0; }
  94.  
  95. .newContent .Row.Row-no-padding > .Column {
  96. padding: 0; }
  97.  
  98. .newContent .Row.Row-wrap {
  99. -ms-flex-wrap: wrap;
  100. flex-wrap: wrap; }
  101.  
  102. .newContent .Row.Row-top {
  103. -webkit-box-align: start;
  104. -ms-flex-align: start;
  105. align-items: flex-start; }
  106.  
  107. .newContent .Row.Row-bottom {
  108. -webkit-box-align: end;
  109. -ms-flex-align: end;
  110. align-items: flex-end; }
  111.  
  112. .newContent .Row.Row-center {
  113. -webkit-box-align: center;
  114. -ms-flex-align: center;
  115. align-items: center; }
  116.  
  117. .newContent .Row.Row-stretch {
  118. -webkit-box-align: stretch;
  119. -ms-flex-align: stretch;
  120. align-items: stretch; }
  121.  
  122. .newContent .Row.Row-baseline {
  123. -webkit-box-align: baseline;
  124. -ms-flex-align: baseline;
  125. align-items: baseline; }
  126.  
  127. .newContent .Row .Column {
  128. display: block;
  129. -webkit-box-flex: 1;
  130. -ms-flex: 1 1 auto;
  131. flex: 1 1 auto;
  132. margin-left: 0;
  133. max-width: 100%;
  134. width: 100%;
  135. padding: 0.5rem 0; }
  136.  
  137. .newContent .Row .Column.Column-offset-10 {
  138. margin-left: 10%; }
  139.  
  140. .newContent .Row .Column.Column-offset-20 {
  141. margin-left: 20%; }
  142.  
  143. .newContent .Row .Column.Column-offset-25 {
  144. margin-left: 25%; }
  145.  
  146. .newContent .Row .Column.Column-offset-33, .newContent .Row .Column.Column-offset-34 {
  147. margin-left: 33.3333%; }
  148.  
  149. .newContent .Row .Column.Column-offset-50 {
  150. margin-left: 50%; }
  151.  
  152. .newContent .Row .Column.Column-offset-66, .newContent .Row .Column.Column-offset-67 {
  153. margin-left: 66.6666%; }
  154.  
  155. .newContent .Row .Column.Column-offset-75 {
  156. margin-left: 75%; }
  157.  
  158. .newContent .Row .Column.Column-offset-80 {
  159. margin-left: 80%; }
  160.  
  161. .newContent .Row .Column.Column-offset-90 {
  162. margin-left: 90%; }
  163.  
  164. .newContent .Row .Column.Column-10 {
  165. -webkit-box-flex: 0;
  166. -ms-flex: 0 0 10%;
  167. flex: 0 0 10%;
  168. max-width: 10%; }
  169.  
  170. .newContent .Row .Column.Column-20 {
  171. -webkit-box-flex: 0;
  172. -ms-flex: 0 0 20%;
  173. flex: 0 0 20%;
  174. max-width: 20%; }
  175.  
  176. .newContent .Row .Column.Column-25 {
  177. -webkit-box-flex: 0;
  178. -ms-flex: 0 0 25%;
  179. flex: 0 0 25%;
  180. max-width: 25%; }
  181.  
  182. .newContent .Row .Column.Column-33, .newContent .Row .Column.Column-34 {
  183. -webkit-box-flex: 0;
  184. -ms-flex: 0 0 33.3333%;
  185. flex: 0 0 33.3333%;
  186. max-width: 33.3333%; }
  187.  
  188. .newContent .Row .Column.Column-40 {
  189. -webkit-box-flex: 0;
  190. -ms-flex: 0 0 40%;
  191. flex: 0 0 40%;
  192. max-width: 40%; }
  193.  
  194. .newContent .Row .Column.Column-50 {
  195. -webkit-box-flex: 0;
  196. -ms-flex: 0 0 50%;
  197. flex: 0 0 50%;
  198. max-width: 50%; }
  199.  
  200. .newContent .Row .Column.Column-60 {
  201. -webkit-box-flex: 0;
  202. -ms-flex: 0 0 60%;
  203. flex: 0 0 60%;
  204. max-width: 60%; }
  205.  
  206. .newContent .Row .Column.Column-66, .newContent .Row .Column.Column-67 {
  207. -webkit-box-flex: 0;
  208. -ms-flex: 0 0 66.6666%;
  209. flex: 0 0 66.6666%;
  210. max-width: 66.6666%; }
  211.  
  212. .newContent .Row .Column.Column-75 {
  213. -webkit-box-flex: 0;
  214. -ms-flex: 0 0 75%;
  215. flex: 0 0 75%;
  216. max-width: 75%; }
  217.  
  218. .newContent .Row .Column.Column-80 {
  219. -webkit-box-flex: 0;
  220. -ms-flex: 0 0 80%;
  221. flex: 0 0 80%;
  222. max-width: 80%; }
  223.  
  224. .newContent .Row .Column.Column-90 {
  225. -webkit-box-flex: 0;
  226. -ms-flex: 0 0 90%;
  227. flex: 0 0 90%;
  228. max-width: 90%; }
  229.  
  230. .newContent .Row .Column .Column-top {
  231. -ms-flex-item-align: start;
  232. align-self: flex-start; }
  233.  
  234. .newContent .Row .Column .Column-bottom {
  235. -ms-flex-item-align: end;
  236. align-self: flex-end; }
  237.  
  238. .newContent .Row .Column .Column-center {
  239. -ms-grid-Row-align: center;
  240. -ms-flex-item-align: center;
  241. -ms-grid-row-align: center;
  242. align-self: center; }
  243.  
  244. @media (min-width: 40rem) {
  245. .newContent .Row {
  246. -webkit-box-orient: vertical;
  247. -webkit-box-direction: normal;
  248. -ms-flex-direction: Row;
  249. flex-direction: Row;
  250. margin-left: -1.0rem;
  251. width: calc(100% + 2.0rem); }
  252. .newContent .Row .Column {
  253. margin-bottom: inherit;
  254. padding: 0 1.0rem; } }
  255.  
  256. .newContent .Box {
  257. border: 1px solid #ccc;
  258. padding: 1rem;
  259. height: 100%;
  260. width: 100%; }
  261. .newContent .Box__title {
  262. font-family: 'font sans serif black';
  263. font-size: 18px; }
  264. @media (min-width: 767px) {
  265. .newContent .Box__title {
  266. font-size: 21px; } }
  267. .newContent .Box__list {
  268. margin: 1rem 0; }
  269. .newContent .Box__list--dotted {
  270. list-style-type: disc;
  271. padding-left: 1rem; }
  272. .newContent .Box__link {
  273. text-decoration: underline; }
  274. .newContent .Box__link:hover {
  275. text-decoration: none; }
  276.  
  277. .newContent .Newsletter {
  278. background: #A6CAD7;
  279. display: -webkit-box;
  280. display: -ms-flexbox;
  281. display: flex; }
  282. @media (min-width: 767px) {
  283. .newContent .Newsletter {
  284. -webkit-box-orient: horizontal;
  285. -webkit-box-direction: normal;
  286. -ms-flex-direction: row;
  287. flex-direction: row; } }
  288. .newContent .Newsletter__text {
  289. -webkit-box-orient: vertical;
  290. -webkit-box-direction: normal;
  291. -ms-flex-direction: column;
  292. flex-direction: column;
  293. padding: 1rem;
  294. width: 100%; }
  295. @media (min-width: 767px) {
  296. .newContent .Newsletter__text {
  297. width: 70%; } }
  298. .newContent .Newsletter__image {
  299. width: 100%; }
  300. @media (min-width: 767px) {
  301. .newContent .Newsletter__image {
  302. width: 30%; } }
  303. .newContent .Newsletter__title {
  304. font-family: 'font sans serif black';
  305. font-size: 24px;
  306. line-height: 1.25; }
  307. .newContent .Newsletter__subtitle {
  308. font-size: 14px;
  309. line-height: 1.25;
  310. padding-top: 1.5rem; }
  311. .newContent .Newsletter__form {
  312. display: -webkit-box;
  313. display: -ms-flexbox;
  314. display: flex;
  315. height: 40px;
  316. margin-top: 2rem; }
  317. .newContent .Newsletter__input {
  318. height: 100%;
  319. margin-right: 1rem;
  320. width: 60%; }
  321. .newContent .Newsletter__submit {
  322. background: black;
  323. border: 0;
  324. color: white;
  325. display: inline-block;
  326. height: 100%;
  327. padding: 0.5rem;
  328. width: 40%; }
  329. </style>
  330.  
  331. <div class="Box">
  332. <h4 class="Box__title">
  333. Choose your price segment
  334. </h4>
  335. <ul class="Box__list">
  336. <li class="Box__listItem">
  337. <a class="Box__link" href="#">Medium</a>
  338. </li>
  339. <li class="Box__listItem">
  340. <a class="Box__link" href="#">Premium</a>
  341. </li>
  342. <li class="Box__listItem">
  343. <a class="Box__link" href="#">Luxury</a>
  344. </li>
  345. </ul>
  346. </div>
  347.  
  348. <div class="Box">
  349. <h4 class="Box__title">
  350. Nach Figurtyp shoppen
  351. </h4>
  352. <ul class="Box__list">
  353. <li class="Box__listItem">
  354. <a class="Box__link" href="#">A-Typ ></a>
  355. </li>
  356. <li class="Box__listItem">
  357. <a class="Box__link" href="#">O-Typ ></a>
  358. </li>
  359. <li class="Box__listItem">
  360. <a class="Box__link" href="#">H-Typ ></a>
  361. </li>
  362. <li class="Box__listItem">
  363. <a class="Box__link" href="#">X-Typ ></a>
  364. </li>
  365. <li class="Box__listItem">
  366. <a class="Box__link" href="#">V-Typ ></a>
  367. </li>
  368. </ul>
  369. </div>
  370.  
  371. <div class="Newsletter">
  372. <div class="Newsletter__text">
  373. <h3 class="Newsletter__title">
  374. Melden Sie sich für unseren Newsletter an und sichern Sie sich 15% aif Ihren ersten Einkauf
  375. </h3>
  376. <h4 class="Newsletter__subtitle">
  377. Erhalten Sie als Erste News rund ums Thema Mode, Styling und Figurberatung.
  378. </h4>
  379. <div class="Newsletter__form">
  380. <input class="Newsletter__input" type="text">
  381. <input class="Newsletter__submit" type="submit" value="JETZT NEWSLETTER ABBONIEREN >">
  382. </div>
  383. </div>
  384. <div class="Newsletter__image">
  385. <img src="http://i.imgur.com/PMeBE2l.png" alt="">
  386. </div>
  387. </div>
  388.  
  389. <div class="Box">
  390. <h4 class="Box__title">
  391. Nach Still & Anlass
  392. </h4>
  393. <ul class="Box__list">
  394. <li class="Box__listItem">
  395. <a class="Box__link" href="#">Businessmode</a>
  396. </li>
  397. <li class="Box__listItem">
  398. <a class="Box__link" href="#">Abend</a>
  399. </li>
  400. <li class="Box__listItem">
  401. <a class="Box__link" href="#">Basics</a>
  402. </li>
  403. <li class="Box__listItem">
  404. <a class="Box__link" href="#">Freizeit-looks</a>
  405. </li>
  406. <li class="Box__listItem">
  407. <a class="Box__link" href="#">Urlaub</a>
  408. </li>
  409. <li class="Box__listItem">
  410. <a class="Box__link" href="#">Freizeit-looks</a>
  411. </li>
  412. <li class="Box__listItem">
  413. <a class="Box__link" href="#">Lagenlook boutique</a>
  414. </li>
  415. </ul>
  416. </div>
  417.  
  418. <div class="Box">
  419. <h4 class="Box__title">
  420. Wir versprechen Ihnen luxurioses Onineshopping-Erlebnis mit:
  421. </h4>
  422. <ul class="Box__list Box__list--dotted">
  423. <li class="Box__listItem">
  424. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi veniam placeat in maxime voluptatem neque repudiandae officia, illo consequuntur reprehenderit architecto aperiam rem voluptate vitae iure recusandae quisquam soluta. Ducimus!
  425. </li>
  426. <li class="Box__listItem">
  427. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, consequatur.
  428. </li>
  429. </ul>
  430. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!