User card

Developer
Laura Moraiti
Size
2,074 Kb
Views
24,288
  1. User card Previews
  2. User card HTML Codes
  3. User card CSS Codes

How do I make an user card?

What is a user card? How do you make a user card? This script and codes were developed by Laura Moraiti on 04 November 2022, Friday.

User card Previews
IQ Test

User card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>User card</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article> <div class="img-wrap"> <img src="http://de.ign.com/pictures/articles/22982/257313.jpg"> <div class="interviewer"> <img src="http://img2.wikia.nocookie.net/__cb20090421055937/swfanon/images/b/ba/ObiWanKenobi.JPG"> </div> </div> <div class="contenido"> <h4 class="author"><span>Obi Wan Kenobi</span></h4> <h2>Were those the Droids they were looking for? Were they?</h2> </div>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

User card - Script Codes CSS Codes

* {box-sizing: border-box;}
img {display: block;}
article { width: 80%; margin: 2em auto;
}
.img-wrap { position: relative;
}
.img-wrap img { width: 100%;
}
/* Not entirely fluid, width should be a % */
.interviewer { width: 8em; height: 8em; overflow: hidden; position: absolute; bottom: -4em; left: 50%; margin-left: -4em; border-radius: 5px; box-shadow: 0 0 0 .5em #fff;
}
.interviewer img { border-radius: 5px;
}
.contenido { padding: 5em 0 1em; /* Colored background-color: #97ACB6; color: #fff;*/
}
.author { text-transform: uppercase; font-weight: normal; text-align: center; overflow: hidden;
}
.author span { display: inline-block; position: relative; /* Colored color: rgba(255,255,255,.8);*/ color: #999;
}
.author span:before,
.author span:after { content: ""; height: 1px; width: 1000px; position: absolute; top: 50%; display: block; /* Colored background-color: rgba(255,255,255,.2); */ background-color: #BBB;
}
.author span:before{ left: -1016px;
}
.author span:after{ right: -1016px;
}
User card - Script Codes
User card - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded November 04, 2022
Rating 3
Size 2,074 Kb
Views 24,288
Do you need developer help for User card?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Laura Moraiti (Fixie) Script Codes
Name
Music equalizer bars with jQuery
Reusable simple dropdown
Unconventional slideshow
Edit inline text and hidden input with jQuery
Text and headings flow for a health site, on the making
Responsive three column fixed layout
Horizontal infinite loop newsticker
A Pen by Laura Moraiti
Easy hover effect for videos
Simple and clean form
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!