A Pen by DAVID NotDavid

Thumbnail
This awesome code was written by retyui, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright retyui ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  DAVID NotDavid</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrap">
<div class="left">
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
	<li>11</li>
	<li>12</li>
	<li>13</li>
	<li>14</li>
	<li>15</li>
	<li>16</li>
	<li>17</li>
	<li>18</li>
	<li>19</li>
	<li>20</li>
	<li>21</li>
	<li>22</li>
	<li>23</li>
	<li>24</li>
	<li>25</li>
	<li>26</li>
	<li>27</li>
	<li>28</li>
	<li>29</li>
	<li>30</li>
	<li>31</li>
	<li>32</li>
	<li>33</li>
	<li>34</li>
	<li>35</li>
	<li>36</li>
	<li>37</li>
	<li>38</li>
	<li>39</li>
	<li>40</li>
	<li>41</li>
	<li>42</li>
	<li>43</li>
	<li>44</li>
	<li>45</li>
	<li>46</li>
	<li>47</li>
	<li>48</li>
	<li>49</li>
	<li>50</li>
	<li>51</li>
	<li>52</li>
	<li>53</li>
	<li>54</li>
	<li>55</li>
	<li>56</li>
	<li>57</li>
	<li>58</li>
	<li>59</li>
	<li>60</li>
	<li>61</li>
	<li>62</li>
	<li>63</li>
	<li>64</li>
	<li>65</li>
	<li>66</li>
	<li>67</li>
	<li>68</li>
	<li>69</li>
	<li>70</li>
	<li>71</li>
	<li>72</li>
	<li>73</li>
	<li>74</li>
	<li>75</li>
	<li>76</li>
	<li>77</li>
	<li>78</li>
	<li>79</li>
	<li>80</li>
	<li>81</li>
	<li>82</li>
	<li>83</li>
	<li>84</li>
	<li>85</li>
	<li>86</li>
	<li>87</li>
	<li>88</li>
	<li>89</li>
	<li>90</li>
</ul>
	</div>
<div class="content">
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam maxime quam enim libero quidem, ad consequuntur quae voluptas quibusdam modi reprehenderit minima exercitationem quia dolor ipsa earum perspiciatis neque! Distinctio id atque aliquam dolorum ad facilis, aperiam cumque ratione accusantium alias recusandae ex dolore. Illum magnam voluptate at architecto eum in nemo impedit alias dolorum cumque tempore sed veritatis cupiditate dignissimos odio minima qui exercitationem reprehenderit voluptatum, ipsa magni optio labore eligendi voluptas? Enim voluptas rerum, alias saepe, minus voluptate voluptatem perferendis cupiditate sed eaque praesentium consequatur suscipit reiciendis, repellendus amet qui repudiandae est quam tempore consequuntur laboriosam! Neque autem, distinctio iste non odio alias officia. Nisi qui dolorem, assumenda, ipsum maiores at et vitae eaque tempore eum hic corporis sequi tempora error temporibus labore in adipisci amet necessitatibus dolore! Dolore culpa atque consequatur magnam pariatur sequi, laborum veniam aliquam officia repudiandae quibusdam labore corrupti necessitatibus ipsam placeat iste beatae! Officia tempora iusto, quisquam, quo adipisci aut odio sapiente minima possimus culpa dolore consequatur delectus ipsam eveniet in, velit fuga a provident molestiae ducimus! Tempora ea, quod perspiciatis atque veritatis totam, adipisci saepe porro ab sint assumenda, excepturi vero nobis et voluptates at. Veritatis velit minima alias explicabo illum modi.
</div>
	</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/retyui/a-pen-by-david-notdavid-vRPajM */
.wrap {
  display: flex;
}
.left {
  flex: 0 0 200px;
  overflow: scroll;
  position: relative;
}
.left ul {
  position: absolute;
}

Comments