Skip to content
/ My-first-html-css-project Public

this is a project i made myself using htlml and css the project is about a redesigned gooogle home webpage with neon lightings and hovering effects including a working search bar also it has the option to add your own profile picture

0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

Syfer256/My-first-html-css-project

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
README.md
README.md
 
 
index.html
index.html
 
 
ticktak.html
ticktak.html
 
 

Repository files navigation

this is my first project i created using html,css

<!doctype html>

<title>3D Solvable Rubik's Cube</title> <style> :root{ --size:64px; --gap:6px; } html,body{height:100%;margin:0;background:#0b0b0f;color:#ddd;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial} .wrap{height:100vh;display:flex;align-items:center;justify-content:center;gap:24px;padding:24px;box-sizing:border-box} .stage{width:720px;height:520px;display:flex;gap:20px;align-items:center} .viewer{width:520px;height:520px;perspective:1200px} .controls{width:180px} .cube-scene{width:100%;height:100%;position:relative;transform-style:preserve-3d} .cube-wrap{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 300ms cubic-bezier(.2,.9,.2,1)} .field{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--size)*3 + var(--gap)*2);height:calc(var(--size)*3 + var(--gap)*2);transform-style:preserve-3d} .cubie{position:absolute;width:var(--size);height:var(--size);transform-style:preserve-3d;box-shadow:0 6px 18px rgba(0,0,0,.6)} .face{position:absolute;inset:0;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#111;backface-visibility:hidden;overflow:hidden} /* stickers (smaller than face) */ .sticker{position:absolute;left:6px;top:6px;right:6px;bottom:6px;border-radius:4px} .face.front{transform:translateZ(calc(var(--size)/2));} .face.back{transform:rotateY(180deg) translateZ(calc(var(--size)/2));} .face.right{transform:rotateY(90deg) translateZ(calc(var(--size)/2));} .face.left{transform:rotateY(-90deg) translateZ(calc(var(--size)/2));} .face.up{transform:rotateX(90deg) translateZ(calc(var(--size)/2));} .face.down{transform:rotateX(-90deg) translateZ(calc(var(--size)/2));}

