Skip to content

Instantly share code, notes, and snippets.

@Stefanas-sketch

Stefanas-sketch/css-responsive-padding-exercise-1.markdown

Created April 27, 2025 05:07
Show Gist options
  • Save Stefanas-sketch/d3731e92d1730011324b5ee5b23b1436 to your computer and use it in GitHub Desktop.
Save Stefanas-sketch/d3731e92d1730011324b5ee5b23b1436 to your computer and use it in GitHub Desktop.
Download ZIP
CSS responsive padding exercise-1
Raw
index.html
<!DOCTYPE html>
<html>
<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>CSS responsive padding exercise-1</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h1>Responsive padding</h1>
<main>
<p>Gummies candy canes topping jujubes chocolate tootsie roll. Jelly croissant jelly beans marshmallow jujubes.
Pastry liquorice gummi bears marzipan cotton candy halvah tart carrot cake. Sugar plum chocolate bar cheesecake
cake
cookie wafer gingerbread jelly-o. Chocolate cake jujubes jujubes donut lollipop sugar plum croissant halvah.
Jelly-o
jelly beans marshmallow biscuit gingerbread lemon drops. Liquorice sesame snaps bear claw sugar plum cake
biscuit
tart. Tootsie roll danish chupa chups topping powder gingerbread oat cake. Fruitcake marshmallow jelly-o
chocolate
carrot cake gummies dessert gummi bears tart. Marshmallow bonbon liquorice marzipan macaroon chocolate bar.</p>
<p>
Sweet dessert sugar plum fruitcake carrot cake apple pie sesame snaps croissant halvah. Chupa chups carrot cake
muffin
gingerbread tiramisu danish danish pie. Fruitcake brownie sesame snaps danish pastry lemon drops soufflé
lollipop.
Danish pudding jelly beans bear claw muffin. Cake gummi bears chocolate cake biscuit halvah powder biscuit. Ice
cream
candy carrot cake fruitcake halvah topping toffee sweet roll. Soufflé chupa chups sweet cheesecake sweet roll
chocolate bar ice cream. Lemon drops donut tootsie roll cotton candy cake sweet. Cupcake chocolate cake macaroon
jelly
beans lollipop candy.</p>
<img src="https://picsum.photos/700/500">
<p>Biscuit danish cupcake carrot cake tiramisu marshmallow candy. Biscuit jelly-o toffee
marzipan macaroon candy canes pastry. Liquorice tiramisu marshmallow cake soufflé powder. Cake pastry cheesecake
candy
cake cake. Muffin candy bear claw shortbread tart. Fruitcake toffee jelly candy canes tart powder pastry
jelly-o.
Toffee chocolate cake sweet roll chocolate chocolate donut dessert ice cream. Fruitcake candy canes chocolate
bar
gingerbread lemon drops cookie. Muffin fruitcake sugar plum donut icing pie bonbon muffin.</p>
</main>
</div>
</body>
</html>
Raw
style.css
body {
margin: 2rem;
background-color: hsl(214, 77%, 61%);
color: hsl(34, 77%, 61%);
}
.container {
max-width: 80rem;
margin: 0 auto;
}
h1 {
margin: 1em auto;
font-size: clamp(1.5rem, 5vw, 3rem);
}
main img {
width: 100%;
}
main > * {
border: 2px solid hsl(34, 77%, 61%);
margin-bottom: 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment