Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
    <div class= "main">
  <center><h1>Welcome</h1>
<h2></h2></center>
  
</div>
  
    
</head>
  
  

  
  
  <div class="card1effect__hover">
    <div class="card__front"></div>



<body> 
  <!-- THIS IS THE ABOUT ME SECTION -->
  <div class="card__back"><div class="aboutme"><img  src="https://res.cloudinary.com/dpkptfzzm/image/upload/v1509221766/IMG_2843_gdueu0.png" alt="Picture of Dhiya" id="dhiya"> <p> <a href="#"><b>Dhiya Almayali<b></a> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt omnis nostrum voluptates maiores. Soluta veniam quaerat, harum officiis labore laboriosam suscipit fuga dignissimos omnis deserunt iusto non adipisci tempora doloribus. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci mollitia harum ipsa commodi, nihil natus nesciunt corrupti accusantium aliquid temporibus tempore culpa optio aut quia beatae reprehenderit praesentium suscipit debitis! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores reprehenderit accusantium consectetur laboriosam explicabo expedita quis odit? Non ipsam officia deleniti dolorem sint unde reiciendis porro quidem ad eius! Odio. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus cum alias asperiores praesentium aut tempore officia accusantium, labore laborum dolores corporis voluptatum autem, hic ipsam fuga ipsa, veniam ducimus. Voluptatibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos doloremque aliquid nemo ratione blanditiis nulla alias harum quos rerum nam voluptates, earum eveniet iste officiis, repudiandae quidem nihil distinctio id.</p></div></div>
    
  </div>
</div>

  
  
  
  
  
  
  
  
  
  
  
  
  <hr>
  
  <!--INSERT A PICTURE OF MYSELF IN THESE LINES-->


  <!-- EXPERIENCES GO HERE -->
  
    <div class= "cardeffect2_hover">
      <div class= "card2front"><b>Experience<b></div>
        <div class="card2back">
            <div class="thumbnail"><a target="_blank" href= "http://www.webdesigninspiration.org/wp-content/uploads/2014/10/bootb.gif"> <img src="http://www.webdesigninspiration.org/wp-content/uploads/2014/10/bootb.gif" id="Project1" alt="Image of Project1"></a>
              <div class="description">Project 1</div>
            </div>
  <div class="thumbnail"> <a target="_blank" href="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/brando-best-wordpress-business-themes.jpg"><img src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/brando-best-wordpress-business-themes.jpg" id="Project2" alt="project2"></a>
    <div class="description">Project 2</div>
  </div>
    <div class="thumbnail"> <a target="_blank" href="http://images.all-free-download.com/images/graphiclarge/foreign_financial_website_template_psd_layered_176074.jpg"> <img src="http://images.all-free-download.com/images/graphiclarge/foreign_financial_website_template_psd_layered_176074.jpg" id="Project3" alt="Project3"></a>
      <div class="description">Project 3</div>
    </div>
          <div class="thumbnail"><a target="_blank" href="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/11/guthrie3.jpg"><img src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/11/guthrie3.jpg" id="project4" alt="Project4"></a>
            <div class="description">Project 4</div>
          </div>
          <div class="thumbnail"><a target="_blank" href="https://i.pinimg.com/736x/98/5b/b8/985bb8d73afae6e714f2dc60a3eb60b7--website-ideas-website-templates.jpg"> <img src="https://i.pinimg.com/736x/98/5b/b8/985bb8d73afae6e714f2dc60a3eb60b7--website-ideas-website-templates.jpg" id="project5" alt="project5"></a>
            <div class=description>Project 5</div>
          </div> </div>
      
          
    </div>
   </div>
  
   
    
   <hr>  
    <!-- INTEREST AND HOBBIES -->

   <div class= "cardeffect3_hover">
     <div class= "card3front"></div>
     <div class="card3back">
   
   <div class="fourth">
     <div class= "row">
      
       <div class="col-md-4">
        

         <div class="HI"> <h3><b>Interests</b></h3></div>
    <div class="HI2"> <ul> 
     <li>Web Development</li>
       <li>Programming</li>
       <li>Front-end Design</li>
       <li>Database development</li>
       <li>Cybersecurity</li>
       <li>Blockchain Technology</li>
      </ul></div> </div>
     <div class="col-md-4">
       <div class="HI"> <h3><b>Hobbies</b></h3></div>
     <div class="HI2"><ul>
      <li>LED Lighting Designs</li>
      <li>Free Lance Web Development</li>
      <li>Flyboarding</li>                   
      <li>Traveling</li>
      <li>Investing</li>
      <li>Skydiving</li>
       </ul></div></div>
    <div class= col-md-4>
      
        <div class="HI">   <h3><b>Skills</b></h3></div>
    <div class="HI2">   <ul>
      <li>Python Programming</li>
        <li>HTML5</li>
        <li>CSS/CSS3</li>
        <li>Bootstrap4</li>
       <li>Java</li> 
        <li>Javascript</li>
      
      </ul>   </div> 
         </div>
           
         </div>
    </div>
     </div>
      </div>
       
     
  <hr>
<!-- Personal Opinion -->
  <div class= "fifth">
<center><h3>Personal Perspective</h3></center>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis architecto provident aliquam repudiandae vero itaque tempora ipsa rem, impedit temporibus quia voluptates laborum, odit sunt fuga nobis atque hic in! Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit expedita illo nulla, nostrum voluptate provident assumenda, ut placeat sapiente ratione quas blanditiis in consequuntur quidem? Ex iste exercitationem reiciendis minus! Lorem ipsum dolor sit amet consectetur adipisicing elit. At officia a, blanditiis sed debitis velit minus voluptate hic porro in repellat, perferendis delectus, aspernatur dolorem aut! Quisquam soluta et harum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores non nesciunt atque id repellat, at nemo modi ut. Nostrum quisquam deleniti nobis culpa quibusdam sapiente harum minus optio excepturi aliquid? Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit incidunt at soluta ipsa, accusamus cum sunt iure maiores quae provident quasi delectus neque commodi? Totam animi delectus quo molestias fugiat!lorem  
  </div>
    
 
    
  <hr>  
    
    <!--CONTACT ME -->
  <div class= "sixth">
    <center><h3>Contact Me</h3></center></div>
   
  <!-- SOCIAL MEDIA BUTTONS -->
  <div class="seventh">
    <center><a href="#"><i class="fa fa-facebook-official"></a></i><a href="#"><i class= "fa fa-twitter"></a></i><a href="#"><i class= 'fa fa-linkedin-square'></i></center></a>
    
    
  </div>
    <center><h6>Please fill in the information below</h6></center>
  
  
    <!-- FORMS AND BUTTONS -->
    <form>
    <div class="form-group">
      <label for="name">First and Last Name</label>
      <input type="name"class="form-control" placeholder="Enter your name"style= "background-color: highlight">
      <label for="email">Email Address</label>
      <input type="email" class="form-control" placeholder="Enter your email"style= "background-color: highlight">
      <label for="phone number">Phone Number</label>
      <input type="phone" class="form-control" placeholder= "Enter your phone number"style= "background-color: highlight">
      <label for="comment">Message</label>
      <textarea type="comment" class="form-control"  rows="5" placeholder="Enter a message" style= "background-color: highlight"></textarea>
      <button>Submit</button>
      <button>Reset</button>
      </div>
      
  
      
      
  
  

  
  
</body>


              
            
!

CSS

              
                #Project1 {
    border: 1px solid #ddd; /* Gray border */
    border-radius: 25%;  /* Rounded border */
    padding: 5px; /* Some padding */
    width: 150px; /* Set a small width */
    float: left;
    
}

#Project1:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
#Project2 {
    border: 1px solid #ddd; /* Gray border */
    border-radius: 25%;  /* Rounded border */
    padding: 5px; /* Some padding */
    width: 150px; /* Set a small width */
    float: left;
    
}
#Project2:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);}


