Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

dimitrifayard

Member
  • Posts

    16
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. yes, these lines are into PAGES Setting> Advanced>Page Header Code Injection. The rest is in custom design CSS
  2. This first part is in the "PAGES" code injection up to line 26 </label> The rest is in CSS
  3. <label> <input type="checkbox"></input> <span class="menu"> <span class="hamburger"></span> </span> <ul> <li> <a href="/home">Home/</a> </li> <li> <a href="/pastry">Pastry/</a> </li> <li> <a href="/chocolate">Chocolate/</a> </li> <li> <a href="/meet">Meet/</a> </li> <li><a href="/awards">Awards/</a> </li> <li><a href="/recipes">Recipes/</a> </li> <li><a href="/connect">Connect/</a> </li> </ul> </label> @import url(https://fonts.googleapis.com/css?family=Abel); *, *:before, *:after { box-sizing: border-box; } html { font-size: 20px; } body { font-family: "abel", serif; font-size: 1.4em; line-height: 1.4; overflow-x: hidden; } label .menu { position: absolute; right: 10px; top: 10px; z-index: 100; width: 70px; height: 70px; overflow: hidden; background: #717c80; border-radius: 50% 50% 50% 50%; transition: 0.5s ease-in-out; box-shadow: 0 0 0 0 #717c80, 0 0 0 0 #717c80; cursor: pointer; } label .hamburger { position: absolute; top: 35px; left: 18px; width: 30px; height: 2.2px; background: #ae8e25; display: block; transform-origin: center; transition: 0.5s ease-in-out; } label .hamburger:after, label .hamburger:before { transition: 0.5s ease-in-out; content: ""; position: absolute; display: block; width: 100%; height: 100%; background: #4c5558; } label .hamburger:before { top: -10px; } label .hamburger:after { bottom: -10px; } label input { display: none; } label input:checked + .menu { box-shadow: 0 0 0 100vw #717c80, 0 0 0 100vh #717c80; border-radius: 0; opacity:0.6; } label input:checked + .menu .hamburger { transform: rotate(45deg); } label input:checked + .menu .hamburger:after { transform: rotate(90deg); bottom: 0; } label input:checked + .menu .hamburger:before { transform: rotate(90deg); top: 0; } label input:checked + .menu + ul { opacity: 1; } label ul { z-index: 200; position: absolute; top: 50%; left: 90%; transform: translate(-40%, -50%); opacity: 0; transition: 0.25s 0s ease-in-out; display:block; } label a { margin-bottom: 1em; display: block; color: white; text-decoration: none; } label ul :first-letter {color:#ae8e25;} label ul a:hover{color:#ae8e25 !important;} label ul a:active {color:#ae8e25 !important;} h4 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; text-align: left !important; } @media (max-width: 680px){ label ul{ position:absolute; top: 50%; left: 40%; transform: translate(-50%, -50%); width: 80%; text-align: left !important; font-family: "abel", serif; font-size: 1.2em; line-height: 0.7; overflow-x: hidden; }}
  4. Site URL: https://clavichord-conch-pchc.squarespace.com/config/ Hi, I've added an hamburger menu to my site. Everything works properly minus a major glitch, once the hamburger closes, the links are still clickable eventhough not visible. Any suggestion? Thank you
  5. @tuanphan I did but must miss something <div class="body"> <div class="box"> <img src="https://images.squarespace-cdn.com/content/5fdb7dced68e1563261f5707/1609183820442-M7YFLHDMU2INEM9GTYB0/Tarte.jpg"> <span>Pastry/</span> <a href="https://clavichord-conch-pchc.squarespace.com/pastry-1" class="t-link"></a> </div> <div class="box"> <img src="https://images.squarespace-cdn.com/content/5fdb7dced68e1563261f5707/1609122425328-4FLTMMQ0Q4V8GXMUBUNJ/Rubyhome.jpg"> <span>Confection/</span> <a href="https://clavichord-conch-pchc.squarespace.com/confection” class=”t-link”></a> </div> <div class="box"> <img src="https://images.squarespace-cdn.com/content/5fdb7dced68e1563261f5707/1609184717152-DIAW6STZC9Q9V3CAGZIC/Home1.jpg"> <span>Meet/</span> <a href="https://clavichord-conch-pchc.squarespace.com/about” class=”t-link”></a> </div> </div>
  6. I did but must miss something <div class="body"> <div class="box"> <img src="https://images.squarespace-cdn.com/content/5fdb7dced68e1563261f5707/1609183820442-M7YFLHDMU2INEM9GTYB0/Tarte.jpg"> <span>Pastry/</span> <a href="https://clavichord-conch-pchc.squarespace.com/pastry-1" class="t-link"></a> </div> <div class="box"> <img src="https://images.squarespace-cdn.com/content/5fdb7dced68e1563261f5707/1609122425328-4FLTMMQ0Q4V8GXMUBUNJ/Rubyhome.jpg"> <span>Confection/</span> <a href="https://clavichord-conch-pchc.squarespace.com/confection” class=”t-link”></a> </div> <div class="box"> <img src="https://images.squarespace-cdn.com/content/5fdb7dced68e1563261f5707/1609184717152-DIAW6STZC9Q9V3CAGZIC/Home1.jpg"> <span>Meet/</span> <a href="https://clavichord-conch-pchc.squarespace.com/about” class=”t-link”></a> </div> </div>
  7. It only worked for the first pictures, not all 3. Here is the link, HOME page. Password: 01012021
  8. Hi, I would like to insert a link on each images below, I have tried a few options but it changes the layout. 3 flexing images. Any suggestions? Thank you <div class="body"> <div class="box"> <img src="image.jpg"> <span>Pastry/</span> </div> <div class="box"> <img src="image.jpg"> <span>Confection/</span> </div> <div class="box"> <img src="images.jpg"> <span>Meet/</span> </div> </div> ////////////////////////////// .body { display: flex; width: 100%; padding: 4% 2%; box-sizing: border-box; height: 100vh; } .box { flex: 1; overflow: hidden; transition: .5s; margin: 0 2%; box-shadow: 0 20px 30px rgba(0,0,0,.1); line-height: 0; } .box > img { width: 200%; height: calc(100% - 10vh); object-fit: cover; transition: .5s; } .box > span { font-size: 3.8vh; display: block; text-align: center; height: 10vh; line-height: 2.6; } .box:hover { flex: 1 1 50%; } .box:hover > img { width: 100%; height: 100%; }
×
×
  • Create New...