Css

 avatar
unknown
css
4 years ago
2.6 kB
4
Indexable
body {
    margin-left: 60px;
    margin-right: 20px;
    font-family: sherif;
}

/*----header---*/

#site-title {
    margin-bottom: 0;
}

#site-title a{
    text-decoration: none;
    color: black;
    font-size: 35px;
    font-weight: bolder;
}

#site-title a:hover {
    color: #dc6520;
}

#about-site {
    margin-top: 5px;
    color: #3c5349;
}

#header-image-container img{
    margin-top: 60px;
    width: 100%;
    min-width: 200px;
}


/*----main---*/

main {
    display: inline-block;
    width: 75%;
}

#blog-header h1 {
    font-size: 3.2rem;
    color: #13222c;
    font-family: sans-serif;
}

#author-sign {
    display: inline-block;
    width: 13%;
    vertical-align: top;
    align-content: center;
    color: #3c5349;
    font-family: sans-serif;
    font-size: 0.9rem;
}

#author-sign img {
    width: 60%;
}

#blog-content {
    display: inline-block;
    width: 80%;
    margin-right: 40px;
}

article img {
    width: 100%;
}

/*----aside---*/

aside {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    padding-top: 50px;
    font-family: sans-serif;
    color: #3c5349;
}

.widget {
    border-top: 6px solid black;
    margin-top: 50px;
    margin-bottom: 70px;
    padding-top: 20px;
}

aside h4 {
    text-transform: uppercase;
    color: black;
}

aside input {
    display: block;
    margin-bottom: 20px;
}

aside button[type = "submit"] {
    background-color: #1a1a1a;
    color: rgb(214, 235, 235);
    border-radius: 4px;
    padding: 5px 20px;
    letter-spacing: 0.1rem;
}

aside button[type ="submit"]:hover {
    color: #ffffff;
}

aside a {
    text-decoration: none;
    color: #d88555;
}

aside a:hover {
    color: black;
}

#search-box {
    display: inline;
    height: 30px;
    width: 150px;
    padding: 15px 9px;
}

#search-button {
    padding: 3px 10px 7px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -5px;
    margin-top: 30px;
}


#search-button img {
    height: 1rem;
    position: relative;
    top: 4px;
}


/*----social---*/

#social {
    position: fixed;
    width: 37px;
    top: 20%;
    left: 0%;
}

#social a {
    height: 40px;
}

#social a img {
    height: 22px;
    width: 22px;
    padding-left: 7px;
    padding-top: 8px;
}

#facebook {
    background-color: #3b5998;
    display: block;
}

#linkedin {
    background-color: #0077b5;
    display: block;
}

#twitter {
    background-color: #83c3f3;
    display: block;
}

#gmail {
    background-color: #dd4b39;
    display: block;
}

#whatsapp {
    background-color: #6ba92f;
    display: block;
}

#mail {
    background-color: #ed4926;
    display: block;
}
Editor is loading...