I want the div with the class "games" to encircle/wrap-around my para, so that every word breaks when it reaches the rounded corners and nothing is invisible.
How do I do that?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="metacore.css"/>
<link rel="stylesheet" href="../font-awesome-4.6.3/css/font-awesome.css" />
<style>
#gamesContainer {
margin-top:120px;
margin-bottom:100px;
}
.games {
overflow:hidden;
width:65%;
height:450px;
border-radius:250px;
-webkit-filter:grayscale(100%);
margin:0 auto;
box-shadow:-30px 30px 30px 2px black inset;
position:relative;
}
.singleGame .gameName {
display:table;
color:black;
font-family:basics;
font-size:50px;
margin:0 auto;
margin-bottom:30px;
text-shadow:0 1px 0 white,0 3px 0 grey,1px 4px 0 white;
}
#ourGames {
text-shadow:0 1.5px 0 white,0 4.5px 0 grey,1.5px 6px 0 white;
color:black;
font-size:80px;
font-family:basics;
color:black;
margin-left:50px;
margin-bottom:120px;
padding-bottom:25px;
border-bottom:6px groove #464646;
box-shadow:0 2px 0 white,0 3px 0 grey;
}
.gameDescriptionBackground {
width:100%;
height:100px;
background-color:black;
opacity:.9;
position:absolute;
bottom:0;
}
.gameDescription {
width:80%;
height:100px;
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%);
overflow:hidden;
}
.gameDescriptionHeading {
color:white;
margin:0;
padding:0;
font-family:basics;
text-transform:uppercase;
text-shadow:0 2px 0 black, 0 3px 0 grey,0 4px 0 black;
}
.gameDescriptionPara {
color:white;
text-transform:uppercase;
text-wrap:unrestricted;
font-family:basics;
font-size:13px;
padding-left:30px;
}
</style>
</head>
<body>
<div id="navBarContainer">
<ul id="topNav">
<li><a href="metacore.html">Home</a></li>
<li><a href="#" style="color:black;background-color:#cac9c9;">Games</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
<div id="gamesContainer">
<h1 id="ourGames">Our Published Games:</h1>
<div class="singleGame">
<h1 class="gameName">Vain Instinct</h1>
<div class="games" style="background:url('game1.jpg') -120px -50px">
<div class="gameDescriptionBackground"></div>
<div class="gameDescription">
<h2 class="gameDescriptionHeading">Best Selling Ios Game In 2017</h2>
<p class="gameDescriptionPara">This Was Our First Game, it revolves around the story of around the story of a band of teenagers survive the dangers of an environment where beast and man alike are your enemies, the game was named an example of excellent storytelling and a dramatic gaming experience</p>
</div>
</div>
</div>
</div>
<div id="socialContainer" >
<a href="#" target="_blank"><i class="fa fa-facebook" style="background-color:#3b5998;"></i></a>
<a href="#" target="_blank"><i class="fa fa-github" style="background-color:#212121;"></i></a>
<a href="#" target="_blank"><i class="fa fa-google" style="background-color:#d62d20;"></i></a>
<a href="#" target="_blank"><i class="fa fa-twitter" style="background-color:#2ba7e3;"></i></a>
<a href="#" target="_blank"><i class="fa fa-vk" style="background-color:#44678d;"></i></a>
</div>
<script>
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire