Skip to content

Instantly share code, notes, and snippets.

@Queenie2091

Queenie2091/my page

Last active August 3, 2019 03:48
Show Gist options
  • Save Queenie2091/b53897bbdafbdca1a4b1000cc1b1cb05 to your computer and use it in GitHub Desktop.
Save Queenie2091/b53897bbdafbdca1a4b1000cc1b1cb05 to your computer and use it in GitHub Desktop.
Download ZIP
my page
Raw
my page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="intro-box">
<h1>Welcome to Queenie`s Life</h1>
</div>
<!-- introduction -->
<div class="row">
<div class="col-12 col-md">
<img src="images/Queenielife.jpg" class="img-fluid">
</div>
<div class="col-12 col-md-8">
<h4>Queenie`s Life</h4>
<p>In human life, Food ,drink and wear is the basic requirement.In this page , it will introduce how to make enhance these basic requirements,which is includin beaty,fashion and leisure life.
</p>
</div>
</div>
<!-- include Food & Drink -->
<div class="row">
<div class="col-12 col-md">
<img src="images/food Drink.jpg" class="img-fluid">
</div>
<div class="col-12 col-md-8">
<h5>FOOD & DRINK</h5>
<p>Food and drink is a part of our life.Enjoying it is meant to enjoy our Life.In my page, it will share any deliciuos food and recommend some resturants to you.
Also , it will share the cooking recipe.
</p>
</div>
</div>
<!-- include Beauty -->
<div class="row">
<div class="col-12 col-md">
<img src="images/Beauty.jpg" class="img-fluid">
</div>
<div class="col-12 col-md-8">
<h4>Beauty</h4>
<p> Most of people will link to make up when you asked they what is Beauty.
For me , it is not only make up ,but also included skin care.Nude makeup is trendy in beauty.
Thus,if you has better skin ,you can reduce many steps in make up proceess.In my page , it is not only provide the trend of make up ,but also teach you how to take are of your skin.
</p>
</div>
</div>
<!--include fashion-->
<div class="row">
<div class="col-12 col-md">
<img src="images/fashion.png" class="img-fluid">
</div>
<div class="col-12 col-md">
<h4>fashion</h4>
<P> Fashion is not a follower which is uniqlue style.There is provide the fashion trend news and advise the guidline for you to build up your own style</P>
</div>
</div>
<!--include lesiure-->
<div class="row">
<div class="col-12 col-md">
<img src="images/Leisure.jpg" class="img-fluid">
</div>
<div class="col-12 col-md">
<h4>Leisure</h4>
<P>There is introducing the leisure attivities such as traveling,sports,learning .Here is foucing on traveling and sports in order to develop a health life.</P>
</div>
</div>
<!-- include a list of links to favorite websites -->
<h3 id="likes">Here some recommendion you can read:</h3>
<ul>
<li><a href="#intro-text" class="btn btn-primary">Go to intro text</a></li>
<li><a href="https://www.wgsn.com/en/">WGSN</a></li>
<li><a href="https://www.elle.com.hk/fashion">ELLE.Com</a></li>
</ul>
</div>
</body>
</html>
Raw
my page.CSS
body{
/* background-image: url("fashion.png");
background-repeat: no-repeat; */
}
.intro-box {
background-image: url("https://www.wgsn.com/wp-content/uploads/hero-beauty.jpg");
height: 200px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
color: pink;
font-family: 'Courier New', Courier, monospace
}
.intro, p {
color: blue;
}
#likes {
color: green
}
.card {
height: 100%;
}
img,class{
width: 400px;
Height:400px;
}
.div{
width:100%;
height:auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment