How to make this style? RSS

1 reply

Last post Jan 08, 2017 11:31 AM by AngelinaJolie

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
jrahma
Member

23 Points

683 Posts

How to make this style?

Jan 07, 2017 03:52 PM|jrahma|LINK

Hi,

I would like to ask how can I make such style as per this image?

https://expirebox.com/download/9fe8c3bdcb5bcaf89b622bc3d65b1dec.html

A square for the image and a square for the headline title and a circle for the profile image.

Thanks,
Jassim

Technology News @ www.JassimRahma.com

AngelinaJoli...

Contributor

5290 Points

2307 Posts

Re: How to make this style?

Jan 08, 2017 11:31 AM|AngelinaJolie|LINK

Hi,

I suggest you could refer to my demo below;

Key points:

1:box-shadow:0 3px 3px rgba(21,62,78,0.8);  /*display shadow*/
2:border-radius:50%;  /* show that the circular */
3::before{} /* By pseudo-element*/

Here is my screenshot:

StyleSheet1.css:

body {
	/*background: url('http://www.w3cplus.com/demo/css3/minimal-login-ui/bg.jpg') no-repeat center fixed;*/
	background-size: 100% 100%; /*if you want a background image*/
}
 
.content {
	width: 600px;
	height: 420px;
    padding-top:73px;
	margin: 50px auto;
    background-image:-*-linear-gradient(top,rgb(255,255,255),rgb(242,242,242)); 
  box-shadow:0 3px 3px rgba(21,62,78,0.8); /*display shadow*/
}
 
.img-form {
  width:400px;
  height:177px;
  margin:70px auto 0;
  /*padding-top:73px;*/
  position:relative; /*This is do for ':before' */
  /*background: url("http://www.w3cplus.com/demo/css3/minimal-login-ui/profilepicture.jpg") no-repeat ;*/
    /*box-shadow:0 3px 3px rgba(21,62,78,0.8);*/
}
 
.img-form:before {
  content:"";
  position:absolute;/*Absolute positioning relative to ‘img-form’*/
  top:-50px;
  left:-20px;
  width:102px;
  height:102px;
  border-radius:50%;
  padding:2px;
  border:1px solid rgb(216,216,219);
  background:#fff url("http://www.w3cplus.com/demo/css3/minimal-login-ui/profilepicture.jpg") no-repeat 2px 2px; 
}
 
.img-form:after {
  content:"word word word word word word"; /*some words will be display*/
  position:absolute;  /*Absolute positioning relative to ‘img-form’*/
  color:rgb(153,153,153);
  font-weight:bold;
  bottom:-60px;
   
  background-color:rgb(255,255,255);
  /*width:400px;*/ 
  width:300px;
  
  height:100px;
  margin:0 50px;
  line-height:100px;
  text-align: center;
  box-shadow:0 3px 3px rgba(21,62,78,0.8);  /* display shadow  */
}img {
    width:100%;
    height:200px;

}

Html code:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    
    <title>Demo</title>
    <link href="~/Content/StyleSheet1.css" rel="stylesheet" />
</head>

<body>
    <section class="demo">
        <div class="content">
            <form action="" method="post" class="img-form">
                <img src="http://www.w3cplus.com/demo/css3/minimal-login-ui/profilepicture.jpg" />
              </form>
        </div>
    </section>
</body>
</html>

Hope it is useful to you.If you have any question and confusion about the problem. Please don't hesitate to let me know.

Best regards,
Angelina

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›