API tools faq
paste
Advertisement
thotfrnk

assignment1.html

thotfrnk
Oct 27th, 2023
97
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.48 KB | None | 0 0
raw download clone embed print report
  1. <!--index.html-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>PhotoShare</title>
  8.  
  9.   <link href="css/style.css" rel="stylesheet" type="text/css">
  10.  
  11.   <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
  12. </head>
  13.  
  14. <body class="box">
  15.  
  16.   <!--Navigation bar-->
  17.  
  18.   <div>
  19.     <nav>
  20.       <ul>
  21.         <li><a href="index.html">Home</a></li>
  22.         <li><a href="php/gallery.php">Gallery</a></li>
  23.         <li><a href="html/upload.html">Create Post</a></li>
  24.         <li><a href="html/contact.html">Contact Us</a></li>
  25.         <li><a href="html/reg_form.html">Register</a></li>
  26.         <li><a href="#">Login</a></li>
  27.       </ul>
  28.       <input type="text" placeholder="Search" name="search" id="search">
  29.     </nav>
  30.   </div>
  31.  
  32.   <!--Banner-->
  33.  
  34.   <div class="banner">
  35.     <img src="images/photoshare_banner.png" width="1099" alt="An image of the PhotoShare logo.">
  36.   </div>
  37.  
  38.   <!--Banner and favicon was made by me using Adobe Logo Maker: https://www.adobe.com/express/create/logo-->
  39.  
  40.   <!--Main Content-->
  41.  
  42.   <!--About PhotoShare-->
  43.  
  44.  
  45.     <div class="header_center"> <h1>Welcome to PhotoShare</h1> </div>
  46.  
  47.     <div class="about">
  48.  
  49.      <!--All images used came from pexels.com-->
  50.  
  51.      <!--Wheeler, J. (2013, September 2). Symmetrical Photography of clouds covered blue sky - pexels. https://www.pexels.com/photo/symmetrical-photography-of-clouds-covered-blue-sky-1486974/ . Retrieved 15th Oct. 2023.-->
  52.  
  53.      <img src="images/pexels-james-wheeler.jpg" width="200" height="250" id="img1" alt="A shot of a lake with the sky reflected in it. The sky has clouds and a pinkish colour to it. In the backgroud grassy fields and trees can be seen.">
  54.  
  55.       <div id="paragraph1">
  56.       <p>PhotoShare aims to build a community for aspiring photographers.
  57.       </p>
  58.  
  59.       </div>
  60.  
  61.       <div id="paragraph2">
  62.  
  63.       <!--Lastovich, T. (2017, March 4). Brown wooden dock surrounded with green grass near mountain under white ... https://www.pexels.com/photo/brown-wooden-dock-surrounded-with-green-grass-near-mountain-under-white-clouds-and-blue-sky-at-daytime-808465/ . Retrieved 15th Oct. 2023.-->
  64.  
  65.       <img src="images/pexels-tyler-lastovich.jpg" width="200" height="250" id="img2" alt="A shot of a mountainous trail, with dried grass on both sides of the wooden trail.">
  66.  
  67.       <p>We want to foster talent in a safe environment and inspire photographers to aim high.</p>
  68.  
  69.       </div>
  70.  
  71.       <br>
  72.  
  73.       <div id="paragraph3">
  74.  
  75.         <p>On PhotoShare you will be able to make posts, comment, and interact with other photographers.</p>
  76.  
  77.       <!--Gould, D. (2016, November 21). Scenic view of river · Free Stock Photo - PEXELS. https://www.pexels.com/photo/scenic-view-of-river-325807/ . Retrieved 15th Oct. 2023.-->
  78.  
  79.       <img src="images/pexels-dom-gould.jpg" width="400" height="250" id="img3" alt="A shot of a crystal blue lake in between rocky land and it is surrounded by trees.">
  80.  
  81.       <!--Berger, S. (2015, June 7). Scenic view of mountains during Dawn · free stock photo - PEXELS. https://www.pexels.com/photo/scenic-view-of-mountains-during-dawn-1266810/ . Retrieved 15th Oct. 2023.-->
  82.  
  83.       <img src="images/pexels-simon-berger.jpg" width="200" height="250" id="img4" alt="A shot at the top of a mountain, in the foreground flowers growing from its surface can be seen, the middle ground shows mountains and the background is the sun hidden behind cloud coverage.">
  84.  
  85.       <!--Bartus, D. (2018, June 12). Photo lavender flower field under Pink Sky · free stock photo - PEXELS. https://www.pexels.com/photo/photo-lavender-flower-field-under-pink-sky-1166209/ . Retrieved 15th Oct. 2023.-->
  86.  
  87.       <img src="images/pexels-david-bartus.jpg" width="400" height="250" id="img5" alt="A shot of a lavender field, showing rows and rows and bright purple lavender, set with the pinkish clounds and blue sky.">
  88.  
  89.       </div>
  90.  
  91.     </div>
  92.  
  93.   <!--Footer-->
  94.  
  95.   <div class="footer">
  96.     <footer>
  97.       <p>&copy; 2023 PhotoShare</p>
  98.       <p>
  99.         <a href="http://jigsaw.w3.org/css-validator/check/referer">
  100.             <img style="border:0;width:88px;height:31px"
  101.                src="http://jigsaw.w3.org/css-validator/images/vcss"
  102.                alt="Valid CSS!" />
  103.         </a>
  104.     </p>
  105.     </footer>
  106.   </div>
  107.  
  108. </body>
  109.  
  110. </html>
  111.  
  112. <!--contact.html-->
  113. <!DOCTYPE html>
  114. <html lang="en">
  115. <head>
  116.   <meta charset="UTF-8">
  117.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  118.   <title>Contact Us</title>
  119.  
  120.   <link href="../css/style.css" rel="stylesheet" type="text/css">
  121.  
  122.   <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
  123.  
  124. </head>
  125. <body class="box">
  126.  
  127.   <!--Navigation bar-->
  128.  
  129.   <div>
  130.     <nav>
  131.       <ul>
  132.         <li><a href="../index.html">Home</a></li>
  133.         <li><a href="../php/gallery.php">Gallery</a></li>
  134.         <li><a href="upload.html">Create Post</a></li>
  135.         <li><a href="contact.html">Contact Us</a></li>
  136.         <li><a href="reg_form.html">Register</a></li>
  137.         <li><a href="#">Login</a></li>
  138.       </ul>
  139.       <input type="text" placeholder="Search" id="search">
  140.     </nav>
  141.   </div>
  142.  
  143.   <br><br>
  144.  
  145.   <p>We value our users' opinions, if there is any issue you are facing or anything to improve the user experience, we will love to hear it!</p>
  146.  
  147.   <br><br>
  148.  
  149.   <div id="contact_para">
  150.     <p>You can also contact us on:</p>
  151.    
  152.        <ul>
  153.           <li>Email: photoshareus@gmail.com</li>
  154.           <li>Twitter/X: @PhotoShare_twt</li>
  155.           <li>Tumblr: photoshareblr</li>
  156.        </ul>
  157. </div>
  158.  
  159.   <!--Contact form-->
  160.  
  161.   <div id="contact">
  162.   <form id="contact_frm" action="../php/contact.php" method="post">
  163.     <fieldset>
  164.       <legend><strong>User Information</strong></legend>
  165.  
  166.       <input type="text" id="user_name" name="user_name" placeholder="Username" required>
  167.  
  168.       <input type="email" id="email" name="email" placeholder="Email" required>
  169.     </fieldset>
  170.  
  171.     <fieldset>
  172.       <legend><strong>User Feedbaack</strong></legend>
  173.  
  174.       <textarea name="feedback" rows="5" cols="30" placeholder="Put your feedback or complaints here..." maxlength="300"></textarea>
  175.     </fieldset>
  176.  
  177.     <br>
  178.  
  179.     <input type="submit" value="SUBMIT">
  180.   </form>
  181.   </div>
  182.  
  183.   <br><br><br><br><br>
  184.  
  185.    <!--Footer-->
  186.    <div class="footer">
  187.     <footer>
  188.       <p>&copy; 2023 PhotoShare</p>
  189.  
  190.       <p>
  191.         <a href="http://jigsaw.w3.org/css-validator/check/referer">
  192.             <img style="border:0;width:88px;height:31px"
  193.                src="http://jigsaw.w3.org/css-validator/images/vcss"
  194.                alt="Valid CSS!" />
  195.         </a>
  196.     </p>
  197.     </footer>
  198.   </div>
  199.  
  200.  
  201. </body>
  202. </html>
  203.  
  204. <!--registration.html-->
  205. <!DOCTYPE html>
  206. <html lang="en">
  207. <head>
  208.   <meta charset="UTF-8">
  209.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  210.   <title>Register on PhotoShare</title>
  211.  
  212.   <link href="../css/style.css" rel="stylesheet" type="text/css">
  213.  
  214.   <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
  215.  
  216. </head>
  217. <body class="box">
  218.  
  219.    <!--Navigation bar-->
  220.  
  221.    <div>
  222.     <nav>
  223.       <ul>
  224.         <li><a href="../index.html">Home</a></li>
  225.         <li><a href="../php/gallery.php">Gallery</a></li>
  226.         <li><a href="upload.html">Create Post</a></li>
  227.         <li><a href="contact.html">Contact Us</a></li>
  228.         <li><a href="reg_form.html">Register</a></li>
  229.         <li><a href="#">Login</a></li>
  230.       </ul>
  231.       <input type="text" placeholder="Search" id="search">
  232.     </nav>
  233.   </div>
  234.  
  235.   <!--Banner-->
  236.  
  237.   <div class="banner">
  238.     <img src="../images/photoshare_banner.png" width="1099" alt="An image of the PhotoShare logo.">
  239.   </div>
  240.  
  241.   <br>
  242.  
  243.   <div id="reg_sign">
  244.     <h1 class="header_center">Sign Up Today!</h1>
  245.   </div>
  246.  
  247.   <br>
  248.  
  249.   <!--Registration form-->
  250.  
  251.   <div class="reg_form">
  252.     <form id="register" action="../php/register.php" method="post">
  253.  
  254.       <fieldset>
  255.         <legend><strong>Account Information:</strong></legend>
  256.  
  257.         <input type="text" name="user_name" id="user_name" placeholder="Username" required>
  258.  
  259.         <br><br>
  260.  
  261.         <input type="email" name="email" id="email" placeholder="Email" required>
  262.  
  263.         <br><br>
  264.  
  265.         <input type="password" name="pword" id="pword" placeholder="Password" required>
  266.  
  267.       </fieldset>
  268.  
  269.       <br>
  270.  
  271.       <fieldset>
  272.         <legend><strong>Personal Information:</strong></legend>
  273.        
  274.         <input type="text" name="fname" id="fname" placeholder="First Name" required>
  275.  
  276.         <br><br>
  277.  
  278.         <input type="text" name="lname" id="lname" placeholder="Last Name">
  279.  
  280.         <br><br>
  281.  
  282.         <input type="number" name="age" id="age" min="15" max="100" placeholder="Age" required>
  283.  
  284.         <br><br>
  285.  
  286.         <input type="tel" name="phone" id="phone" placeholder="Phone Number">
  287.       </fieldset>
  288.  
  289.       <br>
  290.  
  291.       <input type="submit" value="REGISTER">
  292.  
  293.     </form>
  294.   </div>
  295.  
  296.   <p class="form_para">Already have an account? Login in <a href="#">here.</a></p>
  297.  
  298.   <!--Footer-->
  299.   <div class="footer">
  300.     <footer>
  301.       <p>&copy; 2023 PhotoShare</p>
  302.  
  303.       <p>
  304.         <a href="http://jigsaw.w3.org/css-validator/check/referer">
  305.             <img style="border:0;width:88px;height:31px"
  306.                src="http://jigsaw.w3.org/css-validator/images/vcss"
  307.                alt="Valid CSS!" />
  308.         </a>
  309.     </p>
  310.     </footer>
  311.   </div>
  312.  
  313. </body>
  314. </html>
  315.  
  316. <!--upload.html-->
  317. <!DOCTYPE html>
  318. <html lang="en">
  319. <head>
  320.   <meta charset="UTF-8">
  321.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  322.   <title>Create Post</title>
  323.  
  324.   <link href="../css/style.css" rel="stylesheet" type="text/css">
  325.  
  326.   <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
  327. </head>
  328. <body class="box">
  329.  
  330.      <!--Navigation bar-->
  331.  
  332.      <div>
  333.       <nav>
  334.         <ul>
  335.           <li><a href="../index.html">Home</a></li>
  336.           <li><a href="../php/gallery.php">Gallery</a></li>
  337.           <li><a href="upload.html">Create Post</a></li>
  338.           <li><a href="contact.html">Contact Us</a></li>
  339.           <li><a href="reg_form.html">Register</a></li>
  340.           <li><a href="#">Login</a></li>
  341.         </ul>
  342.         <input type="text" placeholder="Search" id="search">
  343.       </nav>
  344.     </div>
  345.  
  346.     <div><h1 class="header_center">Create Post</h1></div>
  347.  
  348.     <br><br>
  349.  
  350.     <!--Upload form-->
  351.  
  352.     <form id="postfrm" action="../php/upload.php" method="post" enctype="multipart/form-data">
  353.       <fieldset>
  354.         <legend><strong>Upload Picture</strong></legend>
  355.  
  356.         <input type="file" name="user_upload" id="user_upload" required>
  357.       </fieldset>
  358.  
  359.       <fieldset>
  360.         <legend><strong>Post Information</strong></legend>
  361.  
  362.         <textarea name="caption" rows="5" cols="30" placeholder="Type your caption here" maxlength="300"></textarea>
  363.  
  364.         <br>
  365.  
  366.         <input type="text" name="author" id="author" placeholder="Username" required>
  367.       </fieldset>
  368.  
  369.       <br><br>
  370.  
  371.       <input type="submit" name="submit" value="POST">
  372.     </form>
  373.  
  374.      <!--Footer-->
  375.   <div class="footer">
  376.     <footer>
  377.       <p>&copy; 2023 PhotoShare</p>
  378.  
  379.       <p>
  380.         <a href="http://jigsaw.w3.org/css-validator/check/referer">
  381.             <img style="border:0;width:88px;height:31px"
  382.                src="http://jigsaw.w3.org/css-validator/images/vcss"
  383.                alt="Valid CSS!" />
  384.         </a>
  385.     </p>
  386.     </footer>
  387.   </div>
  388.  
  389. </body>
  390. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!