danish deb
danish deb

Reputation: 111

Hover Effect in Drop Down Menu

I have been trying hard to create a hover effect on drop down menu. It is working perfectly on all the items on the Menu section but it is going haywire when I am trying to implement the same effect on Drop Down menu.

@charset "utf-8";
/* CSS Document */

body {
	font-family: 'Droid Serif', serif;
	margin: 0; 
	padding: 0; 
}

.page {
	width: 100%; 
	margin: 0; 
	padding: 0; 
}



/*    ================ Nav =============================== */ 

.nav {
	width: 100%; 
	padding: 0; 
	margin: 0; 
	background: #ECF0F1;
}

.navcontain {
	width: 1200px; 
	padding: 0; 
	margin: 0 auto; 
	overflow: hidden;
}

.logo {
	display: block; 
	width: 300px;
	float: left;  
}

.logo a {
	display: inline-block; 
	text-decoration: none; 
	color: #353535; 
	font-size: 36px; 
	font-weight: 900; 
	letter-spacing: -1.1px; 
	padding: 15px 0px;
}

.menu {
	padding: 0; 
	margin: 0; 
	width: 900px;
	float: right; 
}

.menu ul {
	padding: 0; 
	margin: 0; 
	float: right; 
	margin-top: 10px;
}

.menu ul li {
	display: inline-block; 
	float: left; 
	list-style: none; 
	margin-left: 20px;
}

.menu ul li:hover {
	border-top: 2px solid #2980B9; 
}

.menu ul li a {
	display: inline-block; 
	color: #313131; 
	text-decoration: none;  
	padding: 10px 15px;
	text-transform: uppercase;
	font-size: 15px;
}

.menu ul ul {
	position: absolute; 
	left: -9999px; 
}

.menu ul li:hover ul {
	left: auto;
}

.menu ul li ul li {
	float: none; 
	display: block; 
	margin-left: 0px;
}

