Make a website with Html and Css
Make a website using html and css
*Copy and paste your code editor.
*{
margin: 0px;
padding: 0px;
}
.sectionHead {
width: 100vw;
height: 50vh;
}
.menuDiv {
width: 100vw;
height: 5rem;
display: flex;
position: fixed;
backdrop-filter: blur(10px);
background: #1E016CBD;
z-index: 2;
background-image: linear-gradient(to right, #1000E3 , #46611F);
}
.menuDiv::before {
content: "";
position: absolute;
width: 100vw;
height: 5rem;
background: linear-gradient(330deg, #119201 55%, #0B016C 0%);
opacity: 0.1;
}
.myTitle {
width: 8rem;
height: 1.8rem;
position: absolute;
top: 1.4rem;
left: 0rem;
margin: 2px;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.8);
transform: rotate(-20deg) skewX(10deg);
}
.myLogo {
font-size: 0.6rem;
text-align: center;
line-height: 1.5rem;
text-shadow: 0px 0px 6px rgba(240, 248, 260, 0.8);
letter-spacing: 0.1rem;
color: whitesmoke;
padding: 1px;
}
/*humbergmenuBar*/
.menuBar{
position: fixed;
top: 0.3rem;
left: 0.3rem;
width: 7vw;
height: 2.7vh;
border: 1px solid blue;
z-index: 5;
}
.humberg{
border: 0.1px solid gold;
margin: 0.1rem;
padding: 0.1rem 0.5rem;
}
.menuList {
width: 10rem;
height: 2rem;
position: relative;
top: 0.5rem;
left: 8rem;
}
.menuList ul {
width: 10rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
.menuList ul li {
width: 2.9rem;
height: 0.8rem;
list-style: none;
line-height: 0.2rem;
text-align: center;
margin: 0.1rem;
padding: 1px 2px;
outline: none;
background: none;
display: block;
}
.menuList li a {
text-decoration: none;
font-size: 0.5rem;
padding: 2px 4px;
font-weight: bold;
margin: 2px 0px;
color: whitesmoke;
background: none;
outline: none;
border: 0.1px solid gray;
border-radius: 0.3rem;
}
li a:focus {
color: whitesmoke;
}
li a:hover {
color: wheat;
background: #373511C2;
}
.user{
width: 2rem;
height: 1.5rem;
position: absolute;
right: 1rem;
top: 0.7rem;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.singBtn{
font-size: 1px;
color: #CAFFB8;
text-align: center;
}
.btn {
width: 3.3rem;
height: 2rem;
position: relative;
top: 1.8rem;
position: absolute;
top: 0.5rem;
left: 0.5rem;
}
#singUp {
border: none;
outline: none;
padding: 9px 5px;
font-size: 0.8rem;
margin: 0px 4px;
line-height: 0.2rem;
font-weight: bold;
border: 0.1px solid gray;
border-radius: 0rem;
background: transparent;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
background-clip: text;
color: whitesmoke;
}
#singUp:focus {
color: whitesmoke;
background: #2802FEB5;
}
.searchBox{
width: 12rem;
height: 1rem;
position: absolute;
top: 3rem;
left: 6rem;
}
.searchIcon{
position: absolute;
right: 1rem;
top: 0.4rem;
color: black;
}
#searchBox{
width: 11rem;
height: 1rem;
margin: 0px 5px;
border-radius: 0.5rem;
outline: none;
border: none;
border: 0.1px solid #A1FF90;
font-size: 0.3rem;
padding: 0.1px 5px;
color: #D1FFA9;
font-weight: bold;
cursor: pointer;
}
.information{
width: 100vw;
height: 30vh;
position: absolute;
top: 5rem;
background-image: linear-gradient(to right, #1000E3 , #B6FFB0);
}
.authorLink{
width: 2rem;
height: 13rem;
border: 1px solid black;
position: absolute;
top: 0rem;
left: 0rem;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
background: #262445;
}
svg{
color: #CAFFB8;
background: transparent;
}
#circle{
width: 15rem;
height: 15rem;
transform: rotate(0deg);
transition: 1s;
position: absolute;
border-radius: 50%;
overflow: hidden;
/*background-image: repeating-radial-gradient(red, yellow 10%, green 15%);*/
/*background-image: radial-gradient(red 5%, yellow 15%, green 60%);*/
/*background-image: radial-gradient(circle, red, yellow, green);*/
}
.features{
position: absolute;
display: flex;
color: whitesmoke;
font-weight: bold;
font-size: 1rem;
letter-spacing: 0.1rem;
font-family: 'Bebas Neue', cursive;
}
.oneAk{
top: 1.5rem;
left: 6rem;
transform: rotate(270deg);
}
.twoWeb{
top: 6.4rem;
right: 1.8rem;
transform: rotate(-360deg);
}
.threePage{
bottom: 2.5rem;
left: 7rem;
transform: rotate(-270deg);
}
.fourDesign{
top: 7.5rem;
left: 1rem;
transform: rotate(-180deg);
}
.control{
position: absolute;
right: 1rem;
top:5.5rem;
padding: 0rem 1.5rem;
margin: 0rem 0rem;
text-align: center;
}
.control h1{
font-size: 0.4rem;
font-weight: bold;
color: #B6FFB0;
}
#upArrow{
cursor: pointer;
color: #CCFFB6;
}
#downArrow{
cursor: pointer;
color: #CCFFB6;
margin: 0.2rem;
}
.overflow{
width: 0px;
height: 0px;
position: absolute;
top: 0rem;
left: 0rem;
border-top: 110px solid whitesmoke;
border-bottom: 110px solid whitesmoke;
border-left: 110px solid whitesmoke;
border-right: 110px solid transparent;
}
.lookingNew{
width: 10rem;
height: 0.6rem;
border: 1px solid black;
z-index: 1;
position: absolute;
left: 6.5rem;
top: 1rem;
background: #343154;
}
.lookingNew h3{
font-size: 0.5rem;
font-weight: 200;
text-align: center;
color: #CAFFB8;
}
.like_follow{
width: 10rem;
height: 1.5rem;
position: absolute;
left: 6.5rem;
top: 2rem;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
#likeBtn{
font-size: 0.4rem;
border: none;
outline: none;
border: 0.1px solid grey;
padding: 0.1rem 0.6rem;
text-transform: uppercase;
margin: 0rem 0.1rem;
background: #1B1C3A;
color: #DCFFAA;
}
#follow{
font-size: 0.4rem;
border: none;
outline: none;
border: 0.1px solid grey;
padding: 0.1rem 0.6rem;
text-transform: uppercase;
margin: 0rem 0.1rem;
background: #1B1C3A;
color: #DCFFAA;
}
.nextSection{
background: #1000E3;
position: relative;
top: 18rem;
border: 1px solid black;
zoom: 50px;
}
.disclaimer{
width: 99vw;
height: 25vh;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
/*background: #17141d;*/
background: #1F2847;
z-index: 1;
}
.card{
width: 7rem;
height: 10rem;
background: #3C4069;
box-shadow: -1rem 0 3rem #000;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
transition: 0.5s;
}
.card:hover #hiddenImg{
display: none;
color: #CAFFA3;
}
.card:hover .card-title{
transform: translateY(-11px);
}
.card:hover{
transform: translateX(-11px);
}
#hiddenImg{
width: 2rem;
height: 2rem;
background: transparent;
transition: all 3s ease-out;
}
.authorPic{
width: 2rem;
height: 2.9rem;
}
#authorPic{
width: 2rem;
height: 2.9rem;
position: absolute;
left: 10.2rem;
display: none;
}
.card-body{
width: 6.6rem;
height: 4rem;
text-align: center;
}
.card-title{
font-size: 0.4rem;
color: #E7FFB2;
font-weight: bold;
padding: 0.1rem;
transition: all 0.4s;
}
.card-text{
font-size: 0.1rem;
color: #A9FFE3;
margin: 0.1rem 0rem;
}
.btn-card{
border:1px solid grey;
color: whitesmoke;
font-size: 0.3rem;
text-decoration:none;
padding: 0.2rem 0.4rem;
background: transparent;
transition:all 1s;
}
.codeImg{
width: 100vw;
height: 60vh;
position: relative;
top: 18rem;
background-size: cover;
background-image: url("Code1.jpeg");
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.nextContact{
position: absolute;
width: 80vw;
height: 20rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #A4FF9D;
backdrop-filter: blur(5px);
background: #52FF349E;
}
.ak_form{
height: 12rem;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
label{
position: relative;
color: #A4FF9D;
font-size: 0.5rem;
margin: 0rem 1rem;
}
#email{
border: none;
outline: none;
border: 0.1px solid gold;
background: transparent;
margin: 0.2rem 1rem;
}
#pass{
border: none;
outline: none;
border: 0.1px solid gold;
background: transparent;
margin: 0.2rem 1rem;
}
::placeholder{
font-size: 0.4rem;
color: #3C295ABD;
padding: 0.3rem;
margin: 1rem;
}
#submit{
border: 0.1px solid gold;
margin: 0.2rem 1rem;
padding: 0.1rem 2rem;
background: #46058CA1;
color: #D3FFA7F7;
}
.forgetPass{
margin: 0.2rem 1rem;
padding: 0.1rem 2rem;
background: #46058CA1;
color: #D3FFA7F7;
font-size: 0.4rem;
}
.continueWith{
width: 50vw;
height: 20vh;
border: 0.1px solid gold;
margin: 1rem auto;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.continueWith p{
color: #C7FF9D;
font-size: 0.6rem;
border: 0.1px solid gold;
margin: 0.2rem 1rem;
padding: 0.1rem 2rem;
}
.continueWith .socialLink{
text-decoration: none;
font-size: 0.8rem;
border: 0.1px solid gold;
margin: 0.2rem 1rem;
padding: 0.1rem 2rem;
}
.singIn{
font-size: 0.8rem;
font-weight: 200;
border: 0.1px solid gold;
margin: 0.2rem 1rem;
padding: 0.1rem 2rem;
text-decoration: none;
background: #46058CA1;
text-align: center;
color: #D3FFA7F7;
}
.footer {
width: 99vw;
height: 4vh;
background-color: #0C093E;
position: relative;
top: 18.1rem;
border: 1px solid black;
}
.footer .footerText {
font-size: 0.4rem;
color: orange;
line-height: 0.9rem;
text-align: center;
}
Comments
Post a Comment