AiFardin

CSS Code | Web Design HW 4 Extra Trial (C4 - 21/02/2021) CIT | Aminul Islam

Feb 25th, 2021
965
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. *{
  2.     margin: 0px;
  3.     padding: 0px;
  4.     box-sizing: border-box;
  5.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  6. }
  7.  
  8. .container{
  9.     width: 100%;
  10.     background: url(../images/background.jpg) center no-repeat;
  11.     background-size: cover;
  12.     background-attachment: fixed;
  13. }
  14.  
  15. .header{
  16.     width: 100%;
  17.     height: 100px;
  18.     background: #ff8aab;
  19. }
  20.  
  21. .navbar{
  22.     width: 70%;
  23.     height: 100%;
  24.     float: left;
  25. }
  26.  
  27. .navbar img{
  28.     margin-top: 10px;
  29.     margin-left: 10px;
  30.     width: 80px;
  31. }
  32.  
  33. .buy{
  34.     width: 30%;
  35.     height: 100%;
  36.     float: left;
  37. }
  38.  
  39. .buy a{
  40.     text-decoration: none;
  41.     background: white;
  42.     display: inline-block;
  43.     padding: 10px;
  44.     margin: 30px 0px 0px 30%;
  45.     color: black;
  46.     border-radius: 50px;
  47.     transition: .4s;
  48. }
  49.  
  50. .buy a:hover{
  51.     background: #ff0048;
  52.     color: #ffffff;
  53. }
  54.  
  55. .content{
  56.     width: 100%;
  57.     height: 700px;
  58.     text-align: center;
  59.     padding: 15%;
  60.     box-sizing: border-box;
  61.     color: white;
  62. }
  63.  
  64. .content p{
  65.     padding: 10px 20%;
  66.     font-size: 18px;
  67. }
  68.  
  69. .content h1{
  70.     font-size: 36px;
  71. }
  72.  
  73. .footer{
  74.     width: 100%;
  75.     height: 500px;
  76.     background:rgb(100, 100, 100);
  77.     text-align: center;
  78. }
  79.  
  80. .footer h1{
  81.     padding: 30px;
  82.     color: white;
  83. }
  84.  
  85. .blurr{
  86.     width: 100%;
  87.     height: 100%;
  88.     padding-top: 100px;
  89.     transition: .4s;
  90. }
  91.  
  92. .choco{
  93.     width: 26%;
  94.     height: 300px;
  95.     float: left;
  96.     margin: 30px 3.6%;
  97.     border-radius: 7px;
  98.     text-align: center;
  99.     transition: .4s;
  100. }
  101.  
  102. .choco h1{
  103.     color: rgba(255, 255, 255, 0);
  104.     transition: .4s;
  105. }
  106.  
  107. .blurr{
  108.     width: 100%;
  109.     height: 100%;
  110.     padding-top: 100px;
  111.     border-radius: 7px;
  112. }
  113.  
  114. .choco:hover .blurr{
  115.     background: #ff8aabc5;
  116. }
  117.  
  118. .choco:hover h1{
  119.     color: white;
  120.     font-size: 36px;
  121. }
  122.  
  123. .one{
  124.     background: url(../images/choco1.jpg) no-repeat center;
  125.     background-size: cover;
  126. }
  127.  
  128. .two{
  129.     background: url(../images/choco2.jpg) no-repeat center;
  130.     background-size: cover;
  131. }
  132.  
  133. .three{
  134.     background: url(../images/choco3.jpg) no-repeat center;
  135.     background-size: cover;
  136. }
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×