Advertisement
thotfrnk

final project.css

Feb 1st, 2024
546
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.75 KB | None | 0 0
  1. html {
  2.   font-family: Gravity, "Open Sans";
  3.   background-color: #8E9DCC;
  4. }
  5.  
  6. /*page layout for the entire website - box model*/
  7.  
  8. body {
  9.   width: 1100px;
  10.   margin: auto;
  11. }
  12.  
  13. /*navigation bar*/
  14.  
  15. .nav1, .nav2 {
  16.   font-family: 'Lemon Milk';
  17.   font-size: 20px;
  18.   clear:both;
  19.   overflow: hidden;
  20. }
  21.  
  22. .nav1 ul, .nav2 ul {
  23.   list-style-type: none;
  24. }
  25.  
  26. .nav1 ul li {
  27.   float: left;
  28.   margin-right: 20px;
  29.   padding-top: 10px;
  30. }
  31.  
  32. .nav1 ul li a, .nav2 ul li a {
  33.   padding: 0.25em 1em 1em;
  34.   text-decoration: none;
  35.   color: #021d28;
  36.   text-align: center;
  37.   display: block;
  38. }
  39.  
  40. #log, #reg, #profile, #log_out {
  41.   float: right;
  42.   margin-left: 15px;
  43.   padding-top: 10px;
  44. }
  45.  
  46. #home {
  47.   font-family: 'Lobster 1.4';
  48.   font-size: 25px;
  49. }
  50.  
  51. #search_frm {
  52.   float: right;
  53. }
  54.  
  55. #search {
  56.   /*float: right;*/
  57.   margin-right: 35px;
  58.   width: 160px;
  59. }
  60.  
  61. #search_btn {
  62.   width: 100px;
  63. }
  64.  
  65. .nav2 {
  66.   background-color: #7D84B2;
  67. }
  68.  
  69. .nav2 ul li {
  70.   float: left;
  71.   margin-right: 95px;
  72. }
  73.  
  74. .nav1 ul li a:hover, .nav1 ul li a:focus, .nav2 ul li a:hover, .nav2 ul li a:focus {
  75.   color: #061826;
  76.   background-color: #CFCFEA;
  77.   font-weight: bold;
  78. }
  79.  
  80. /*dropdown button code comes from:*/
  81.  
  82. /*W3Schools. (n.d.). How to - hoverable dropdown. How To Create a Hoverable Dropdown Menu. https://www.w3schools.com/howto/howto_css_dropdown.asp */
  83.  
  84. .dropdown {
  85.   margin-right: 20px;
  86.   overflow: hidden;
  87. }
  88.  
  89. .dropdown .dropbtn {
  90.   font-size: 15px;  
  91.   border: none;
  92.   outline: none;
  93.   padding: 14px 16px;
  94.   font-family: inherit;
  95.   margin: 0;
  96.   background-color: #7D84B2;
  97. }
  98.  
  99. .drp_content {
  100.   display: none;
  101.   position: absolute;
  102.   background-color: #f9f9f9;
  103.   min-width: 160px;
  104.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  105.   z-index: 1;
  106.   font-size: 12px;
  107. }
  108.  
  109. .drp_content a {
  110.   float: none;
  111.   color: black;
  112.   padding: 12px 16px;
  113.   text-decoration: none;
  114.   display: block;
  115.   text-align: left;
  116. }
  117.  
  118. .drp_content a:hover {
  119.   background-color: #ddd;
  120. }
  121.  
  122. .dropdown:hover .drp_content {
  123.   display: block;
  124. }
  125.  
  126. h1 {
  127.   font-family: Vogue;
  128. }
  129.  
  130. .header_center {
  131.   text-align: center;
  132.   font-size: 45px;
  133. }
  134.  
  135. /*index content style*/
  136.  
  137. .about {
  138.   font-family: Gravity;
  139. }
  140.  
  141. #paragraph1 {
  142.   font-size: 35px;
  143.   padding: 50px;
  144. }
  145.  
  146. #paragraph2 {
  147.   font-size: 35px;
  148.   padding: 50px 25px;
  149. }
  150.  
  151. #paragraph3 {
  152.   font-size: 35px;
  153.   padding: 20px;
  154. }
  155.  
  156. #img1 {
  157.   float:right;
  158.   padding: 10px;
  159. }
  160.  
  161. #img2 {
  162.   float:left;
  163.   padding: 10px;
  164. }
  165.  
  166. #img3, #img4, #img5 {
  167.   float:right;
  168.   padding: 10px;
  169. }
  170.  
  171. /*Registration, Login form, and Update form*/
  172.  
  173. #register, #login_frm, #update {
  174.   width: 400px;
  175.   /*height: 655px;*/
  176.   margin: auto;
  177. }
  178.  
  179. #log_para {
  180.   text-align: center;
  181. }
  182.  
  183. /*Post form and Contact form*/
  184.  
  185. #postfrm, #contact {
  186.   width: 400px;
  187. }
  188.  
  189. #contact_para {
  190.   float: right;
  191.   margin-left: 250px;
  192.   margin-right: 150px;
  193. }
  194.  
  195. /*logout button*/
  196.  
  197. #log_out {
  198.   background-color: #8E9DCC;
  199. }
  200.  
  201. /*style for all forms*/
  202.  
  203. #register, #login_frm, #update, #postfrm, #contact {
  204.   padding: 10px;
  205.   font-family: 'Century Gothic';
  206.   background-color: #D4C5E2;
  207. }
  208.  
  209. input[type=text], input[type=email], input[type=password], input[type=number], input[type='tel'] {
  210.   width: 250px;
  211.   padding: 12px 20px;
  212.   margin: 8px 0;
  213.   box-sizing: border-box;
  214.   border: 1px solid black;
  215.   border-radius: 25px;
  216. }
  217.  
  218. input[type=submit] {
  219.   width: 100px;
  220.   height: 35px;
  221.   clear: both;
  222.   border: none;
  223.   border-radius: 25px;
  224.   padding: 5px 5px;
  225.   background-color: white;
  226.   font-size: 15px;
  227. }
  228.  
  229. .form_para {
  230. text-align: center;
  231. color: black;
  232. font-size: 15px;
  233. margin-top: 40px;
  234. padding: 15px;
  235. }
  236.  
  237. #reg_sign {
  238.   text-align: center;
  239. }
  240.  
  241. /*gallery*/
  242.  
  243. /*Base code for image gallery
  244. W3Schools. (n.d.). CSS Image Gallery. CSS image gallery. https://www.w3schools.com/css/css_image_gallery.asp . Retrieved 21st Oct. 2023.*/
  245.  
  246. /*CSS box shadow code:
  247. W3Schools. (n.d.). CSS box shadow. https://www.w3schools.com/css/css3_shadows_box.asp . Retrieved 22nd Oct. 2023.*/
  248.  
  249. div.gallery {
  250.   margin: 5px;
  251.   float: left;
  252.   width: 500px;
  253.   padding: 10px;
  254.   background-color: #8E9DCC;
  255.   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  256. }
  257.  
  258. div.caption {
  259.   padding: 5px;
  260.   text-align: center;
  261. }
  262.  
  263. div.author {
  264.   float: left;
  265.   font-family: 'Franklin Gothic Book';
  266. }
  267.  
  268. div.date {
  269.   float: right;
  270.   font-family: 'Courier New';
  271. }
  272.  
  273. /*comment section*/
  274.  
  275. #comment {
  276.   padding: 5px;
  277. }
  278.  
  279. #comment_section {
  280.   width: 450px;
  281.   height: 100px;
  282.   border: 1px solid black;
  283.   overflow: scroll;
  284. }
  285.  
  286. /*user profile page*/
  287.  
  288. .user_profile {
  289.   width: 1000px;
  290.   margin: 0 auto;
  291.   background-color: #D4C5E2;
  292. }
  293.  
  294. /*footer*/
  295.  
  296. .footer {
  297.   padding: 10px;
  298.   font-family: "Franklin Gothic Book";
  299.   clear: both;
  300.   text-align: center;
  301. }
Advertisement
Comments
Add Comment
Please, Sign In to add comment
Advertisement