#Project3 {
    border: 1px solid #ddd; /* Gray border */
    border-radius: 25%;  /* Rounded border */
    padding: 5px; /* Some padding */
    width: 150px; /* Set a small width */
    float: left;
  
    
}
#Project3:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);}
/* HEADING AND QUOTE */
.main {
  
   background: url(http://consolpartners.com/wp-content/uploads/2015/02/candidate-background-1.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "impact";
  color: white;
  padding: 10%;
  margin: 50px 250px 150px 250px;
  
  
  
  
 
}
body {
 
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeD19U8UBkRlsnwi0SxdyLhwoH7F6lDKzZR0XSzzE9GQuTojJPEg");
    
}
/* ABOUT ME  */

/* EXPERIENCES  */
.third {
  
  font-family: "cursive, sans-serif";
}
/* INTEREST AND HOBBIES */

/* PERSONAL PERSPECTIVE */
.fifth {
  font-family: "cursive, sans-serif";
  color: highlight;
}
/* CONTACT ME */
.sixth {
  border: solid;
  margin: 10px 100px 5px 100px;
}
/* SOCIAL MEDIA LINKS */
.seventh {
  font-size: 30px;
  border: double;
  margin: 10px 500px 10px 500px;
}
.fourth {
  color: highlight;
}
div.description {
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
  color: white;
}
div.thumbnail {
  margin: 2px;
  broder: 1px solid blue;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  
}


div.thumbnail {
  display: inline;
  margin: 50px;
  border: 1px solid blue;
}
#project4 {
   border: 1px solid #ddd; /* Gray border */
    border-radius: 25%;  /* Rounded border */
    padding: 5px; /* Some padding */
    width: 150px; /* Set a small width */
    float: left;
}
#project5 {
   border: 1px solid #ddd; /* Gray border */
    border-radius: 25%;  /* Rounded border */
    padding: 5px; /* Some padding */
    width: 150px; /* Set a small width */
    float: left;
}


/* INFORMATION FORM   "http://envoc.com/uploads/images/think-professional.jpg */

.form-group {
  border: ridge;
  margin: 10px 500px 100px 500px;
  
}
/* PICTURE Cloudinary.com*/

#dhiya {
  border-radius: 100%;
  height: 250px;
  float: left;
  margin: -20px 50px 20px 10px;
   
  
  
  
}
.aboutme {
  color:white;
  font-weight: 600;
  font-stretch: ultra-expanded;
  font-family: Trattatello;
  padding: -25px 50px 20px 50px;
  
}


/* CARD 1 ABOUT ME----------------------*/



.card1effect__hover {
  position: relative;
  padding: 10%;
  width: 100%;
  text-align: center;
  border: solid white;

  
  
  
  
  
}

.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card__front,
.card__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card__front {
  padding: 6%;
  font-size: 500%;
  font-family: courier;
  width: 100%;
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSM7Urzs1xb4hLQmeyxSp8S4QHEGaJbhjTY5O6YllaQOT3O7xJy");
  background-repeat: no-repeat;
  background-position: center;
  background-color: black;
  
}

.card__back {
 
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  padding: 2.9%;
  background-color: yellow;
  width: 100%;
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTP-l4gX85prSStPoB4hSSagcq_a9hwEM7_V23DdcamtN4BMxGyg");
  
  background-position: center;
  background: no-repeat;
  
    
}
p {
  color: highlight;
}

/* CARD HOVER EFFECT */

.card1effect__hover:hover .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
 
}

.card1effect__hover:hover .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}




/* CARD 2 HOVER EXPERIENCES----------*/
.cardeffect2_hover {
  position: relative;
  padding: 10%;
  width: 100%;
  text-align: center;
  
}

.card2front,
.card2back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
}

.card2front,
.card2back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card2front {
  background-color: green;
  padding: 6%;
  font-size: 500%;
  font-family: courier;
  width: 100%;
  background: url("http://engineeringselection.com/blog/wp-content/uploads/2017/06/experience-1.jpg");
  
}

.card2back {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  padding: 5%;
  background-color: black;
  width: 100%;
  background: no-repeat;
}

/* CARD HOVER EFFECT */

.cardeffect2_hover:hover .card2front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
 
}

.cardeffect2_hover:hover .card2back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}




/* CARD HOVER 3 */

.cardeffect3_hover {
  position: relative;
  padding: 10%;
  width: 100%;
  text-align: center;
  
}

.card3front,
.card3back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  
}

.card3front,
.card3back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
  
}

.card3front {
  background-color: green;
  padding: 6%;
  font-size: 500%;
  font-family: courier;
  width: 100%;
  background: url("http://www.careertuneup.org/wp-content/uploads/2015/12/49-skills.png");
  background-position: center;
  background-repeat: no-repeat;
  
  
}

.card3back {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  padding: 5%;
  background-color: black;
  width: 100%;
  background: no-repeat;
}

/* CARD HOVER EFFECT */

.cardeffect3_hover:hover .card3front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
 
}

.cardeffect3_hover:hover .card3back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}



.HI {
  border: solid white;
}

.HI2 {
  border: 
  float: left;
}















              
            
!

JS

              
                
              
            
!
999px

Console