.menu ul li ul li a {
	display: inline-block; 
	padding: 8px 15px;
	text-transform: uppercase; 
	font-size: 15px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Business Websites</title>
<link type="text/css" rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
</head>

<body>

<div class="page">

<!-- ================    Nav Section ======================-->

<div class="nav">
<div class="navcontain">
                        			
    <div class="logo">
        <a href="#">Logo Design</a>
    </div><!-- Logo --> 
                        
<div class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a>
    <ul>
                                                                		      
  <li><a href="#">Web Design</a></li>                                                                     
  <li><a href="#">Graphic Design</a></li>                                                                               
  <li><a href="#">Ecommerce Design</a></li>                                                                   
  <li><a href="#">Brochure Design</a></li>
</ul>
     </li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact Us</a></li>
 </ul>
     </div><!-- Menu ---> 
</div><!-- nav contain --> 
</div><!-- nav ---> 

														
<!-- ==========    Hero Image Section   ===================-->
                                                        

						<div class="hero">
                        			<div class="herocontain">
                                    			<div class="herored">
                                                		<p>Best Web Designing Company In India</p>
                                                        		<img src="img/man.png" alt="man">
                                                </div><!-- Hero Red --> 
                                    </div><!-- Hero Contain --> 
                        </div><!-- Hero --> 



										<!-- ======================================    Four Block Section ==================================-->
                                        
                                  <div class="four">
                                  			<div class="fourblocks">
                                            			
                                                        <div class="textblock">
                                                        		<img src="img/middleicon.png" alt="icon">
                                                                <h3>Clean Theme</h3>
                                                                <p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. 
                                                                Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
                                                                <a href="#">Read More</a>
                                                        </div><!-- Text Block --> 
                                            
                                            			 <div class="textblock">
                                                        		<img src="img/middleicon.png" alt="icon">
                                                                <h3>Clean Theme</h3>
                                                                <p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. 
                                                                Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
                                                                <a href="#">Read More</a>
                                                        </div><!-- Text Block --> 
                                                        
                                                         <div class="textblock">
                                                        		<img src="img/middleicon.png" alt="icon">
                                                                <h3>Clean Theme</h3>
                                                                <p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. 
                                                                Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
                                                                <a href="#">Read More</a>
                                                        </div><!-- Text Block --> 
                                                        
                                                         <div class="textblock">
                                                        		<img src="img/middleicon.png" alt="icon">
                                                                <h3>Clean Theme</h3>
                                                                <p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. 
                                                                Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
                                                                <a href="#">Read More</a>
                                                        </div><!-- Text Block --> 
                                            
                                            </div><!-- Four Blocks --> 
                                  </div><!-- Four --> 
                                        
                                        
                                        
                                        	<!-- ======================================    Lastest Work ==================================-->
                                        

					<div class="portfolio">
                    		<div class="port">
                            			
                                        <div class="topport">
                                        	<h3>Our Latest Works</h3>
                                        </div><!-- topport --> 


                            			<div class="items">
                                        		
                                                <div class="item">
                                                	<img src="img/member1.jpg">
                                                </div>
                                        
                                             <div class="item">
                                                	<img src="img/member2.jpg">
                                                </div>
                                                
                                                     <div class="item">
                                                	<img src="img/member3.jpg">
                                                </div>
                                                
                                                     <div class="item">
                                                	<img src="img/member3.jpg">
                                                </div>
                                                
                                        </div><!-- items --> 

                            </div><!-- Port -->
                    </div><!-- portfolio --> 



																		<!-- ======================================    testimonials ==================================-->

				<div class="testimonial">
                			<div class="testcontain">
                            			
                                        <div class="lefttestimonial">
                                        		<div class="whiteleft">
                                        		<h3>Testimonial</h3>
                                                <p>Lorem ipsum dolor sit amet, aliquam iracundia ullamcorper ea vix, vix idque philosophia et, sea ex iriure scripta. 
                                                In malis vivendo posidonium cum, ex mutat nulla oratio vim. 
                                                Ea cum assum integre quaeque, te duo homero antiopam erroribus, nec ut latine accumsan appetere.
                                                 Ignota persecuti an qui, in quas zril eloquentiam vis.</p>
                                                 <p>James Johnson, President of Web Designing X</p>
                                                </div><!-- whiteleft  --> 
                                        </div><!-- Left testimonial --> 
                                    
                                        <div class="righttestimonial">
                                        		<div class="rightwhite">
                                        			<h3>Our Clients</h3>
                                                    <ul>
                                                    		<li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                    </ul>
                                        		</div><!-- right white --> 
                                        </div><!-- Right Testimonial --> 
                                    
                            </div><!-- test contain --> 
                </div><!-- Testimonial --> 


					
                 					   <!-- ======================================    Call to Action ==================================-->
						
                        <div class="download">
                        		<div class="downloadcontain">
                                				<div class="downtext">
                                                <p>
                                                        Natum commodo cu est, solet repudiandae sea cu. Mutat nihil forensibus quo ut. 
                                                        Eu ubique pertinacia incorrupte usu, in vix quem sensibus, sea fugit conceptam ei. 
                                                        In inermis philosophia vis, sumo vituperata ne mei, no dico dolorum vix. 
                                                        Labores feugait salutatus ius no. Id vix vide ceteros, sale tempor te sea.
                                                </p>
                                                </div>
                                                <a href="#">Download</a>
                                </div><!-- Download Contain --> 
                        </div><!-- download --> 
                        


									<!-- ======================================    Footer   ==================================-->

					
                    <div class="footer">
                    		<div class="footercontain">
                            				
                                            <div class="footerblock">
                                            		<h3>About Us</h3>
                                                    	<p>Natum commodo cu est, solet repudiandae sea cu. Mutat nihil forensibus quo ut. 
                                                        Eu ubique pertinacia incorrupte usu, in vix quem sensibus, sea fugit conceptam ei. 
                                                        In inermis philosophia vis, sumo vituperata ne mei, no dico dolorum vix. 
                                                        Labores feugait salutatus ius no. Id vix vide ceteros, sale tempor te sea.
                                                        </p>
                                            </div><!-- footer block --> 
                            
                            				
                                              <div class="footerblock">
                                            		<h3>Pages</h3>
                                                    	<ul>
                                                        		<li><a href="#">Home</a></li>
                                                                <li><a href="#">About Us</a></li>
                                                                 <li><a href="#">Portfolio</a></li>
                                                                 <li><a href="#">Blog</a></li>
                                                                 <li><a href="#">Contact Us</a></li>
                                                        </ul>
                                            </div><!-- footer block --> 
                                            
                                            
                                              <div class="footerblock">
                                            		<h3>Contact Us</h3>
                                                    	<p>Web Designing X<br>
                                                        	Gangpur, Burdwan<br>
                                                            India<br>
                                                            Phone - 8000000<br>
                                                            Email - [email protected]<br>
                                                        </p>
                                            </div><!-- footer block --> 
                                            
                                              <div class="footerblock">
                                            		<h3>Connect With Us</h3>
                                                    	<ul>
                                                        		<li><img src="img/images/Social-media-circle-icons-pack_03.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_07.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_05.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_03.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_07.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_05.png"></li>
                                                        </ul>
                                            </div><!-- footer block --> 
                                            
                                            
                                            
                            				
                            </div><!--- footer contain --> 
                    </div><!--- footer ---> 






</div><!--page-->
</body>
</html>

check this image .. The dropdown menu does not have the blue top border as shown on the top nav menu.

Moreover, I am facing difficulties while selecting the individual items on the drop down menu section ..

Have I done anything wrong in the CSS section???

enter image description here

Upvotes: 0

Views: 115

Answers (3)

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

@charset "utf-8";
/* CSS Document */

body {
	font-family: 'Droid Serif', serif;
	margin: 0; 
	padding: 0; 
}

.page {
	width: 100%; 
	margin: 0; 
	padding: 0; 
}



/*    ================ Nav =============================== */ 

.nav {
	width: 100%; 
	padding: 0; 
	margin: 0; 
	background: #ECF0F1;
}

.navcontain {
	width: 1200px; 
	padding: 0; 
	margin: 0 auto; 
	overflow: hidden;
}

.logo {
	display: block; 
	width: 300px;
	float: left;  
}

.logo a {
	display: inline-block; 
	text-decoration: none; 
	color: #353535; 
	font-size: 36px; 
	font-weight: 900; 
	letter-spacing: -1.1px; 
	padding: 15px 0px;
}

.menu {
	padding: 0; 
	margin: 0; 
	width: 900px;
	float: right; 
}

.menu ul {
	padding: 0; 
	margin: 0; 
	float: right; 
	margin-top: 10px;
}

.menu ul li {
	display: inline-block; 
	float: left; 
	list-style: none; 
	margin-left: 20px;
}

.menu ul li:hover {
	border-top: 2px solid #2980B9; 
}

.menu ul li a {
	display: inline-block; 
	color: #313131; 
	text-decoration: none;  
	padding: 10px 15px;
	text-transform: uppercase;
	font-size: 15px;
}

.menu ul ul {
	position: absolute; 
	left: -9999px;
top:40px;white-space: nowrap;
}

.menu ul li:hover ul {
	left: auto;
}

.menu ul li ul li {
	float: none; 
	display: block; 
	margin-left: 0px;
}

.menu ul li ul li a {
	display: inline-block; 
	padding: 8px 15px;
	text-transform: uppercase; 
	font-size: 15px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Business Websites</title>
<link type="text/css" rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
</head>

<body>

<div class="page">

<!-- ================    Nav Section ======================-->

<div class="nav">
<div class="navcontain">
                        			
    <div class="logo">
        <a href="#">Logo Design</a>
    </div><!-- Logo --> 
                        
<div class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a>
    <ul>
                                                                		      
  <li><a href="#">Web Design</a></li>                                                                     
  <li><a href="#">Graphic Design</a></li>                                                                               
  <li><a href="#">Ecommerce Design</a></li>                                                                   
  <li><a href="#">Brochure Design</a></li>
</ul>
     </li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact Us</a></li>
 </ul>
     </div><!-- Menu ---> 
</div><!-- nav contain --> 
</div><!-- nav ---> 

														
<!-- ==========    Hero Image Section   ===================-->
                                                        

						<div class="hero">
                        			<div class="herocontain">
                                    			<div class="herored">
                                                		<p>Best Web Designing Company In India</p>
                                                        		<img src="img/man.png" alt="man">
                                                </div><!-- Hero Red --> 
                                    </div><!-- Hero Contain --> 
                        </div><!-- Hero --> 



										<!-- ======================================    Four Block Section ==================================-->
                                        
                                  <div class="four">
                                  			<div class="fourblocks">
                                            			
                                                        <div class="textblock">
                                                        		<img src="img/middleicon.png" alt="icon">
                                                                <h3>Clean Theme</h3>
                                                                <p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. 
                                                                Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
                                                                <a href="#">Read More</a>
                                                        </div><!-- Text Block --> 
                                            
                                            			 <div class="textblock">
                                                        		<img src="img/middleicon.png" alt="icon">
                                                                <h3>Clean Theme</h3>
                                                                <p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. 
                                                                Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
                                                                <a href="#">Read More</a>
                                                        </div><!-- Text Block --> 
                                                        
                                                         <div class="textblock">
                                                        		<img src="img/middleicon.png" alt="icon">
                                                                <h3>Clean Theme</h3>
                                                                <p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. 
                                                                Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
                                                                <a href="#">Read More</a>
                                                        </div><!-- Text Block --> 
                                                        
                                                         <div class="textblock">
                                                        		<img src="img/middleicon.png" alt="icon">
                                                                <h3>Clean Theme</h3>
                                                                <p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. 
                                                                Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
                                                                <a href="#">Read More</a>
                                                        </div><!-- Text Block --> 
                                            
                                            </div><!-- Four Blocks --> 
                                  </div><!-- Four --> 
                                        
                                        
                                        
                                        	<!-- ======================================    Lastest Work ==================================-->
                                        

					<div class="portfolio">
                    		<div class="port">
                            			
                                        <div class="topport">
                                        	<h3>Our Latest Works</h3>
                                        </div><!-- topport --> 


                            			<div class="items">
                                        		
                                                <div class="item">
                                                	<img src="img/member1.jpg">
                                                </div>
                                        
                                             <div class="item">
                                                	<img src="img/member2.jpg">
                                                </div>
                                                
                                                     <div class="item">
                                                	<img src="img/member3.jpg">
                                                </div>
                                                
                                                     <div class="item">
                                                	<img src="img/member3.jpg">
                                                </div>
                                                
                                        </div><!-- items --> 

                            </div><!-- Port -->
                    </div><!-- portfolio --> 



																		<!-- ======================================    testimonials ==================================-->

				<div class="testimonial">
                			<div class="testcontain">
                            			
                                        <div class="lefttestimonial">
                                        		<div class="whiteleft">
                                        		<h3>Testimonial</h3>
                                                <p>Lorem ipsum dolor sit amet, aliquam iracundia ullamcorper ea vix, vix idque philosophia et, sea ex iriure scripta. 
                                                In malis vivendo posidonium cum, ex mutat nulla oratio vim. 
                                                Ea cum assum integre quaeque, te duo homero antiopam erroribus, nec ut latine accumsan appetere.
                                                 Ignota persecuti an qui, in quas zril eloquentiam vis.</p>
                                                 <p>James Johnson, President of Web Designing X</p>
                                                </div><!-- whiteleft  --> 
                                        </div><!-- Left testimonial --> 
                                    
                                        <div class="righttestimonial">
                                        		<div class="rightwhite">
                                        			<h3>Our Clients</h3>
                                                    <ul>
                                                    		<li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                    </ul>
                                        		</div><!-- right white --> 
                                        </div><!-- Right Testimonial --> 
                                    
                            </div><!-- test contain --> 
                </div><!-- Testimonial --> 


					
                 					   <!-- ======================================    Call to Action ==================================-->
						
                        <div class="download">
                        		<div class="downloadcontain">
                                				<div class="downtext">
                                                <p>
                                                        Natum commodo cu est, solet repudiandae sea cu. Mutat nihil forensibus quo ut. 
                                                        Eu ubique pertinacia incorrupte usu, in vix quem sensibus, sea fugit conceptam ei. 
                                                        In inermis philosophia vis, sumo vituperata ne mei, no dico dolorum vix. 
                                                        Labores feugait salutatus ius no. Id vix vide ceteros, sale tempor te sea.
                                                </p>
                                                </div>
                                                <a href="#">Download</a>
                                </div><!-- Download Contain --> 
                        </div><!-- download --> 
                        


									<!-- ======================================    Footer   ==================================-->

					
                    <div class="footer">
                    		<div class="footercontain">
                            				
                                            <div class="footerblock">
                                            		<h3>About Us</h3>
                                                    	<p>Natum commodo cu est, solet repudiandae sea cu. Mutat nihil forensibus quo ut. 
                                                        Eu ubique pertinacia incorrupte usu, in vix quem sensibus, sea fugit conceptam ei. 
                                                        In inermis philosophia vis, sumo vituperata ne mei, no dico dolorum vix. 
                                                        Labores feugait salutatus ius no. Id vix vide ceteros, sale tempor te sea.
                                                        </p>
                                            </div><!-- footer block --> 
                            
                            				
                                              <div class="footerblock">
                                            		<h3>Pages</h3>
                                                    	<ul>
                                                        		<li><a href="#">Home</a></li>
                                                                <li><a href="#">About Us</a></li>
                                                                 <li><a href="#">Portfolio</a></li>
                                                                 <li><a href="#">Blog</a></li>
                                                                 <li><a href="#">Contact Us</a></li>
                                                        </ul>
                                            </div><!-- footer block --> 
                                            
                                            
                                              <div class="footerblock">
                                            		<h3>Contact Us</h3>
                                                    	<p>Web Designing X<br>
                                                        	Gangpur, Burdwan<br>
                                                            India<br>
                                                            Phone - 8000000<br>
                                                            Email - [email protected]<br>
                                                        </p>
                                            </div><!-- footer block --> 
                                            
                                              <div class="footerblock">
                                            		<h3>Connect With Us</h3>
                                                    	<ul>
                                                        		<li><img src="img/images/Social-media-circle-icons-pack_03.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_07.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_05.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_03.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_07.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_05.png"></li>
                                                        </ul>
                                            </div><!-- footer block --> 
                                            
                                            
                                            
                            				
                            </div><!--- footer contain --> 
                    </div><!--- footer ---> 






</div><!--page-->
</body>
</html>

Upvotes: 1

danish deb
danish deb

Reputation: 111

Okay i have found the solutions after two hours .. it is a silly mistake ..

I was assigning margin-top: 45px against the ul ul element and which is why I was having difficulty selecting the sub menus

.. we just have to remove that and to compensate for that space, we need to add this code -

.menu ul ul li:first-child {
	margin-top: 40px;
}

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

<div class="page">

<!-- ================    Nav Section ======================-->

<div class="nav">
<div class="navcontain">

    <div class="logo">
        <a href="#">Logo Design</a>
    </div><!-- Logo --> 

<div class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a> 
    <ul> 

  <li><a href="#">Web Design</a></li>                                                                     
  <li><a href="#">Graphic Design</a></li>                                                                               
  <li><a href="#">Ecommerce Design</a></li>                                                                   
  <li><a href="#">Brochure Design</a></li>
</ul> 
     </li> 
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact Us</a></li>
 </ul>
     </div><!-- Menu ---> 
</div><!-- nav contain --> 
</div><!-- nav ---> 


<!-- ==========    Hero Image Section   ===================-->


                        <div class="hero">
                                    <div class="herocontain">
                                                <div class="herored">
                                                        <p>Best Web Designing Company In India</p>
                                                                <img src="img/man.png" alt="man">
                                                </div><!-- Hero Red --> 
                                    </div><!-- Hero Contain --> 
                        </div><!-- Hero --> 



                                        <!-- ======================================    Four Block Section ==================================-->

                                  <div class="four">
                                            <div class="fourblocks">

                                                        <div class="textblock">
                                                                <img src="img/middleicon.png" alt="icon">
                                                                <h3>Clean Theme</h3>
                                                                <p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. 
                                                                Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
                                                                <a href="#">Read More</a>
                                                        </div><!-- Text Block --> 

                                                         <div class="textblock">
                                                                <img src="img/middleicon.png" alt="icon">
                                                                <h3>Clean Theme</h3>
                                                                <p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. 
                                                                Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
                                                                <a href="#">Read More</a>
                                                        </div><!-- Text Block --> 

                                                         <div class="textblock">
                                                                <img src="img/middleicon.png" alt="icon">
                                                                <h3>Clean Theme</h3>
                                                                <p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. 
                                                                Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
                                                                <a href="#">Read More</a>
                                                        </div><!-- Text Block --> 

                                                         <div class="textblock">
                                                                <img src="img/middleicon.png" alt="icon">
                                                                <h3>Clean Theme</h3>
                                                                <p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. 
                                                                Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
                                                                <a href="#">Read More</a>
                                                        </div><!-- Text Block --> 

                                            </div><!-- Four Blocks --> 
                                  </div><!-- Four --> 



                                            <!-- ======================================    Lastest Work ==================================-->


                    <div class="portfolio">
                            <div class="port">

                                        <div class="topport">
                                            <h3>Our Latest Works</h3>
                                        </div><!-- topport --> 


                                        <div class="items">

                                                <div class="item">
                                                    <img src="img/member1.jpg">
                                                </div>

                                             <div class="item">
                                                    <img src="img/member2.jpg">
                                                </div>

                                                     <div class="item">
                                                    <img src="img/member3.jpg">
                                                </div>

                                                     <div class="item">
                                                    <img src="img/member3.jpg">
                                                </div>

                                        </div><!-- items --> 

                            </div><!-- Port -->
                    </div><!-- portfolio --> 



                                                                        <!-- ======================================    testimonials ==================================-->

                <div class="testimonial">
                            <div class="testcontain">

                                        <div class="lefttestimonial">
                                                <div class="whiteleft">
                                                <h3>Testimonial</h3>
                                                <p>Lorem ipsum dolor sit amet, aliquam iracundia ullamcorper ea vix, vix idque philosophia et, sea ex iriure scripta. 
                                                In malis vivendo posidonium cum, ex mutat nulla oratio vim. 
                                                Ea cum assum integre quaeque, te duo homero antiopam erroribus, nec ut latine accumsan appetere.
                                                 Ignota persecuti an qui, in quas zril eloquentiam vis.</p>
                                                 <p>James Johnson, President of Web Designing X</p>
                                                </div><!-- whiteleft  --> 
                                        </div><!-- Left testimonial --> 

                                        <div class="righttestimonial">
                                                <div class="rightwhite">
                                                    <h3>Our Clients</h3>
                                                    <ul>
                                                            <li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                            <li><img src="img/cnn.png"></li>
                                                    </ul>
                                                </div><!-- right white --> 
                                        </div><!-- Right Testimonial --> 

                            </div><!-- test contain --> 
                </div><!-- Testimonial --> 



                                       <!-- ======================================    Call to Action ==================================-->

                        <div class="download">
                                <div class="downloadcontain">
                                                <div class="downtext">
                                                <p>
                                                        Natum commodo cu est, solet repudiandae sea cu. Mutat nihil forensibus quo ut. 
                                                        Eu ubique pertinacia incorrupte usu, in vix quem sensibus, sea fugit conceptam ei. 
                                                        In inermis philosophia vis, sumo vituperata ne mei, no dico dolorum vix. 
                                                        Labores feugait salutatus ius no. Id vix vide ceteros, sale tempor te sea.
                                                </p>
                                                </div>
                                                <a href="#">Download</a>
                                </div><!-- Download Contain --> 
                        </div><!-- download --> 



                                    <!-- ======================================    Footer   ==================================-->


                    <div class="footer">
                            <div class="footercontain">

                                            <div class="footerblock">
                                                    <h3>About Us</h3>
                                                        <p>Natum commodo cu est, solet repudiandae sea cu. Mutat nihil forensibus quo ut. 
                                                        Eu ubique pertinacia incorrupte usu, in vix quem sensibus, sea fugit conceptam ei. 
                                                        In inermis philosophia vis, sumo vituperata ne mei, no dico dolorum vix. 
                                                        Labores feugait salutatus ius no. Id vix vide ceteros, sale tempor te sea.
                                                        </p>
                                            </div><!-- footer block --> 


                                              <div class="footerblock">
                                                    <h3>Pages</h3>
                                                        <ul>
                                                                <li><a href="#">Home</a></li>
                                                                <li><a href="#">About Us</a></li>
                                                                 <li><a href="#">Portfolio</a></li>
                                                                 <li><a href="#">Blog</a></li>
                                                                 <li><a href="#">Contact Us</a></li>
                                                        </ul>
                                            </div><!-- footer block --> 


                                              <div class="footerblock">
                                                    <h3>Contact Us</h3>
                                                        <p>Web Designing X<br>
                                                            Gangpur, Burdwan<br>
                                                            India<br>
                                                            Phone - 8000000<br>
                                                            Email - [email protected]<br>
                                                        </p>
                                            </div><!-- footer block --> 

                                              <div class="footerblock">
                                                    <h3>Connect With Us</h3>
                                                        <ul>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_03.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_07.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_05.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_03.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_07.png"></li>
                                                                <li><img src="img/images/Social-media-circle-icons-pack_05.png"></li>
                                                        </ul>
                                            </div><!-- footer block --> 




                            </div><!--- footer contain --> 
                    </div><!--- footer ---> 






</div><!--page-->

DEMO PAGE

Upvotes: 0

Related Questions