├── sample1_website
    ├── scr
    │   ├── whale.png
    │   ├── jellyfish.png
    │   ├── octupus.png
    │   └── seahourse.png
    ├── icons
    │   └── fishing.svg
    ├── app.js
    ├── style.css
    └── index.html
└── README.md


/sample1_website/scr/whale.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ungaaaabungaaa/Porfolio_sample1/HEAD/sample1_website/scr/whale.png


--------------------------------------------------------------------------------
/sample1_website/scr/jellyfish.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ungaaaabungaaa/Porfolio_sample1/HEAD/sample1_website/scr/jellyfish.png


--------------------------------------------------------------------------------
/sample1_website/scr/octupus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ungaaaabungaaa/Porfolio_sample1/HEAD/sample1_website/scr/octupus.png


--------------------------------------------------------------------------------
/sample1_website/scr/seahourse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ungaaaabungaaa/Porfolio_sample1/HEAD/sample1_website/scr/seahourse.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Porfolio_sample1
2 | simple Webpage designe inspried from pintrest
3 | #illustration
4 | ![illustration](https://i.imgur.com/If1sfuU.jpg)
5 | 


--------------------------------------------------------------------------------
/sample1_website/icons/fishing.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="orange" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a2 2 0 1 0 0-4a2 2 0 0 0 0 4Zm0 0v10c0 6-10 6-10 0v-4l2 2"/></svg>


--------------------------------------------------------------------------------
/sample1_website/app.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // Get the button
 3 | let mybutton = document.getElementById("myBtn");
 4 | 
 5 | // When the user scrolls down 20px from the top of the document, show the button
 6 | window.onscroll = function() {scrollFunction()};
 7 | 
 8 | function scrollFunction() {
 9 |   if (document.body.scrollTop > 650 || document.documentElement.scrollTop > 650) {
10 |     mybutton.style.display = "block";
11 |   } else {
12 |     mybutton.style.display = "none";
13 |   }
14 | }
15 | 
16 | // When the user clicks on the button, scroll to the top of the document
17 | function topFunction() {
18 |   document.body.scrollTop = 0;
19 |   document.documentElement.scrollTop = 0;
20 | }


--------------------------------------------------------------------------------
/sample1_website/style.css:
--------------------------------------------------------------------------------
  1 | body 
  2 | {
  3 |     font-family: 'Roboto';
  4 |     font-weight: normal;
  5 |     margin: 0;
  6 |     padding: 0;
  7 |     width: 100%;
  8 |     height: 100%;
  9 |     display: flex;
 10 |     flex-direction: column;
 11 | }
 12 | 
 13 | ::-webkit-scrollbar {
 14 |     width: 0px;
 15 |     /* Remove scrollbar space */
 16 |     background: transparent;
 17 |     /* Optional: just make scrollbar invisible */
 18 | }
 19 | 
 20 | .nav_bar
 21 | {
 22 |     width: 100%;
 23 |     height: 60px;
 24 |     display: flex;
 25 |     flex-direction: row;
 26 |     align-items: center;
 27 |     justify-content: center;
 28 | }
 29 | 
 30 | .nav_element
 31 | {
 32 |     font-size: large;
 33 |     margin-right: 2.65%;
 34 |     color: gray;
 35 |     transition: transform .5s ease;
 36 | }
 37 | 
 38 | .nav_element:hover
 39 | {
 40 | 
 41 |     transform: scale(1.2);
 42 |     color: black;
 43 | }
 44 | 
 45 | .div
 46 | {
 47 |     width: 100%;
 48 |     height: 650px;
 49 |     background-color: #ffffff;
 50 |     display: flex;
 51 |     flex-direction: row;
 52 |     align-items: center;
 53 |     justify-content: center;
 54 | }
 55 | 
 56 | .div2 
 57 | {
 58 |     width: 100%;
 59 |     height: 650px;
 60 |     display: flex;
 61 |     flex-direction: row;
 62 |     align-items: center;
 63 |     background-color: #1b1b1b;
 64 |     justify-content: center;
 65 | }
 66 | 
 67 | .div_text
 68 | {
 69 |     display: flex;
 70 |     flex-direction: column;
 71 |     align-items: center;
 72 |     text-align-last: right;
 73 | }
 74 | 
 75 | img
 76 | {
 77 |     background-color: transparent;
 78 |     max-height: 90%;
 79 | }
 80 | 
 81 | h2
 82 | {
 83 |     font-weight: bold;
 84 |     font-size: xx-large;
 85 | }
 86 | 
 87 | 
 88 | .btn
 89 |  {
 90 |     border: 2.5px solid black;
 91 |     color: black;
 92 |     padding: 14px 28px;
 93 |     font-size: 16px;
 94 |     margin-left: 32%;
 95 |     background-color: transparent;
 96 | }
 97 | 
 98 | .btn:hover
 99 | {
100 |     color: white;
101 |     background-color: black;
102 | }
103 | 
104 | 
105 | 
106 | .btn-accent-dark {
107 |     border: 2.5px solid white;
108 |     color: white;
109 |     padding: 14px 28px;
110 |     font-size: 16px;
111 |     margin-left: 32%;
112 |     background-color: transparent;
113 | }
114 | 
115 | .btn-accent-dark:hover
116 | {
117 |     color: black;
118 |     background-color: white;
119 | }
120 | 
121 | .flip-image
122 | {
123 |   -webkit-transform: scaleX(-1);
124 |    transform: scaleX(-1);
125 | }
126 | 
127 | .accent-dark
128 | {
129 |     color: #ffffff;
130 | }
131 | 
132 | #myBtn 
133 | {
134 |     display: none;
135 |     position: fixed;
136 |     bottom: 20px;
137 |     right: 30px;
138 |     z-index: 99;
139 |     font-size: large;
140 |     border: none;
141 |     outline: none;
142 |     background-color: orange;
143 |     color: white;
144 |     padding: 0.8%;
145 |     border-radius: 50%;
146 | }
147 | 
148 | #myBtn:hover {
149 |     background-color: transparent;
150 | }


