CodoBlog

Posts

Showing posts from October, 2020

my profile code by html || shutter animation with hover effect of html-css

My Profile Viewer #CODE :  <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Img hover</title> <style type="text/css"> *{ margin:0; padding:0; box-sizing:border-box ; } body{ display:flex; min-height:100vh; align-items:center; justify-content:center; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1

Code for icon design | camera icon code | html-css code

Camera ICON creation || Code for the camera icon Here is the code for camera icon design..try with your efforts..! ICON #CODE : >> <!DOCTYPE html> <html> <head> <title>Camera Icon Creation</title> <style type="text/css"> body{ margin:0; background-color: lightblue; } .outer{ width: 50%; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0 auto; } .body{ background-color: white; border-radius: 30%; width: 11rem; height: 11rem; position: relative; box-shadow: 1px 1px 6px 1px slategrey; } .red{ border-radius: 50%; background-color: crimson; width: 10px; height: 10px; position: absolute; top: 10%; left: 10%; margin: 4px; } .flash{ width: 20%; height: 8px; border-radius: 25% / 30%; background-color: #ccc; box-shadow: inset 1px 1px 6px 1px slategrey; position: absolute;