Showing posts with label CSS3 tutorials. Show all posts
Showing posts with label CSS3 tutorials. Show all posts

How to have image and text side by side

 How to have image and text side by side:




image and text side by side
Lots of people are asking how they can put image and text side by side. Just make sure you are using style and classes properly. 

<html>
<title>
How to have image and text side by side
</title>
<style>
.icon {
 margin-left:2%;
float:left; 
height:60px;
width:100%; 
} 

.container2 {
    width:auto;
    height:auto;
    padding:1%;
    float:left;
}
h4{margin:0}
.left {float:left;width:60px;}
.right {float:left;margin:0 0 0 5px;width:215px;}

</style>
<body>


</body>

</html>

<div class='container2'>
        <div class="left">
            <img src='https://images-na.ssl-images-amazon.com/images/I/31ArOQ2bqHL.jpg' class='icon'>
        </div>  
    <div   class="right" >
    <h4>Twitter</h4>
    <div style="font-size:.7em;width:180px;float:left;">Twitter is an American microblogging and social networking service
    <br><b>CEO: </b>Parag Agrawal</div>
    </div>
</div>


Menu Hover Style Using HTML5 and CSS3

Creating a Menu Hover style with HTML5 and CSS3.

HTML

 <html>
<head>
    <title>This is Menu</title>
    <link rel="stylesheet" type="text/css" href="menu.css">
    </head>
    <body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
   
    </body>
</html>

CSS 

body{
    margin: 0px;
    padding: 0px;
    font-family: serif;
}
ul {
    position: absolute;
    top: 50%;
    left: 50%;
    display:flex;
    transform: translate(-50%,-50%)
}
li{
    list-style: none;
}

a {
    position: relative;
    display: block;
    text-decoration: none;
    text-align: center;
    margin: 0 25px;
    color:#252625;
    font-size: 30px;
    text-transform: uppercase;
    transition: .5s;
    padding: 5px 10px;
   
}
a:before{
    content: "";
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 12px;
    height: 12px;
    border: 3px solid #ffc107;
    border-width: 0 0 3px 3px;
    transition: .5s;
    opacity: 0;
}
a:after{
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 12px;
    height: 12px;
    border: 3px solid #ffc107;
    border-width: 3px 3px 0 0;
    transition: .5s;
    opacity: 0;
}
a:hover{
    color: #fff;
    background-color: #ffc107
}

a:hover:before{
    bottom: -8px;
    left: -8px;
    opacity: 1;
}
a:hover:after{
    top: -8px;
    right: -8px;
    opacity: 1;
}