API tools faq
paste
madis89

menu mobile css

madis89
May 19th, 2021 (edited)
1,137
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.44 KB | None | 0 0
raw download clone embed print report
  1. html {
  2.     font-size: 10px;
  3.     font-family: 'Roboto Condensed', sans-serif;
  4.     padding-top: 130px;
  5. }
  6.  
  7. h2 {
  8.     font-size: 1.8rem;
  9.     padding: 25px 0;
  10.     text-transform: uppercase;
  11.     text-align: center;
  12.     font-weight: bold;
  13.     line-height: 150%;
  14. }
  15.  
  16. .topbar {
  17.     position: fixed;
  18.     top: 0;
  19.     right: 0;
  20.     left: 0;
  21.     width: 100%;
  22.     height: 130px;
  23.     background-color: #00204a;
  24.     z-index: 1;
  25. }
  26.  
  27. .brand {
  28.     display: block;
  29.     text-align: center;
  30.     font-size: 2.5rem;
  31.     text-transform: uppercase;
  32.     font-weight: bold;
  33.     margin-top: 20px;
  34.     color: #fff;
  35.     letter-spacing: 3px;
  36.     text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
  37. }
  38.  
  39. .banner {
  40.     position: relative;
  41.     overflow: hidden;
  42.     height: 1000px;
  43. }
  44.  
  45. .banner img {
  46.     position: absolute;
  47.     top: 50%;
  48.     left: 50%;
  49.     transform: translate(-50%, -50%);
  50.     font-weight: bold;
  51.     min-width: 100%;
  52.     min-height: 100%;
  53.     opacity: 0;
  54.     animation: bannerek 15s infinite linear;
  55. }
  56.  
  57. @keyframes bannerek {
  58.     0% {
  59.         opacity: 0;
  60.     }
  61.     5% {
  62.         opacity: 1;
  63.     }
  64.     33.33% {
  65.         opacity: 1;
  66.     }
  67.     38.33% {
  68.         opacity: 0;
  69.     }
  70.     100% {
  71.         opacity: 0;
  72.     }
  73. }
  74.  
  75. .banner img:nth-child(2) {
  76.     animation-delay: 5s;
  77. }
  78.  
  79. .banner img:nth-child(3) {
  80.     animation-delay: 10s;
  81. }
  82.  
  83. h3 {
  84.     display: flex;
  85.     justify-content: center;
  86.     align-items: center;
  87.     position: absolute;
  88.     top: 20%;
  89.     left: 50%;
  90.     transform: translate(-50%, -20%);
  91.     width: 90%;
  92.     padding: 30px;
  93.     border-radius: 10px;
  94.     background-color: rgba(0, 32, 74, .8);
  95.     color: #fff;
  96.     text-transform: uppercase;
  97.     text-align: center;
  98.     font-size: 4rem;
  99.     opacity: 0;
  100.     animation: opis 15s linear infinite;
  101.     text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
  102. }
  103.  
  104. h3:nth-of-type(2) {
  105.     animation-delay: 5s;
  106. }
  107.  
  108. h3:nth-of-type(3) {
  109.     animation-delay: 10s;
  110. }
  111.  
  112. @keyframes opis {
  113.     0% {
  114.         opacity: 0;
  115.     }
  116.     5% {
  117.         opacity: 0;
  118.     }
  119.     10% {
  120.         opacity: 1;
  121.     }
  122.     23.33% {
  123.         opacity: 1;
  124.     }
  125.     28.33% {
  126.         opacity: 0;
  127.     }
  128.     33.33% {
  129.         opacity: 0;
  130.     }
  131.     100% {
  132.         opacity: 0;
  133.     }
  134. }
  135.  
  136. .menu {
  137.     position: absolute;
  138.     top: 120px;
  139.     right: 0;
  140.     width: 100%;
  141.     transition: transform .3s linear;
  142.     transform: translateX(100%);
  143.     height: 360px;
  144.     background-color: #00204a;
  145.     overflow: auto;
  146. }
  147.  
  148. .menu li {
  149.     text-align: center;
  150.     margin-top: 30px;
  151. }
  152.  
  153. .menu a {
  154.     display: block;
  155.     font-size: 2rem;
  156.     text-transform: uppercase;
  157.     text-decoration: none;
  158.     color: #fff;
  159.     padding: 25px;
  160.     transition: background-color .3s linear;
  161. }
  162.  
  163. .menu a:hover {
  164.     background-color: #005792;
  165. }
  166.  
  167. .burger {
  168.     display: block;
  169.     margin: 20px auto;
  170.     width: 50px;
  171.     height: 50px;
  172.     background-color: transparent;
  173.     border-radius: 10px;
  174.     outline: none;
  175.     border: none;
  176.     font-size: 2.5rem;
  177.     color: #fff;
  178.     cursor: pointer;
  179. }
  180.  
  181. .menu.show {
  182.     transform: translateX(0);
  183. }
  184.  
  185. i.close {
  186.     display: none;
  187. }
  188.  
  189. .template {
  190.     width: 80%;
  191.     margin: 20px auto;
  192. }
  193.  
  194. .template img {
  195.     width: 100%;
  196.     border: 3px solid #00204a;
  197.     padding: 3px;
  198.     border-radius: 10px;
  199. }
  200.  
  201. figcaption a {
  202.     display: block;
  203.     width: 100%;
  204.     padding: 20px 0;
  205.     background-color: #00204a;
  206.     color: #fff;
  207.     margin-top: 30px;
  208.     border-radius: 10px;
  209.     font-size: 2rem;
  210.     color: #fff;
  211.     text-align: center;
  212.     font-weight: bold;
  213.     text-transform: uppercase;
  214.     text-decoration: none;
  215. }
  216.  
  217. .about {
  218.     margin-top: 80px;
  219.     padding: 50px 0;
  220.     background-color: #00204a;
  221.     color: #fff;
  222. }
  223.  
  224. .myphoto {
  225.     width: 80%;
  226.     margin: 20px auto;
  227. }
  228.  
  229. .myphoto img {
  230.     width: 100%;
  231.     border: 3px solid #fff;
  232.     border-radius: 10px;
  233.     padding: 5px;
  234. }
  235.  
  236. .mydescription {
  237.     margin: 20px auto;
  238.     font-size: 2rem;
  239.     line-height: 180%;
  240.     width: 80%;
  241.     text-align: center;
  242. }
  243.  
  244. .cooperation {
  245.     width: 80%;
  246.     margin: 20px auto;
  247.     padding: 10px;
  248.     text-align: center;
  249.     border: 3px solid #00204a;
  250.     line-height: 180%;
  251.     font-size: 2rem;
  252.     border-radius: 10px;
  253. }
  254.  
  255. .contact {
  256.     margin-top: 80px;
  257.     padding: 30px;
  258.     background-color: #00204a;
  259.     color: #fff;
  260. }
  261.  
  262. .form-contact {
  263.     margin-top: 30px;
  264.     min-height: 1000px;
  265.     text-align: center;
  266. }
  267.  
  268. input[type="text"] {
  269.     display: block;
  270.     width: 80%;
  271.     height: 100px;
  272.     margin: 50px auto;
  273.     padding: 20px;
  274.     border: none;
  275.     border-radius: 10px;
  276.     outline: none;
  277.     font-size: 2rem;
  278.     font-weight: bold;
  279.     font-family: 'Roboto Condensed', sans-serif;
  280.     transition: box-shadow.3s linear;
  281.     box-sizing: border-box;
  282. }
  283.  
  284. input[type="email"] {
  285.     display: block;
  286.     width: 80%;
  287.     height: 100px;
  288.     margin: 50px auto;
  289.     padding: 20px;
  290.     border: none;
  291.     border-radius: 10px;
  292.     outline: none;
  293.     font-size: 2rem;
  294.     font-weight: bold;
  295.     font-family: 'Roboto Condensed', sans-serif;
  296.     transition: box-shadow.3s linear;
  297.     box-sizing: border-box;
  298. }
  299.  
  300. textarea {
  301.     display: block;
  302.     width: 80%;
  303.     height: 300px;
  304.     margin: 50px auto;
  305.     padding: 20px;
  306.     border: none;
  307.     border-radius: 10px;
  308.     outline: none;
  309.     font-size: 2rem;
  310.     font-weight: bold;
  311.     font-family: 'Roboto Condensed', sans-serif;
  312.     transition: box-shadow.3s linear;
  313.     box-sizing: border-box;
  314. }
  315.  
  316. input[type="submit"] {
  317.     display: block;
  318.     width: 80%;
  319.     height: 100px;
  320.     margin: 50px auto;
  321.     padding: 20px;
  322.     box-sizing: border-box;
  323.     border: none;
  324.     border-radius: 10px;
  325.     outline: none;
  326.     font-size: 2rem;
  327.     font-weight: bold;
  328.     font-family: 'Roboto Condensed', sans-serif;
  329.     transition: box-shadow.3s linear;
  330.     box-sizing: border-box;
  331. }
  332.  
  333. input[type="submit"]:hover {
  334.     cursor: pointer;
  335.     -webkit-box-shadow: 0px 0px 0px 12px rgba(0, 87, 146, 1);
  336.     -moz-box-shadow: 0px 0px 0px 12px rgba(0, 87, 146, 1);
  337.     box-shadow: 0px 0px 0px 12px rgba(0, 87, 146, 1);
  338. }
  339.  
  340. input[type="text"]:focus,
  341. input[type="email"]:focus,
  342. textarea:focus,
  343. input[type="submit"]:focus {
  344.     -webkit-box-shadow: 0px 0px 0px 12px rgba(0, 87, 146, 1);
  345.     -moz-box-shadow: 0px 0px 0px 12px rgba(0, 87, 146, 1);
  346.     box-shadow: 0px 0px 0px 12px rgba(0, 87, 146, 1);
  347. }
  348.  
  349. .hidden {
  350.     display: none;
  351. }
  352.  
  353. @media only screen and (min-width:360px) {
  354.     .topbar {
  355.         display: flex;
  356.         justify-content: center;
  357.         align-items: center;
  358.     }
  359.     .burger {
  360.         position: absolute;
  361.         top: 31px;
  362.         right: 10px;
  363.         font-size: 2.8rem;
  364.     }
  365. }
  366.  
  367. @media only screen and (min-width:1200px) {
  368.     .topbar {
  369.         display: flex;
  370.         justify-content: space-between;
  371.         align-items: center;
  372.     }
  373.     .brand {
  374.         margin: 20px;
  375.         font-size: 5rem;
  376.     }
  377.     h2 {
  378.         font-size: 3rem;
  379.         margin: 10px 0;
  380.         padding: 55px;
  381.     }
  382.     h3 {
  383.         top: 30%;
  384.         left: 50%;
  385.         width: 50%;
  386.         font-size: 5rem;
  387.         transform: translate(-50%, -30%);
  388.     }
  389.     .menu {
  390.         position: static;
  391.         display: flex;
  392.         justify-content: center;
  393.         align-items: center;
  394.         height: 130px;
  395.         margin: 20px;
  396.         background-color: #00204a;
  397.         transform: translateX(0);
  398.     }
  399.     .menu li {
  400.         margin: 20px;
  401.         text-align: center;
  402.     }
  403.     .burger {
  404.         display: none;
  405.     }
  406.     .myphoto {
  407.         width: 240px;
  408.         margin: 20px
  409.     }
  410.     .container {
  411.         display: flex;
  412.         justify-content: center;
  413.         flex-wrap: wrap;
  414.     }
  415.     .templates {
  416.         margin-top: 80px;
  417.     }
  418.     .template {
  419.         width: 30%;
  420.     }
  421.     .mydescription {
  422.         width: 80%;
  423.         margin: 10px;
  424.         text-align: left;
  425.     }
  426.     .cooperations {
  427.         padding: 40px 0;
  428.     }
  429.     .cooperation {
  430.         width: 30%;
  431.         transition: transform .3s linear;
  432.     }
  433.     .cooperation:hover {
  434.         transform: translateY(-10px);
  435.     }
  436.     .form-contact {
  437.         min-height: 1000px;
  438.         position: relative;
  439.     }
  440.     input[type="text"] {
  441.         display: inline-block;
  442.         width: 35%;
  443.         margin: 20px;
  444.     }
  445.     input[type="email"] {
  446.         display: block;
  447.         width: 73%;
  448.         margin: 20px auto;
  449.         box-sizing: border-box;
  450.     }
  451.     textarea {
  452.         width: 73%;
  453.         height: 300px;
  454.         margin: 40px auto;
  455.         box-sizing: border-box;
  456.     }
  457.     input[type="submit"] {
  458.         position: absolute;
  459.         bottom: 18%;
  460.         right: 13.7%;
  461.         width: 30%;
  462.         margin: 20px auto;
  463.         box-sizing: border-box;
  464.     }
  465.     .footer {
  466.         width: 100%;
  467.         height: 100px;
  468.         text-align: center;
  469.         line-height: 100px;
  470.         background-color: #00204a;
  471.         color: #fff;
  472.         font-size: 2rem;
  473.     }
  474. }
Add Comment
Please, Sign In to add comment
Public Pastes
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!