Media queries breakpoints
Responsive web design – making web pages render on a variety of devices. More information: https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488 https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/
CSS Flexible Box Layout
CSS Flexible Box Layout, commonly known as Flexbox, is a CSS3 web layout model. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size. Example: https://codepen.io/jonasschmedtmann/pen/LXydvq
Cutting images or making complex shapes using CSS
CSS Clip Path Maker is a tool allowing you to make complex shapes using CSS clip-path property by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points. Example: div.classname {clip-path: inset(0 15% 1% 35%);position: relative;left: -150px;top: 30px;} For more information: https://www.bennettfeely.com/clippy/
Umbraco richtext editor removing tag for font-awesome
HTML <p><a href=”https://”> <span class=”fa fa-facebook” style=”color: white;”> </span></a> </p> CSS footer { background: #061D25; padding: 10px 0; text-align: center; } footer a { color: #70726F; font-size: 20px; padding: 10px; border-right: 1px solid #70726F; transition: all .5s ease; } footer a:first-child { border-left: 1px solid #70726F; } footer a:hover { color: white; } For more information: https://stackoverflow.com/questions/33517524/how-to-add-the-footer-with-social-icons-in-bootstrap https://our.umbraco.com/forum/using-umbraco-and-getting-started/80640-richtext-editor-removing-i-tag-for-font-awesome
How to show text on image when hovering?
Show a description when hovering over an image. Wrap the image and the “appear on hover” description in a div with the same dimensions of the image. Then, with some CSS, order the description to appear while hovering that div. This post worked for me. https://stackoverflow.com/questions/26343556/move-text-up-over-image-on-hover
CSS code for buttons
p { font-family: ‘helvetica neue’, helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; border: 2pxsolidrgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px1px2pxrgba(0,0,200,0.4); border-radius: 10px; padding: 3px10px; display: inline-block; cursor: pointer; }
