repl.it
@austinsanims/

PHP cool design

PHP Web Server

No description

fork
loading
Files
  • index.php
  • data.txt
  • form_finished.php
  • script.js
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>
  <head>
    <style>
      
      @import url('https://fonts.googleapis.com/css?family=Quattrocento+Sans|Righteous&display=swap');
      * {
          margin: 0;
          padding: 0;
        } 
        
      .parallax1 {
        background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg");
        /* Set a specific height */
        height: 500px;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: top-center;
        background-repeat: no-repeat;
        background-size: cover;
        content-align: center;
        text-align: center;
        padding-top:25%;
        
      }
      .parallax2 {
        background-image: url("https://learnodo-newtonic.com/wp-content/uploads/2014/10/Famous-Renaissance-Paintings-Featured-Image-The-Creation-of-Adam.jpg");
        /* Set a specific height */
        padding-bottom: 50px;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        content-align: center;
        text-align: center;
        padding-top:15%;
        
      }
      .parallax3 {
        background-image: url("https://www.history.com/.image/t_share/MTU3ODc5MDg2OTcyOTM3NTQ1/rafael-sanzio-da-urbino-april-6-or-march-28-1483-april-6-1520-the-school-of-athens-or-scuola-di-atene-in-italian-is-one-of-the-most-famous-paintings-by-the-italian-renaissance-artist-raphael.jpg");
        /* Set a specific height */
        padding-bottom: 50px;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        content-align: center;
        text-align: center;
        padding-top:15%;
        
      }
      .bottomArea {
        background-color: #222;
        padding-top: 50px;
        padding-bottom: 50px;
        content-align: center;
        text-align: center;
        
      }
      
      .border {
        top: 50%;
        background-color: #555;
        color: #fafafa;
        padding: 5px;
        text-transform: uppercase;
        font-size: 72px;
        font-family: 'Righteous', cursive;
        letter-spacing: 5px;
      }
      .headerborder {
        padding-bottom:25%;
        font-family: 'Righteous', cursive;
        background-color: #777;
        padding: 5px;
        color: #fafafa;
        font-size:56px;
        
      }
      .borderParagraph {
        background-color: #010101;
        color: #fafafa;
        width: 85%;
        align:center;
        text-align:center;
        margin: 0 auto;
        border-style: solid;
        border-width: 1px;
        font-family: 'Quattrocento Sans', sans-serif;
      }
      .divider {
        height: 20px;
        background-color: #111;
      }
      button, .btn {
        font-size:20px;
        padding: 5px;
        color: #fafafa;
        border-width: 3px;
        border-color: #ffffff;
        border-style: solid;
        background-color: rgba(255, 255, 255, 0);
        animation-duration: 1s;
        cursor: pointer;
      }
      button:hover, .btn:hover {
        background-color: rgba(255, 255, 255, 100%);
        color: #010101;
        animation-duration: 1s;
        animation-name: example;
      }
      @keyframes example {
        from {background-color: rgba(255, 255, 255, 0); color: #fafafa;}
        to {background-color: rgba(255, 255, 255, 100%); color: #010101;}
      }
    </style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Lorem Ipsum</title>

  </head>
  <body>
    <section id="start">
    <div class="parallax1">
      <span class="border">Lorem Ipsum</span>
    </div>
    <div class="divider">
    </div>
    <div class="parallax2">
      <span class="headerborder">Lorem Ipsum</span><br>
      <div class="borderParagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam eget felis eget nunc lobortis mattis aliquam faucibus. Sed augue lacus viverra vitae congue eu consequat ac. Ipsum dolor sit amet consectetur. Pretium quam vulputate dignissim suspendisse in est ante in. Pellentesque habitant morbi tristique senectus et. Velit egestas dui id ornare arcu odio. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. In ornare quam viverra orci sagittis eu volutpat. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius. Purus faucibus ornare suspendisse sed nisi. Elementum curabitur vitae nunc sed velit dignissim. Dolor magna eget est lorem ipsum dolor sit amet. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Varius vel pharetra vel turpis nunc eget. Suspendisse interdum consectetur libero id. Rhoncus aenean vel elit scelerisque.

Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. At quis risus sed vulputate odio. Nibh nisl condimentum id venenatis a condimentum vitae. Mattis vulputate enim nulla aliquet porttitor. Viverra orci sagittis eu volutpat odio facilisis mauris. Arcu non odio euismod lacinia at quis risus sed. Gravida neque convallis a cras. Volutpat diam ut venenatis tellus. Vitae ultricies leo integer malesuada nunc vel risus. Tincidunt dui ut ornare lectus sit amet est. Nunc id cursus metus aliquam eleifend mi. Mollis nunc sed id semper. Mauris pellentesque pulvinar pellentesque habitant morbi. Condimentum lacinia quis vel eros donec. Egestas diam in arcu cursus euismod. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Viverra orci sagittis eu volutpat odio facilisis. Nunc sed augue lacus viverra.

Turpis nunc eget lorem dolor sed viverra ipsum nunc. Egestas congue quisque egestas diam. Mattis ullamcorper velit sed ullamcorper morbi. Orci phasellus egestas tellus rutrum tellus pellentesque. Ut tortor pretium viverra suspendisse. Cursus euismod quis viverra nibh cras. Nulla aliquet porttitor lacus luctus. Consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat. Neque sodales ut etiam sit. Magna fermentum iaculis eu non. Ornare massa eget egestas purus viverra accumsan in nisl. Id leo in vitae turpis. Nullam ac tortor vitae purus faucibus ornare suspendisse. Ornare aenean euismod elementum nisi quis eleifend quam. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Sit amet massa vitae tortor condimentum lacinia quis vel eros. Dignissim suspendisse in est ante in nibh. Ultrices in iaculis nunc sed augue lacus viverra. Quisque egestas diam in arcu cursus euismod quis.

Tellus cras adipiscing enim eu turpis egestas pretium aenean. Ornare lectus sit amet est placerat in egestas. Duis tristique sollicitudin nibh sit amet. Eu turpis egestas pretium aenean. Commodo sed egestas egestas fringilla phasellus faucibus. Fames ac turpis egestas integer eget aliquet. Aenean et tortor at risus viverra adipiscing at in tellus. Eget duis at tellus at urna condimentum mattis pellentesque. Elementum facilisis leo vel fringilla est ullamcorper eget. Viverra adipiscing at in tellus integer.

Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Mauris vitae ultricies leo integer malesuada nunc. Nullam vehicula ipsum a arcu cursus vitae congue. Tortor consequat id porta nibh venenatis. Sodales neque sodales ut etiam sit amet. Ac auctor augue mauris augue neque gravida in fermentum et. Hac habitasse platea dictumst quisque. Nulla pellentesque dignissim enim sit amet venenatis urna. Amet nisl purus in mollis nunc sed id semper. Dolor morbi non arcu risus quis varius quam quisque. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Turpis nunc eget lorem dolor sed.<br>

</div>

    </div>
    <div class="divider">
    </div>
    <div class="parallax3">
      <span class="headerborder">Form</span>
      <div class="borderParagraph">
        I want you to give me feedback about this website. I need some critique. 
        
        <form method="post" action="<?php echo htmlspecialchars("form_finished.php");?>">
        *: Required Field <br>
          Name: <input type="text" name="wholename" placeholder="John Doe"> *<br>
          E-Mail: <input type="text" name="email" placeholder="[email protected]"> * (Please input your actual E-mail, I will use this to discuss issues! 📧)<br>
          Comment:<br><textarea name="comment" rows="5" cols="40"></textarea> *<br>
          <input class="btn" type="submit" value="Submit">
        </form>
        
      </div>
    </div>
    <div class="divider">
    </div>
    <div class="bottomArea">
    <a href = "#start"><button>Back to Start</button></a>
    </div>
    
    <script src="script.js"></script>
  </body>
</html>
Fetching token
?