--------------------------------------------------------------------------------
/sample1_website/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" type="image/x-icon" href="icons/fishing.svg">
10 |     <title>Deep</title>
11 | </head>
12 | <body>
13 | 
14 |     <div class="nav_bar">
15 |         <p class="nav_element">HOME</p>
16 |         <p class="nav_element">PAGES</p>
17 |         <p class="nav_element">GALLERY</p>
18 |         <p class="nav_element">BLOG</p>
19 |         <p class="nav_element">ELEMENTS</p>
20 |     </div>
21 | 
22 |     <div class="div">
23 |         <img src="https://i.imgur.com/q5tTUAi.png" alt="octopus">
24 |         <br>
25 |         <br>
26 |         <div class="div_text">
27 |             <h2>OUT THERE</h2>
28 |             <P>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis enim consequatur <br> error vero, consectetur iusto nulla voluptas laborum dignissimos aspernatur?</P>
29 |             <br>
30 |             <br>
31 |             <button class="btn">PURCHASE</button>
32 |         </div>
33 |     </div>
34 |     <div class="div2">
35 |         <div class="div_text">
36 |             <h2 class="accent-dark">IMMERSION</h2>
37 |             <P class="accent-dark">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis enim consequatur <br> error vero, consectetur
38 |                 iusto nulla voluptas laborum dignissimos aspernatur?</P>
39 |             <br>
40 |             <br>
41 |             <button class="btn-accent-dark">PURCHASE</button>
42 |         </div>
43 |         <img class="flip-image" src="https://i.imgur.com/halhLYO.png" alt="sea-hours">
44 |     </div>
45 | 
46 | 
47 |     <button onclick="topFunction()" id="myBtn" title="Go to top">up</button>
48 | 
49 | 
50 |     <div class="div">
51 |         <img src="https://i.imgur.com/phqA2Wy.png" alt="whale">
52 |         <br>
53 |         <br>
54 |         <div class="div_text">
55 |             <h2>TO INFINITY</h2>
56 |             <P>Lorem ipsum, dolor sit amet consectetur adipisicing elit. <br> Officiis enim consequatur  error vero, consectetur
57 |                 iusto nulla voluptas laborum dignissimos aspernatur?</P>
58 |             <br>
59 |             <br>
60 |             <button class="btn">PURCHASE</button>
61 |         </div>
62 |     </div>
63 |     <div class="div2">
64 |         <div class="div_text">
65 |             <h2 class="accent-dark">STREAMLINE</h2>
66 |             <P class="accent-dark">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis enim consequatur <br> error vero, consectetur iusto
67 |                 nulla voluptas laborum dignissimos aspernatur?</P>
68 |             <br>
69 |             <br>
70 |             <button class="btn-accent-dark">PURCHASE</button>
71 |         </div>
72 |         <img src="https://i.imgur.com/Fe3M5oT.png" alt="jellyfish">
73 |     </div>
74 | 
75 |     <script src="app.js"></script>
76 | 
77 | </body>
78 | </html>


--------------------------------------------------------------------------------