Hi dear welcome to Ascode Blog . In this post we are going to learn how to make a moview blogpost card for your blog website.. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the file with your browser.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie blogpost card </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="movie-card">
<div class="container">
<!-- <a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/hobbit_cover.jpg" alt="cover" class="cover" /></a> -->
<a href="#"><img src="https://1.bp.blogspot.com/-rYlfNtv18n4/Xl0zPEWFV_I/AAAAAAAAAH8/qytMY3bKQ6QBFMIBAZDwZHNPOkYGc4WngCLcBGAsYHQ/s1600/jumanji2.jpg" alt="cover" class="cover" /></a>
<div class="hero">
<div class="details">
<div class="title1">The Jumanji <span>PG-13</span></div>
<div class="title2">The Battle of the Game</div>
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" checked /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<span class="likes">109 likes</span>
</div> <!-- end details -->
</div> <!-- end hero -->
<div class="description">
<div class="column1">
<span class="tag">#action</span>
<span class="tag">#fantasy</span>
<span class="tag">#adventure</span>
</div> <!-- end column1 -->
<div class="column2">
<p>Jumanji: a game for those who seek to find, a way to leave their world behind. Released in 1995 and based on the children’s book by author Chris Van Allsburg, the movie Jumanji, which starred Robin Williams, Bonnie Hunt, and Kristen Dunst, followed siblings Judy and Peter Shepherd, who begin to play magical board game that has dire consequences.. With the game manifesting its “roll of the ...<a href="#">read more</a></p>
<div class="avatars">
<a href="#" data-tooltip="Dwayne Johnson" data-placement="top">
<img src="data:image/jpeg;base64,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" alt="avatar1" />
</a>
<a href="#" data-tooltip="Karen Gillan" data-placement="top">
<img src="data:image/jpeg;base64,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" alt="avatar2" />
</a>
<a href="#" data-tooltip="Nick Jonas" data-placement="top">
<img src="data:image/jpeg;base64,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" alt="avatar3" />
</a>
<a href="#" data-tooltip="Jack Black" data-placement="top">
<img src="data:image/jpeg;base64,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" alt="avatar3" />
</a>
</div> <!-- end avatars -->
</div> <!-- end column2 -->
</div> <!-- end description -->
</div> <!-- end container -->
</div> <!-- end movie-card -->
</body>
</html>
CSS
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
* {
box-sizing: border-box;
}
body {
background: rgb(255, 246, 216);
}
a {
text-decoration: none;
color: #5C7FB8;
}
a:hover {
text-decoration: underline;
}
.movie-card {
font: 14px/22px "Lato", Arial, sans-serif;
color: #A9A8A3;
padding: 40px 0;
}
.container {
margin: 0 auto;
width: 780px;
height: 640px;
background: #30284e;
border-radius: 5px;
position: relative;
}
.hero {
height: 342px;
margin: 0;
position: relative;
overflow: hidden;
z-index: 1;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.hero:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: red;
background: url("https://th.bing.com/th/id/R.3d899baa137700d7acc903147db8b432?rik=iQNaqvPdI7sq5Q&riu=http%3a%2f%2fwww.le-crestois.fr%2fimages%2fbreves_2020%2fjumanji_2.jpg&ehk=WYu54QXEA%2fGe5ZJUl72SXtzKUvFBTt6aU8LVRuHP7yg%3d&risl=&pid=ImgRaw");
z-index: -1;
transform: skewY(-2.2deg);
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
}
.cover {
position: absolute;
top: 160px;
left: 40px;
z-index: 2;
width: 170px;
}
.details {
padding: 190px 0 0 280px;
}
.details .title1 {
color: white;
font-size: 44px;
margin-bottom: 13px;
position: relative;
}
.details .title1 span {
position: absolute;
top: 3px;
margin-left: 12px;
background: linear-gradient(45deg,#30284e,#f09);
border-radius: 5px;
color: #ffffff;
font-size: 14px;
padding: 0px 4px;
}
.details .title2 {
color: #C7C1BA;
font-size: 23px;
font-weight: 300;
margin-bottom: 15px;
}
.details .likes {
margin-left: 24px;
}
.details .likes:before {
content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/icon_like.png");
position: relative;
top: 2px;
padding-right: 7px;
}
.description {
bottom: 0px;
height: 200px;
font-size: 16px;
line-height: 26px;
color: #B1B0AC;
}
.column1 {
padding-left: 50px;
padding-top: 120px;
width: 220px;
float: left;
text-align: center;
}
.tag {
background: white;
border-radius: 10px;
padding: 3px 8px;
font-size: 14px;
margin-right: 4px;
line-height: 35px;
color: #090;
cursor: pointer;
}
.tag:hover {
background: #ddd;
}
.column2 {
padding-left: 41px;
padding-top: 30px;
margin-left: 20px;
font-size: 13px;
width: 480px;
float: left;
}
.avatars {
margin-top: 23px;
}
.avatars img {
cursor: pointer;
width: 70px;
border-radius: 50%;
}
.avatars img:hover {
opacity: 0.6;
}
.avatars a:hover {
text-decoration: none;
}
fieldset, label {
margin: 0;
padding: 0;
}
/****** Style Star Rating Widget *****/
.rating {
border: none;
float: left;
}
.rating > input {
display: none;
}
.rating > label:before {
margin: 5px;
margin-top: 0;
font-size: 1em;
font-family: FontAwesome;
display: inline-block;
content: "";
}
.rating > .half:before {
content: "";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: #FFD700;
}
/* hover previous stars in list */
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
color: #FFD700;
}
a[data-tooltip] {
position: relative;
}
a[data-tooltip]::before,
a[data-tooltip]::after {
position: absolute;
display: none;
opacity: 0.85;
}
a[data-tooltip]::before {
/*
* using data-tooltip instead of title so we
* don't have the real tooltip overlapping
*/
content: attr(data-tooltip);
background: #000;
color: #fff;
font-size: 13px;
padding: 5px;
border-radius: 5px;
/* we don't want the text to wrap */
white-space: nowrap;
text-decoration: none;
}
a[data-tooltip]::after {
width: 0;
height: 0;
border: 6px solid transparent;
content: "";
}
a[data-tooltip]:hover::before,
a[data-tooltip]:hover::after {
display: block;
}
/** positioning **/
/* top tooltip */
a[data-tooltip][data-placement=top]::before {
bottom: 100%;
left: 0;
margin-bottom: 40px;
}
a[data-tooltip][data-placement=top]::after {
border-top-color: #000;
border-bottom: none;
bottom: 50px;
left: 20px;
margin-bottom: 4px;
}
0 Comments