0% found this document useful (0 votes)
19 views5 pages

Css Homie

The document contains CSS code for styling various elements on a webpage including the body, navigation bar, images, buttons, sections and footer. It styles colors, fonts, sizes, positions of elements.

Uploaded by

michaeleahmurray
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
19 views5 pages

Css Homie

The document contains CSS code for styling various elements on a webpage including the body, navigation bar, images, buttons, sections and footer. It styles colors, fonts, sizes, positions of elements.

Uploaded by

michaeleahmurray
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

body{

margin: 0;
padding: 0;
background-size: cover;
color: black;
font-family: 'Humanst521 Lt BT';
font-size: 18px;
}

.TopNav{
font-family: 'Humanst521 Lt BT';
}

.hline1{
margin-top: 40px;
}

.item img{
width: 200px;
height: 200px;
position: relative;
}

.item h6{
position: relative;
font-family: 'Gill Sans';
font-size: 20px;
}

.item button{
font-size: 25px;
background: gray;
text-align: center;
border-radius: 30px;
}

section{
margin: 100px auto;
display: flex;
justify-content: space-around;
}

section div{
background: white;
padding: 20px;
position: relative;
text-align: center;
}

#Logo{
padding: 20px;
position: relative;
margin: 0px;
text-align: center;
color: white;
font-family:'Humanst521 Lt BT';
font-size: 50px;
background: black;
margin-top :-52px;
}
.hline2{
margin-bottom: 10px;
margin-top: 60px;
}
#menuToggle{
display: block;
position: relative;
float: right;
margin-right: 50px;
margin-top: 25px;
}

#menuToggle a{
text-decoration: none;
color: white;
transition: color 0.3s ease;
color:white
}

#menuToggle a:hover{
text-shadow: 10px 5px 2px white;
}
#myBtn{
border: 2px solid gray;
background-color: white;
opacity: 0.5;
padding:15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family:'Humanst521 Lt BT';
position: absolute;
top: 510px;
right: 700px;
width: 350px;
}

#myBtn:hover{
background-color: royalblue;
opacity: 0.4;
color: white;
}
#myBtn h3{
color: black;
text-decoration: none;
}
#menuToggle input{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left:-5px;
cursor:pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}

#menuToggle span{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: white;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform -0.5s cubic-bezier(-0.77,-0.2, -0.05, -1.0), background -
0.5s cubic-bezier(-0.77,-0.2, -0.05, -1.0),opacity
}

#menuToggle span:first-child{
transform-origin:0% 0% ;
}

#menuToggle span:nth-last-child(2){
transform-origin: 0% 100%;
}

#menuToggle input:checked~span{
opacity: 1;
transform: rotate(45deg)translate(-2px,-1px);
background: white;
}

#menu{
position: absolute;
width: 300px;
margin: -100px 0 0 -300px;
padding: 50px;
padding-top: 125px;
background: black;
list-style-type: none;
-webkit-font-smoothing: antialiased;

transform-origin: 0% 0%;
transform: translate(100%,0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);

#menu li{
padding: 10px 0;
font-size: 22px;
}

#menuToggle input:checked~ul{
transform: none;
}

.modal{
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.close{
color: gray;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus{
color: black;
text-decoration: none;
cursor: pointer;
}
.rhino{
position: relative;
margin-top: -180px;
margin-left: 500px;
}

.instagram{
position: relative;
margin-top: -100px;
}

.twitter{
position: relative;
margin-top: -55px;
margin-left: 60px;
}
.facebook{
position: relative;
margin-top: -55px;
margin-left: 120px;
}

footer{
background: black;
color: white;
padding: 30px;
text-align: center;
font-size: 15px;
position: relative;
margin-top: -10px;
}

p{
background: black;
position: relative;
margin-top: -20px;
text-align: center;
}

h2{
background: black;
color: white;
font-size: 15px;
word-spacing: 5px;
padding: 20px;
text-align: center;
position: relative;
margin-top: -20px;
}

h2 button{
font-size: 18px;
position: relative;
margin-left: 10px;
}
.Logo2{
position: relative;
margin-left: 1100px;
margin-top: -140px;
background-color: black;
}
.facebook:hover{
transform: scale(1.5);
}

fieldset header{
text-align: center;
font-family: 'Humanst521 Lt BT';
font-weight: bold;
font-size: 35px;
}

You might also like