CSS

html css practice projects

/* Creating Nike logo with CSS */

/* first create a div element in your html file with "class="nike" " attribute
*/

.nike {
    position: absolute;
    overflow: hidden;
    width: 50vmin;
    aspect-ratio: 14/5;
    position: relative;


}

.nike:before {
    content: '';
    position: absolute;
    background: black;
    width: 37%;
    height: 550%;
    bottom: -134%;
    left: 70.5%;
    border-top-left-radius: 48% 17%;
    border-top-right-radius: 120% 40%;
    transform: rotate(-113deg);
    z-index: 1;
}

.nike:after {
    content: '';
    position: absolute;
    background: white;
    width: 30%;
    height: 400%;
    bottom: -73%;
    left: 64%;
    border-top-left-radius: 64% 14%;
    border-top-right-radius: 125% 46%;
    transform: rotate(-105deg);
    z-index: 2;
}

html css practice projects

/* Creating Hashnode logo with CSS */

/* first create a div element in your html file with class="hashnode" attribute
*/

.hashnode {
    width: 5em;
    aspect-ratio: 1;
    border-radius: 1.25em;
    background: #2962ff;
    transform: rotate(45deg);
}

.hashnode:before {
    content: '';
    border-radius: 50%;
    background: white;
    height: 2em;
    aspect-ratio: 1;
}

.hashnode {
    display: grid;
    place-items: center;
}

.hashnode {
    width: 5em;
    aspect-ratio: 1;
    border-radius: 1.25em;
    background: #2962ff;
    transform: rotate(45deg);
    -webkit-mask: radial-gradient(#0000 28%, #000 28%);
    mask: radial-gradient(#0000 28%, #000 28%);
}