/* sticker colors */ .cW{background:#ffffff} .cY{background:#ffd500} .cR{background:#ff3b30} .cO{background:#ff9500} .cB{background:#007aff} .cG{background:#34c759} .blank{background:transparent}

/* UI */ .controls{color:#ddd} .controls h2{margin:0 0 12px 0;font-size:16px} .btn{display:inline-block;padding:8px 10px;margin:6px;border-radius:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.04);cursor:pointer} .btn:active{transform:translateY(1px)} .row{display:flex;flex-wrap:wrap} .small{font-size:13px;padding:6px 8px} .info{font-size:13px;margin-top:12px;line-height:1.3;color:#cfcfcf} .actions{margin-top:14px} .scramble{margin-top:12px} .footer{font-size:12px;color:#999;margin-top:14px} </style>

<div class="controls">
  <h2>Controls</h2>
  <div class="row">
    <button class="btn small" data-face="U">U</button>
    <button class="btn small" data-face="D">D</button>
    <button class="btn small" data-face="L">L</button>
    <button class="btn small" data-face="R">R</button>
    <button class="btn small" data-face="F">F</button>
    <button class="btn small" data-face="B">B</button>
  </div>
  <div class="row actions">
    <button class="btn" id="ccw">↺ CCW</button>
    <button class="btn" id="cw">↻ CW</button>
  </div>
  <div class="row scramble">
    <button class="btn" id="scrambleBtn">Scramble</button>
    <button class="btn" id="solveBtn">Solve</button>
  </div>
  <div class="info">
    Click face button then choose rotation direction.<br>
    Drag the cube to orbit view.<br>
    Scramble randomizes; Solve reverses the scramble.
  </div>
  <div class="footer">Made with HTML/CSS/JS — simple reversible solver (undo the scramble)</div>
</div>
<script> // Simple 3x3 Rubik's cube (visual + reversible scramble). This code creates 27 cubies and allows rotating layers. const SIZE = 64; const GAP = 6; const STEP = SIZE + GAP; // px const coords = [-1,0,1]; const field = document.getElementById('field'); const cubeWrap = document.getElementById('cubeWrap'); let rotationModeFace = null; // selected face by buttons let pendingDir = null; // 'cw' or 'ccw' let scrambleMoves = []; // Cubie structure: {el, x,y,z} const cubies = []; function createCubies(){ for(let x of coords) for(let y of coords) for(let z of coords){ const el = document.createElement('div'); el.className='cubie'; const px = (x * STEP) + 'px'; const py = (-y * STEP) + 'px'; // invert Y for visual const pz = (z * STEP) + 'px'; el.style.transform = `translate3d(${px},${py},${pz})`; el.dataset.x=x; el.dataset.y=y; el.dataset.z=z; // create faces const faces = ['front','back','right','left','up','down']; for(const f of faces){ const face = document.createElement('div'); face.className='face '+f; const sticker = document.createElement('div'); sticker.className='sticker blank'; face.appendChild(sticker); el.appendChild(face); } field.appendChild(el); cubies.push({el,x,y,z}); } } function colorFaces(){ // reset all to blank then set stickers on external faces for(const c of cubies){ const {el,x,y,z} = c; el.querySelector('.face.front .sticker').className = (z===1)?'sticker cR':'sticker blank'; el.querySelector('.face.back .sticker').className = (z===-1)?'sticker cO':'sticker blank'; el.querySelector('.face.right .sticker').className = (x===1)?'sticker cG':'sticker blank'; el.querySelector('.face.left .sticker').className = (x===-1)?'sticker cB':'sticker blank'; el.querySelector('.face.up .sticker').className = (y===1)?'sticker cW':'sticker blank'; el.querySelector('.face.down .sticker').className = (y===-1)?'sticker cY':'sticker blank'; } } createCubies(); colorFaces(); // Helper to pick cubies by axis and index function pick(axis, index){ return cubies.filter(c => c[axis] === index); } function createLayerWrapper(){ const wrap = document.createElement('div'); wrap.style.position='absolute'; wrap.style.left='0'; wrap.style.top='0'; wrap.style.width='100%'; wrap.style.height='100%'; wrap.style.transformStyle='preserve-3d'; wrap.style.pointerEvents='none'; return wrap; } function applyRotation(axis, index, clockwise=true, record=true){ // axis: 'x'/'y'/'z', index: -1/0/1 const layer = pick(axis,index); if(layer.length===0) return; // create wrapper and move elements const wrapper = createLayerWrapper(); field.appendChild(wrapper); // compute rotation string const deg = clockwise? -90 : 90; // choose sign so UI 'CW' looks natural let rotCSS = ''; if(axis==='x') rotCSS = `rotateX(${deg}deg)`; if(axis==='y') rotCSS = `rotateY(${deg}deg)`; if(axis==='z') rotCSS = `rotateZ(${deg}deg)`; // move cubie elements into wrapper for(const c of layer){ wrapper.appendChild(c.el); } // force reflow void wrapper.offsetWidth; wrapper.style.transition='transform 420ms cubic-bezier(.2,.9,.2,1)'; wrapper.style.transform = rotCSS; wrapper.addEventListener('transitionend', function onEnd(e){ wrapper.removeEventListener('transitionend', onEnd); // update logical coordinates of moved cubies for(const c of layer){ const old = {x:c.x,y:c.y,z:c.z}; let nx,ny,nz; if(axis==='x'){ if(clockwise){ nx=old.x; ny=old.z; nz=-old.y; } else { nx=old.x; ny=-old.z; nz=old.y; } } else if(axis==='y'){ if(clockwise){ nx=-old.z; ny=old.y; nz=old.x; } else { nx=old.z; ny=old.y; nz=-old.x; } } else if(axis==='z'){ if(clockwise){ nx=old.y; ny=-old.x; nz=old.z; } else { nx=-old.y; ny=old.x; nz=old.z; } } // assign c.x=nx; c.y=ny; c.z=nz; c.el.dataset.x=nx; c.el.dataset.y=ny; c.el.dataset.z=nz; // move element back to field and update transform field.appendChild(c.el); const px = (nx * STEP) + 'px'; const py = (-ny * STEP) + 'px'; const pz = (nz * STEP) + 'px'; c.el.style.transition='transform 150ms ease-out'; c.el.style.transform = `translate3d(${px},${py},${pz})`; } // cleanup wrapper wrapper.remove(); // recolor setTimeout(()=>{ colorFaces(); }, 180); }); // record inverse move for solve if(record){ const move = {axis,index,clockwise}; // record inverse (opposite direction) scrambleMoves.push({axis,index,clockwise}); } } // UI wiring const faceButtons = document.querySelectorAll('[data-face]'); let lastFace = null; faceButtons.forEach(btn=> btn.addEventListener('click', ()=>{ lastFace = btn.dataset.face; highlightFace(btn); })); function highlightFace(btn){ faceButtons.forEach(b=>b.style.outline=''); btn.style.outline='2px solid rgba(255,255,255,.12)'; } document.getElementById('cw').addEventListener('click', ()=>{ rotateSelected(true); }); document.getElementById('ccw').addEventListener('click', ()=>{ rotateSelected(false); }); function rotateSelected(isCW){ if(!lastFace) return; const mapping = faceToAxisIndex(lastFace); applyRotation(mapping.axis,mapping.index,isCW,true); } function faceToAxisIndex(face){ // U: y=1 (up), D: y=-1, L: x=-1, R: x=1, F: z=1, B: z=-1 switch(face){ case 'U': return {axis:'y', index:1}; case 'D': return {axis:'y', index:-1}; case 'L': return {axis:'x', index:-1}; case 'R': return {axis:'x', index:1}; case 'F': return {axis:'z', index:1}; case 'B': return {axis:'z', index:-1}; } } // Scramble: random moves and record sequence; to solve, we reverse by applying inverse moves in reverse order function scramble(times=20){ scrambleMoves = []; const faces=['U','D','L','R','F','B']; for(let i=0;i.5; const m = faceToAxisIndex(f); applyRotation(m.axis,m.index,cw,true); } } document.getElementById('scrambleBtn').addEventListener('click', ()=>{ scramble(24); }); document.getElementById('solveBtn').addEventListener('click', ()=>{ // apply inverses in reverse const seq = Array.from(scrambleMoves).reverse(); // we apply with delays to allow animation to play sequentially let delay = 0; for(const mv of seq){ setTimeout(()=>{ applyRotation(mv.axis,mv.index,!mv.clockwise,false); }, delay); delay += 480; } // clear recorded moves after scheduled solve setTimeout(()=>{ scrambleMoves = []; }, delay+300); }); // Orbit controls (drag to rotate whole cube) let dragging=false, lastX=0, lastY=0, rotX=-25, rotY=25; const viewer = document.getElementById('viewer'); viewer.addEventListener('pointerdown', (e)=>{ dragging=true; lastX=e.clientX; lastY=e.clientY; viewer.setPointerCapture(e.pointerId); }); viewer.addEventListener('pointermove', (e)=>{ if(!dragging) return; const dx = e.clientX - lastX; const dy = e.clientY - lastY; rotY += dx*0.3; rotX -= dy*0.3; cubeWrap.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`; lastX=e.clientX; lastY=e.clientY; }); viewer.addEventListener('pointerup', (e)=>{ dragging=false; try{ viewer.releasePointerCapture(e.pointerId); }catch(e){} }); viewer.addEventListener('pointerleave', ()=>{ dragging=false; }); // Keyboard shortcuts: UDLRFB rotate window.addEventListener('keydown',(e)=>{ const key = e.key.toUpperCase(); if(['U','D','L','R','F','B'].includes(key)){ lastFace=key; rotateSelected(true); } if(key==='Z') scramble(18); if(key==='X') document.getElementById('solveBtn').click(); }); </script>

About

this is a project i made myself using htlml and css the project is about a redesigned gooogle home webpage with neon lightings and hovering effects including a working search bar also it has the option to add your own profile picture

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages